/* =============================================================================
   Uniq'Flavor — restyling WooCommerce (mon-compte, panier, commander)
   Adapte les markup standard WC à la D.A. Uniq'Flavor.
   ============================================================================= */

/* ----- Override des couleurs bleues par défaut WC + Blocksy ----- */
.woocommerce a,
.woocommerce-page a,
.woocommerce-MyAccount-content a,
.woocommerce-MyAccount-navigation a,
.cart_totals a,
.woocommerce-cart-form a {
  color: var(--uf-color-brand);
  text-decoration: none;
}
.woocommerce a:hover,
.woocommerce-page a:hover,
.woocommerce-MyAccount-content a:hover,
.cart_totals a:hover,
.woocommerce-cart-form a:hover {
  color: var(--uf-color-accent);
}

/* Boutons "primary" Blocksy / WC : neutralise tout bleu hérité */
.woocommerce .button,
.woocommerce-page .button,
[class*="ct-woo"] .button,
body.woocommerce button.button.alt,
body.woocommerce button.button.alt:hover,
body.woocommerce input[type="submit"],
body.woocommerce-page input[type="submit"] {
  background: var(--uf-color-accent);
  color: var(--uf-color-surface);
  border-color: var(--uf-color-accent);
}

/* Blocksy "ct-woo-cart-page" / "ct-woo-myaccount-page" peuvent injecter du bleu */
.ct-woo-cart-page, .ct-woo-myaccount-page, .ct-woo-checkout-page {
  --theme-link-initial-color: var(--uf-color-brand);
  --theme-link-hover-color: var(--uf-color-accent);
  --theme-button-background-initial-color: var(--uf-color-accent);
  --theme-button-background-hover-color: var(--uf-color-brand);
  --theme-button-text-initial-color: var(--uf-color-surface);
  --theme-button-text-hover-color: var(--uf-color-surface);
}

/* ----- Conteneur global ----- */
.woocommerce,
.woocommerce-page main {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--uf-space-5);
  padding-block: var(--uf-space-6);
  font-family: var(--uf-font-body);
  color: var(--uf-color-ink);
}

.woocommerce h1, .woocommerce h2, .woocommerce h3 {
  font-family: var(--uf-font-display);
  color: var(--uf-color-ink);
  letter-spacing: -0.01em;
}
.woocommerce h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 var(--uf-space-3); }
.woocommerce h2 { font-size: 22px; margin: 0 0 var(--uf-space-3); }
.woocommerce h3 { font-size: 17px; margin: 0 0 var(--uf-space-2); }

.woocommerce p { line-height: 1.55; }

/* ----- Notices (success/info/error) ----- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
ul.woocommerce-error {
  font-family: var(--uf-font-body);
  font-size: 14px;
  padding: var(--uf-space-3) var(--uf-space-4);
  border-radius: var(--uf-radius-sm);
  border-left: 3px solid var(--uf-color-brand);
  background: var(--uf-color-bg);
  color: var(--uf-color-ink);
  margin: 0 0 var(--uf-space-4);
  list-style: none;
}
.woocommerce-message { border-left-color: var(--uf-color-brand); background: var(--uf-color-brand-soft); }
.woocommerce-info    { border-left-color: var(--uf-color-accent); background: color-mix(in srgb, var(--uf-color-accent) 8%, var(--uf-color-bg)); }
.woocommerce-error, ul.woocommerce-error {
  border-left-color: #B8324E;
  background: rgba(184, 50, 78, 0.08);
  color: #7A1F30;
}
.woocommerce-error li { list-style: none; }
.woocommerce-message a, .woocommerce-info a {
  color: var(--uf-color-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ----- Boutons WC ---> palette UF, hover sobre ----- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce button[type="submit"],
.button.woocommerce-button {
  display: inline-flex;
  align-items: center;
  gap: var(--uf-space-2);
  padding: var(--uf-space-3) var(--uf-space-5);
  border: 1px solid transparent;
  border-radius: var(--uf-radius-pill);
  font-family: var(--uf-font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--uf-color-accent);
  color: var(--uf-color-surface);
  box-shadow: 0 1px 2px rgba(31, 31, 29, 0.08);
  transition: background var(--uf-trans-fast), color var(--uf-trans-fast),
              transform var(--uf-trans-fast), box-shadow var(--uf-trans-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: color-mix(in srgb, var(--uf-color-accent) 85%, var(--uf-color-ink));
  color: var(--uf-color-surface);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(31, 31, 29, 0.18);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(31, 31, 29, 0.08);
}

/* Boutons "alt" = secondaires (vert sapin) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--uf-color-brand);
  color: var(--uf-color-surface);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: color-mix(in srgb, var(--uf-color-brand) 85%, var(--uf-color-ink));
}

/* ----- Formulaires (login, register, account, checkout) ----- */
.woocommerce form .form-row,
.woocommerce form.checkout_coupon .form-row,
.woocommerce-page form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--uf-space-4);
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-family: var(--uf-font-mono);
  font-size: 12px;
  color: var(--uf-color-ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce form .form-row .select2-selection,
.woocommerce form .form-row select {
  width: 100%;
  padding: var(--uf-space-3) var(--uf-space-4);
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-sm);
  font: inherit;
  color: var(--uf-color-ink);
  transition: border-color var(--uf-trans-fast), box-shadow var(--uf-trans-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--uf-color-brand);
  box-shadow: 0 0 0 3px var(--uf-color-brand-soft);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
  border-color: var(--uf-color-brand);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: #B8324E;
}
.woocommerce-form__label-for-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--uf-space-2);
  text-transform: none !important;
  font-size: 14px !important;
  font-family: var(--uf-font-body) !important;
  letter-spacing: normal !important;
  color: var(--uf-color-ink) !important;
}
.woocommerce-form__input-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--uf-color-brand);
}

/* ----- Pages login / register (côte à côte) ----- */
.u-columns.col2-set,
.woocommerce-page .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--uf-space-7);
  align-items: stretch;
}
@media (max-width: 760px) {
  .u-columns.col2-set,
  .woocommerce-page .col2-set { grid-template-columns: 1fr; gap: var(--uf-space-5); }
}
.u-columns .col-1, .u-columns .col-2,
.woocommerce-page .col-1, .woocommerce-page .col-2 {
  width: 100%;
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  padding: var(--uf-space-6);
  position: relative;
  overflow: hidden;
}
.u-columns .col-1::before,
.woocommerce-page .col-1::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--uf-color-brand);
}
.u-columns .col-2::before,
.woocommerce-page .col-2::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--uf-color-accent);
}

.woocommerce-form-login__rememberme,
.lost_password {
  display: inline-block;
  margin-top: var(--uf-space-3);
}
.lost_password a {
  color: var(--uf-color-ink-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.lost_password a:hover { color: var(--uf-color-accent); }

/* ----- Mon compte (sidebar nav + content) ----- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 240px;
  flex-shrink: 0;
}
.woocommerce-account .woocommerce {
  display: flex;
  gap: var(--uf-space-6);
  align-items: flex-start;
}
@media (max-width: 760px) {
  .woocommerce-account .woocommerce { flex-direction: column; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; }
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  overflow: hidden;
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--uf-color-line);
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--uf-space-3) var(--uf-space-4);
  text-decoration: none;
  color: var(--uf-color-ink);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--uf-trans-fast), color var(--uf-trans-fast);
}
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--uf-color-brand-soft);
  color: var(--uf-color-brand);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active a {
  background: var(--uf-color-brand);
  color: var(--uf-color-surface);
}
.woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  padding: var(--uf-space-6);
}

/* ----- Tableaux (commandes, adresses) ----- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--uf-space-3) var(--uf-space-4);
  border-bottom: 1px solid var(--uf-color-line);
  font-size: 14px;
  vertical-align: middle;
}
.woocommerce table.shop_table th {
  background: var(--uf-color-bg);
  font-family: var(--uf-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--uf-color-ink-soft);
  text-align: left;
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table .order-actions { text-align: right; }

/* Statuts commande */
.woocommerce-orders-table .order-status mark,
.woocommerce-OrderStatus mark {
  background: transparent;
  font-family: var(--uf-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--uf-radius-pill);
  border: 1px solid currentColor;
}
.status-processing mark { color: #B8651F; }
.status-completed mark, .status-en-laboratoire mark { color: var(--uf-color-brand); }
.status-failed mark, .status-cancelled mark { color: #B8324E; }
.status-pending mark, .status-on-hold mark { color: var(--uf-color-ink-soft); }

/* ----- Adresses ----- */
.woocommerce-Addresses, .addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--uf-space-5);
}
@media (max-width: 700px) {
  .woocommerce-Addresses, .addresses { grid-template-columns: 1fr; }
}
.woocommerce-Address {
  background: var(--uf-color-bg);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-sm);
  padding: var(--uf-space-5);
}
.woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--uf-space-3);
}
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; font-size: 17px; }
.woocommerce-Address address {
  font-style: normal;
  line-height: 1.6;
  color: var(--uf-color-ink-soft);
}

/* ----- Cart / panier ----- */
.woocommerce-cart-form .cart_item img {
  width: 60px;
  height: auto;
  border-radius: var(--uf-radius-sm);
}
.product-name a {
  color: var(--uf-color-ink);
  text-decoration: none;
  font-weight: 600;
}
.product-name a:hover { color: var(--uf-color-accent); }
/* Masque le bouton "Mettre à jour le panier" : auto-update via cart-auto-update.js */
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form input[name="update_cart"] {
  display: none !important;
}

/* Quantité par ligne — renforcée pour qu'elle soit clairement lisible */
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form td.product-quantity {
  min-width: 90px;
  vertical-align: middle;
}
.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--uf-color-bg);
  border: 1.5px solid var(--uf-color-brand);
  border-radius: var(--uf-radius-pill);
  padding: 2px;
  box-shadow: 0 1px 2px rgba(31, 31, 29, 0.06);
}
.product-quantity input[type="number"],
.product-quantity input.qty,
.product-quantity input.input-text.qty {
  width: 56px;
  height: 36px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: var(--uf-radius-pill);
  text-align: center;
  font-family: var(--uf-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--uf-color-ink);
  -moz-appearance: textfield;
}
.product-quantity input[type="number"]::-webkit-inner-spin-button,
.product-quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.product-quantity input.qty:focus {
  outline: none;
  background: var(--uf-color-brand-soft);
}

.product-subtotal, .product-price {
  font-family: var(--uf-font-mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--uf-color-ink);
}

/* Mobile : carte stack, on s'assure que data-title est visible */
@media (max-width: 720px) {
  .woocommerce-cart-form table.shop_table tr {
    display: block;
    padding: var(--uf-space-3);
    border-bottom: 1px solid var(--uf-color-line);
  }
  .woocommerce-cart-form table.shop_table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 6px 0;
  }
  .woocommerce-cart-form table.shop_table td::before {
    content: attr(data-title);
    font-family: var(--uf-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--uf-color-ink-soft);
    letter-spacing: 0.06em;
  }
  .woocommerce-cart-form table.shop_table thead { display: none; }
}
.cart-collaterals .cart_totals {
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  padding: var(--uf-space-5);
}
.cart_totals h2 { margin-top: 0; }
.cart_totals .order-total .amount {
  font-family: var(--uf-font-display);
  font-size: 24px;
  color: var(--uf-color-accent);
}
.wc-proceed-to-checkout {
  margin-top: var(--uf-space-4);
}
.wc-proceed-to-checkout .checkout-button {
  width: 100%;
  justify-content: center;
}

/* ----- Checkout (commander) ----- */

/* Grille 2 colonnes : 60% facturation à gauche, 40% récap+paiement à droite */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: var(--uf-space-6);
  align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details {
  grid-column: 1;
}
.woocommerce-checkout form.checkout > #order_review_heading,
.woocommerce-checkout form.checkout > #order_review {
  grid-column: 2;
}
.woocommerce-checkout form.checkout > #order_review_heading {
  margin-top: 0;
}
/* Mobile : retour en colonne unique */
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    gap: var(--uf-space-4);
  }
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 1;
  }
}

/* Récap commande (colonne droite) sticky pour rester visible */
@media (min-width: 901px) {
  .woocommerce-checkout #order_review {
    position: sticky;
    top: 90px;
  }
}

/* Détails facturation/livraison : retire la grille 2-cols par défaut WC.
   On empile billing puis shipping (s'il est rendu) pour utiliser toute la largeur. */
.woocommerce-checkout #customer_details {
  display: block !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  padding: var(--uf-space-5);
  margin-bottom: var(--uf-space-4);
  position: relative;
}
.woocommerce-checkout #customer_details h3 {
  margin-top: 0;
}
/* Quand la livraison n'est pas nécessaire (produits virtuels uniquement),
   on masque entièrement la col-2 vide. Le body class est posé par UFC_WC. */
body.uf-checkout-no-shipping .woocommerce-checkout #customer_details .col-2 {
  display: none !important;
}

.woocommerce-checkout #payment {
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-md);
  padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: var(--uf-space-4);
  border-bottom: 1px solid var(--uf-color-line);
  margin: 0;
  list-style: none;
}
.woocommerce-checkout #payment .payment_box {
  background: var(--uf-color-bg);
  border-radius: var(--uf-radius-sm);
  padding: var(--uf-space-3) var(--uf-space-4);
  margin-top: var(--uf-space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--uf-color-ink-soft);
}
.woocommerce-checkout #payment div.form-row {
  padding: var(--uf-space-4);
}
.woocommerce-checkout-review-order-table {
  margin-bottom: var(--uf-space-4);
}

/* ----- Prix ----- */
.woocommerce .price ins {
  background: transparent;
  text-decoration: none;
  font-weight: 600;
}
.woocommerce .price del {
  color: var(--uf-color-ink-soft);
  margin-right: var(--uf-space-2);
}
.amount {
  font-family: var(--uf-font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----- Pagination commandes ----- */
.woocommerce-pagination ul,
.woocommerce-Pagination .page-numbers {
  display: flex;
  list-style: none;
  margin: var(--uf-space-5) 0;
  padding: 0;
  gap: var(--uf-space-2);
  justify-content: center;
}
.woocommerce-pagination li .page-numbers,
.woocommerce-Pagination .page-numbers li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--uf-space-3);
  background: var(--uf-color-surface);
  border: 1px solid var(--uf-color-line);
  border-radius: var(--uf-radius-sm);
  font-family: var(--uf-font-mono);
  font-size: 14px;
  text-decoration: none;
  color: var(--uf-color-ink);
}
.woocommerce-pagination li .page-numbers.current { background: var(--uf-color-brand); color: var(--uf-color-surface); border-color: var(--uf-color-brand); }
.woocommerce-pagination li .page-numbers:hover:not(.current) { background: var(--uf-color-brand-soft); border-color: var(--uf-color-brand); color: var(--uf-color-brand); }

/* ----- Page Boutique (shop) — masquée pour ce site (Flav uniquement via composer) ----- */
.post-type-archive-product .uf-catalog__header h1 { font-size: 32px; }

/* ----- Détails commande order-received ----- */
.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 var(--uf-space-5);
  padding: var(--uf-space-4) var(--uf-space-5);
  background: var(--uf-color-brand-soft);
  border-left: 3px solid var(--uf-color-brand);
  border-radius: var(--uf-radius-sm);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--uf-space-3);
}
.woocommerce-order-overview li {
  font-family: var(--uf-font-mono);
  font-size: 11px;
  color: var(--uf-color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-family: var(--uf-font-body);
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--uf-color-ink);
  font-weight: 600;
}