/**
 * woocommerce.css
 * Visual overrides for WooCommerce native elements — buttons, forms, notices,
 * and cart — scoped to WooCommerce pages only via conditional enqueue.
 *
 * Also contains styles for the /nos-vins filter tabs and catalog grid,
 * since those are commerce-context-only components.
 *
 * Targeting strategy: always use WooCommerce's own classes. Never override
 * by element type globally — always scope to .woocommerce or a WC class.
 *
 * @package astra-child
 */

/* ── WooCommerce buttons ─────────────────────────────────────────────────── */

/*
 * WC uses .button on anchor tags and button[type="submit"] on form submits.
 * Both need to match our .porta-btn--primary appearance.
 * #respond input#submit covers the review form submit button.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/*
 * .alt is WooCommerce's secondary button variant — used on some WC pages.
 * Gold fill makes it distinct from primary, but the checkout button also
 * carries .alt so we must override it back to burgundy specifically.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/*
 * Two distinct primary CTAs need burgundy:
 * - Cart page:     <a class="checkout-button button alt"> → proceed to checkout
 * - Checkout page: <button id="place_order" class="button alt"> → place order
 * Both carry .alt which the global .button.alt rule turns gold — override here.
 */
.woocommerce a.checkout-button,
.woocommerce a.checkout-button:visited,
#place_order {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.woocommerce a.checkout-button:hover,
#place_order:hover {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
}

/* ── WooCommerce notices ─────────────────────────────────────────────────── */

/*
 * Unified notice design: warm background + 3px left accent bar.
 * No full border — the left bar is enough to signal the notice type.
 * !important on border/background needed: Astra ships its own notice rules
 * with .woocommerce wrapper specificity that would otherwise win.
 *
 * Three types:
 *   .woocommerce-message → confirmation (accent burgundy bar)
 *   .woocommerce-info    → neutral info (gold bar)
 *   .woocommerce-error   → error (muted red bar)
 */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none !important;
  margin: 0 0 1rem !important;
  padding: 0.85rem 1.25rem !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text) !important;
  background-color: var(--color-bg-alt) !important;
  border: none !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/*
 * .woocommerce-error and .woocommerce-message are <ul> containing <li> items —
 * flex column stacks multiple validation errors vertically.
 * .woocommerce-info is a <div> with inline text + link, NOT a list.
 * Setting flex-direction:column on it makes the text node and <a> separate
 * flex items that stack, breaking "Déjà client ? Cliquez ici" onto two lines.
 * Fix: info uses display:block so inline content flows naturally on one line.
 */
.woocommerce-message,
.woocommerce-error {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.woocommerce-info {
  display: block !important;
  border-left-color: var(--color-gold) !important;
}

.woocommerce-error {
  border-left-color: var(--color-accent) !important;
}

/* Hide WooCommerce's ::before icon glyphs — render as broken characters
   when icon font isn't loaded, and conflict with our left-bar design. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none !important;
}

.woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: 1rem;
}

/*
 * Notice inner <li>.
 * display: block keeps text left-aligned for both single-line info notices
 * (e.g. "Déjà client ? Cliquez ici") and multi-item validation error lists.
 * Padding adds breathing room between stacked error items.
 */
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
  display: block !important;
  padding: 0.1rem 0 !important;
}

/* Action links/buttons inside notices — plain inline underlined text, no button styling */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-info button.showcoupon {
  display: inline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0 0.5rem !important;
  box-shadow: none !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--color-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-info button.showcoupon:hover {
  color: var(--color-gold) !important;
  background: none !important;
}

/* button.showcoupon also needs cursor:pointer — not covered by the combined rule above */
.woocommerce-info button.showcoupon {
  cursor: pointer !important;
}

/* ── WooCommerce form inputs ─────────────────────────────────────────────── */

/*
 * Checkout and account forms — consistent input styling aligned with brand.
 */
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-white);
  padding: 0.625rem 0.875rem;
  transition: border-color 0.15s ease;
}

.woocommerce .input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--color-accent);
  outline: none;
}

/*
 * "Voir mon compte" — cart page version.
 * Styled as a full-width secondary outline link to match the visual weight
 * of the "Valider la commande" button directly above it.
 */
.porta-cart__account {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* .porta-btn class on the <a> (set in woocommerce.php) provides base typography.
   Only layout and visual overrides are declared here. */
.porta-cart__account a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 2px solid var(--color-bg-alt);
  color: var(--color-text-light);
  box-sizing: border-box;
}

.porta-cart__account a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Shipping method card selector ──────────────────────────────────────── */

/*
 * Converts WooCommerce's plain radio list into tappable card rows.
 * WC DOM: <ul id="shipping_method"> → <li> → <input type="radio"> + <label>
 * Input and label are siblings (not parent/child) so the <li> is the flex row.
 *
 * Approach: CSS-only, no JS, no template override.
 *   - <li> = flex row: [radio] [label text]
 *   - Native radio styled with accent-color (branded, no custom ::before needed)
 *   - :has(input:checked) highlights the selected card
 *   - Full <li> height is the tap target — comfortable on mobile
 */
/*
 * Shipping method card selector.
 * WC DOM: <ul> → <li> → <input type="radio"> + <label> (siblings, not nested).
 *
 * Strategy: appearance:none on the input removes all browser-native rendering,
 * then we restyle it as a pure CSS circle. It stays in the DOM as a real flex
 * item alongside the label — no position tricks, no ::before on label, no bleed.
 */
#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

/*
 * Shipping method card selector.
 *
 * Root cause of previous failures: WooCommerce ships
 *   .woocommerce ul#shipping_method li { padding: 0; }   specificity (1,1,2)
 *   .woocommerce ul#shipping_method li label { display: inline; }
 * Both beat our #shipping_method li (1,0,1) selector.
 *
 * Strategy: stop fighting the <li>. Let WooCommerce own it (padding: 0 is fine).
 * Instead:
 *   - <label> becomes the full card surface (display:block, all padding here)
 *   - padding-left on the label reserves space for the radio dot
 *   - <input> is absolutely positioned inside <li> (position:relative)
 *   - <li> only carries visual card chrome: border, background, border-radius
 *
 * WooCommerce's label selector has no !important on display or padding,
 * so our overrides win cleanly.
 */
#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Card chrome only — no padding (WooCommerce forces 0 and wins) */
#shipping_method li {
  position: relative !important;
  border: 1px solid var(--color-bg-alt) !important;
  border-radius: var(--border-radius) !important;
  background: var(--color-white) !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

#shipping_method li:has(input:checked) {
  border-color: var(--color-accent) !important;
  background: rgba(107, 26, 42, 0.04) !important;
}

/*
 * Radio dot: absolutely positioned at left-center of the card.
 * appearance:none removes all browser chrome — we draw a pure CSS circle.
 * pointer-events:none so clicks pass through to the label (for= handles it).
 */
#shipping_method input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  left: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-bg-alt) !important;
  background: var(--color-white) !important;
  margin: 0 !important;
  pointer-events: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

#shipping_method input[type="radio"]:checked {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  box-shadow: inset 0 0 0 3px var(--color-white) !important;
}

/*
 * Label = the full card tap surface.
 * display:block !important overrides WooCommerce's "display:inline".
 * padding-left: 2.5rem = 0.875rem (radio left) + 16px (radio width) + 0.625rem gap.
 * This guarantees text starts after the radio dot, regardless of li padding.
 */
#shipping_method label {
  display: block !important;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Checkout payment method cards ──────────────────────────────────────── */
/*
 * Exact same pattern as shipping method cards above.
 * WC DOM: <ul class="payment_methods"> → <li> → <input type="radio"> + <label>
 * WooCommerce ships "display:inline" on label and padding:0 on li — both
 * overridden using the same label-first strategy as shipping.
 */

#payment ul.payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

#payment ul.payment_methods li {
  position: relative !important;
  border: 1px solid var(--color-bg-alt) !important;
  border-radius: var(--border-radius) !important;
  background: var(--color-white) !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  padding: 0 !important; /* WC forces this anyway — be explicit */
}

#payment ul.payment_methods li:has(input:checked) {
  border-color: var(--color-accent) !important;
  background: rgba(107, 26, 42, 0.04) !important;
}

#payment ul.payment_methods input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  left: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-bg-alt) !important;
  background: var(--color-white) !important;
  margin: 0 !important;
  pointer-events: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box !important;
}

#payment ul.payment_methods input[type="radio"]:checked {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  box-shadow: inset 0 0 0 3px var(--color-white) !important;
}

#payment ul.payment_methods label {
  display: block !important;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Checkout optional-toggle cards ─────────────────────────────────────── */

/*
 * "Créer un compte ?" and "Expédier à une adresse différente ?" are both
 * optional-toggle checkboxes but WooCommerce renders them with different HTML:
 *   - Create account: <p class="create-account"> — plain paragraph
 *   - Ship to different: <h3 id="ship-to-different-address"> — an H3 heading
 * This mismatch makes them look completely different by default.
 *
 * Fix: style both as identical card-toggle rows matching the payment method
 * card language — bordered card, checkbox left, hover/checked burgundy border.
 */

/* Reset the H3 heading styles on the shipping toggle — treat it like a paragraph */
#ship-to-different-address {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Card-toggle shell — both elements get the same bordered card appearance */
p.create-account,
#ship-to-different-address {
  background: var(--color-white) !important;
  border: 1px solid var(--color-bg-alt) !important;
  border-radius: var(--border-radius) !important;
  margin: 0.5rem 0 !important;
  transition: border-color 0.2s ease !important;
}

p.create-account:has(input:checked),
#ship-to-different-address:has(input:checked) {
  border-color: var(--color-accent) !important;
  background: rgba(107, 26, 42, 0.04) !important;
}

/* Label = full card tap surface, flex row with gap for the checkbox */
p.create-account .woocommerce-form__label,
#ship-to-different-address .woocommerce-form__label {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Branded checkbox — accent-color is the simplest way, supported everywhere modern */
p.create-account input[type="checkbox"],
#ship-to-different-address input[type="checkbox"] {
  accent-color: var(--color-accent) !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* ── Empty cart ──────────────────────────────────────────────────────────── */

/*
 * Stack the two buttons vertically on mobile with a proper gap.
 * On desktop they sit inline (flex-row with wrap).
 */
.return-to-shop {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 767px) {
  .return-to-shop {
    flex-direction: column;
    align-items: center;
  }
  .return-to-shop .porta-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* ── Cart page ───────────────────────────────────────────────────────────── */

/*
 * Hide the "Mettre à jour le panier" button — cart.js auto-clicks it whenever
 * a quantity input changes, so the button is never needed by the customer.
 * display:none is intentional: the button still exists in the DOM and remains
 * clickable via JS; it is just not shown.
 * !important + broad selector: the cart page may not wrap content in .woocommerce,
 * and Astra button rules use higher specificity that would otherwise win.
 */
button[name="update_cart"] {
  display: none !important;
}

/* Cart thumbnail — desktop table view.
 * PHP filter (inc/woocommerce.php porta_cart_thumbnail) switches the image
 * source to WordPress 'medium' size (proportional, no hard crop) so the full
 * bottle height is preserved. object-fit: contain fits it into a fixed cell. */
table.shop_table td.product-thumbnail {
  width: 90px;
}

table.shop_table td.product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: var(--color-white);
  display: block;
}

/*
 * Mobile cart — card layout.
 * WooCommerce's default cart table stacks cells with data-title labels
 * ("Produit:", "Prix:" etc.) which looks clunky on small screens.
 * We convert each cart row into a compact product card:
 *
 *   [thumbnail]  Product name             [×]
 *                CHF 16.00
 *                Qty: [ 1 ▲▼ ]
 *
 * Approach: CSS grid on <tr>, no template override needed.
 * thead is hidden on mobile (WooCommerce already does this via its own CSS).
 */
@media (max-width: 767px) {
  /* Flatten table structure so grid can be applied to <tr> */
  .woocommerce-cart-form__contents,
  .woocommerce-cart-form__contents tbody {
    display: block;
  }

  /* Each item = card */
  .woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-areas:
      "thumb name   remove"
      "thumb price  remove"
      "thumb qty    .     ";
    grid-template-columns: 80px 1fr 32px;
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: 0.2rem 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-bg-alt);
    border-radius: var(--border-radius);
  }

  /* Hide data-title labels (the "Produit:", "Prix:" prefixes) */
  .woocommerce-cart-form__cart-item td::before {
    display: none !important;
  }

  .woocommerce-cart-form__cart-item .product-thumbnail {
    grid-area: thumb;
    padding: 0;
  }

  .woocommerce-cart-form__cart-item .product-thumbnail img {
    width: 80px;
    height: auto;
    display: block;
  }

  .woocommerce-cart-form__cart-item .product-name {
    grid-area: name;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.3;
    align-self: end;
  }

  /* Unit price — shown between name and quantity */
  .woocommerce-cart-form__cart-item .product-price {
    grid-area: price;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-text-light);
  }

  /* Line subtotal — redundant with the totals block below, hide it */
  .woocommerce-cart-form__cart-item .product-subtotal {
    display: none !important;
  }

  .woocommerce-cart-form__cart-item .product-quantity {
    grid-area: qty;
    padding: 0;
  }

  .woocommerce-cart-form__cart-item .product-quantity .quantity {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .woocommerce-cart-form__cart-item .product-quantity input[type="number"] {
    width: 52px;
    font-size: var(--text-sm);
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--color-bg-alt);
    border-radius: var(--border-radius);
    text-align: center;
  }

  .woocommerce-cart-form__cart-item .product-remove {
    grid-area: remove;
    padding: 0;
    text-align: center;
  }

  .woocommerce-cart-form__cart-item .product-remove a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-text-light);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .woocommerce-cart-form__cart-item .product-remove a:hover {
    background: var(--color-accent);
    color: var(--color-white);
  }

  /* Promo code row — full width, below cards */
  .woocommerce-cart-form .coupon {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .woocommerce-cart-form .coupon input[type="text"] {
    flex: 1;
    font-size: var(--text-sm);
  }
}

/* Cart page stepper — same − / + layout as product page */
.woocommerce-cart-form .quantity {
  display: flex;
  align-items: center;
}

.woocommerce-cart-form .qty {
  width: 3.5rem;
  height: 40px;
  text-align: center;
  border: 1px solid var(--color-bg-alt);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  padding: 0;
}

/* ── Filter tabs — /nos-vins ─────────────────────────────────────────────── */

.porta-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.porta-filter__btn {
  background-color: transparent;
  color: var(--color-text-light);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.porta-filter__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Active tab — solid accent fill, matches primary button */
.porta-filter__btn--active,
.porta-filter__btn--active:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ── Catalog page layout — /nos-vins ─────────────────────────────────────── */

.porta-catalog__header {
  text-align: center;
  background-color: var(--color-bg-alt);
  /* Full-bleed: escape .ast-container max-width (same technique as components.css) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.porta-catalog__title {
  font-size: var(--text-4xl);
  margin-bottom: 1rem;
}

.porta-catalog__intro {
  color: var(--color-text-light);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: var(--max-width-text);
  margin-inline: auto;
}

.porta-catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /*
   * Left-align cards when fewer than 3 fill the row — prevents odd centering
   * with gaps when only 1–2 products are visible after filtering.
   * design.md §5.2: "if only 1–2 products, cards should left-align"
   */
  justify-items: start;
}

/* Cards must stretch to fill their column or they shrink to content width */
.porta-catalog__grid .porta-wine-card {
  width: 100%;
}

/* Hidden state for JS filter — class-based so CSS resets can't override it */
.porta-wine-card--hidden {
  display: none;
}

@media (min-width: 768px) {
  .porta-catalog__title {
    font-size: var(--text-5xl);
  }

  .porta-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Single product page — .porta-product ────────────────────────────────── */

/*
 * Remove Astra's default content-area top padding on single product pages.
 * Astra applies padding/margin at multiple levels of the wrapper stack depending
 * on which container layout is active in the Customizer (plain, separate, etc.).
 * We zero all candidates so the full-bleed burgundy band sits flush under the nav.
 * .woocommerce-notices-wrapper is also zeroed: WC always outputs this div even
 * when empty and it can carry margin from WC's own stylesheet.
 * .single-product body class is added by WooCommerce.
 */
.single-product #content,
.single-product #primary,
.single-product #main,
.single-product .site-main,
.single-product article.product,
.single-product .ast-article-single,
.single-product .entry-content,
.single-product .woocommerce-notices-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/*
 * Full-bleed header band: burgundy background, product name + category badge.
 * Same negative-margin full-bleed technique as .porta-hero and .porta-catalog__header.
 */
.porta-product__header {
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 1.5rem 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  text-align: center;
}

@media (min-width: 768px) {
  .porta-product__header {
    padding: 2rem 0;
  }
}

/* Category badge — sits above the product name */
.porta-product__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--border-radius);
  padding: 0.25rem 0.875rem;
  margin-bottom: 1.25rem;
}

.porta-product__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-white);
  margin: 0;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .porta-product__title {
    font-size: var(--text-4xl);
  }
}

/* Body section — two-column: image | details */
.porta-product__body {
  padding: 1rem 0 2rem;
}

@media (min-width: 768px) {
  .porta-product__body {
    padding: 1.5rem 0 3rem;
  }
}

.porta-product__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .porta-product__cols {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Product image — WC gallery wrapper. margin:0 removes WC's default margin-bottom. */
.porta-product__image-wrap .woocommerce-product-gallery {
  margin: 0;
  min-height: 360px; /* prevent blank column before variation is selected */
}

/*
 * WooCommerce hides the gallery figure via JS before a variation is chosen
 * on variable products (display:none injected inline). Force the first image
 * visible so the left column is never a blank white void at desktop.
 * WC overrides this once a variation is selected — no conflict.
 */
.porta-product__image-wrap .woocommerce-product-gallery__image:first-child {
  display: block !important;
}

/* WC also adds margin via .woocommerce-product-gallery--columns-* and the figure wrapper */
.porta-product__image-wrap .woocommerce-product-gallery figure {
  margin: 0;
}

.porta-product__image-wrap .woocommerce-product-gallery__image > a,
.porta-product__image-wrap .woocommerce-product-gallery__image img {
  border-radius: var(--border-radius);
  display: block;
  width: 100%;
  height: auto;
}

/* Details column: flex stack with consistent spacing between child elements */
.porta-product__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Price — large Playfair Display, accent color */
.porta-product__price .price,
.porta-product__price .woocommerce-Price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-accent);
  font-weight: 400;
}

/* Variation price — same typography as static price; hide tax suffix (repeats same amount) */
.woocommerce-variation-price .price,
.woocommerce-variation-price .woocommerce-Price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-accent);
  font-weight: 400;
}

.woocommerce-variation-price .woocommerce-price-suffix {
  display: none;
}

/* Sale price: strike-through on original, clean on discounted */
.porta-product__price ins {
  text-decoration: none;
}

.porta-product__price del {
  color: var(--color-text-light);
  font-size: var(--text-xl);
  margin-right: 0.5rem;
}

/* Short description */
.porta-product__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.7;
}

.porta-product__excerpt p:last-child {
  margin-bottom: 0;
}

/*
 * Add-to-cart area: WC outputs a .cart form containing .quantity + .single_add_to_cart_button.
 * We flex-row them and style to match brand.
 */
.porta-product__cart .cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.porta-product__cart .single_add_to_cart_button {
  margin-top: 1.25rem !important;
}

.porta-product__cart .qty {
  width: 5rem;
  text-align: center;
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-white);
  padding: 0.625rem 0.5rem;
  /* Show native spinner arrows so user can increment/decrement quantity */
}

/*
 * Add-to-cart button — matches .porta-btn--primary.
 * !important on background/color/border: WooCommerce's own woocommerce.css
 * overrides the button colour for variable products (no variation selected)
 * with a blue .disabled state that wins without !important.
 */
.porta-product__cart .single_add_to_cart_button {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.porta-product__cart .single_add_to_cart_button:hover {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
}

/* Disabled — no variation selected or out of stock: stays burgundy, slightly muted */
.porta-product__cart .single_add_to_cart_button:disabled,
.porta-product__cart .single_add_to_cart_button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Quantity stepper ────────────────────────────────────────────────────── */

/*
 * Custom − / + stepper replacing the native browser number spinner.
 * quantity-stepper.js injects .porta-qty-btn buttons; CSS hides the native
 * arrows and connects the three elements (−, input, +) into a single pill.
 */

/* Hide native browser spinner arrows (quantity-stepper.js adds custom buttons) */
.quantity input[type="number"].qty::-webkit-outer-spin-button,
.quantity input[type="number"].qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.quantity input[type="number"].qty {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Flex wrapper so − input + align in a row */
.porta-product__cart .quantity {
  display: flex;
  align-items: center;
}

/* Shared button style */
.porta-qty-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.porta-qty-btn--minus {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border-right: none;
}

.porta-qty-btn--plus {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-left: none;
}

.porta-qty-btn:hover,
.porta-qty-btn:focus,
.porta-qty-btn:active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  outline: none;
  box-shadow: none;
}

/* Override the existing .qty rules for product page only */
.porta-product__cart .qty {
  width: 3.5rem;
  height: 40px;
  text-align: center;
  border: 1px solid var(--color-bg-alt);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  padding: 0;
}

/* Hide "Effacer" / reset variations link — customer can reselect from the dropdown */
.porta-product__cart .reset_variations {
  display: none !important;
}

/*
 * Product meta: SKU + category links (WC output via woocommerce_template_single_meta).
 * Hidden for two reasons:
 *   1. UGS (SKU) shows "ND" (non défini) until real SKUs are assigned — noise for customers.
 *   2. Category links point to /boutique archive pages which are intentionally hidden
 *      from navigation (engine-room pages per CLAUDE.md two-layer commerce architecture).
 * Re-enable by changing display:none to display:block when SKUs are populated.
 */
.porta-product__meta {
  display: none;
}

/*
 * Full-bleed tasting notes section.
 * Alternate background (--color-bg-alt) + same negative-margin technique.
 */
.porta-product__tasting {
  background-color: var(--color-bg-alt);
  padding: var(--space-section-sm) 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (min-width: 768px) {
  .porta-product__tasting {
    padding: var(--space-section) 0;
  }
}

.porta-product__tasting-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-text);
  text-align: center;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .porta-product__tasting-title {
    font-size: var(--text-4xl);
  }
}

/* Constrain prose to readable line length, centered in the full-bleed band */
.porta-product__tasting-content {
  max-width: var(--max-width-text);
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.8;
}

.porta-product__tasting-content p {
  margin-bottom: 1rem;
}

.porta-product__tasting-content p:last-child {
  margin-bottom: 0;
}

/* Back to /nos-vins — sits just below the header band, above the two-column body */
.porta-product__nav {
  padding: 0.5rem 0;
}

.porta-product__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.porta-product__back:hover {
  color: var(--color-gold);
}