/*
Theme Name: Almacen
Theme URI:
Author:
Author URI:
Description:
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: almacen
Tags:
*/

/* Google Fonts are enqueued in functions.php (almacen_enqueue_fonts) with a preconnect.
   An @import here would be a duplicate AND chained render-blocking: the browser cannot
   discover the font request until this whole stylesheet has downloaded and parsed. */

/* CSS Variables for easy reference */
:root {
    --forest-green: #4A6741;
    --dark-green: #3D5A3A;
    --warm-black: #2C3E2D;
    --warm-cream: #F5F0E8;
    --golden-accent: #C9A961;
    --white: #FFFFFF;

    /* Muted body text. NOT rgba(): building a text colour out of opacity is how the product meta
       ended up at 3.38:1, under the 4.5:1 WCAG AA minimum. These are solid, and measured against
       --warm-cream. */
    --ink-muted: #4F5C4E;    /* 5.9:1 on cream — secondary text */
    --ink-subtle: #5C6A5B;   /* 4.9:1 on cream — the quietest text allowed */

    /* The neutral theme.json never had. Its palette is five colours and zero greys, so the shop CSS
       had been inventing #666 / #888 / #999 / #ddd / #9a9a9a ad hoc — two of which fail AA. A tinted
       line beats a grey one here: it reads as part of the palette instead of sitting on top of it. */
    --line: rgba(44, 62, 45, 0.12);

    /* TYPE SCALE — 1.25 (major third) on a 16px base.
       Before this, the product page carried nine sizes: 41.6 29.6 17.76 16 15.2 15.2 13.6 12.8
       12.8px — four of them bunched where they read as one size but mean different things, and two
       under the 14px floor. Pick from these; do not invent a tenth.

       These are CSS variables rather than theme.json fontSizes on purpose: this theme is a CHILD OF
       TWENTYTWENTYFOUR, whose presets are already in use (`large` is 1.85rem — the price; `small`
       is used seven times in the templates). Redeclaring those slugs would resize text on pages
       nobody asked us to touch. */
    --fs-xs: 0.875rem;   /* 14px — meta, captions, tab labels. The floor. */
    --fs-sm: 1rem;       /* 16px — body, pills, buttons */
    --fs-md: 1.25rem;    /* 20px — lead, the /kg suffix */
    --fs-lg: 1.5rem;     /* 24px — subheads */
    --fs-xl: 2rem;       /* 32px — price */
    --fs-2xl: 2.5rem;    /* 40px — H1 */

    /* SPACING — 8-point grid (4 for fine adjustment). Replaces the ad-hoc
       6 / 10 / 12 / 18 / 20 / 28 that the product page had accumulated. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;
    --sp-14: 56px;

    /* FORM RHYTHM — for the checkout, and for any form we build after it.
       Derived from govuk-frontend's `_form-group.mixin.scss` (label 5px, group 20/30) and
       Polaris's space tokens; neither Baymard nor NN/g publishes a gap number, so nothing here is
       "research-backed" in the way the sizes below are — but the RATIO is.

       THE RATIO IS THE RULE, NOT THE PIXELS: a field must sit at least 3x further from the NEXT
       field than its label sits from its own box. Otherwise proximity binds the label to the wrong
       input and the form reads as mush. 20/6 = 3.3x. GOV.UK runs 4x. Anything under 3x is broken,
       whatever the absolute numbers say. */
    --form-label-gap: 6px;      /* label -> its own input */
    --form-field-gap: 20px;     /* field -> next field (24px on desktop, below) */
    --form-section-gap: 32px;   /* step -> next step   (40px on desktop, below) */

    /* CONTROLS. These numbers ARE research-backed, and each one has a floor under it:
         48px  — WCAG 2.2 SC 2.5.8 wants >=24px (AA), Apple wants 44pt, Material wants 48dp. 48
                 clears all three. 24 is a legal minimum, not a usable one.
         16px  — the threshold below which iOS Safari zooms the page on focus. Not a taste call.
         2px   — govuk `$govuk-border-width-form-element`. A 1px border is not reliably perceivable.
         3px   — govuk `$govuk-focus-width`. */
    --input-min-height: 48px;
    --input-padding-y: 12px;
    --input-padding-x: 16px;
    --input-border-w: 2px;
    --focus-ring-w: 3px;

    /* ERROR RED. The obvious #E53935 measures ~3.7:1 on white and FAILS WCAG 1.4.3 AA. This is
       GOV.UK's red: 4.8:1 on white, and it passes. Colour is never the only channel — see the
       error rules in the checkout section (border + icon + text + weight). */
    --error-red: #D4351C;
    --error-border-w: 5px;
    --error-indent: 15px;

    /* Reveals: height only, short, and off entirely for anyone who asked for less motion. */
    --reveal-ms: 180ms;
    --reveal-ease: cubic-bezier(0, 0, 0.2, 1);

    /* --line (0.12 alpha) is a DIVIDER, not a control boundary. Composited on white it measures
       1.23:1 — that is not an edge, it is a rumour, and a shopper cannot count the cards before
       working out which one is chosen. WCAG 1.4.11 wants 3:1 for the boundary of a UI control,
       and it has to hold on BOTH sides: the white card inside and the cream page outside.
       SOLID hex, not rgba() — same reason as --ink-muted above: a colour built out of opacity
       drifts against whatever is behind it and cannot be contrast-checked.
       #7C877D = 3.74:1 on --white, 3.30:1 on --warm-cream. The next step lighter (#8B958C)
       gives 3.10:1 on white but 2.73:1 on cream and FAILS on the side that matters. */
    --line-strong: #7C877D;

    /* EL BORDE DE LA TARJETA NO ELEGIDA. Más apagado que --line-strong a propósito: con las dos
       tarjetas al mismo peso, la no elegida se leía tan afirmada como la elegida y había que
       pararse a mirar cuál era cuál.

       ESTO ESTÁ EN EL PISO, NO HAY MARGEN PARA MÁS. WCAG 1.4.11 pide 3:1 para el borde de un
       control, y acá el borde es lo único que separa la tarjeta blanca del fondo crema (blanco
       sobre --warm-cream mide 1.06:1: no es un borde, es una insinuación). Medido:
         #848D85 = 3.43:1 sobre --white, 3.02:1 sobre --warm-cream.
       El crema es el lado que manda y ya está a 0.02 del mínimo. Un paso más claro (#8B958C) da
       2.73:1 sobre crema y REPRUEBA. Si hace falta que la no elegida pese todavía menos, se baja
       el GROSOR (--card-border-w), no el color: el contraste no depende del ancho. */
    --line-idle: #848D85;

    /* The one selection mark, identical in all three groups. Drawn as an SVG data URI, not a "✓"
       glyph (whose weight and baseline change with every font fallback) and not a rotated
       border-box (which overflows its own flex slot). The stroke is --forest-green because this
       tick is ONLY ever painted on the white disc of a selected card. */
    --card-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6741' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --card-mark-size: 18px;
    --card-mark-gap: 10px;
    --card-radius: 8px;

    /* Focus-ring clearance. The ring must sit OUTSIDE the card, because on a selected card the
       fill is the same green as the ring and a ring drawn on it measures 1:1. `outline-offset`
       leaves a transparent gap that shows the page, so both edges of the ring neighbour
       --warm-cream at 5.60:1 in every state. 4px offset + 3px ring = 7px of bleed, which is why
       the gap between cards below is 12px and not 8px. */
    --card-focus-offset: 4px;
}

@media (min-width: 768px) {
    :root {
        --form-field-gap: 24px;
        --form-section-gap: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --reveal-ms: 0ms;
    }
}

/* Body background */
body {
    background-color: var(--warm-cream);
}

/* Button hover states */
.wp-block-button__link,
.wc-block-components-button,
button[type="submit"],
.button,
.btn {
    transition: all 0.3s ease;
}

.wp-block-button__link:hover,
.wc-block-components-button:hover,
button[type="submit"]:hover,
.button:hover,
.btn:hover {
    background-color: var(--dark-green) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 103, 65, 0.3);
}

/* Golden accent button variant */
.wp-block-button.is-style-golden .wp-block-button__link,
.button--golden {
    background-color: var(--golden-accent) !important;
    color: var(--warm-black) !important;
}

.wp-block-button.is-style-golden .wp-block-button__link:hover,
.button--golden:hover {
    background-color: #B89851 !important;
}

/* Link hover effects */
a {
    transition: color 0.2s ease;
}

a:hover {
    color: var(--golden-accent);
}

/* Navigation styling */
.wp-block-navigation a {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.wp-block-navigation a:hover {
    color: var(--golden-accent) !important;
}

/* Header styling */
.wp-block-template-part.site-header,
header.wp-block-template-part {
    background-color: var(--dark-green);
}

/* Headings - elegant serif styling */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--warm-black);
}

h1 {
    font-weight: 600;
}

h2, h3, h4, h5, h6 {
    font-weight: 500;
}

/* Remove uppercase from h2 */
h2 {
    text-transform: none;
    letter-spacing: 0.5px;
}

/* WooCommerce Product Cards */
.wc-block-grid__product,
.products .product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wc-block-grid__product:hover,
.products .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(44, 62, 45, 0.12);
}

/* WooCommerce's LEGACY grid (cart cross-sells, and anywhere the old blocks still render). It is not
   the `.shop-product-card` component — it is core markup we don't own — and core sizes it in `em`,
   which compounds: 0.875em inside 0.9em inside… lands at 12.6px. Below the floor, on a page where
   these are real product names and prices. Pin the floor; leave the rest of core's styling alone. */
.wc-block-grid__product-title,
.woocommerce-loop-product__title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--warm-black);
}

.wc-block-grid__product-price,
.price {
    font-size: var(--fs-xs);
    color: var(--forest-green);
    font-weight: 600;
}

/* The cross-sell button, and why this one needs !important.
   The legacy grid sets `font-size: .75em` on its CONTAINER and then sizes the button at
   `.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link { font-size: 1em }`.
   That 1em resolves against the .75em chain — 12.6px — and at specificity (0,3,0) it beats any plain
   class selector we write. Chasing it with a longer selector just restarts the arms race on the next
   WooCommerce release; pinning the value ends it. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.add_to_cart_button {
    font-size: var(--fs-xs) !important;
}

/* The price filter's min/max amounts (search page) — same em-compounding problem, 12.25px. */
.wc-block-price-filter .wc-block-formatted-money-amount,
.wp-block-woocommerce-price-filter .wc-block-formatted-money-amount {
    font-size: var(--fs-xs);
}

/* Add to cart button.
   :not([aria-disabled="true"]) matters — without it this !important green outranks the grey of
   a gated granel button, and a button that cannot be pressed still looks perfectly pressable. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.add_to_cart_button:not([aria-disabled="true"]),
.single_add_to_cart_button {
    background-color: var(--forest-green) !important;
    border-radius: 8px !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.add_to_cart_button:not([aria-disabled="true"]):hover,
.single_add_to_cart_button:hover {
    background-color: var(--dark-green) !important;
}

/* Category cards/badges */
.wc-block-product-categories-list-item,
.product-category {
    transition: all 0.3s ease;
}

.wc-block-product-categories-list-item:hover,
.product-category:hover {
    color: var(--golden-accent);
}

/* Footer styling - ensure ALL text visibility on dark background */
footer.wp-block-template-part,
footer.wp-block-template-part *,
.wp-block-template-part[data-type="footer"],
.wp-block-template-part[data-type="footer"] *,
.has-shelf-black-background-color,
.has-shelf-black-background-color * {
    color: #F5F0E8 !important;
}

/* Site tagline in footer - fix accessibility */
footer .wp-block-site-tagline,
footer p.wp-block-site-tagline,
.has-shelf-black-background-color .wp-block-site-tagline,
.has-shelf-black-background-color p.wp-block-site-tagline,
footer.wp-block-template-part .wp-block-site-tagline,
.wp-block-site-tagline[class*="has-"][class*="-color"] {
    color: #F5F0E8 !important;
    opacity: 1 !important;
}

/* Footer links on dark background */
footer a,
footer a:visited,
footer .wp-block-navigation a,
.wp-block-template-part[data-type="footer"] a,
.has-shelf-black-background-color a {
    color: #F5F0E8 !important;
}

footer a:hover,
footer .wp-block-navigation a:hover,
.wp-block-template-part[data-type="footer"] a:hover,
.has-shelf-black-background-color a:hover {
    color: #C9A961 !important;
}

/* Subtle dividers */
hr,
.wp-block-separator {
    border-color: rgba(74, 103, 65, 0.2);
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border: 1px solid rgba(74, 103, 65, 0.3);
    border-radius: 6px;
    padding: 12px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.1);
    outline: none;
}

/* Search bar styling */
.wp-block-search__button {
    background-color: var(--forest-green) !important;
    border-radius: 0 8px 8px 0 !important;
}

.wp-block-search__button:hover {
    background-color: var(--dark-green) !important;
}

/* Golden highlight text utility */
.highlight-gold {
    color: var(--golden-accent);
}

/* Smooth scroll and sticky support */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* Ensure wp-site-blocks doesn't break sticky */
.wp-site-blocks {
    overflow: visible !important;
}

/* Selection color */
::selection {
    background-color: var(--forest-green);
    color: var(--white);
}

/* ===== STICKY HEADER ===== */

/* Remove overflow issues */
html,
body,
.wp-site-blocks,
body > .wp-site-blocks {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Header wrapper */
.site-header-wrapper,
.site-header-wrapper.wp-block-group {
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
}

/* Main header base styles */
.main-header,
.main-header.wp-block-group {
    z-index: 9999 !important;
    background-color: var(--warm-cream) !important;
    transition: box-shadow 0.3s ease;
}

/* Sticky state - add shadow */
.main-header.is-sticky {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Top bar smooth hide animation */
.top-bar {
    transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
    max-height: 50px;
    overflow: hidden;
}

.top-bar.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== TOP BAR ===== */
.top-bar,
.top-bar.wp-block-group,
.top-bar.has-background {
    padding: 6px 20px !important;
    margin: 0 !important;
    font-size: 13px;
}

.top-bar > .wp-block-group,
.top-bar-inner {
    padding: 0 !important;
    margin: 0 !important;
    gap: 24px;
}

.top-bar p,
.top-bar-item {
    color: #F5F0E8 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
}

.top-bar a {
    color: #F5F0E8 !important;
    text-decoration: none;
}

.top-bar a:hover {
    color: #C9A961 !important;
}

.top-bar .wp-block-social-links {
    margin: 0 !important;
    gap: 12px;
}

.top-bar .wp-block-social-link a:hover {
    transform: scale(1.1);
}

/* ===== MAIN HEADER ===== */
.main-header,
.main-header.wp-block-group,
.main-header.has-background {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* ===== CENTERED LOGO LAYOUT - CSS GRID ===== */
.header-inner,
.header-inner.wp-block-group {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 12px 40px !important;
    max-width: 1400px;
    margin: 0 auto !important;
    gap: 20px;
}

.header-left,
.header-left.wp-block-group {
    justify-self: start !important;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

.header-center,
.header-center.wp-block-group {
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

.header-right,
.header-right.wp-block-group {
    justify-self: end !important;
    display: flex !important;
    align-items: center;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Keep only one user icon on desktop - hide from nav */
.header-left .wc-block-customer-account,
.nav-left .wc-block-customer-account,
.nav-desktop .wc-block-customer-account {
    display: none !important;
}

/* ===== CIRCULAR LOGO ===== */
.circular-logo img,
.header-center .wp-block-site-logo img {
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(74, 103, 65, 0.2);
    transition: transform 0.3s ease;
    object-fit: cover;
    width: 90px !important;
    height: 90px !important;
}

.header-center:hover img {
    transform: scale(1.05);
}

/* ===== HEADER NAVIGATION ===== */
.main-header .wp-block-navigation {
    gap: 8px;
}

.main-header .wp-block-navigation a {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    transition: color 0.2s ease;
    color: var(--warm-black);
}

/* El dorado NO entra al panel de categorías: #C9A961 sobre crema da 1.98:1, muy abajo del 4.5:1 de
   WCAG AA. Sobre los tres rótulos del menú («Almacen Natural», «Mayoristas», «Sobre Nosotros») pasa
   —son pocos, grandes y el usuario ya sabe dónde está el mouse—; sobre 50 renglones de 15px es
   texto que no se lee. Adentro del panel manda `.almacen-mega__head:hover` (verde bosque, 5.03:1).
   La exclusión va acá y no como un `!important` más fuerte del otro lado porque este `!important`
   le gana a CUALQUIER especificidad: la única forma de no pelearle es que no matchee. */
.main-header .wp-block-navigation a:hover:not(.almacen-mega *) {
    color: #C9A961 !important;
}

/* ===== HEADER SEARCH - MODERN BORDERED STYLE ===== */
.header-search {
    position: relative;
}

/* Hide the label */
.header-search label,
.header-search .wc-block-product-search__label {
    display: none !important;
}

/* WooCommerce product search container */
.header-search .wc-block-product-search {
    width: 100%;
}

/* Fields wrapper - bordered container */
.header-search .wc-block-product-search__fields {
    display: flex;
    border-radius: 8px;
    border: 1px solid rgba(44, 62, 45, 0.15);
    background: #FFFFFF;
    overflow: hidden;
    min-width: 250px;
}

/* Input field */
.header-search .wc-block-product-search__field {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 10px 14px !important;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    color: #333 !important;
    outline: none !important;
    box-shadow: none !important;
}

.header-search .wc-block-product-search__field::placeholder {
    color: #999 !important;
    font-weight: 400;
}

/* Green search button */
.header-search .wc-block-product-search__button {
    background: var(--sage-primary, #4A6741) !important;
    border: none !important;
    color: white !important;
    padding: 10px 16px !important;
    min-width: auto !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.header-search .wc-block-product-search__button:hover {
    background: var(--forest-green, #2C3E2D) !important;
}

.header-search .wc-block-product-search__button svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Legacy wp:search block styling (fallback) */
.header-search .wp-block-search__inside-wrapper {
    display: flex;
    border-radius: 8px;
    border: 1px solid rgba(44, 62, 45, 0.15);
    background: #FFFFFF;
    overflow: hidden;
    min-width: 250px;
    padding: 0 !important;
}

.header-search .wp-block-search__input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 10px 14px !important;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    color: #333 !important;
    outline: none !important;
    box-shadow: none !important;
}

.header-search .wp-block-search__input::placeholder {
    color: #999 !important;
    font-weight: 400;
}

.header-search .wp-block-search__button {
    background: var(--sage-primary, #4A6741) !important;
    border: none !important;
    color: white !important;
    padding: 10px 16px !important;
    min-width: auto !important;
    cursor: pointer;
}

.header-search .wp-block-search__button:hover {
    background: var(--forest-green, #2C3E2D) !important;
}

.header-search .wp-block-search__button svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* ===== HEADER ICONS ===== */
.header-right .wc-block-customer-account {
    color: #2C3E2D !important;
}

.header-right .wc-block-customer-account:hover {
    color: #C9A961 !important;
}

.header-right .wc-block-customer-account svg {
    width: 24px;
    height: 24px;
}

.header-right .wc-block-mini-cart__button {
    color: #2C3E2D !important;
}

.header-right .wc-block-mini-cart__button:hover {
    color: #C9A961 !important;
}

.header-right .wc-block-mini-cart__button svg {
    width: 24px;
    height: 24px;
}

/* ===== DESKTOP/MOBILE NAV VISIBILITY ===== */
/* Hide mobile hamburger on desktop */
.nav-mobile {
    display: none !important;
}

/* Show desktop nav on desktop */
.nav-desktop {
    display: flex !important;
}

/* Mobile hamburger menu styling */
.nav-mobile .wp-block-navigation__responsive-container-open {
    color: var(--warm-black) !important;
    padding: 8px !important;
}

.nav-mobile .wp-block-navigation__responsive-container-open:hover {
    color: var(--golden-accent) !important;
}

/* ==========================================
   MOBILE MENU OVERLAY - 2026 MODERN STYLE
   ========================================== */

/* Slide-in animation */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Full-height drawer - clean white */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #FFFFFF !important;
    padding: 0 !important;
    animation: slideInRight 0.3s ease-out;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Circular close button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(44, 62, 45, 0.05);
    color: var(--warm-black) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
    background-color: rgba(44, 62, 45, 0.1);
}

/* Hide awkward title header box */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-site-title {
    display: none !important;
}

/* Menu content wrapper */
.wp-block-navigation__responsive-container-content {
    padding: 70px 20px 20px !important;
    height: 100%;
    overflow-y: auto;
}

/* Compact category items with dividers */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    border-bottom: 1px solid rgba(44, 62, 45, 0.08);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 14px 12px !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--warm-black) !important;
    display: block;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
    background-color: rgba(74, 103, 65, 0.06);
    color: var(--sage-primary) !important;
}

/* Mobile menu search bar - hidden by default */
.mobile-menu-search,
.mobile-menu-search.wc-block-product-search {
    display: none !important;
}

/* Mobile nav container positioning - keep hamburger rightmost and aligned */
.mobile-nav-container {
    position: static;
    display: flex;
    align-items: center;
    order: 99; /* Push to the end (rightmost) */
}

.mobile-nav-container > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
}

/* Hide search bar in mobile menu - keep it hidden */
.mobile-nav-container .mobile-menu-search {
    display: none !important;
}


/* ==========================================
   MOBILE MENU - FLATTEN DROPDOWN STRUCTURE
   Show categories directly without parent dropdown
   ========================================== */

/* Hide the parent dropdown toggle (Almacen Natural button) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    display: none !important;
}

/* Make submenu always visible and not styled as dropdown */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style the submenu items as main menu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-bottom: 1px solid rgba(44, 62, 45, 0.08);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 14px 12px !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--warm-black) !important;
    display: block;
}

/* Remove any dropdown icons/arrows */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: none !important;
}

/* Hide diamond submenu indicator icons */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
    display: none !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 782px) {
    /* Show mobile hamburger, hide desktop nav */
    .nav-mobile {
        display: block !important;
    }

    .nav-desktop,
    .header-left {
        display: none !important;
    }

    /* Compact top bar on mobile - single row */
    .top-bar,
    .top-bar.wp-block-group,
    .top-bar.has-background {
        padding: 8px 15px !important;
    }

    .top-bar-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .top-bar-item {
        font-size: 11px !important;
    }

    .top-bar .wp-block-social-links {
        gap: 8px !important;
    }

    /* Mobile header layout */
    .header-inner,
    .header-inner.wp-block-group {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
    }

    /* Logo on left for mobile */
    .header-center {
        order: -1 !important;
        flex: 0 0 auto !important;
    }

    .circular-logo img,
    .header-center .wp-block-site-logo img {
        width: 55px !important;
        height: 55px !important;
    }

    /* Right icons container - aligned */
    .header-right,
    .header-right.wp-block-group {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 18px !important;
    }

    /* Show cart on mobile - drives conversions */
    .main-header .wc-block-mini-cart,
    .header-right .wc-block-mini-cart {
        display: flex !important;
        align-items: center !important;
    }

    /* Hide search on mobile - use overlay search in menu instead */
    .header-right .wp-block-search,
    .header-right .header-search {
        display: none !important;
    }

    /* Hide ALL user/account icons on mobile - keep minimal: Logo + Cart + Menu */
    .wp-block-navigation .wc-block-customer-account,
    .nav-mobile .wc-block-customer-account,
    .nav-left .wc-block-customer-account,
    .nav-desktop .wc-block-customer-account,
    .header-right .wc-block-customer-account,
    .header-right > .wc-block-customer-account {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Uniform icon sizing and vertical alignment */
    .header-right,
    .header-right.wp-block-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
    }

    .header-right > * {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Mobile nav container - hamburger must be rightmost and vertically centered */
    .header-right .mobile-nav-container,
    .header-right .mobile-nav-container.wp-block-group {
        order: 99 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-right .mobile-nav-container > .wp-block-group__inner-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Nav mobile wrapper alignment */
    .header-right .mobile-nav-container .nav-mobile,
    .header-right .mobile-nav-container .nav-mobile.wp-block-navigation {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* The actual hamburger button - ensure vertical centering */
    .header-right .mobile-nav-container .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }

    /* Cart should be before hamburger */
    .header-right .wc-block-mini-cart {
        order: 50 !important;
    }

    /* Fix search button - remove ugly background */
    .header-right .wp-block-search {
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .header-right .wp-block-search__inside-wrapper {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        min-width: auto !important;
    }

    .header-right .wp-block-search__button {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: auto !important;
        color: #2C3E2D !important;
    }

    /* Uniform icon sizes for mobile (Cart + Menu) */
    .header-right .wc-block-mini-cart__button svg,
    .nav-mobile .wp-block-navigation__responsive-container-open svg {
        width: 24px !important;
        height: 24px !important;
    }

    .header-right .wc-block-mini-cart__button,
    .nav-mobile .wp-block-navigation__responsive-container-open {
        color: #2C3E2D !important;
    }

    /* Cart button styling on mobile */
    .header-right .wc-block-mini-cart__button {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Order: Cart, Menu (minimal mobile layout) - hamburger rightmost */
    .header-right .wc-block-mini-cart { order: 50 !important; }
    .header-right .mobile-nav-container { order: 99 !important; }
}

@media (max-width: 480px) {
    /* Even more compact on small phones */
    .top-bar,
    .top-bar.wp-block-group {
        padding: 6px 10px !important;
    }

    .top-bar-item {
        font-size: 10px !important;
    }

    /* Hide location on very small screens */
    .top-bar-item:nth-child(2) {
        display: none !important;
    }

    .circular-logo img,
    .header-center .wp-block-site-logo img {
        width: 45px !important;
        height: 45px !important;
    }

    .header-inner,
    .header-inner.wp-block-group {
        padding: 8px 10px !important;
    }
}

/* ===== DROPDOWN MENU STYLING ===== */

/* Submenu container */
.wp-block-navigation__submenu-container {
    background-color: var(--warm-cream) !important;
    border: 1px solid rgba(74, 103, 65, 0.1);
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(44, 62, 45, 0.15),
                0 2px 10px rgba(44, 62, 45, 0.08);
    padding: 8px 0 !important;
    min-width: 200px;
    margin-top: 0 !important;
    top: 100% !important;
    overflow: visible !important;

    /* Smooth animation */
    animation: dropdownFadeIn 0.25s ease-out;
}

/* Invisible hover bridge - prevents dropdown from closing when moving mouse.
   NO aplica al menú de categorías (`.nav-left`): ahí el puente lo reemplaza la demora de cierre de
   400ms de mega-menu.js, que cubre el mismo hueco y además perdona el temblor de mano. Sacarlo de
   ahí no es cosmético: este pseudo-elemento es `position:absolute`, así que obliga a que el <li> sea
   el contexto de posicionamiento, y eso es justo lo que impedía alinear el panel con el header. */
.wp-block-navigation-item--has-child:not(.nav-left *)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

/* Pointer arrow at top */
.wp-block-navigation__submenu-container::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 24px;
    width: 16px;
    height: 16px;
    background-color: var(--warm-cream);
    border-left: 1px solid rgba(74, 103, 65, 0.1);
    border-top: 1px solid rgba(74, 103, 65, 0.1);
    transform: rotate(45deg);
    z-index: 1;
}

/* Dropdown items */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 12px 20px !important;
    color: var(--warm-black) !important;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: block;
    border-left: 3px solid transparent;
}

/* Hover state.
   ERA `color: var(--golden-accent)` — dorado #C9A961 sobre crema #F5F0E8 da 1.98:1, contra el 4.5:1
   que pide WCAG AA. El estado de reposo mide 10.09:1: o sea que el renglón se volvía CASI ILEGIBLE
   justo en el momento en que el usuario está por hacerle click. Ahora usa el mismo par que el
   drawer y la hoja de la tienda —verde bosque sobre un lavado del mismo verde, 5.53:1— y de paso
   las tres superficies responden igual al mouse. El dorado queda para acentos que no son texto. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--forest-green) !important;
    background-color: rgba(74, 103, 65, 0.08);
    border-left-color: var(--forest-green);
}

/* Dropdown animation */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nested submenus (if any) */
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    margin-top: 0 !important;
    margin-left: 8px !important;
    top: -8px;
}

/* Nested submenu arrow points left */
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
    left: -8px;
    top: 16px;
    transform: rotate(-45deg);
}

/* ==========================================================================
   MEGA MENÚ DE ESCRITORIO — el panel de «Almacen Natural»
   ==========================================================================

   DE DÓNDE VIENE ESTO

   Antes: `grid-template-columns: repeat(3, max-content)` con las 53 categorías sueltas, alfabéticas.
   Medido en la ventana: 1001x742px —el 69% del ancho y el 82% del alto— tapando el logo, y CON
   SCROLL PROPIO (887px de contenido en 740px de caja), o sea cuatro categorías abajo del corte.

   Ahora el markup viene agrupado por categoría padre (ver almacen_dynamic_nav_categories()) y el
   layout es MULTICOLUMNA (`columns`), no grid. Esa es la decisión que sostiene todo lo demás: con
   `columns` + `break-inside: avoid`, cada grupo es un bloque indivisible que el navegador acomoda
   solo. Hoy la taxonomía está plana, así que cada bloque es un renglón y se lee como una lista
   prolija de cuatro columnas; cuando el cliente cree las categorías padre en WooCommerce, cada
   bloque pasa a ser título + hijas SIN TOCAR UNA LÍNEA DE CSS. Grid con filas fijas no puede hacer
   eso: parte los grupos por la mitad al cambiar de columna. */

/* El panel se alinea con el HEADER, no con la palabra «Almacen Natural».
   Para eso el contexto de posicionamiento tiene que ser `.header-inner`, no el <li>: por eso el
   `position: static` de abajo. Depende de que el puente de hover ya no exista en `.nav-left` (ver
   más arriba) — si vuelve, esto se rompe. */
.header-inner,
.header-inner.wp-block-group {
    position: relative;
}

/* Los TRES tienen que ser `static`, no sólo el <li>. Un `position: absolute` se ancla al ancestro
   posicionado MÁS CERCANO, y core deja `relative` tanto en el <nav> como en su <ul> contenedor: con
   sólo el <li> en static el panel seguía colgando del <ul> del menú (medido: 446px de ancho
   arrancando en x=53) en vez de alinearse con el header. */
.nav-left,
.nav-left.wp-block-navigation,
.nav-left .wp-block-navigation__container,
.nav-left .wp-block-navigation-item.has-child {
    position: static;
}

.nav-left .wp-block-navigation__submenu-container {
    left: 0 !important;
    right: 0;
    width: auto;
    max-width: none;
    padding: var(--sp-6) var(--sp-8) !important;

    /* `border-box` NO es decorativo acá: core deja este contenedor en `content-box`, así que el
       `max-height` de abajo medía sólo el contenido y el panel terminaba 48px (el padding) más alto
       que el tope que le pusimos. Un límite que miente sobre cuánto ocupa no sirve de límite. */
    box-sizing: border-box;

    /* Red de contención, no el plan: con cuatro columnas el panel entra entero incluso en una
       ventana de 768px de alto (medido). Esto es para el día que haya tantas categorías que no
       entre — mejor que scrollee adentro a que se desborde abajo del fold. */
    max-height: calc(100vh - 170px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

/* El panel es el único hijo del contenedor flex de core. */
.almacen-mega {
    width: 100%;
}

/* La flechita apuntaba al item; ahora el panel abarca todo el header y quedaría suelta. */
.nav-left .wp-block-navigation__submenu-container::before {
    display: none;
}

/* INTENCIÓN DE HOVER.
   Primero anulamos la apertura instantánea de core: aunque él ponga `aria-expanded="true"` en cuanto
   el mouse roza el item, el panel sigue escondido. Sin esto, cruzar el header de izquierda a derecha
   te tapaba la página entera con 50 categorías.

   LA CLASE `.almacen-intent` ES LA ÚNICA DUEÑA DE LA VISIBILIDAD, y eso es deliberado, no un atajo.
   Entre el item del menú y el panel hay 37px de aire (el panel arranca abajo del header, no abajo
   de la palabra). Al cruzar ese hueco el mouse no está sobre ninguno de los dos, así que core
   dispara su `pointerleave` y cierra AL INSTANTE — no llega a tener demora. Si la visibilidad
   dependiera de su `aria-expanded`, el panel desaparecería en el camino y no habría forma de
   llegarle. Colgándola sólo de nuestra clase, el panel sigue en pantalla durante los 400ms de
   gracia, el mouse alcanza a entrar, y ahí mega-menu.js cancela el cierre.
   El `aria-expanded` lo espeja el JS para que el atributo nunca mienta sobre lo que se ve. */
.nav-left .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    visibility: hidden;
    opacity: 0;
}

/* OJO CON QUÉ SE RESTAURA ACÁ: no alcanza con `visibility` y `opacity`.
   Core esconde el submenú con una caja de CERO (`height: 0; width: 0; overflow: hidden`) y la
   devuelve a `auto` en la MISMA regla que lo hace visible — la que cuelga de su
   `aria-expanded="true"`. Como durante los 400ms de gracia ese atributo ya está en `false`, si acá
   sólo pidiéramos visibilidad el panel se quedaba en pantalla pero COLAPSADO: aparecía un
   rectangulito de 50px y recién después desaparecía. Se veía exactamente como un glitch al sacar el
   mouse, porque lo era. Restaurar la caja entera es lo que lo arregla. */
.nav-left .has-child.almacen-intent > .wp-block-navigation__submenu-container,
.nav-left .has-child.almacen-intent .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    visibility: visible;
    opacity: 1;
    height: auto;
    width: auto;
    overflow: visible;
}

/* ---------- el panel por dentro ---------- */

.almacen-mega {
    list-style: none;
}

.almacen-mega__search {
    position: relative;
    margin-bottom: var(--sp-4);
    max-width: 320px;
}

.almacen-mega__search-icon {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-subtle);
    pointer-events: none;
}

/* Dos clases de especificidad a propósito: `input[type="search"]` de las hojas de WordPress vale
   (0,1,1) y le gana a una clase sola (0,1,0). */
.almacen-mega .almacen-mega__input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 38px;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--warm-black);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    appearance: none;
}

.almacen-mega .almacen-mega__input:focus-visible {
    outline: var(--focus-ring-w) solid var(--forest-green);
    outline-offset: 1px;
    border-color: var(--forest-green);
}

.almacen-mega__cols {
    columns: 4;
    column-gap: var(--sp-8);
}

.almacen-mega__group {
    break-inside: avoid;          /* un grupo no se parte entre dos columnas */
    -webkit-column-break-inside: avoid;
    margin-bottom: 0;
}

/* Un grupo CON hijas es una sección y necesita aire arriba; uno sin hijas es un renglón más de la
   lista y no lo necesita. Por eso el margen cuelga de `:has()`, y no de la clase del grupo. */
.almacen-mega__group:has(.almacen-mega__sub) {
    margin-bottom: var(--sp-4);
}

/* POR QUÉ TODO ESTO ARRANCA CON `.main-header .almacen-mega`
   Los enlaces del panel son descendientes del header, así que les pega
   `.main-header .wp-block-navigation a` (línea ~590): especificidad (0,2,1), con su propio
   font-size 15px, weight 500, letter-spacing y padding 8px 16px. Una clase sola —(0,1,0)— pierde
   contra eso SIN HACER RUIDO: la tipografía de las hijas se veía "casi bien" sólo porque hoy no hay
   hijas que mostrar, y habría aparecido rota el día que el cliente agrupe categorías. Con
   `.main-header .almacen-mega a.…` quedamos en (0,3,1) y ganamos por especificidad, no por orden de
   aparición en el archivo, que es una forma mucho más frágil de ganar.

   6px de padding vertical da un renglón de ~32px. Menos que los 44px de los otros paneles A
   PROPÓSITO: 44 es el piso de un objetivo TÁCTIL, y esto es una superficie de mouse solamente (la
   navegación de escritorio está oculta abajo de 782px). Apretarlo es lo que hace que las 50
   categorías entren sin scroll en una pantalla de 768px de alto. */
.main-header .almacen-mega a.almacen-mega__head,
.main-header .almacen-mega .almacen-mega__sub a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-2);
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.35;
    letter-spacing: normal;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.main-header .almacen-mega a.almacen-mega__head {
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--warm-black);      /* 10.09:1 sobre crema */
}

.almacen-mega__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-header .almacen-mega .almacen-mega__sub a {
    padding-left: var(--sp-4);     /* la sangría es lo que dice "esto cuelga de arriba" */
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);       /* 14px, el piso del sistema */
    font-weight: 400;
    color: var(--ink-muted);       /* 5.9:1 sobre crema */
}

.main-header .almacen-mega .almacen-mega__sub a.almacen-mega__all {
    font-weight: 600;
    color: var(--forest-green);
}

.main-header .almacen-mega a.almacen-mega__head:hover,
.main-header .almacen-mega a.almacen-mega__head:focus-visible,
.main-header .almacen-mega .almacen-mega__sub a:hover,
.main-header .almacen-mega .almacen-mega__sub a:focus-visible {
    background-color: rgba(74, 103, 65, 0.08);
    color: var(--forest-green);
}

.main-header .almacen-mega a:focus-visible {
    outline: var(--focus-ring-w) solid var(--forest-green);
    outline-offset: -1px;
}

/* «Estás acá»: el mismo tratamiento que el drawer y la hoja de «Ordenar». El tilde en sí
   (`.almacen-sheet__tilde`) ya tiene estilo propio más abajo; acá sólo el peso y el color. */
.main-header .almacen-mega a[aria-current="page"] {
    color: var(--forest-green);
    font-weight: 700;
}

/* Los nombres llegan del ERP en MAYÚSCULAS ("ADEREZOS, CONSERVAS Y FERMENTOS"): un panel entero
   gritando es ilegible, y las mayúsculas sostenidas borran la silueta de la palabra, que es de lo
   que se agarra el ojo para escanear. Se arregla en presentación, no en los datos — el próximo sync
   del ERP pisaría cualquier cambio hecho sobre los términos.
   `inline-block` es necesario: ::first-letter sólo aplica sobre una caja de bloque. */
.almacen-mega [data-mega-text] {
    display: inline-block;
    text-transform: lowercase;
}

.almacen-mega [data-mega-text]::first-letter {
    text-transform: uppercase;
}

.almacen-mega__empty {
    margin: var(--sp-4) 0 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--ink-subtle);
}

/* En pantallas más chicas el panel sigue entrando, pero cuatro columnas dejan los nombres largos
   ("Aderezos, conservas y fermentos") demasiado apretados. */
@media (max-width: 1200px) {
    .almacen-mega__cols {
        columns: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-left .wp-block-navigation__submenu-container,
    .almacen-mega__head,
    .almacen-mega__sub a {
        transition: none !important;
        animation: none !important;
    }
}

/* Guarda: la navegación de escritorio está en `display:none` abajo de 782px (el teléfono usa el
   drawer), pero si algún día se muestra, que no lo haga en cuatro columnas. */
@media (max-width: 782px) {
    .nav-left .wp-block-navigation__submenu-container {
        display: block !important;
        min-width: unset;
        max-width: unset;
    }

    .almacen-mega__cols {
        columns: 1;
    }
}

/* ===== HOME PAGE STYLES ===== */

/* Hero Section */
.hero-section {
    position: relative;
}

.hero-cover {
    background: linear-gradient(135deg, var(--dark-green) 0%, var(--forest-green) 50%, var(--dark-green) 100%);
}

.hero-cover .wp-block-cover__background {
    background: linear-gradient(135deg, rgba(61, 90, 58, 0.85) 0%, rgba(74, 103, 65, 0.75) 50%, rgba(61, 90, 58, 0.9) 100%) !important;
}

.hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out;
}

.hero-tagline {
    font-family: 'Mulish', sans-serif;
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-cta-primary .wp-block-button__link {
    background-color: var(--golden-accent) !important;
    color: var(--warm-black) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.hero-cta-primary .wp-block-button__link:hover {
    background-color: #B89851 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

.hero-cta-secondary .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--white) !important;
    color: var(--white) !important;
}

.hero-cta-secondary .wp-block-button__link:hover {
    background-color: var(--white) !important;
    color: var(--dark-green) !important;
}

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Titles */
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.25rem;
    color: var(--warm-black);
    margin-bottom: 0;
}

.section-header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.view-all-btn .wp-block-button__link {
    border-color: var(--forest-green) !important;
    color: var(--forest-green) !important;
}

.view-all-btn .wp-block-button__link:hover {
    background-color: var(--forest-green) !important;
    color: var(--white) !important;
}

/* Bestsellers & New Arrivals Section Layout */
.bestsellers-section,
.new-arrivals-section {
    padding: 80px 20px !important;
}

/* Inner container - constrained width */
.bestsellers-inner,
.new-arrivals-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 !important;
}

/* Ensure header and products have same width */
.bestsellers-inner .section-header,
.new-arrivals-inner .section-header,
.bestsellers-inner .wp-block-woocommerce-product-collection,
.new-arrivals-inner .wp-block-woocommerce-product-collection {
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove alignwide margin that might cause offset */
.bestsellers-inner .alignwide,
.new-arrivals-inner .alignwide {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Categories Section */
.categories-section {
    background-color: var(--warm-cream);
}

.categories-grid,
.categories-grid.is-layout-flow,
.categories-grid.wp-block-group-is-layout-flow {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.categories-grid > .category-card,
.categories-grid > .wp-block-group.category-card {
    align-self: stretch !important;
    margin: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Remove WordPress default block margins */
.categories-grid > *:first-child {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

.categories-grid .category-card > *:first-child,
.categories-grid .category-card-inner > *:first-child {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

.categories-grid > .wp-block-group.category-card {
    width: 100%;
    height: 100%;
}

.category-card,
.category-card.is-layout-flow,
.category-card.wp-block-group-is-layout-flow {
    position: relative;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.category-card-inner,
.category-card-inner.is-layout-flow,
.category-card-inner.wp-block-group-is-layout-flow {
    background: linear-gradient(145deg, var(--forest-green) 0%, var(--dark-green) 100%);
    flex: 1 !important;
    min-height: 220px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Dark overlay for cards with background images - ensures text readability (WCAG AA compliant) */
.category-card[data-category] .category-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 62, 45, 0.75) 0%, rgba(44, 62, 45, 0.85) 100%);
    z-index: 1;
    transition: background 0.3s ease;
}

/* Ensure content appears above the overlay */
.category-card[data-category] .category-card-inner > * {
    position: relative;
    z-index: 2;
}

.category-card-inner:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(74, 103, 65, 0.3);
}

/* Lighten overlay on hover for visual feedback */
.category-card[data-category] .category-card-inner:hover::before {
    background: linear-gradient(145deg, rgba(44, 62, 45, 0.6) 0%, rgba(74, 103, 65, 0.5) 100%);
}

.category-card-inner,
.category-card-inner *,
.category-card .category-card-inner,
.category-card .category-card-inner *,
.categories-grid .category-card-inner,
.categories-grid .category-card-inner * {
    text-align: center !important;
}

.category-card-inner .wp-block-buttons,
.categories-grid .category-card-inner .wp-block-buttons {
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
}

.category-card-inner .wp-block-button,
.categories-grid .category-card-inner .wp-block-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Force center on all category cards including first in each row */
.categories-grid .category-card:nth-child(4n+1) .category-card-inner,
.categories-grid .category-card:nth-child(4n+1) .category-card-inner *,
.categories-grid .category-card:nth-child(4n+1) .category-title,
.categories-grid .category-card:nth-child(4n+1) .category-description {
    text-align: center !important;
}

.categories-grid .category-card:nth-child(4n+1) .wp-block-buttons {
    justify-content: center !important;
}

.category-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center !important;
}

.category-description {
    font-family: 'Mulish', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    text-align: center !important;
}

.category-btn .wp-block-button__link {
    border-color: var(--white) !important;
    color: var(--white) !important;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 24px !important;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.category-btn .wp-block-button__link:hover,
.category-card-inner:hover .category-btn .wp-block-button__link {
    background-color: var(--white) !important;
    color: var(--dark-green) !important;
}

/* Focus state for button accessibility */
.category-btn .wp-block-button__link:focus {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* Focus-within state for keyboard navigation on cards */
.category-card:focus-within .category-card-inner {
    box-shadow: 0 0 0 3px var(--golden-accent);
}

/* ===== MODERN PRODUCT CARD STYLES ===== */

/* Reset WordPress layout classes */


/* Product Grid Container */


/* Product Card - Modern Clean Design */




/* Image Wrapper */








/* Sale Badge - Overlay on image */
.bestsellers-section li.wc-block-product .wc-block-components-product-sale-badge,
.new-arrivals-section li.wc-block-product .wc-block-components-product-sale-badge {
    all: unset !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: linear-gradient(135deg, #C9A961 0%, #B8944D 100%) !important;
    color: #1a1a1a !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    z-index: 5 !important;
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.4) !important;
}

/* Content Area */






/* Price */






/* Add to Cart Button */






/* "Ver carrito" link (added after the AJAX add-to-cart) — render it as a
   compact underlined text link in the homepage and related-product grids,
   NOT a second full-width green button that overflows the card and gets
   clipped by the card's overflow:hidden. Matches the shop grid treatment. */


/* Trust Section */
.trust-section {
    background: linear-gradient(135deg, var(--forest-green) 0%, var(--dark-green) 100%);
}

.trust-grid {
    gap: 30px !important;
}

.trust-item {
    text-align: center;
}

.trust-icon-wrapper {
    align-items: center;
}

.trust-icon {
    margin-bottom: 0.75rem;
}

.trust-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.trust-description {
    font-family: 'Mulish', sans-serif;
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

/* Contact Section (WhatsApp) */
.community-section {
    background-color: var(--warm-cream);
}

/* Contact Section Title */
.contact-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.25rem;
    font-weight: 600;
}

/* Contact Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 30px;
    align-items: stretch;
}

/* Map Section */
.map-section,
.map-section.wp-block-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.map-container {
    flex: 1;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 0;
    padding: 0;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* WhatsApp Column */
.whatsapp-column,
.whatsapp-column.wp-block-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.whatsapp-column .whatsapp-contact-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin: 0 !important;
}

/* WhatsApp Contact Card */
.whatsapp-contact-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.whatsapp-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.whatsapp-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    line-height: 1.3;
    margin-bottom: 16px;
}

.whatsapp-team-photo {
    margin: 0 auto 16px auto !important;
    display: block;
}

.whatsapp-team-photo img {
    display: block;
    margin: 0 auto;
}

.whatsapp-phone {
    font-family: 'Mulish', sans-serif;
}

.whatsapp-description {
    font-family: 'Mulish', sans-serif;
    color: var(--warm-black);
    opacity: 0.8;
    line-height: 1.5;
}

/* WhatsApp Chat Button */
.whatsapp-chat-btn .wp-block-button__link {
    background-color: #25D366 !important;
    color: var(--white) !important;
    font-weight: 600;
    font-family: 'Mulish', sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.whatsapp-chat-btn .wp-block-button__link:hover {
    background-color: #1DA851 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

/* Legacy contact section styles (for backwards compatibility) */
.contact-section {
    background: linear-gradient(135deg, var(--dark-green) 0%, var(--warm-black) 100%);
}

.contact-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, background 0.3s ease;
}

.whatsapp-btn .wp-block-button__link {
    background-color: #25D366 !important;
    color: var(--white) !important;
    font-weight: 600;
}

/* ===== HOME PAGE RESPONSIVE ===== */

/* Large tablets / small desktops - 3 columns for categories */
@media (max-width: 1024px) {
    .categories-grid,
    .categories-grid.is-layout-flow,
    .categories-grid.wp-block-group-is-layout-flow {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 782px) {
    /* Hero responsive */
    .hero-cover {
        min-height: 500px !important;
    }

    .hero-title {
        font-size: 2.25rem !important;
    }

    .hero-tagline {
        font-size: 1rem !important;
    }

    .hero-content .wp-block-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-cta-primary,
    .hero-cta-secondary {
        width: 100%;
    }

    .hero-cta-primary .wp-block-button__link,
    .hero-cta-secondary .wp-block-button__link {
        width: 100%;
        text-align: center;
    }

    /* Section titles */
    .section-title {
        font-size: 1.75rem;
    }

    .section-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* Categories responsive - 2 columns */
    .categories-grid,
    .categories-grid.is-layout-flow,
    .categories-grid.wp-block-group-is-layout-flow {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .category-card-inner {
        min-height: 180px;
        padding: 30px 20px !important;
    }

    .category-card-inner:hover {
        transform: translateY(-4px);
    }

    .category-title {
        font-size: 1.25rem;
    }

    .category-description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .category-btn .wp-block-button__link {
        font-size: 0.8rem;
        padding: 8px 20px !important;
    }

    /* Products grid responsive - 2 columns */
    

    

    

    

    

    /* Badges responsive - tablet */
    .bestsellers-section li.wc-block-product .wc-block-components-product-sale-badge,
    .new-arrivals-section li.wc-block-product .wc-block-components-product-sale-badge {
        top: 12px !important;
        left: 12px !important;
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    /* Trust section responsive */
    .trust-grid {
        flex-wrap: wrap;
    }

    .trust-grid > .wp-block-column {
        flex-basis: calc(50% - 15px) !important;
    }

    .trust-title {
        font-size: 1.1rem;
    }

    .trust-description {
        font-size: 0.85rem;
    }

    /* Contact section responsive */
    .contact-grid {
        flex-direction: column;
    }

    .contact-card {
        padding: 40px 30px !important;
    }

    .contact-title {
        font-size: 1.5rem;
    }

    /* Contact section responsive */
    .contact-section-title {
        font-size: 1.75rem !important;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .map-container {
        min-height: 300px;
    }

    .map-container iframe {
        min-height: 300px;
    }

    .whatsapp-contact-card {
        padding: 32px 24px !important;
    }

    .whatsapp-title {
        font-size: 1.35rem !important;
    }
}

@media (max-width: 480px) {
    /* Hero mobile */
    .hero-cover {
        min-height: 450px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-tagline {
        font-size: 0.95rem !important;
    }

    /* Section spacing mobile */
    .categories-section,
    .bestsellers-section,
    .new-arrivals-section,
    .contact-section,
    .community-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Contact section mobile */
    .contact-section-title {
        font-size: 1.5rem !important;
        margin-bottom: 30px !important;
    }

    .contact-grid {
        gap: 20px;
    }

    .map-container {
        min-height: 250px;
    }

    .map-container iframe {
        min-height: 250px;
    }

    .whatsapp-contact-card {
        padding: 28px 20px !important;
    }

    .whatsapp-team-photo {
        max-width: 100px !important;
    }

    .whatsapp-title {
        font-size: 1.25rem !important;
    }

    .whatsapp-phone {
        font-size: 1.2rem !important;
    }

    .whatsapp-description {
        font-size: 0.9rem !important;
    }

    .trust-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Categories mobile - 1 column */
    .categories-grid,
    .categories-grid.is-layout-flow,
    .categories-grid.wp-block-group-is-layout-flow {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .category-card-inner {
        min-height: 140px;
        padding: 25px 20px !important;
    }

    .category-card-inner:hover {
        transform: none;
    }

    .category-title {
        font-size: 1.15rem;
    }

    .category-description {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }

    .category-btn .wp-block-button__link {
        font-size: 0.75rem;
        padding: 8px 18px !important;
    }

    /* Products mobile - 1 column centered */
    

    

    

    

    

    

    

    

    /* Badges responsive - mobile */
    .bestsellers-section li.wc-block-product .wc-block-components-product-sale-badge,
    .new-arrivals-section li.wc-block-product .wc-block-components-product-sale-badge {
        top: 8px !important;
        left: 8px !important;
        font-size: 9px !important;
        padding: 5px 8px !important;
        border-radius: 4px !important;
    }

    /* Trust mobile - 2 columns maintained */
    .trust-grid > .wp-block-column {
        flex-basis: calc(50% - 10px) !important;
    }

    .trust-icon {
        font-size: 2rem !important;
    }

    /* Contact mobile */
    .contact-card {
        padding: 30px 20px !important;
    }

    .contact-title {
        font-size: 1.35rem;
    }

    .contact-phone {
        font-size: 1.1rem !important;
    }
}

/* ===== STAGGERED ANIMATIONS ===== */

.category-card {
    animation: fadeInUp 0.6s ease-out both;
}

.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.15s; }
.category-card:nth-child(3) { animation-delay: 0.2s; }
.category-card:nth-child(4) { animation-delay: 0.25s; }
.category-card:nth-child(5) { animation-delay: 0.3s; }
.category-card:nth-child(6) { animation-delay: 0.35s; }
.category-card:nth-child(7) { animation-delay: 0.4s; }
.category-card:nth-child(8) { animation-delay: 0.45s; }

.trust-item {
    animation: fadeInUp 0.6s ease-out both;
}

.trust-item:nth-child(1) { animation-delay: 0.1s; }
.trust-item:nth-child(2) { animation-delay: 0.2s; }
.trust-item:nth-child(3) { animation-delay: 0.3s; }
.trust-item:nth-child(4) { animation-delay: 0.4s; }

/* ===== SHOP PAGE STYLES ===== */

/* Hide the CLASSIC-WooCommerce page headers. Every selector below targets markup this block theme
   never renders — they are belt-and-braces against a plugin printing a second title.

   `.woocommerce-page .wp-block-query-title` used to be in this list, and it was the one selector that
   DID match something: the shop's real <h1>. Hiding it left the shop, every category archive and the
   search page with NO visible <h1> at all, and a 36px serif breadcrumb standing in for one. The
   breadcrumb is now a breadcrumb (below), so the <h1> comes back. */
.shop-page > .wp-block-heading:first-of-type,
.woocommerce-products-header__title,
.page-title,
.term-description + .wp-block-heading,
.shop-page .woocommerce-products-header,
.archive .page-title,
.archive .woocommerce-products-header__title,
.tax-product_cat .page-title,
.tax-product_cat > .wp-block-heading,
.archive-title,
h1.woocommerce-products-header__title,
.wp-block-post-title.woocommerce-products-header__title,
header.woocommerce-products-header {
    display: none !important;
}

/* The shop / category / search <h1> is NOT styled here, because it is not shown here.
   The breadcrumb's last crumb already names the page ("Inicio / Tienda"), so a 40px "Tienda"
   underneath it was the same word twice. The templates give the block `screen-reader-text`, which
   core already styles — the heading stays in the DOM and in the accessibility tree, it just isn't
   painted. Do NOT "simplify" that back to `display: none` (which is what this theme used to do):
   that drops the h1 from the a11y tree and leaves the page with no heading at all, for anyone.

   If you ever DO want it back on screen, drop the className and size it explicitly — TT4 maps h1 to
   the fluid `xx-large` preset (2.5rem → 3.27rem), so it renders at 52px otherwise. */

/* THE BREADCRUMB — one rule, every page (shop, category, search, PDP, cart).
   It was 36px Cormorant 700 because it was doubling as the page title. It isn't any more (the <h1>
   above is back), so it can be what it is: small, quiet, secondary to the title it sits above.

   The markup is <div class="woocommerce wp-block-breadcrumbs wc-block-breadcrumbs alignwide">
   wrapping <nav class="woocommerce-breadcrumb">. Three things about it will bite you:

   (1) The typography and the vertical spacing MUST live on the inner <nav>, not on the wrapper <div>.
       `.shop-page > *:first-child { padding-top: 0 !important }` (a few rules down) targets that
       wrapper — it IS the first child — so padding-top on the div is zeroed and the breadcrumb slams
       into the header.

   (2) Never put font-size on the wrapper either: the block ships `has-small-font-size`, and WordPress
       emits font-size preset classes with `!important`. A plain rule on the div silently loses.

   (3) The compound `.woocommerce.wc-block-breadcrumbs` prefix below is LOAD-BEARING, and this is the
       subtle one. WooCommerce core ships `.woocommerce .woocommerce-breadcrumb { padding: 0 }` —
       specificity (0,2,0) — and the wrapper div carries the `woocommerce` class, so that descendant
       selector matches our nav. A bare `.woocommerce-breadcrumb` rule is (0,1,0) and LOSES: the
       typography applies (core doesn't set it for block themes) but the padding is silently dropped
       to 0, which reads as "my padding didn't work" with no obvious cause. Both classes are on the
       same element, so `.woocommerce.wc-block-breadcrumbs .woocommerce-breadcrumb` is (0,3,0) and
       wins on specificity rather than on load order — which is why none of this needs !important.

   No max-width/margin auto: the block's own `alignwide` already centres the wrapper at the theme's
   wide size, which is what the sidebar and grid below align to. Setting our own 1200px was what
   pushed the breadcrumb 20px out of alignment with everything under it. */
.woocommerce.wc-block-breadcrumbs .woocommerce-breadcrumb {
    font-family: 'Mulish', -apple-system, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
    padding: var(--sp-6) 0 var(--sp-2);
}

/* TELLING THE CLICKABLE CRUMBS FROM THE ONE YOU ARE ON.
   `almacen_breadcrumb_defaults()` (functions.php) wraps each crumb in `.breadcrumb-crumb` and each
   separator in `.breadcrumb-sep`, because WooCommerce ships both as bare TEXT NODES — unstylable.
   That is what made this hard: with only `<a>` selectable, the sole lever was the link's colour, so
   the first attempt gave links --forest-green while the current crumb kept --ink-muted. Measured,
   those two are 1.1:1 apart. Different hex, same colour to a human eye. It looked like one flat
   sentence, which is exactly the complaint.

   THE UNDERLINE IS THE FIX; the colour only supports it. An underline is the one link affordance
   people read without being taught, and WCAG 1.4.1 says the same thing from the other direction:
   never let colour be the only carrier of meaning. So each crumb type now differs on THREE axes at
   once — underline, colour and weight — and any one of them alone is enough to tell them apart:

       clickable :  forest-green · 600 · UNDERLINED
       current   :  warm-black   · 700 · no underline   (also the loudest thing, which is right —
                                                         the <h1> is visually hidden, so this IS
                                                         the page's visible name)
       separator :  ink-subtle   · 400 · aria-hidden    (recedes; no longer read aloud as "slash") */
.woocommerce.wc-block-breadcrumbs .woocommerce-breadcrumb a {
    color: var(--forest-green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.woocommerce.wc-block-breadcrumbs .woocommerce-breadcrumb a:hover {
    color: var(--dark-green);
    text-decoration-thickness: 2px;
}

/* Keyboard gets the same affordance the mouse gets, plus the site's standard ring. */
.woocommerce.wc-block-breadcrumbs .woocommerce-breadcrumb a:focus-visible {
    color: var(--dark-green);
    text-decoration-thickness: 2px;
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The current page. It is the last crumb, and it is the only one with no <a> inside it. */
.woocommerce.wc-block-breadcrumbs .breadcrumb-crumb:last-child {
    color: var(--warm-black);
    font-weight: 700;
}

.woocommerce.wc-block-breadcrumbs .breadcrumb-sep {
    display: inline-block;
    margin: 0 var(--sp-2);
    font-weight: 400;
    color: var(--ink-subtle);
    user-select: none;
}

/* THE PAGE SHELL — one gutter, one width, shared by the shop and the product page.
   The product page is in this selector on purpose. Its template declares
   `{"layout":{"inherit":true}}` (single-product.html:3), which opts it into WordPress's GLOBAL
   layout — and that hands it Twenty Twenty-Four's root padding, which is FLUID (~8vw). That is why
   the PDP sat at 31px of gutter on a 393px phone and 104px at 1600px while the shop sat at 16/24:
   the two pages were being measured by different rulers. Inheriting also leaves the main with no
   max-width, so its `alignwide` children centred against the VIEWPORT rather than against a page
   shell — the PDP's content actually started 24px LEFT of the shop's on desktop.

   Sharing the rule is what makes them line up, and keeps them lined up.

   No !important needed: WordPress applies the root padding via `.has-global-padding` (0,1,0) and
   `.single-product main.wp-block-group` is (0,2,1).

   SAFE ONLY BECAUSE single-product.html has no `alignfull` child (checked: zero). An `alignfull`
   block cancels the root padding with negative margins, so overriding that padding underneath one
   would tear the layout open sideways. If you ever add a full-width block to the PDP, revisit this.

   The CART and CHECKOUT are here too. Before this, the site had four pages and three page widths:
   the shop/PDP at 1280, the cart at 1200, the checkout at 1400 — with gutters of 24, 20 and 40px
   respectively (and 15px, then 12px, as the cart's phone breakpoints piled up). Nothing lined up with
   anything, and the checkout's 40px gutter was one of the two causes of the mobile clipping. */
.shop-page,
.single-product main.wp-block-group,
.cart-page,
.checkout-page {
    padding: 0 var(--sp-6) var(--sp-12);
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    box-sizing: border-box;
}

/* Remove extra top spacing */
.shop-page > *:first-child,
.woocommerce-page .entry-content > *:first-child,
.archive .entry-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Shop Layout - Categories and Products.
   NO horizontal padding here. `.shop-page` is the single gutter owner; this element adding its own
   `0 20px` on top was a DOUBLE gutter, and it is the entire reason the breadcrumb used to sit 20px
   left of the sidebar and grid it was labelling. */
.shop-layout {
    margin-top: 0 !important;
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Shop layout - vertical category sidebar beside the products */
.shop-layout.wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--sp-8) !important;
}

/* LA COLUMNA CRECE Y SCROLLEA CON LA PÁGINA. NO TIENE SCROLL PROPIO.
 *
 * Antes era `position: sticky` + `max-height: calc(100vh - 48px)` + `overflow-y: auto`. La intención
 * era buena —la lista mide 2710px contra un grid de 1454px, así que la navegación era más alta que
 * el contenido que navega— pero el precio era DOS BARRAS DE SCROLL en la misma pantalla: la de la
 * página y la del sidebar. Cuál se mueve depende de dónde esté el puntero, y eso se lee como que la
 * página está trabada.
 *
 * LAS TRES PROPIEDADES SE VAN JUNTAS, Y ESO NO ES OPCIONAL. Sacar sólo el `overflow` dejando el
 * `sticky` es peor que no tocar nada: un elemento sticky más alto que la ventana se clava arriba y
 * el tramo que sobra —acá ~1800px, de «Dulces dieteticos» para abajo— no se puede alcanzar de
 * ninguna manera. Sin scroll propio, el sidebar tiene que scrollear con la página.
 *
 * En móvil esto no cambia nada: ahí la columna es `display: none` y las categorías salen por el
 * drawer. */
.shop-layout .shop-sidebar.wp-block-column {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    order: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start;
}

.shop-layout .shop-products-area.wp-block-column {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
}

/* Fix product collection container */


/* Force grid on product template - responsive so it adapts to the narrower
   products area beside the sidebar */


/* Fix product card widths */


/* Product card container - ensure proper display */


/* Product image - square aspect ratio */




/* Product title - horizontal text */


/* Product price */


/* Add to cart button - full width */




/* ===== SHOP SIDEBAR - HORIZONTAL FILTER BAR ===== */

.shop-sidebar {
    flex-shrink: 0 !important;
    position: relative;
    height: fit-content;
    align-self: flex-start;
}

/* Hide sidebar section wrapper styling */
.sidebar-section {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove any extra spacing from sidebar */
.shop-sidebar,
.shop-sidebar.wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
}

/* Sidebar section titles ("Categorías", "Filtrar por") */
.shop-sidebar .sidebar-title {
    display: block !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: var(--fs-md) !important;
    font-weight: 600 !important;
    color: var(--warm-black) !important;
    margin: 0 0 var(--sp-4) 0 !important;
    padding: 0 0 var(--sp-2) 0 !important;
    border-bottom: 1px solid var(--line) !important;
}

/* Spacing between the categories block and the filters block */
.filters-section-sidebar {
    margin-top: var(--sp-8) !important;
}

/* Filter sub-headings ("Precio") */
.filter-heading {
    display: block !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: var(--fs-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-muted) !important;
    margin: 0 0 var(--sp-2) 0 !important;
}

/* Category List - Vertical collapsible tree */
.wc-block-product-categories-list,
.wp-block-woocommerce-product-categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.wc-block-product-categories-list-item,
.wp-block-woocommerce-product-categories li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* Category rows as full-width vertical links.
   12px of padding rather than 9px/12px is not cosmetic: it takes the row from a 38px hit area to
   44px, the minimum comfortable touch target, and it puts the row on the 8-pt grid. */
.wc-block-product-categories-list-item a,
.wp-block-woocommerce-product-categories li a {
    display: block !important;
    padding: var(--sp-3) !important;
    color: var(--warm-black) !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: var(--fs-xs) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

/* The 52 category names arrive from the ERP in ALL CAPS ("ADEREZOS Y CONSERVAS"), so a whole column
   of the page was shouting. This is presentation, not data — we sentence-case it in CSS rather than
   touch the terms, so the next ERP sync cannot undo it.

   ::first-letter needs a block-level box to apply to, which the rule above gives us (display: block).
   Revert = delete these two rules. */
.wc-block-product-categories-list-item a,
.wp-block-woocommerce-product-categories li a {
    text-transform: lowercase !important;
}

.wc-block-product-categories-list-item a::first-letter,
.wp-block-woocommerce-product-categories li a::first-letter {
    text-transform: uppercase !important;
}

/* Leave room for the expand caret on parents */
.wc-block-product-categories-list-item.has-children > a,
.wp-block-woocommerce-product-categories li.has-children > a {
    padding-right: 38px !important;
}

/* Hover state for non-active */
.wc-block-product-categories-list-item a:hover,
.wp-block-woocommerce-product-categories li a:hover {
    color: var(--forest-green) !important;
    background: rgba(74, 103, 65, 0.08) !important;
}

/* Active/Current category - green highlighted row */
.wc-block-product-categories-list-item.current-cat > a,
.wc-block-product-categories-list-item.current > a,
.wc-block-product-categories-list-item.active > a,
.wc-block-product-categories-list-item.is-active > a,
.wp-block-woocommerce-product-categories li.current-cat > a,
.wp-block-woocommerce-product-categories li.current > a,
.wp-block-woocommerce-product-categories li.active > a,
.wp-block-woocommerce-product-categories li.is-active > a,
.wc-block-product-categories-list-item > a[aria-current="page"],
.wp-block-woocommerce-product-categories li > a[aria-current="page"],
.product-categories li.current-cat > a,
.product-categories li.current > a,
li.cat-item.current-cat > a,
li.cat-item.current > a {
    color: #fff !important;
    font-weight: 600 !important;
    background: var(--forest-green) !important;
    border: none !important;
}

.wc-block-product-categories-list-item.current-cat > a:hover,
.wc-block-product-categories-list-item.current > a:hover,
.wc-block-product-categories-list-item.is-active > a:hover,
.wp-block-woocommerce-product-categories li.current-cat > a:hover,
.wp-block-woocommerce-product-categories li.current > a:hover {
    background: var(--dark-green) !important;
    color: #fff !important;
}

/* Expand/collapse caret button (added by shop-sidebar.js on parents) */
.cat-toggle {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
}

.cat-toggle::before {
    content: '▾';
    font-size: 11px;
    transition: transform 0.2s ease;
}

.has-children.is-collapsed > .cat-toggle::before {
    transform: rotate(-90deg);
}

.cat-toggle:hover {
    background: rgba(74, 103, 65, 0.12);
}

.current-cat > .cat-toggle:hover,
.is-active > .cat-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Nested subcategories - indented, collapsible */
.wc-block-product-categories-list-item ul,
.wp-block-woocommerce-product-categories li ul {
    margin: 1px 0 1px 0 !important;
    padding-left: 14px !important;
    border-left: 1px solid rgba(74, 103, 65, 0.18);
}

.wc-block-product-categories-list-item ul a,
.wp-block-woocommerce-product-categories li ul a {
    font-size: var(--fs-xs) !important;
    font-weight: 400 !important;
}

.has-children.is-collapsed > ul {
    display: none !important;
}

/* ===== Mobile drawer toggle for the shop sidebar ===== */
.shop-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px 0;
    padding: 12px 18px;
    background: var(--forest-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.shop-sidebar-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.shop-sidebar-close {
    display: none;
}

@media (max-width: 900px) {
    /* Show the toggle, stack the layout */
    .shop-sidebar-toggle {
        display: inline-flex;
    }

    .shop-layout.wp-block-columns {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* EL PANEL OFF-CANVAS PROPIO YA NO EXISTE.
       Era un segundo drawer, con otro aspecto y otro comportamiento que el de la hamburguesa:
       entraba desde la izquierda, con su propio scrim, sin trampa de foco y sin recordar el scroll
       del fondo. Ahora el botón «Categorías» abre el drawer COMPARTIDO
       (`#almacen-drawer-categorias`), así que en móvil esta columna sencillamente no se muestra.
       En escritorio sigue siendo la columna de 250px de siempre, intacta. */
    .shop-layout .shop-sidebar.wp-block-column {
        display: none !important;
    }
}

/* Filter Checkboxes */
.wc-block-attribute-filter-list,
.wc-block-components-checkbox-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wc-block-attribute-filter-list li,
.wc-block-components-checkbox-list li {
    margin: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid rgba(74, 103, 65, 0.05);
}

.wc-block-attribute-filter-list li:last-child,
.wc-block-components-checkbox-list li:last-child {
    border-bottom: none;
}

.wc-block-components-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.wc-block-components-checkbox__input {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(74, 103, 65, 0.3) !important;
    border-radius: 4px !important;
    cursor: pointer;
    accent-color: var(--forest-green);
}

.wc-block-components-checkbox__input:checked {
    background-color: var(--forest-green) !important;
    border-color: var(--forest-green) !important;
}

.wc-block-components-checkbox__label {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    color: var(--warm-black);
    flex: 1;
}

.wc-block-components-checkbox__label .wc-filter-element-label-list-count {
    color: var(--ink-subtle);
    font-size: var(--fs-xs);
    margin-left: var(--sp-1);
}

/* Price Filter */
.wc-block-price-filter {
    padding: 10px 0;
}

.wc-block-price-filter__range-input-wrapper {
    margin: 10px 0;
}

.wc-block-price-filter__range-input-progress {
    background: var(--forest-green) !important;
}

.wc-block-price-filter__range-input::-webkit-slider-thumb {
    background: var(--forest-green) !important;
}

.wc-block-price-filter__range-text {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    color: var(--warm-black);
    font-weight: 600;
}

/* Active Filters */
.wc-block-active-filters {
    padding-top: 16px;
    border-top: 1px solid rgba(74, 103, 65, 0.1);
}

.wc-block-active-filters__title {
    font-family: 'Mulish', sans-serif !important;
    font-size: var(--fs-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666 !important;
    margin-bottom: 10px !important;
}

.wc-block-active-filters__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wc-block-active-filters__list-item {
    background: rgba(74, 103, 65, 0.1);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: var(--fs-xs);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wc-block-active-filters__list-item-remove {
    color: var(--forest-green) !important;
    cursor: pointer;
    font-weight: bold;
}

.wc-block-active-filters__clear-all {
    color: var(--forest-green) !important;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 10px;
    display: inline-block;
}

.wc-block-active-filters__clear-all:hover {
    color: var(--golden-accent) !important;
}

/* ===== SHOP SEARCH BAR ===== */

.shop-search-bar {
    margin-bottom: var(--sp-6);
}

.shop-product-search-form {
    width: 100%;
}

.shop-search-wrapper {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The input and the button are welded into one control, so the focus ring belongs on the WRAPPER —
   ringing the input alone would draw a box that stops halfway through the thing the user sees.

   This replaces a bare `outline: none` on the input, which left the page's PRIMARY control with no
   focus indicator whatsoever (WCAG 2.4.7). If you ever kill an outline, you owe the element a
   replacement. */
.shop-search-wrapper:focus-within {
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.18);
}

.shop-search-input {
    flex: 1;
    border: none;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    font-family: 'Mulish', sans-serif;
    color: var(--warm-black);
    outline: none;
    background: transparent;
}

.shop-search-input::placeholder {
    color: var(--ink-subtle);
    opacity: 1;
}

.shop-search-button {
    background-color: var(--forest-green, #4A6741);
    border: none;
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.2s ease;
}

/* This is a <button type="submit">, so the global button-hover rule was giving it
   `transform: translateY(-2px)` + a drop shadow — the button visibly DETACHED from the input it is
   welded to and floated above it. Cancel the lift; keep the colour change. */
.shop-search-button:hover {
    background-color: var(--dark-green, #3D5A3A) !important;
    transform: none !important;
    box-shadow: none !important;
}

.shop-search-button svg {
    fill: white;
}

/* ===== SHOP TOP BAR ===== */

.shop-top-bar {
    padding: var(--sp-3) 0;
    margin-bottom: var(--sp-4);
    border-bottom: none;
}

/* Results count.
   There used to be a second, scoped copy of this rule (`.shop-top-bar .woocommerce-result-count`,
   14px/#666) sitting right below. It was 100% dead: this rule is `!important` and that one wasn't, so
   the LESS specific rule won every time and the count rendered at 13px/#888 — 3.12:1, an AA failure.
   One rule now, at the floor size, in a colour that passes. */
.wc-block-product-results-count,
.woocommerce-result-count {
    font-family: 'Mulish', sans-serif !important;
    font-size: var(--fs-xs) !important;
    font-weight: 400 !important;
    color: var(--ink-muted) !important;
    margin: 0 !important;
}

.shop-top-bar .wc-block-catalog-sorting select,
.shop-top-bar .woocommerce-ordering select {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    padding: 10px 36px 10px 14px;
    border: 1px solid rgba(74, 103, 65, 0.2);
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    color: var(--warm-black);
}

.shop-top-bar .wc-block-catalog-sorting select:focus,
.shop-top-bar .woocommerce-ordering select:focus {
    border-color: var(--forest-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.1);
}

/* ===== SHOP PRODUCTS GRID ===== */



/* Product collection container spacing */
.wp-block-woocommerce-product-collection {
    margin-top: 0 !important;
}

/* Shop Product Card - Modern Design */


/* Remove WooCommerce default bottom margins on card children */






/* Product Image */








/* Sale Badge - Override WooCommerce flex-direction: column */
.shop-sale-badge.wp-block-woocommerce-product-sale-badge {
    display: block !important;
    flex-direction: unset !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
}

.shop-products-grid .wc-block-components-product-sale-badge,
.shop-sale-badge .wc-block-components-product-sale-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background: linear-gradient(135deg, #C9A961 0%, #B8944D 100%) !important;
    color: #1a1a1a !important;
    font-family: 'Mulish', sans-serif !important;
    /* 12px is the ONE size allowed below the 14px floor, and only here: it is an uppercase,
       letter-spaced, bold badge of one or two words on a high-contrast chip — not running text. It
       used to be 11px, shrinking to 9px on a phone, which is not a size anyone can read. */
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    border: none !important;
    z-index: 5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.shop-sale-badge .wc-block-components-product-sale-badge__text {
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    display: inline !important;
}

/* Reset nested badge container */


/* Product Title */






/* Product Price */






/* Add to Cart Button */






/* View Cart Link - appears after adding to cart. Stack vertically (button on
   top, compact "Ver carrito" link below), matching the homepage grids. */


/* View cart link styling */




/* Make button take appropriate space */


/* ===== SHOP PAGINATION ===== */

.shop-pagination {
    margin-top: 40px !important;
    gap: 8px;
}

.shop-pagination .page-numbers,
.shop-pagination a,
.shop-pagination span {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: var(--sp-3) var(--sp-4);
    border-radius: 8px;
    color: var(--warm-black);
    background: #fff;
    border: 1px solid rgba(74, 103, 65, 0.2);
    transition: all 0.2s ease;
}

.shop-pagination a:hover {
    background: var(--forest-green);
    color: #fff !important;
    border-color: var(--forest-green);
}

.shop-pagination .current,
.shop-pagination span.current {
    background: var(--forest-green) !important;
    color: #fff !important;
    border-color: var(--forest-green) !important;
}

/* ===== SHOP PAGE RESPONSIVE ===== */

/* Medium screens - 3 columns */


/* Mobile.
   The 991px and 782px breadcrumb shrink rules that used to live here (1.85rem, then 1.5rem) are gone.
   They only existed to walk a 36px title back down to something a phone could hold — the breadcrumb
   is 16px at every width now, so there is nothing to shrink. */
@media (max-width: 782px) {
    /* Category pills - smaller on mobile */
    .wc-block-product-categories-list,
    .wp-block-woocommerce-product-categories ul {
        gap: 8px !important;
    }

    /* Categories keep the 14px floor and the 44px tap target on mobile — this is the width where a
       mis-tap costs the most, so shrinking the rows here (they were 13px / 8px padding) was exactly
       backwards. */
    .wc-block-product-categories-list-item a,
    .wp-block-woocommerce-product-categories li a {
        padding: var(--sp-3) !important;
        font-size: var(--fs-xs) !important;
    }

    /* Same shell, tighter gutter. The PDP, cart and checkout ride along — see the base rule. */
    .shop-page,
    .single-product main.wp-block-group,
    .cart-page,
    .checkout-page {
        padding: 0 var(--sp-4) var(--sp-8);
    }

    .shop-layout {
        gap: var(--sp-6) !important;
    }

    /* Sale badge mobile */
    .shop-sale-badge.wp-block-woocommerce-product-sale-badge {
        top: 8px !important;
        left: 8px !important;
    }

    /* Top bar mobile */
    .shop-top-bar {
        flex-direction: column !important;
        gap: var(--sp-3);
        align-items: flex-start !important;
    }

    /* Sidebar sections collapsible feel on mobile */
    .sidebar-section {
        padding: var(--sp-4) !important;
    }

    .sidebar-title {
        font-size: var(--fs-md) !important;
        margin-bottom: var(--sp-3) !important;
    }

    /* Category list stays a vertical, full-width list inside the mobile
       drawer (the sidebar is now an off-canvas drawer, not a horizontal bar). */
    .wc-block-product-categories-list,
    .wp-block-woocommerce-product-categories ul {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
    }

    /* Hide scrollbar for Chrome/Safari */
    .wc-block-product-categories-list::-webkit-scrollbar,
    .wp-block-woocommerce-product-categories ul::-webkit-scrollbar {
        display: none !important;
    }

    /* Prevent pills from shrinking */
    .wc-block-product-categories-list-item,
    .wp-block-woocommerce-product-categories li {
        flex-shrink: 0 !important;
    }

    /* No horizontal fade needed: the list is a vertical drawer, not a scroller. */
    .shop-page .wp-block-woocommerce-product-categories::after,
    .shop-page .wc-block-product-categories::after {
        content: none !important;
    }
}

/* Small mobile.
   This block used to shrink text a THIRD time on top of the 782px block: categories to 12px, the
   pagination to 13px, the sale badge to 9px. Nothing here resizes type any more — the 782px sizes
   already fit 480px, and every one of these was under the floor. (The badge rule was also duplicated
   verbatim from the 782px block, so it was doing nothing either way.) */
@media (max-width: 480px) {
    .shop-sale-badge.wp-block-woocommerce-product-sale-badge {
        top: 8px !important;
        left: 8px !important;
    }

    .shop-pagination .page-numbers,
    .shop-pagination a,
    .shop-pagination span {
        padding: var(--sp-2) var(--sp-3);
    }
}

/* ==========================================================================
   FOOTER STYLES - Modern Ecommerce Footer
   ========================================================================== */

.site-footer {
    margin-top: auto;
}

.site-footer.has-warm-black-background-color {
    background-color: var(--warm-black) !important;
}

/* Footer content area */
.footer-content {
    width: 100%;
}

/* Footer logo - display normally like header */
.footer-logo img {
    border-radius: 50%;
    object-fit: cover;
}

/* Footer tagline */
.footer-tagline {
    opacity: 0.85;
}

/* Footer headings */
.footer-heading {
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 12px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--golden-accent);
}

/* Footer navigation links */
.footer-nav a,
.footer-nav .wp-block-navigation-item a {
    color: var(--warm-cream) !important;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.footer-nav a:hover,
.footer-nav .wp-block-navigation-item a:hover {
    color: var(--golden-accent) !important;
    padding-left: 5px;
}

/* Contact items */
.contact-item p {
    opacity: 0.9;
}

/* Footer categories list (WooCommerce block) - Two column layout */
.footer-categories-list,
.footer-categories .wc-block-product-categories-list,
.footer-categories .wp-block-woocommerce-product-categories {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px 20px !important;
}

.footer-categories-list li,
.footer-categories .wc-block-product-categories-list-item {
    margin-bottom: 12px !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.footer-categories-list a,
.footer-categories .wc-block-product-categories-list-item a {
    color: var(--warm-cream) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.footer-categories-list a:hover,
.footer-categories .wc-block-product-categories-list-item a:hover {
    color: var(--golden-accent) !important;
    padding-left: 5px;
}

/* Hide nested categories and expand buttons in footer */
.footer-categories .wc-block-product-categories-list .wc-block-product-categories-list,
.footer-categories .wc-block-product-categories-list-item-expand {
    display: none !important;
}

/* Limit footer categories to 6 items */
.footer-categories .wc-block-product-categories-list > .wc-block-product-categories-list-item:nth-child(n+7) {
    display: none !important;
}

/* Footer social icons */
.footer-social .wp-social-link {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.footer-social .wp-social-link:hover {
    transform: translateY(-3px);
    background-color: var(--golden-accent) !important;
}

/* Footer bottom bar */
.footer-bottom {
    background-color: rgba(0, 0, 0, 0.15);
}

.footer-bottom a {
    color: var(--warm-cream) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--golden-accent) !important;
}

.copyright {
    opacity: 0.8;
}

/* Footer responsive */
@media (max-width: 991px) {
    .site-footer .wp-block-columns {
        flex-direction: column !important;
    }

    .site-footer .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 32px;
    }

    .footer-about {
        text-align: center;
    }

    .footer-about .footer-logo {
        margin: 0 auto;
    }

    .footer-about .footer-social {
        justify-content: center !important;
    }

    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links,
    .footer-contact {
        text-align: center;
    }

    .footer-nav {
        align-items: center !important;
    }

    .contact-item {
        justify-content: center !important;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding-top: 40px !important;
    }

    .footer-content {
        padding-bottom: 32px !important;
    }

    .footer-bottom .wp-block-group {
        flex-direction: column !important;
        text-align: center;
        gap: 12px;
    }

    .footer-bottom-links {
        justify-content: center !important;
    }
}

/* ==========================================================================
   ABOUT PAGE STYLES
   ========================================================================== */

/* About Page Base */
.about-page {
    background-color: var(--warm-cream);
}

/* About Hero Section */
.about-hero-cover {
    position: relative;
}

.about-hero-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.about-hero-tagline {
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* About Story Section */
.about-story-section {
    overflow: hidden;
}

.about-story-grid {
    align-items: center;
}

.about-story-image-placeholder {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(74, 103, 65, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-story-image-placeholder:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(74, 103, 65, 0.2);
}

/* About Values Section */
.about-values-grid {
    gap: 24px;
}

.about-value-card {
    background-color: var(--warm-cream);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.about-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(74, 103, 65, 0.12);
}

.about-value-title {
    color: var(--forest-green);
    font-size: 1.25rem;
}

.about-value-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* About Features Section */
.about-features-grid {
    gap: 24px;
}

.about-feature-card {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.about-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(74, 103, 65, 0.12);
}

.about-feature-title {
    color: var(--forest-green);
    font-size: 1.1rem;
}

.about-feature-description {
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* About CTA Section */
.about-cta-section {
    background-color: var(--dark-green);
}

.about-cta-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.about-cta-whatsapp .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--white) !important;
    color: var(--white) !important;
}

.about-cta-whatsapp .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--golden-accent) !important;
    color: var(--golden-accent) !important;
}

/* About Page Responsive */
@media (max-width: 1024px) {
    .about-hero-title {
        font-size: 2.5rem !important;
    }

    .about-story-grid {
        gap: 40px !important;
    }
}

@media (max-width: 782px) {
    .about-hero-title {
        font-size: 2rem !important;
    }

    .about-hero-tagline {
        font-size: 1.1rem !important;
    }

    .about-story-grid {
        flex-direction: column !important;
    }

    .about-story-grid .wp-block-column {
        flex-basis: 100% !important;
    }

    .about-story-image-placeholder {
        min-height: 300px;
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .about-values-grid,
    .about-features-grid {
        flex-direction: column !important;
    }

    .about-values-grid .wp-block-column,
    .about-features-grid .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 16px;
    }

    .about-section-title {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    .about-hero-title {
        font-size: 1.75rem !important;
    }

    .about-hero-section .wp-block-cover {
        min-height: 400px !important;
    }

    .about-story-section,
    .about-values-section,
    .about-features-section,
    .about-cta-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .about-cta-section .wp-block-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .about-cta-section .wp-block-button {
        width: 100%;
    }

    .about-cta-section .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   CART PAGE STYLES
   ========================================================================== */

/* Cart page layout - ensure footer stays at bottom */
body.woocommerce-cart {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.woocommerce-cart .cart-page {
    flex: 1;
}

/* Cart page main container. The gutter and width now come from the shared PAGE SHELL rule (search
   `.shop-page,`) — this used to carry its own `0 20px 60px !important`, which is why the cart never
   lined up with the shop. Only the background is cart-specific. */
.cart-page {
    background-color: var(--warm-cream);
}

/* The cart's breadcrumb is now the SAME breadcrumb as every other page's — see the single
   `.woocommerce-breadcrumb` rule in the shop section. What used to be here was a private variant:
   0.8rem, `opacity: 0.7` (which washed it out on a page where it was the ONLY heading), and green
   links that appeared nowhere else on the site. All of it deleted. */

/* Cart page title */
/* The cart's <h1>. This rule already existed but NO template emitted `.cart-title` — the cart shipped
   with no heading of any kind, and the giant breadcrumb was silently acting as one. page-cart.html
   now renders a real <h1>Carrito</h1>, so this styles it, matched to the shop's title. */
.cart-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: var(--fs-2xl) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--warm-black) !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: var(--sp-6) !important;
}

/* Store notices */
.cart-notices .wc-block-components-notice-banner {
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Main cart block container */
.cart-content.wp-block-woocommerce-cart {
    margin-bottom: 0;
}

/* Cart two-column layout: items (left) + sticky summary (right).
   The flex MUST be on the parent .wc-block-cart so __main and __sidebar sit
   side by side (they are siblings). */
.wc-block-cart {
    margin-bottom: 0 !important;
}

@media (min-width: 783px) {
    /* Double the class to out-specify WooCommerce's small-mode layout, and use
       !important so the block stays two-column even without the JS --is-large flag. */
    .wc-block-cart.wc-block-cart {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 40px !important;
        align-items: flex-start !important;
    }

    .wc-block-cart .wc-block-cart__main {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        background: var(--white);
        border-radius: 14px;
        padding: 8px 24px !important;
        box-shadow: 0 2px 16px rgba(44, 62, 45, 0.05);
    }

    .wc-block-cart .wc-block-cart__sidebar {
        flex: 0 0 360px !important;
        width: 360px !important;
        max-width: 360px !important;
        margin-top: 0 !important;
    }
}

/* Mobile: single column, items first then summary, no horizontal overflow.
   The cart block keeps a min-width from its "large" mode; force it to 0 so the
   block can shrink to the viewport. */
@media (max-width: 782px) {
    .wc-block-cart.wc-block-cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wc-block-cart .wc-block-cart__main,
    .wc-block-cart .wc-block-cart__sidebar,
    .wp-block-woocommerce-cart-totals-block,
    .wc-block-cart__items {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wc-block-cart .wc-block-cart__main {
        order: 1 !important;
        flex: none !important;
    }

    .wc-block-cart .wc-block-cart__sidebar {
        order: 2 !important;
        flex: none !important;
    }

    .cart-page,
    .cart-content,
    .wp-block-woocommerce-cart,
    .wc-block-cart {
        max-width: 100% !important;
        overflow-x: hidden;
    }
}

/* Cart items container (left column) - Desktop only card style */
.wc-block-cart__items {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Individual cart item rows */
.wc-block-cart-items__row {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease;
}

.wc-block-cart-items__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wc-block-cart-items__row:first-child {
    padding-top: 0;
}

/* Cart item product image */
.wc-block-cart-item__image img {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Larger image only on the cart PAGE - the mini-cart drawer reuses the same
   class and needs its own (smaller) image size. */
.cart-page .wc-block-cart-item__image {
    width: 88px !important;
    min-width: 88px !important;
}

/* Cart item product name */
.wc-block-cart-item__product-name {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--warm-black);
    text-decoration: none;
    line-height: 1.4;
}

.wc-block-cart-item__product-name:hover {
    color: var(--forest-green);
}

/* Cart item description. `opacity: .7` on --warm-black is the banned opacity-as-colour pattern, and
   0.8rem (12.8px) is under the floor. */
.wc-block-cart-item__product-metadata {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    opacity: 1;
    margin-top: var(--sp-1);
}

/* Cart item prices */
.wc-block-cart-item__prices,
.wc-block-cart-item__total-price {
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    color: var(--warm-black);
    font-size: var(--fs-sm);
}

/* Quantity controls.
   These were 30x27px — the two controls a shopper reaches for most on this page, and the hardest to
   hit. WCAG 2.5.8 wants 24px minimum; 44px is the size a thumb actually lands on. The mobile block
   below used to `transform: scale(0.9)` them, i.e. shrink an already-too-small target on the exact
   device where it matters — that is gone. */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    align-items: stretch;

    /* WooCommerce hard-codes `width: 107px` here. Three 44px controls need 132px, so the "+" button
       was pushed past the right edge of its own box and clipped — at EVERY width, desktop included.
       Grow the box to fit the controls rather than shrinking the controls to fit the box. */
    width: auto !important;
    min-width: 132px;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
    background: transparent;
    color: var(--warm-black);
    border: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
    background: var(--forest-green);
    color: var(--white);
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: -2px;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__input {
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    background: var(--white);
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--fs-sm);
    color: var(--warm-black);
    text-align: center;
}

/* Remove item — a muted trash icon; the text stays in the DOM for screen readers.
   The BOX is 44x44 (a real thumb target); the ICON stays 18px. Growing the hit area does not have to
   mean growing the glyph — that is what the background-size does. It was a 24x24 box, well under the
   44px minimum, on a destructive action. */
.wc-block-cart-item__remove-link {
    display: inline-block !important;
    width: 44px;
    height: 44px;
    font-size: 0 !important;
    line-height: 0;
    color: transparent !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234F5C4E'%3E%3Cpath d='M9 3a1 1 0 0 0-1 1v1H4a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2h-4V4a1 1 0 0 0-1-1H9zm-3 6 1 11a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-11H6z'/%3E%3C/svg%3E") center / 18px no-repeat !important;
    transition: opacity 0.2s ease;
    margin-top: var(--sp-1);
    border-radius: 8px;
    opacity: 1;
}

.wc-block-cart-item__remove-link:hover {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0392b'%3E%3Cpath d='M9 3a1 1 0 0 0-1 1v1H4a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2h-4V4a1 1 0 0 0-1-1H9zm-3 6 1 11a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-11H6z'/%3E%3C/svg%3E") center / 18px no-repeat !important;
    opacity: 1;
}

/* Destructive + icon-only: it MUST be reachable and obvious from the keyboard. */
.wc-block-cart-item__remove-link:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
}

/* NO rule for the cart's <h2> ("Productos en el carrito"), on purpose.
   It looks like a 40px heading competing with the <h1> — I thought it was, and was wrong. It lives
   inside `<caption class="screen-reader-text">`: it is announced to screen readers and never painted.
   Its computed font-size is real but irrelevant, and any audit that trusts `offsetParent` to mean
   "visible" will report it as a live 40px heading, because `.screen-reader-text` is position:absolute.
   Measure the client rect, not offsetParent. */

/* "El envío se calcula al finalizar la compra" — 12.6px, under the floor, and it is the sentence that
   tells the shopper the number above is not final. It should not be the smallest text on the page. */
.wc-block-components-totals-footer-item-tax,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description,
.wc-block-components-totals-item__description {
    font-size: var(--fs-xs) !important;
    color: var(--ink-muted) !important;
    opacity: 1 !important;
}

/* Cart sidebar (order summary) — mismo criterio que el checkout: debajo del header fijo, con respiro.
   Tenía el mismo 100px que se metía 14px bajo el header al scrollear. */
.wc-block-cart__sidebar {
    position: sticky;
    top: calc(var(--sticky-header-h, 114px) + var(--sp-4));
}

.wc-block-cart__totals-title {
    display: none !important;
}

/* Order summary card */
.wp-block-woocommerce-cart-totals-block {
    background: var(--white);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(44, 62, 45, 0.06);
}

/* Spanish summary heading (guarantees the label regardless of WC locale).
   NO border-bottom. This cart has no breakdown rows to show — shipping is calculated at checkout,
   tax is included, coupons are disabled — so the summary goes straight from this heading to the
   total. With an underline here AND the total's 2px rule below it, the card rendered as two
   horizontal lines with an empty white band between them, which reads as a row that failed to load.
   One rule (the total's) is all this card needs. */
.wp-block-woocommerce-cart-totals-block::before {
    content: "Resumen del pedido";
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--warm-black);
    margin-bottom: var(--sp-4);
}

/* Order summary rows.
   These duplicated a later, identical-specificity block further down the file (the checkout's
   `.wc-block-components-totals-item` rules), which silently won on both pages — so the padding and
   weights declared here were dead. Kept minimal and consistent; the later block is the live one. */
.wc-block-components-totals-item:last-child {
    border-bottom: none;
}

/* Shipping info */
.wc-block-components-totals-shipping .wc-block-components-totals-item__description {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    opacity: 1;
}

/* The grand-total row used to be declared HERE as well (forest-green, 1.25rem, forest-green border)
   AND again ~700 lines further down (gold, 1.35rem, warm-black border). Same specificity, so the
   later one won on both pages and everything written here was dead — which is how the total ended up
   gold at 2.2:1 while this block claimed it was forest-green. There is now exactly ONE definition of
   the total; search `.wc-block-components-totals-footer-item`.

   Coupons are disabled site-wide (`woocommerce_enable_coupons = no`), so the coupon form renders
   nothing today. The styles below are kept — minimal and correct — so it does not come back broken if
   coupons are ever switched on. */
.wc-block-components-totals-coupon {
    margin: var(--sp-3) 0;
}

.wc-block-components-totals-coupon__button {
    color: var(--forest-green);
    font-weight: 600;
    font-size: var(--fs-xs);
    min-height: 44px;
}

.wc-block-components-totals-coupon__input {
    border-radius: 6px;
    border: 1px solid var(--line);
    padding: var(--sp-3);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    min-height: 44px;
}

/* This had `outline: none` and NO replacement at all — the one input on the page with no keyboard
   affordance whatsoever. */
.wc-block-components-totals-coupon__input:focus {
    border-color: var(--forest-green);
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
}

/* Checkout button - golden accent */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-button {
    background: linear-gradient(135deg, #C9A961 0%, #B8944D 100%) !important;
    color: var(--warm-black) !important;
    font-family: 'Mulish', sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--fs-sm) !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    width: 100% !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(201, 169, 97, 0.25) !important;
    margin-top: 8px !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
    background: linear-gradient(135deg, #B8944D 0%, #A68540 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.35) !important;
}

/* Keyboard focus ring on the checkout CTA */
.wc-block-cart__submit-button:focus-visible {
    outline: 3px solid var(--forest-green) !important;
    outline-offset: 2px !important;
}

/* Reassurance row under the checkout button.
   Was #7a8a72 at 0.76rem (12.2px) — ~3.4:1, an AA failure, and below the type floor.

   NOTE FOR WHOEVER OWNS THE COPY: this promises "Pago seguro con Mercado Pago", but Mercado Pago is
   NOT an enabled gateway. The only payment method that renders at checkout is Cash on Delivery
   ("Efectivo"). The sentence is currently false; it is left as-is because copy is not a CSS decision. */
.wp-block-woocommerce-proceed-to-checkout-block::after {
    content: "Retiro gratis en local · Pago seguro con Mercado Pago";
    display: block;
    text-align: center;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--ink-muted);
    margin-top: var(--sp-3);
    padding: 0 var(--sp-2);
}

/* Respect reduced-motion: drop the hover lift */
@media (prefers-reduced-motion: reduce) {
    .wc-block-cart__submit-button:hover,
    .wc-block-components-checkout-place-order-button:hover,
    .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
        transform: none !important;
    }
}

/* Continue shopping link */
.wc-block-components-totals-coupon + div a,
.wp-block-woocommerce-cart-totals-block a[href*="shop"] {
    color: var(--forest-green);
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-top: 12px;
    font-size: var(--fs-xs);
}

.wc-block-components-totals-coupon + div a:hover,
.wp-block-woocommerce-cart-totals-block a[href*="shop"]:hover {
    color: var(--golden-accent);
}

/* Empty cart state */
.wp-block-woocommerce-empty-cart-block {
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 0;
}

.cart-empty-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: var(--warm-black) !important;
}

.cart-empty-message {
    font-family: 'Mulish', sans-serif;
    color: var(--ink-muted);
    opacity: 1;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--fs-sm);
}

.cart-empty-cta .wp-block-button__link {
    background: linear-gradient(135deg, #C9A961 0%, #B8944D 100%) !important;
    color: var(--warm-black) !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    border: none !important;
}

.cart-empty-cta .wp-block-button__link:hover {
    background: linear-gradient(135deg, #B8944D 0%, #A68540 100%) !important;
    transform: translateY(-2px) !important;
}

/* New products section in empty cart */
.cart-new-products {
    margin-top: 40px !important;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Shipping options styling */
.wc-block-components-shipping-rates-control {
    margin-top: 8px;
}

.wc-block-components-shipping-rates-control__package {
    background: rgba(245, 240, 232, 0.5);
    border-radius: 6px;
    padding: 10px;
}

/* WooCommerce absolutely positions the radio input at left:16px and reserves 48px of
   left padding for it. This rule must never shrink that padding, or the radio lands on
   top of the label text. Vertical/right padding is ours; the 48px left is not. */
.wc-block-components-radio-control__option {
    padding: var(--sp-3) var(--sp-3) var(--sp-3) 48px;
    border-radius: 6px;
    margin-bottom: var(--sp-2);
    background: var(--white);
    border: 1px solid var(--line);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    font-size: var(--fs-xs);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.wc-block-components-radio-control__option:hover {
    border-color: var(--forest-green);
}

/* This is the GLOBAL radio-card rule — it styles radio controls anywhere on the site (cart
   shipping calculator, My Account), which is why it is unscoped and why it is not simply deleted.

   The `:not()` is load-bearing. `!important` beats every non-important declaration at ANY
   specificity, so without it this 0-1-0 rule would reach into the four checkout card groups and
   overwrite the `--card-bd` edge set by the selected-card system further down this file — the
   selected card would take a --forest-green border on a --forest-green fill and lose its darker
   edge. Scoping it out here keeps the checkout system authoritative over its own cards while
   leaving this rule byte-for-byte identical in behaviour on every other page.

   Do not "simplify" this by dropping the !important instead: it is what makes this rule win
   outside the checkout, and that is not the problem being solved here. */
.wc-block-components-radio-control__option-checked:not(
    .wc-block-checkout__shipping-option *,
    .wc-block-checkout__shipping-method *,
    .wc-block-checkout__pickup-options *,
    .wc-block-checkout__payment-method *
) {
    border-color: var(--forest-green) !important;
    background: rgba(74, 103, 65, 0.03);
}

/* Payment methods icons */
.wc-block-components-payment-method-icons {
    justify-content: center;
    margin-top: 12px;
    opacity: 0.6;
}

/* Fix any blank space issues */
.wc-block-cart,
.wp-block-woocommerce-filled-cart-block,
.wp-block-woocommerce-empty-cart-block {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   CART PAGE - TABLET RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .wc-block-cart .wc-block-cart__main {
        gap: 24px;
    }
}

/* ==========================================================================
   CART PAGE - MOBILE RESPONSIVE (Clean, no-card design)
   ========================================================================== */
@media (max-width: 782px) {
    .cart-title {
        font-size: var(--fs-xl) !important;
        margin-bottom: 20px !important;
    }

    .wc-block-cart .wc-block-cart__main {
        flex-direction: column;
        gap: 0;
    }

    /* Remove card styling on mobile - seamless look */
    .wc-block-cart__items {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    /* The cart line-item layout is NOT here — it is in an `@container` block near the end of the
       file, because WooCommerce lays the row out with a CONTAINER query, not a media query, and the
       two must not disagree. See the comment there. */

    /* Product name */
    .wc-block-cart-item__product-name {
        font-size: var(--fs-xs);
        line-height: 1.3;
    }

    /* The stepper and the remove button belong on ONE line, next to each other. WooCommerce stacks
       them in a column (and hides the remove link entirely on mobile, which the theme overrides), so
       the trash icon was landing on a line of its own, centred under the row, attached to nothing.

       The quantity selector used to be scaled to 0.9 here too — shrinking an already-undersized tap
       target on the one device where it is tapped with a thumb. Both are fixed. */
    .cart-page .wc-block-cart-item__quantity {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--sp-2);
        margin-top: var(--sp-2);
        padding: 0 !important;
    }

    .cart-page .wc-block-cart-item__remove-link {
        margin-top: 0 !important;
        flex: 0 0 auto;
    }

    /* Order summary - card style on mobile */
    .wc-block-cart__sidebar {
        width: 100%;
        position: static;
        margin-top: 24px;
    }

    .wp-block-woocommerce-cart-totals-block {
        background: var(--white);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .wc-block-components-totals-item {
        padding: 8px 0;
        font-size: var(--fs-xs);
    }

    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: var(--fs-md);
    }

    .wc-block-cart__submit-button {
        padding: 14px 20px !important;
        font-size: var(--fs-sm) !important;
    }

    /* Empty cart mobile */
    .wp-block-woocommerce-empty-cart-block {
        padding: 40px 16px;
    }
}

/* ==========================================================================
   CART PAGE - SMALL MOBILE
   ========================================================================== */
@media (max-width: 480px) {
    /* No third gutter here. The cart used to narrow to 20px -> 15px -> 12px across three breakpoints
       while the shop stayed at 16px; the shared shell now owns it. */

    .cart-title {
        font-size: var(--fs-xl) !important;
    }

    /* Smaller product images */
    .wc-block-cart-item__image {
        width: 60px !important;
        min-width: 60px !important;
    }

    .wc-block-cart-item__product-name {
        font-size: var(--fs-xs);
    }

    .wc-block-cart-item__prices {
        font-size: var(--fs-xs);
    }

    /* Tighter summary */
    .wp-block-woocommerce-cart-totals-block {
        padding: 14px;
    }

    .wc-block-cart__submit-button {
        padding: 12px 16px !important;
    }

}

/* ==========================================================================
   CHECKOUT PAGE STYLES
   ========================================================================== */

/* Page wrapper */
.checkout-page {
    background-color: var(--warm-cream);
    min-height: 100vh;
}

/* `.checkout-breadcrumbs` used to be styled here. No template has ever emitted that class — it was
   dead on arrival. The checkout inherits the one global breadcrumb rule like everything else. */

/* Page title */
.checkout-title {
    margin-bottom: 0 !important;
}

/* Progress indicator */
.checkout-progress {
    gap: var(--sp-3) !important;
}

/* `opacity: 0.5` on --warm-black was ~2.4:1 — the upcoming step was unreadable, and this is the
   opacity-as-colour anti-pattern the :root comment bans. Solid, measured token instead. */
.checkout-progress p {
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--ink-subtle);
    opacity: 1;
}

.checkout-progress .progress-step a {
    color: var(--forest-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.checkout-progress .progress-step a:hover {
    color: var(--dark-green);
}

.checkout-progress .progress-step.completed {
    opacity: 1;
}

/* THE CURRENT STEP. It was --golden-accent: 1.98:1 on cream — the "you are here" marker was the
   least readable text on the entire page. It is now the DARKEST and heaviest text in the trail, which
   is what "you are here" should look like. Weight carries the state too, so it does not depend on
   colour alone (WCAG 1.4.1). */
.checkout-progress .progress-step.current {
    opacity: 1;
    color: var(--warm-black);
    font-weight: 700;
}

.checkout-progress .progress-divider {
    opacity: 1;
    color: var(--ink-subtle);
}

/* Trust signals */
.checkout-trust-signals {
    gap: 20px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.checkout-trust-signals p {
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    opacity: 1;
}

.checkout-trust-signals .trust-divider {
    opacity: 1;
    /* --line is a 12%-alpha BORDER token. Using it as a text colour measured 1.23:1 — I made this
       worse before I made it better. It is a visible "|" glyph, so it needs a real text colour. */
    color: var(--ink-subtle);
}

/* ==========================================================================
   CHECKOUT FORM LAYOUT
   ========================================================================== */

/* Checkout container - centered with max width */
/* The checkout's own container adds NO width and NO gutter any more — `.checkout-page` is in the
   shared page shell, so the gutter lives there exactly once.

   It used to be `max-width: 1400px; padding: 0 40px !important`. The 1400px was a third page width
   (shop 1280, cart 1200), and the `!important` on that 40px gutter beat every mobile override below
   it — which is half of why the checkout hung off the side of a phone. */
.checkout-page .checkout-form-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Reduce space between header and form */
.checkout-page .checkout-header-section {
    margin-bottom: 0 !important;
    padding-bottom: var(--sp-6) !important;
}

/* WooCommerce sidebar layout - override flex with grid */
.wc-block-components-sidebar-layout.wc-block-checkout {
    display: grid !important;
    grid-template-columns: 1fr 480px !important;
    gap: var(--sp-8) !important;
    align-items: start !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* THE ONE LINE THAT KEEPS THE CHECKOUT ON THE SCREEN. Do not remove it.

   A `1fr` grid track cannot shrink below its item's MIN-CONTENT width — `minmax(auto, 1fr)` is what
   `1fr` really means, and `auto` floors at min-content. The form column carried 96px of horizontal
   padding, so its min-content never dropped below 401px. The track therefore stayed frozen at
   401.188px no matter how narrow the phone got, and the checkout hung off the right edge:

       320px viewport -> +105px overhang, 127 elements off-screen
       375px          -> +50px,            90 elements
       393px          -> +32px,             8 elements  (the order TOTAL, cut in half)

   And it was invisible to every normal check, because `.wp-site-blocks`, `body` and `html` all set
   `overflow-x: clip`: the overhang is CLIPPED, not scrolled. `document.scrollWidth` stayed exactly
   393 and reported "no overflow" while a third of the form was unreachable.

   `min-width: 0` releases the min-content floor so the track can actually shrink to the container.
   Reducing the padding alone does NOT fix this — it only moves the cliff to a narrower phone. */
.wc-block-components-sidebar-layout > * {
    min-width: 0;
}

/* Main checkout form area.
   There used to be a `padding-right: 0 !important` here, to kill WooCommerce's
   `.wc-block-components-sidebar-layout .wc-block-components-main { padding-right: 4.5283% }`.
   The catch: Woo puts ALL THREE classes on ONE div, so that rule also nuked the form card's own
   32px right padding below — which is NOT !important and therefore lost. The inputs ended up flush
   against the card's right border, with 32px of padding on the left. Desktop only: the mobile
   overrides ARE !important and come later, so they restored a symmetric padding.
   The !important was never needed. Woo's rule is (0,2,0) and NOT !important; the card rule below
   matches at (0,2,0) too and style.css loads after checkout.css, so it already wins on source order.
   Verified in the browser: deleting this line takes the card from 32px/0 to 32px/32px. */
.wc-block-components-sidebar-layout .wc-block-components-main {
    width: 100% !important;
    max-width: none !important;
}

/* Sidebar (order summary) */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100% !important;
    max-width: none !important;
}

/* Form fields column (left).
   The padding is NOT !important any more, and that is deliberate: it used to be
   `padding: 40px 48px !important`, which beat the `@media (max-width: 600px)` rule that was supposed
   to shrink it on phones. So phones kept a 96px horizontal inset — half the second cause of the
   clipping above. Now the media query can actually do its job. */
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block {
    background: var(--white) !important;
    border-radius: 12px !important;
    padding: var(--sp-8) var(--sp-8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

/* Order summary column (right) — sticky ONLY where there is a right rail to be sticky in.
   This used to be unconditional. Below 991px the two columns collapse to one and the summary is moved
   to the TOP (`order: -1`), so `position: sticky` pinned it to the top of the viewport and it rode
   down the screen over the form — a summary panel following you around while you try to type your
   address. Sticky makes sense in a side rail. It makes no sense in a single column. */
@media (min-width: 992px) {
    .wp-block-woocommerce-checkout-totals-block {
        position: sticky;
        /* Debajo del header fijo (que mide ~114px acá) MÁS un respiro, no encima de él. `--sticky-header-h`
           lo publica sticky-header.js con el alto real; el 114px es el fallback por si el JS no cargó. */
        top: calc(var(--sticky-header-h, 114px) + var(--sp-4));
    }
}

.wp-block-woocommerce-checkout-order-summary-block {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   CHECKOUT FORM FIELDS
   ========================================================================== */

/* Section headings — the six steps of the checkout.
   The class is `__title`, NOT `__heading`. The theme styled `.wc-block-components-checkout-step__heading`,
   which WooCommerce does not emit, so that rule matched nothing and the headings fell back to 16.8px:
   barely larger than the 14px body text, leaving the form as one undifferentiated wall. --fs-md (20px)
   gives the steps a rung of their own. */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-md) !important;
    font-weight: 600;
    color: var(--warm-black);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.wc-block-components-checkout-step__description {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    opacity: 1;
    margin-bottom: var(--sp-4);
}

/* ==========================================================================
   THE LABELS COME OUT OF THE BOX

   WooCommerce Blocks ships FLOATING labels: the label sits inside the input and shrinks upward on
   focus. We are replacing them with plain top-aligned labels, and this is the single biggest change
   on the page, so here is the whole argument in one place.

   WHAT THE RESEARCH ACTUALLY SAYS. Not "floating labels are bad" — Baymard is explicit that they
   are UNTESTED ("the design pattern has yet to be extensively tested"). What they do say, and what
   decides it, is that the ERROR STATE is where floating labels break: the label has taken the only
   space the error message could have used. On a checkout, the error state is not an edge case. It
   is the state that decides whether the order happens.

   THE THREE CONCRETE FAILURES WE WERE SHIPPING:
   1. AUTOFILL OVERLAP. The browser fills the field without firing the events the floating label
      listens for, so the label stays parked over the autofilled text. Every returning customer with
      a saved address saw their own street name with "Calle y número" printed on top of it.
   2. NO ROOM FOR ERRORS. See above.
   3. THE 22px/10px PADDING. That asymmetric padding existed ONLY to reserve space for the label. It
      forced a 56px box, and it pushed the label to 14px — the floor, the smallest text we allow —
      because a bigger label did not fit inside the input.

   Woo renders <input> and THEN <label>, so `column-reverse` puts the label on top with zero markup
   changes and zero JS. Everything below is unwinding the absolute positioning that made it float.
   ========================================================================== */

.wc-block-components-text-input,
.wc-block-components-textarea,
.wc-block-components-combobox {
    display: flex;
    flex-direction: column-reverse;   /* label is AFTER the input in the DOM; this lifts it above */
    margin-bottom: var(--form-field-gap);
}

/* `__wrapper` IS NOT DECORATION — without this rule the street field breaks, and only the street.
   The fields are not all the same shape. A plain field is [input, label] directly inside
   `.wc-block-components-text-input`. But the moment the address autocomplete is switched on, Woo
   rebuilds the street field with an extra level — `.wc-block-components-text-input__wrapper` —
   holding [input, label, search-icon]. `column-reverse` on the outer div then had one child (the
   wrapper) to reverse and did nothing, so the label stayed beside the input and hung off the card.

   Rather than another `column-reverse` (whose result depends on the search icon being out of flow),
   this is explicit and cannot regress: the wrapper stacks top-to-bottom and the label is forced
   FIRST with `order: -1`. The search icon is absolutely positioned over the input, so `order` does
   not affect it. */
.wc-block-components-text-input__wrapper {
    display: flex;
    flex-direction: column;
}

.wc-block-components-text-input__wrapper > label {
    order: -1;
}

/* The search icon is absolutely positioned inside the wrapper, and Woo centres it with `top: 50%` on
   the assumption that the wrapper IS the input box. But we moved the label into the wrapper, above the
   input, so the wrapper is now taller and 50% lands between the label and the input — the icon rode
   up toward the top-right. Re-anchor it to the input, which is the wrapper's last child and shares its
   bottom edge: 14px up from the bottom centres the 24px glyph on the ~52px input box. */
.wc-block-components-text-input__wrapper > .wc-block-components-address-autocomplete-icon {
    top: auto;
    bottom: 14px;
    transform: none;
}

/* Form inputs.
   16px is NOT a style choice — it is the threshold below which iOS Safari zooms the page on focus,
   yanking the layout sideways mid-form. The theme only applied 16px below 600px, so every tablet and
   small laptop still got 15.2px and still zoomed. It is 16px at every width now.

   The padding is symmetric now that nothing floats into it, and the box drops 56px -> 48px: still
   over every touch-target floor (WCAG 24, Apple 44, Material 48) and less lanky. */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox .components-form-token-field__input-container {
    font-family: 'Mulish', sans-serif !important;
    font-size: var(--fs-sm) !important;
    border: var(--input-border-w) solid var(--line) !important;
    border-radius: 8px !important;
    padding: var(--input-padding-y) var(--input-padding-x) !important;
    background: var(--white) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
    min-height: var(--input-min-height) !important;
    color: var(--warm-black) !important;
}

/* A REAL focus ring. This was `box-shadow: 0 0 0 3px rgba(74,103,65,.1)` — a 10%-alpha ring on white,
   i.e. effectively invisible — behind an `outline: none`. That was the only keyboard affordance on
   every field of the checkout. The site's standard ring is a solid 2px outline; use it. */
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus,
.wc-block-components-combobox .components-form-token-field__input-container:focus-within {
    border-color: var(--forest-green) !important;
    outline: var(--focus-ring-w) solid var(--forest-green) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Labels. Top-aligned, always visible, 16px.

   They were 12px, then 14px (the floor). Both were consequences of the floating label, not choices:
   the label had to fit INSIDE the input, so it could not be body-sized. Outside the box it can be,
   and the text telling the shopper what to type is no longer the smallest text on the page.
   GOV.UK's `.govuk-label` is 16px mobile / 19px desktop; 16px is the safe floor.

   The floating geometry (`position: absolute`, `top`, `transform`) is unwound here — `static` is what
   takes the label out of the box and lets `column-reverse` above put it on top. `transform: none` is
   what stops it shrinking on focus.

   `.wc-blocks-components-select__label` is in this list because the COUNTRY and STATE fields render as
   <select>s, and they carry a different class from the text inputs. This only showed up on production:
   locally those two fields render as plain text inputs, so the select label never appeared. Local
   parity is not the same thing as production truth. */
.wc-block-components-text-input label,
.wc-block-components-textarea label,
.wc-blocks-components-select__label,
.wc-block-components-combobox label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 var(--form-label-gap) 0 !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.4 !important;
    color: var(--warm-black) !important;
    font-weight: 600 !important;
    /* Woo animates the float; there is nothing left to animate, and a transition on a static label
       just makes it flicker when React re-renders the field. */
    transition: none !important;
}

/* Woo marks the "label is floated up" state with .is-active on the wrapper and restyles the label
   from there. There is no floated and un-floated state any more — the label is always up. Kill both
   halves so an .is-active toggle cannot shrink it back down mid-typing. */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-block-components-textarea.is-active label {
    transform: none !important;
    font-size: var(--fs-sm) !important;
}

/* Two bits of small print WooCommerce ships below the floor, both of which say something the shopper
   needs: "you are checking out as a guest" (13px) and the shipping placeholder (12.25px). */
.wc-block-checkout__guest-checkout-notice,
.wc-block-checkout__guest-checkout-notice *,
.wc-block-components-shipping-placeholder,
.wc-block-components-shipping-placeholder__value,
.wc-block-components-shipping-rates-control__no-results-notice {
    font-size: var(--fs-xs) !important;
    color: var(--ink-muted) !important;
    opacity: 1 !important;
}

/* "Volver al carrito" — a real escape hatch out of the checkout, and it was a 20px-tall target on a
   phone. WooCommerce classes it as a `...__button`, so treat it like one. */
.wc-block-components-checkout-return-to-cart-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-xs);
    color: var(--forest-green);
}

.wc-block-components-checkout-return-to-cart-button:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Checkout sections spacing. One step is one decision; they need to read as separate things. */
.wc-block-components-checkout-step {
    margin-bottom: var(--form-section-gap);
    padding-bottom: var(--sp-6);
}

/* Address fields — the vertical rhythm goes on the form's DIRECT CHILDREN. Nowhere else.

   Two wrong assumptions died here; both are worth writing down because both LOOK right.

   1. `.wc-block-components-address-form` looks like a grid. It is a FLEX row-wrap whose gap is
      `0 12px` — the ROW gap is ZERO. Woo never uses the gap for vertical rhythm; it puts
      `margin-bottom` on each field. So zeroing that margin "because the gap will handle it" removes
      the only thing that was handling it. Measured result: 0px between every field.

   2. The margin cannot live on `.wc-block-components-text-input` either, because the fields are not
      all at the same depth. Once the address autocomplete is on, Woo WRAPS the street input in
      `...-autocomplete-container`, so the flex child is the container and the text-input is one level
      down — its margin no longer separates it from the next field. Measured result: 32, 12, 28, 32,
      12 — a different gap almost every row.

   So: the margin goes on `> *`, which is the row, whatever kind of control the row happens to hold.
   Woo's own rule is (0,2,0), so the class-qualified selectors below exist purely to match that
   specificity and win on source order.

   And the margin-BOTTOM is not enough on its own: Woo also hangs a margin-TOP on some rows (measured
   16px, 12px, 12px, 16px...), so the real gap came out as 20+12 and 20+16 — a 4px wobble down the
   form. One place owns the rhythm. The top margins are zeroed. */
.wc-block-components-address-form > * {
    margin-top: 0;
    margin-bottom: var(--form-field-gap);
}

.wc-block-components-address-form > .wc-block-components-text-input,
.wc-block-components-address-form > .wc-block-components-checkbox,
.wc-block-components-address-form > .wc-block-components-textarea,
.wc-block-components-address-form > .wc-block-components-address-autocomplete-container {
    margin-top: 0;
    margin-bottom: var(--form-field-gap);
}

/* The street input is nested inside the autocomplete container now. The container owns the rhythm;
   the input must not add a second margin on top of it. */
.wc-block-components-address-autocomplete-container .wc-block-components-text-input {
    margin-bottom: 0;
}

/* Checkbox and radio.
   The INPUT itself stays at WooCommerce's 20px — it fights back hard, and it does not matter: the
   LABEL below is 44px tall and is tied to the input, so the whole row is the tap target. WCAG 2.5.8
   measures the actionable region, not the painted square. You do not need to draw a giant checkbox to
   get a giant hit area — which is why there is no width/height override here (an earlier version of
   this rule claimed `width: 24px` and never won; a declaration that loses is just a lie in the file). */
.wc-block-components-checkbox__input {
    accent-color: var(--forest-green);
    cursor: pointer;
}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--warm-black);
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Vertically centre the box against its text. The <label> that wraps the checkbox and its text is
   Woo-default `align-items: flex-start`, so the 20px box pinned to the TOP while the text sat centred
   in the 44px tap-target span above — the box floated above the text. Centring the label's items lines
   the box up with the middle of the text. */
.wc-block-components-checkbox label {
    align-items: center;
}

/* Neither had any focus style at all. */
.wc-block-components-checkbox__input:focus-visible,
.wc-block-components-radio-control__input:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
}

/* ==========================================================================
   ONE SELECTED CARD, THREE PLACES
   REPLACES style.css 4732-4763 (base / :hover / __option-checked),
            style.css 4765-4772 (the dead dot-centring rule — see below),
            style.css 4774-4784 (the Mercado Pago accordion-content padding), and
            style.css 5080-5134 (the stray prose + the whole Enviar/Retiro block).
   Also EDIT style.css 4700-4705: drop `.wc-block-components-radio-control__input` from that
   selector list and leave `accent-color` on the checkbox alone. It is not outranked there, it is
   NEUTRALISED — Woo sets `appearance:none` on the radio at 0-2-0 and draws its own circle, so
   there is no native widget left to tint. A declaration that cannot take effect is a lie in the
   file whether it lost a cascade or never had one to lose.

   THE COMPLAINT: "no se identifica la opción elegida". Correct, and the reason is that the page
   was speaking three languages, two of which the theme never authored:
     1. Enviar/Retiro    — white card + 2px NEAR-BLACK border, sitting on a grey track.
     2. Opciones de envío — 1px green border + a BLACK radio dot + a near-black inset ring.
     3. Opciones de pago  — no border at all (Woo zeroes it), just a 5% tint + that same ring.

   THE FIX IS ONE SENTENCE, worn by every option in every group, in BOTH states:
     selected  = solid --forest-green card, white 700-weight type, and the circle before the
                 option's name filled white with a green tick.
     unselected= white card, 2px --line-idle edge (deliberately quieter than the ring inside it,
                 so the chosen card wins the row at a glance), the same circle sitting empty.
   Five channels — fill, edge, weight, text colour, and ring→disc+tick. Hue carries none of them
   on its own (WCAG 1.4.1), which is what makes the single-option case legible.

   THE ARCHITECTURE, and it is the load-bearing idea:
   Each group gets ONE high-specificity PAINT rule that claims background-color / border /
   box-shadow / color / padding above every Woo selector aimed at that element, and those
   declarations read `--card-*` custom properties. All state logic below does nothing but FLIP
   those properties. Woo never sets `--card-*`, so the layer that changes most often has NO
   cascade contest at all, and Woo's hover, focus-within, selected and highlight-checked paint
   are each retired by one declaration instead of nine skirmishes.
   Specificity is stated wherever it is contested. No `!important` except the one place a plugin
   forces it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DEFAULTS — the idle card.
   `:where()` contributes ZERO specificity on purpose: these are defaults, not claims, so every
   state rule below outranks them by existing and I never have to reason about ordering here.
   -------------------------------------------------------------------------- */
:where(
    .wc-block-checkout__shipping-method-option,
    .wc-block-checkout__shipping-option .wc-block-components-radio-control__option,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control__option,
    .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option
) {
    --card-bg:       var(--white);
    --card-bd:       var(--line-idle);        /*  3.02:1 sobre crema — apagado a propósito */
    /* 1px, Y NO los 2px de --input-border-w.
       Acá había una cita a govuk ($govuk-border-width-form-element: "a 1px border is not reliably
       perceivable") que en este caso no aplica, y sostenerla costaba caro: un borde de 2px que
       ENCIERRA una tarjeta blanca es el gesto universal de "ésta es la elegida". La tarjeta no
       elegida se leía como elegida, que es exactamente el problema que este bloque vino a
       resolver.
       La cita habla del borde de un INPUT, donde el borde es lo único que marca el control. Acá
       no lo es: la tarjeta trae ícono, etiqueta, un anillo de radio y relleno blanco contra el
       crema de la página. Y el estado elegido no se apoya en el borde en absoluto — es un relleno
       --forest-green macizo con texto blanco y disco con tilde.
       El contraste NO depende del ancho, así que esto no toca WCAG 1.4.11: el borde sigue
       midiendo 3.02:1 sobre crema. Y el ancho es el mismo en los tres estados, así que elegir una
       tarjeta no corre nada de lugar. En forced-colors la elegida sigue saltando a 4px (§ al
       final del archivo), y contra 1px la diferencia es todavía más clara. */
    --card-border-w: 1px;
    --card-fg:       var(--warm-black);       /* 11.45:1 on white */
    --card-fg-2:     var(--ink-muted);        /*  7.06:1 on white — price, delivery time */
    --card-weight:   500;
    --card-mark-bd:  var(--line-strong);      /*  3.74:1 on white — the empty ring */
    --card-mark-bg:  transparent;
    --card-mark-img: none;
}

/* --------------------------------------------------------------------------
   2. HOVER — a nudge, never a state. Deliberately the OPPOSITE direction from selected: hover
   tints, selected fills. A moused-over unselected card must never be mistakable for the chosen
   one; that confusion is half the original complaint.
   Group 3 hovers the LABEL, not the wrapper — the wrapper contains the entire Mercado Pago form,
   so hovering the expanded form would repaint the header.
   -------------------------------------------------------------------------- */
.wc-block-checkout__shipping-method-option:hover,                                        /* 0-2-0 */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover,     /* 0-3-0 */
.wc-block-checkout__pickup-options .wc-block-components-radio-control__option:hover,      /* 0-3-0 */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option label.wc-block-components-radio-control__option:hover {   /* 0-4-1 */
    --card-bg:      rgba(74, 103, 65, 0.05);
    --card-bd:      var(--forest-green);
    --card-mark-bd: var(--forest-green);
}

/* --------------------------------------------------------------------------
   3. SELECTED — the one state that has to be readable at a glance.
   Every selector here is written STRICTLY ABOVE its own :hover twin above, so hovering the card
   you already chose cannot wash it out.
   -------------------------------------------------------------------------- */

/* Group 1. 0-3-0: beats Woo's doubled-class selected rule (0-2-0) outright — no source-order
   tie-break needed, unlike the theme's old 0-1-0 which could never win at all — and beats this
   file's own :hover at 0-2-0. */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected,
/* Groups 2 + pickup. 0-3-1, over this file's :hover at 0-3-0. */
.wc-block-checkout__shipping-option .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked,
.wc-block-checkout__pickup-options .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked,
/* Group 3, on the WRAPPER — its border AND (by inheritance) its header label both read these.
   0-3-0, over Woo's highlight rules at 0-2-0 / 0-2-1. */
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    --card-bg:       var(--forest-green);
    --card-bd:       var(--dark-green);
    --card-fg:       var(--white);           /* 6.35:1 on --forest-green */
    --card-fg-2:     var(--warm-cream);      /* 5.60:1 on --forest-green */
    --card-weight:   700;
    --card-mark-bd:  var(--white);
    --card-mark-bg:  var(--white);
    --card-mark-img: var(--card-check);      /* green tick on white disc, 6.35:1 */
}

/* Group 3, second route to the same state, in its OWN rule rather than appended to the list
   above: a pre-2022 parser that does not understand `:has()` discards the entire selector list
   it appears in, which would have taken the other four selectors with it. Woo passes
   highlightChecked:true for payment today, so the rule above is what fires; this one is the
   belt-and-braces if Woo ever stops. 0-4-0. */
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
    --card-bg:       var(--forest-green);
    --card-bd:       var(--dark-green);
    --card-fg:       var(--white);
    --card-fg-2:     var(--warm-cream);
    --card-weight:   700;
    --card-mark-bd:  var(--white);
    --card-mark-bg:  var(--white);
    --card-mark-img: var(--card-check);
}

/* Hovering the card you already chose still has to respond, or the card feels dead.
   Each selector is its own state rule's specificity + :hover, so it wins both contests.
   White on --dark-green = 7.71:1. */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected:hover,   /* 0-4-0 */
.wc-block-checkout__shipping-option .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked:hover,       /* 0-4-1 */
.wc-block-checkout__pickup-options .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked:hover,        /* 0-4-1 */
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted label.wc-block-components-radio-control__option:hover {  /* 0-5-1 */
    --card-bg: var(--dark-green);
    --card-bd: var(--dark-green);
}

/* --------------------------------------------------------------------------
   4. PAINT — the only rules here that touch real properties. One per group, each pitched above
   everything WooCommerce aims at that element. This is where the cascade is won, once.
   -------------------------------------------------------------------------- */

/* GROUP 1 — the Enviar / Retiro toggle. 0-3-0 (2 classes + [role]).
   Woo's ceiling on this element is 0-2-0, in three rules that are now all unreachable:
     `.…-option.…-option--selected            { background:#fff; border:2px solid }`
     `.…-option:focus-within, .…-option:hover { background-color: color-mix(currentColor 12%) }`
   That :focus-within rule mattered and nobody had named it: the old file answered only :hover, so
   after a MOUSE CLICK the card kept focus-within and Woo washed the just-selected card 12% grey —
   clicking made it LESS distinct. Claiming `background-color` at 0-3-0 retires it.
   `color` is pinned explicitly rather than left at Woo's #2b2d2f because THREE things downstream
   read currentColor: the mode icon (`fill: currentColor`), Woo's hover wash, and Woo's colourless
   `border: 2px solid` shorthand. Owning `color` flips the truck/store glyph to white for free.
   The `border` SHORTHAND, not `border-color`, so the currentColor reset cannot leak back in. */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option[role="radio"] {
    flex: 1 1 0;
    min-height: 72px;              /* whole card is the target; room for name over price */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    border: var(--card-border-w) solid var(--card-bd);
    border-radius: var(--card-radius);
    background-color: var(--card-bg);
    color: var(--card-fg);
    box-shadow: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* GROUPS 2 + PICKUP — the shipping rates. 0-3-1.
   Woo's ceiling on this <label> box is 0-2-0 (the highlight-checked box-shadow + border-radius);
   its 0-3-0 and 0-4-0 rules in this area all target `:after` or `__input`, not the label itself.
   `box-shadow: none` here is what kills Woo's `inset 0 0 0 1.5px currentColor` selected ring —
   one declaration, one winner, rather than a separate neutralising rule.
   padding-left drops from 52px to 24px because the native radio is hidden below and the mark is
   now inline in the label. margin-bottom is 12px, not 8px: the focus ring bleeds 7px and at 8px
   the ring of one card touched the border of the next. */
.wc-block-checkout__shipping-option .wc-block-components-radio-control label.wc-block-components-radio-control__option,
.wc-block-checkout__pickup-options .wc-block-components-radio-control label.wc-block-components-radio-control__option {
    position: relative;
    min-height: 44px;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-3);
    border: var(--card-border-w) solid var(--card-bd);
    border-radius: var(--card-radius);
    background-color: var(--card-bg);
    color: var(--card-fg);
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* GROUP 3 — the payment card's OUTLINE, on the wrapper <div>, not on the <label>. 0-3-1.
   Two reasons, both structural:
     (a) The label cannot hold a border at all. Woo ships
         `.wc-block-checkout__payment-method .…-accordion-option .…__option { border-width: 0 }`
         at 0-3-0, which beat the old base rule's `border: 1px solid var(--line)` shorthand on the
         width component — so `border-color: forest-green !important` at 4760 was painting colour
         onto a zero-width edge. There was never a border on the payment card.
     (b) That zeroing is not a bug, it is Woo telling us which element is the card. The accordion
         CONTENT — Mercado Pago's whole form — is a SIBLING of the label inside this div. Border
         the label and the gateway form hangs outside the card.
   The wrapper's own fill stays --white in every state: the green belongs to the header strip
   only, see the next rule. `box-shadow: none` beats Woo's 0-2-0 ring on this element too.
   NO `overflow: hidden` here, deliberately: Mercado Pago's Andes installment selector is an
   absolutely-positioned dropdown rendered from inside the accordion content and would be clipped
   at the card edge — a conversion stop, not a cosmetic issue. The content div rounds its own
   bottom corners instead, below. */
.wc-block-checkout__payment-method .wc-block-components-radio-control div.wc-block-components-radio-control-accordion-option {
    position: relative;
    margin-bottom: var(--sp-3);
    border: var(--card-border-w) solid var(--card-bd);
    border-radius: var(--card-radius);
    background-color: var(--white);
    box-shadow: none;
    transition: border-color 0.2s ease;
}

/* GROUP 3 — the header strip. This is the part that turns green, and it stops exactly where
   Mercado Pago's markup begins. Not a compromise: mp-plugins-components.min.css forces
   `.mp-checkout-custom-container { background-color:#fff!important }`,
   `.mp-checkout-pro-content { background:#fff }` and
   `.mp-checkout-redirect-v3-container { background-color:#f5f5f5!important }`, so a card-wide
   tint would be punched through by a hard white block halfway down and read as a rendering fault.
   A green header over white content reads as a titled panel, which is what it is. No !important
   needed: those MP rules sit on DESCENDANTS, not on this element.
   0-4-1, and the fourth class is LOAD-BEARING. Woo ships
     `.wc-block-checkout__payment-method .wc-block-components-radio-control.disable-radio-control
      .wc-block-components-radio-control__option { padding-left:16px }`
   which is FOUR classes = 0-4-0 (I counted it in the shipped file; the handoff recorded 0-3-0).
   A 0-3-1 rule here would silently lose the gutter and drop the mark onto the gateway name — and
   intermittently, because Woo adds `disable-radio-control` only while there is exactly one
   gateway and no saved tokens, i.e. exactly today.
   Woo's `border-width:0` on this label is left alone: the border belongs to the parent now. */
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option label.wc-block-components-radio-control__option {
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
    background-color: var(--card-bg);
    color: var(--card-fg);
    /* El radio de un hijo que va PEGADO al borde del padre es el del padre MENOS el grosor del
       borde. Se deriva de --card-border-w y no se escribe a mano: acá decía "- 2px", que era
       correcto mientras el borde medía 2px, y quedó desfasado en el momento en que el borde pasó
       a 1px. Un hijo 1px más cerrado que el arco del padre deja ver el arco por debajo, y las
       esquinas se leen como recortadas. Derivándolo, se corrige solo — también en forced-colors,
       donde el borde salta a 4px. */
    border-radius: calc(var(--card-radius) - var(--card-border-w))
                   calc(var(--card-radius) - var(--card-border-w)) 0 0;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* LA ETIQUETA SOLA TIENE QUE CERRAR LA TARJETA.
   La regla de arriba deja las esquinas de abajo en 0 porque da por sentado que abajo va el panel
   del acordeón, que es el que pone la curva inferior. Eso vale SÓLO para la opción elegida:
   WooCommerce no renderiza el panel para las demás. Verificado en el DOM de producción — la
   tarjeta elegida tiene [label, accordion-content] y la no elegida tiene [label] y nada más.
   Sin panel, la etiqueta —de esquinas rectas y fondo opaco— queda a 1px del fondo del envoltorio
   y le pinta encima los dos arcos de abajo: las esquinas se ven recortadas y el borde inferior
   queda como una raya suelta.
   `:last-child` es exactamente esa condición y no necesita `:has()`. Suma 0-5-1, así que gana por
   especificidad sobre la regla de pintado de arriba (0-4-1) sin depender del orden. */
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option label.wc-block-components-radio-control__option:last-child {
    border-radius: calc(var(--card-radius) - var(--card-border-w));
}

/* --------------------------------------------------------------------------
   5. NEUTRALISE THE CHROME THE PAINT RULES CANNOT REACH.
   A paint rule owns properties; it cannot switch off a pseudo-element. These three all belong to
   Woo's GROUPED-LIST design — a stack of flush rows sharing one outline — which is wrong for
   discrete, gapped, bordered cards. With a single shipping rate they drew two concentric
   rectangles around one card.
   -------------------------------------------------------------------------- */

/* The 1px box around the WHOLE control. 0-2-1 beats Woo's `.…--highlight-checked:after` at
   0-1-1. (Woo's `--first-selected` / `--last-selected` margin tweaks hang off this `:after` and
   become inert with it — expected, not broken.) */
.wc-block-checkout__shipping-option .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__pickup-options .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after {
    content: none;
}

/* The hairline Woo draws on the top edge of each option. Note it is already suppressed on
   `:first-child`, so it only ever hit the 2nd card onward — the brief overstated this by one.
   It still cuts across our 8px radius wherever there IS a second option.
   0-3-0 / 0-3-1 beats Woo's 0-2-0 / 0-2-1. */
.wc-block-checkout__shipping-option .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.wc-block-checkout__pickup-options .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after {
    content: none;
}

/* The segmented-control TRACK behind Enviar/Retiro:
     `.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container
      { background-color: color-mix(in srgb, currentColor 6%, transparent); padding:4px; gap:4px }`
   THIS is the actual root of the inverted figure-ground. Woo's design is "selected = the white
   chip that pops off a grey track"; this theme paints both chips cream, so the track made the
   UNSELECTED card read as raised. Kill the track and all three groups share one ground.
   0-2-0, matching Woo exactly and won on SOURCE ORDER — which is proven, not assumed: the idle
   card already renders with this file's fill AND its border colour, two independent declarations
   beating Woo's `transparent`/`transparent` at an identical 0-1-0 tie.
   This is also where the `gap` that the STEP 0 parse error was swallowing finally lands, and it
   has to be here at 0-2-0 because Woo's `gap:4px` is 0-2-0 too. `flex-wrap: wrap` is folded in
   from the old rule at 5132: the two cards stay side by side so pickup can be compared against
   delivery (Baymard: 60% of subjects miss store pickup when it is not presented as an
   alternative), and wrap only if the text genuinely cannot fit. */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container {
    background-color: transparent;
    padding: 0;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   6. THE MARK — one 18px circle, immediately before the option's name, in all three groups.
   Hollow when unselected, filled white with a green tick when selected.

   It is drawn in BOTH states on purpose. An indicator that only appears once chosen teaches
   nothing before the shopper chooses — and with a single, pre-selected option there is no
   "before" to compare against. Drawing it in both states also means selecting reflows nothing,
   and it is the SHAPE change (ring → disc) that survives greyscale, colour-blindness and
   Windows High Contrast, where our fill and our tick are both discarded.

   `display: block` is declared even though a flex item is blockified anyway — it removes the
   coupling to `.wc-block-components-radio-control__label { display: flex }` at line ~4706. If
   that unrelated rule is ever edited, the mark must not silently become a zero-size inline box.
   -------------------------------------------------------------------------- */
.wc-block-checkout__shipping-method-option-title-wrapper::before,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label::before,
.wc-block-checkout__pickup-options .wc-block-components-radio-control__label::before,
.wc-block-checkout__payment-method .wc-block-components-radio-control__label::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--card-mark-size);
    height: var(--card-mark-size);
    margin-right: var(--card-mark-gap);
    border: 2px solid var(--card-mark-bd);
    border-radius: 50%;
    background-color: var(--card-mark-bg);
    background-image: var(--card-mark-img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    pointer-events: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Group 1's title wrapper is Woo's `flex-wrap:nowrap; align-items:flex-start; gap:4px` at 0-1-0.
   Adding an 18px mark + 10px gap to a nowrap row would squeeze "Retiro en local" on a 360px
   half-width card. 0-1-0, won on the same proven source order as the track above. */
.wc-block-checkout__shipping-method-option-title-wrapper {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
}

/* Hide Woo's own radio dot — but only its APPEARANCE. Woo replaces the native widget with
   `appearance:none` and paints its checked dot solid BLACK (`:checked:before { background:#000 }`),
   which was the third selection language on this page and sits 20px from our mark. One card must
   carry one mark.
   `opacity`, NOT `display:none`: the input stays in the box tree, stays focusable, stays
   hit-testable, so tab order and assistive-technology semantics are completely untouched.
   Nothing in Woo or any plugin sets `opacity` on this element, so there is no contest at any
   specificity. Payment is included so that adding a second gateway — which makes Woo drop
   `disable-radio-control` and un-hide the input — cannot bring a black dot back.
   This is what makes the `accent-color` line at 4702 finally honest to delete. */
.wc-block-checkout__shipping-option .wc-block-components-radio-control .wc-block-components-radio-control__input,
.wc-block-checkout__pickup-options .wc-block-components-radio-control .wc-block-components-radio-control__input,
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__input {
    opacity: 0;
}

/* DELETED, not rewritten: style.css 4765-4772 centred the radio dot at 0-2-0 and lost to
   `.wc-block-components-radio-control .wc-block-components-radio-control__input
    { top:16px; transform:none }` — same 0-2-0, later in Woo's own file — plus the 0-4-0
   package and local-pickup twins. It never applied. With the input now invisible there is
   nothing left to centre, so the honest move is to stop claiming to fix it. */

/* --------------------------------------------------------------------------
   7. TYPE — channels (c) and (d).
   Weight is the channel that survives a black-and-white printout. Woo sets `font-weight: inherit`
   on group 1's title at 0-1-0, and `.…-shipping-rates-control__package .…__label { font-weight:500 }`
   at 0-2-0; these are 0-2-0 / 0-3-0 and win both. Both states are declared explicitly so the
   weight can never be inherited from somewhere unexpected and shift on selection.
   -------------------------------------------------------------------------- */
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-title,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label,
.wc-block-checkout__pickup-options .wc-block-components-radio-control__label,
.wc-block-checkout__payment-method .wc-block-components-radio-control__label {
    font-weight: var(--card-weight);
    color: var(--card-fg);
}

/* EL PRECIO NO SE LLEVA LA MITAD DE LA TARJETA.
   Woo le da a la columna del precio `flex: 0 0 50%`, o sea la mitad exacta del ancho, tenga el
   contenido que tenga. Con «gratis» —51px— eso reserva 158px de una tarjeta de 316px y deja al
   nombre 130px útiles una vez descontada la marca. En un teléfono, «Retiro en local - Almacen
   Saludable Rosario» caía a TRES renglones mientras al lado sobraban 107px vacíos.
   Con `0 0 auto` el precio ocupa lo que mide y le devuelve el resto al nombre: dos renglones en
   vez de tres, y la tarjeta baja de 162px a 146px. Vale en todos los anchos, no sólo en el
   teléfono — la mitad fija estaba de más también en escritorio. */
.wc-block-checkout__pickup-options .wc-block-components-radio-control__secondary-label,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-label {
    flex: 0 0 auto;
    margin-left: var(--sp-3);
    text-align: right;
}

/* LA MARCA VA EN EL PRIMER RENGLÓN, NO FLOTANDO EN EL MEDIO.
   El nombre es un contenedor flex con `align-items: center`, así que con un nombre de dos o tres
   renglones la marca quedaba centrada contra todo el bloque: a media altura, sin relación visible
   con el texto. Se alinea arriba, y el 1px de margen la centra ópticamente contra la primera
   línea (disco de 18px sobre una caja de línea de 20px). */
.wc-block-checkout__pickup-options .wc-block-components-radio-control__label,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label {
    align-items: flex-start;
}

.wc-block-checkout__pickup-options .wc-block-components-radio-control__label::before,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label::before {
    margin-top: 1px;
}

/* The price and the delivery-time line. --warm-cream on --forest-green = 5.60:1 — over 4.5:1, and
   half a step quieter than the name so the hierarchy inside the card survives the fill.
   A SOLID token, not rgba(255,255,255,0.85): see the --ink-muted note above. */
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-price,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-label,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__description,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-description,
.wc-block-checkout__pickup-options .wc-block-components-radio-control__secondary-label,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option label.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label {
    color: var(--card-fg-2);
}

/* The pickup point's ADDRESS line needs its own rule, and this is not tidiness — it is a WCAG
   failure if you skip it. Measured in the browser on the filled card: #757575 on --forest-green
   is 1.38:1. The address of the shop you are collecting from was effectively invisible.

   Why the obvious selector loses: Woo colours that line with
     `.wc-block-checkout__pickup-options .wc-block-components-local-pickup-rates-control
      .wc-block-components-radio-control__description { color: #757575 }`
   which is 0-3-0. Listing `.wc-block-checkout__pickup-options .…__description` above would be
   0-2-0 and lose — the same trap that made the old 4761 `!important` paint a zero-width border.
   So we name `.wc-block-components-local-pickup-rates-control` too: 0-3-0, a tie, and this sheet
   loads later (functions.php:35, priority 100). Re-measured after the fix: 5.60:1.

   The shipping-rates twin is included pre-emptively. Woo scopes the equivalent grey to
   `.wc-block-components-shipping-rates-control__package`, so it needs the same 0-3-0 treatment
   the day a rate ever carries a description. */
.wc-block-checkout__pickup-options .wc-block-components-local-pickup-rates-control .wc-block-components-radio-control__description,
.wc-block-checkout__pickup-options .wc-block-components-local-pickup-rates-control .wc-block-components-radio-control__secondary-description,
.wc-block-checkout__shipping-option .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__description,
.wc-block-checkout__shipping-option .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__secondary-description {
    color: var(--card-fg-2);
}

/* EL ALFILER DE LA DIRECCIÓN, A LA MEDIDA DEL TEXTO QUE ACOMPAÑA.

   Woo lo manda con `width="16" height="16"` sobre un `viewBox` de 24×24, y el dibujo ocupa
   17.3 de esas 24 unidades de alto. O sea que el alfiler se veía a 16 × 17.3/24 = 11.5px al lado
   de un texto de 14.4px: no leía como un ícono, leía como una mancha.

   Y encima se ACHICABA. La línea de la dirección es un contenedor flex y el SVG entraba con
   `flex: 0 1 auto`, así que con una dirección de dos renglones el ícono cedía ancho antes que el
   texto: medido, 11px de ancho contra los 16px que declara su propio atributo. `0 0 auto` es lo
   que corresponde para un ícono — no es contenido elástico.

   A 20px el dibujo mide 20 × 17.3/24 = 14.4px, exactamente la altura del texto.

   `align-self: flex-start` porque la línea está centrada: contra una dirección de dos renglones
   el alfiler quedaba flotando en el medio, sin señalar ninguno de los dos. Va con el primero,
   que es donde empieza la calle. */
.wc-block-checkout__pickup-options .wc-block-components-radio-control__description > svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    align-self: flex-start;
}

/* The Mercado Pago logo is a fixed-colour raster (Woo constrains it to height:24px) drawn for a
   white ground, and we are not permitted to recolour a payment brand's mark. So we do not try:
   it keeps its own white chip inside the green strip and renders at exactly the contrast its
   owner designed. 0-5-1 beats Woo's `.…-accordion-option .…__label img` at 0-3-1. */
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted label.wc-block-components-radio-control__option .wc-block-components-radio-control__label img {
    background: var(--white);
    border-radius: 4px;
    padding: 3px 6px;
    box-sizing: content-box;
}

/* The accordion content, closing the card off under the green header. Mercado Pago
   (mp-plugins-components.min.css) forces
   `.wc-block-components-radio-control-accordion-content { padding: 2px !important }` at 0-1-0,
   which outranks WooCommerce's own `0 16px 16px` and every non-!important rule here — the
   gateway form was landing on top of the card's edge. This `!important` exists ONLY to beat that
   one plugin declaration. The bottom radius is here rather than an `overflow: hidden` on the
   wrapper so MP's installment dropdown is not clipped.

   EL PADDING ES SIMÉTRICO, Y AHÍ NOS APARTAMOS DE WOO A PROPÓSITO. Woo trae `0 16px 16px`: sin
   nada arriba, porque su diseño es una lista de filas al ras donde el aire de arriba lo pone la
   fila anterior. Acá arriba no hay una fila, hay una cabecera verde maciza, así que con el cero
   el texto quedaba pegado al borde donde termina el verde y el panel se leía torcido. Con 16px
   arriba y abajo el texto queda centrado por construcción, y el panel mide lo mismo que la
   cabecera (una línea + 32px), que es lo que empareja la tarjeta. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
    padding: var(--sp-4) !important;
    background: var(--white);
    /* Mismo criterio que la etiqueta de arriba: radio del padre menos el grosor del borde. */
    border-radius: 0 0 calc(var(--card-radius) - var(--card-border-w))
                       calc(var(--card-radius) - var(--card-border-w));
}

/* --------------------------------------------------------------------------
   8. FOCUS. The ring goes on the CARD, never inside it: on a selected card the fill is the same
   green as the ring. `outline-offset: 4px` leaves a transparent gap showing the page, so both
   edges of the ring neighbour --warm-cream at 5.60:1 in every state.
   Group 1 is not optional here — Woo declares `outline: none` in its
   `.…-option:focus-within, .…-option:hover` rule at 0-2-0, so this 0-4-0 rule is the ONLY thing
   keeping keyboard focus visible on the toggle. Do not weaken it.
   -------------------------------------------------------------------------- */
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option[role="radio"]:focus-visible {
    outline: var(--focus-ring-w) solid var(--forest-green);
    outline-offset: var(--card-focus-offset);
}

/* Groups 2/3: the focusable element is the input we just made transparent, so the ring has to be
   hoisted to its card. Own rule, not appended to the one above, so a pre-`:has()` parser cannot
   discard group 1's ring along with it.
   PAYMENT IS DORMANT, NOT DEAD: while Woo's `disable-radio-control` is on — exactly the current
   single-gateway state — it sets `display:none` on the payment input, which removes it from the
   box tree entirely, so nothing in that group is focusable at all. That is WooCommerce's
   behaviour and predates this work; there is nothing to choose with one gateway. Add a second and
   the input returns and this rule fires. Do not file it as broken in the meantime. */
.wc-block-checkout__shipping-option .wc-block-components-radio-control label.wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:focus-visible),
.wc-block-checkout__pickup-options .wc-block-components-radio-control label.wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:focus-visible),
.wc-block-checkout__payment-method .wc-block-components-radio-control div.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:focus-visible) {
    outline: var(--focus-ring-w) solid var(--forest-green);
    outline-offset: var(--card-focus-offset);
}

/* A keyboard user must never lose their focus indicator because of a SELECTOR FEATURE. Where
   `:has()` is unsupported the rule above never matches AND our `opacity: 0` has removed Woo's own
   ring from view, which would leave nothing. So: bring the native radio back into view on
   keyboard focus and ring it. Degraded — a 20px dot appears mid-page — but never absent.
   0-3-0 + :focus-visible = 0-4-0, above the `opacity: 0` rule at 0-3-0. */
@supports not selector(:has(*)) {
    .wc-block-checkout__shipping-option .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
        opacity: 1;
        outline: var(--focus-ring-w) solid var(--forest-green);
        outline-offset: 2px;
    }
}

/* --------------------------------------------------------------------------
   9. WINDOWS HIGH CONTRAST / forced-colors.
   The OS palette discards our fill, our border colour and our SVG tick, which would delete four
   of the five channels and leave font-weight alone. The ring→disc SHAPE is what survives, so we
   repaint it in system colours and add border-WIDTH, which forced-colors preserves.

   READ THIS BEFORE EDITING: a media query adds NO specificity. Every selector below is either
   identical to the state rule it overrides (winning on source order, since this block is last) or
   strictly above it. An earlier draft of this design used bare single-class selectors here and
   the whole block was dead code — which in this file is a lie, not a nicety.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
    /* Idle: an outlined ring in the system text colour. Beats the `:where()` defaults, which
       carry zero specificity, at any specificity at all. */
    .wc-block-checkout__shipping-method-option,
    .wc-block-checkout__shipping-option .wc-block-components-radio-control__option,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control__option,
    .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
        --card-bd:       CanvasText;
        --card-mark-bd:  CanvasText;
        --card-mark-bg:  Canvas;
        --card-mark-img: none;
    }

    /* Selected: SAME selectors as §3, character for character, so this wins on source order.
       A filled Highlight disc against a hollow Canvas ring is a shape+fill difference the OS
       palette preserves, and 4px vs 2px is a width difference it also preserves. */
    .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected,
    .wc-block-checkout__shipping-option .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked,
    .wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
        --card-bd:       Highlight;
        --card-border-w: 4px;
        --card-mark-bd:  Highlight;
        --card-mark-bg:  Highlight;
        --card-mark-img: none;
    }
}

/* --------------------------------------------------------------------------
   10. Selection is a state change, not an animation.
   Same rule as §9: the media query adds nothing, so these selectors are IDENTICAL to the paint
   rules in §4 and to the mark rule in §6 and win on source order alone.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option[role="radio"],
    .wc-block-checkout__shipping-option .wc-block-components-radio-control label.wc-block-components-radio-control__option,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control label.wc-block-components-radio-control__option,
    .wc-block-checkout__payment-method .wc-block-components-radio-control div.wc-block-components-radio-control-accordion-option,
    .wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option label.wc-block-components-radio-control__option,
    .wc-block-checkout__shipping-method-option-title-wrapper::before,
    .wc-block-checkout__shipping-option .wc-block-components-radio-control__label::before,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control__label::before,
    .wc-block-checkout__payment-method .wc-block-components-radio-control__label::before {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   11. MOBILE — merge into the existing @media (max-width: 600px) block near line 7429, which
   already carries `.wc-block-checkout__shipping-method-option { min-height: 56px }`. Nothing else
   changes: the mark is 18px, the gap between cards is 12px, and the ring bleeds 7px, all of which
   fit a 320px viewport with two half-width cards.
   -------------------------------------------------------------------------- */


/* Express payment section */
.wc-block-components-express-payment {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.wc-block-components-express-payment__title {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
    opacity: 1;
}

/* Order notes textarea */
.wc-block-components-textarea {
    margin-top: 8px;
}

.wc-block-components-textarea textarea {
    min-height: 100px;
    resize: vertical;
}

/* ==========================================================================
   THE ADDRESS FORM: TWO FIELDS, NOT FIVE

   We only deliver inside the macrocentro. So the city is Rosario, the province is Santa Fe and the
   postcode is 2000 — always, by definition of the polygon. Three fields that cannot take any other
   value are not questions; they are decoration with a keyboard attached. The shopper picks an
   address from the autocomplete, these get filled from that pick, and they are echoed back in the
   address notice ("Córdoba 1234 — Rosario, Santa Fe (2000)") instead of being typed.

   THEY ARE FILLED ONLY BY A CONFIRMED ROSARIO LOCATION — a suggestion picked out of the
   Rosario-scoped Georef list, or a GPS point verified inside the polygon. They are NEVER guessed. A
   shopper who types the street by hand and picks nothing leaves them blank, gets no delivery rate,
   and is told to pick from the list. That is deliberate, and the reason is in the long comment at
   the top of almacen-direccion.php: defaulting a blank city to "Rosario" makes the shipping method's
   Rosario guard pass for EVERYONE, and Argentina reuses street names in every city — so someone in
   Buenos Aires typing "San Martín 1234" would be sold a delivery to the Rosario street of the same
   name. Do not "helpfully" default these.

   WHY `display: none` AND NOT WOO'S `hidden` FLAG — the other trap:
   `emptyHiddenAddressFields()` BLANKS the value of any field Woo considers hidden, before pushing it
   to the cart. Marking `city` hidden would send city="" even after a suggestion was picked, the
   shipping method would stop finding "rosario", and delivery would silently disappear for everyone.
   CSS hides the box; the value lives.

   These fields are `required: false` (see the locale filter in almacen-checkout-campos.php), so an
   invisible box can never block the Place Order button — which is the other half of why you cannot
   just CSS-hide a required field and hope.

   THE ESCAPE HATCH. `body.almacen-manual` (set by checkout-direccion.js when the shopper clicks
   "Escribir la dirección a mano") brings CITY and POSTCODE back — not province, which stays hidden
   and fixed to Santa Fe (see the separate rule below). Georef is very good but it is not perfect,
   and a real Rosario customer whose street it does not know must not be locked out of delivery —
   GOV.UK and Baymard both say an address lookup MUST always offer manual entry. In manual mode the
   shopper types the city themselves, which is a confirmation too: someone in Santa Fe types "Santa
   Fe", the Rosario guard correctly fails, and they get pickup. Safety comes from never GUESSING the
   city — not from refusing to let anyone type it.

   Written as `:not()` rather than a `display: block` override so the fields come back with whatever
   display they natively had (city and postcode are text inputs).

   EVERY RULE HERE HANGS OFF `body.almacen-checkout-v2`, AND THAT IS LOAD-BEARING.
   The feature flag turns off the PHP and the JS — but style.css is the THEME stylesheet and loads for
   everyone, flag or no flag. Ungated, these rules would hide city/state/postcode while the locale
   filter that makes them OPTIONAL is still switched off. Invisible + required = the shopper presses
   Place Order, nothing happens, and nothing on screen says why. A dead checkout, for everyone, in
   silence. The class is set in almacen-checkout-campos.php by the same flag.
   ========================================================================== */

body.almacen-checkout-v2:not(.almacen-manual) .wc-block-components-address-form__city,
body.almacen-checkout-v2:not(.almacen-manual) .wc-block-components-address-form__postcode,
body.almacen-checkout-v2 .wc-block-components-address-form__country {
    display: none !important;
}

/* Province is hidden in EVERY mode — including manual entry — because it never varies: we only
   deliver in Rosario, so it is always Santa Fe, fixed in JS. It is not in the `:not(.almacen-manual)`
   group above precisely so the manual escape hatch reveals city + postcode but NOT province. */
body.almacen-checkout-v2 .wc-block-components-address-form__state {
    display: none !important;
}

/* On pickup there is no address at all, manual mode or not. */
body.almacen-checkout-v2.almacen-retiro .wc-block-components-address-form__city,
body.almacen-checkout-v2.almacen-retiro .wc-block-components-address-form__state,
body.almacen-checkout-v2.almacen-retiro .wc-block-components-address-form__postcode {
    display: none !important;
}

/* ==========================================================================
   RETIRO EN LOCAL: NO ADDRESS AT ALL

   `body.almacen-retiro` is set by checkout-direccion.js from the checkout store's
   prefersCollection(). Woo already hides the SHIPPING address form on pickup — but it then shows the
   BILLING one, with the street required. So someone collecting their order in person had to invent
   an address to get past the button.

   The street is really removed by the conditional field rule in almacen-checkout-campos.php (React
   never renders it). THESE RULES ARE THE SAFETY NET: that rule leans on an undocumented WooCommerce
   behaviour, and if a Woo update ever breaks it, the field would come back. Then this CSS hides it
   anyway, and the locale filter has already made it optional on pickup — so the worst case is a
   field nobody can see and nobody has to fill, instead of a dead Place Order button.

   The names stay. On pickup the billing form is the ONLY place first/last name are collected — hide
   the whole block and the order arrives with no customer on it.
   ========================================================================== */

body.almacen-retiro .wc-block-components-address-form__address_1,
body.almacen-retiro .wc-block-components-address-form__address_2,
body.almacen-retiro .wc-block-components-address-form__address_2-toggle,
body.almacen-retiro .wc-block-components-address-form__almacen-referencias,
body.almacen-retiro .wc-block-components-address-autocomplete-container {
    display: none !important;
}

/* ==========================================================================
   ADDRESS AUTOCOMPLETE (Georef)

   Woo wraps its own ValidatedTextInput in `...-autocomplete-container` and hangs the suggestion list
   next to it as a SIBLING — so the label/input ordering above is untouched. All that is needed here
   is to make the list look like it belongs to this site.
   ========================================================================== */

.wc-block-components-address-autocomplete-container {
    position: relative;
}

.wc-block-components-address-autocomplete-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: var(--white);
    border: var(--input-border-w) solid var(--forest-green);
    border-radius: 8px;
    margin-top: var(--sp-1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.wc-block-components-address-autocomplete-suggestion {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    color: var(--warm-black);
    /* A suggestion is a tap target like any other: 48px, not a 20px line of text. */
    min-height: var(--input-min-height);
    display: flex;
    align-items: center;
    padding: var(--input-padding-y) var(--input-padding-x);
    cursor: pointer;
}

/* `.active` is the keyboard-focused option (aria-activedescendant). It MUST look different from
   plain hover, or arrow-key users cannot see where they are. */
.wc-block-components-address-autocomplete-suggestion:hover,
.wc-block-components-address-autocomplete-suggestion.active {
    background: rgba(74, 103, 65, 0.08);
}

.wc-block-components-address-autocomplete-suggestion.active {
    box-shadow: inset 3px 0 0 var(--forest-green);
}

/* The manual-entry escape hatch sits just under the street field. */
.almacen-dir-acciones {
    margin-top: var(--form-label-gap);
}

/* "Escribir la dirección a mano" — a quiet link, because it is the fallback, not the path we want
   people on. It still needs a real 48px target: the people who reach for it are the people the
   autocomplete already failed. */
.almacen-manual-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--input-min-height);
    padding: var(--input-padding-y) 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--forest-green);
    background: transparent;
    border: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.almacen-manual-btn:hover {
    color: var(--dark-green);
}

.almacen-manual-btn:focus-visible {
    outline: var(--focus-ring-w) solid var(--forest-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   ERRORS

   Four channels, never colour alone (WCAG 1.4.1, Level A): a red left border on the group, a red
   input border, an icon, and heavier text. Anyone who cannot separate red from green still sees the
   bar, the mark and the weight.

   `order: -1` in the column-reverse field is what puts the message BELOW the input rather than above
   the label, which is where it would otherwise land.
   ========================================================================== */

.wc-block-components-validation-error {
    order: -1;
    margin-top: var(--form-label-gap);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--error-red);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
}

.wc-block-components-validation-error::before {
    content: "⚠";
    font-weight: 700;
    line-height: 1.4;
}

.wc-block-components-validation-error p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* The field itself, when it is the one that is wrong. */
.has-error input,
.has-error textarea,
.wc-block-components-text-input.has-error input {
    border-color: var(--error-red) !important;
}

.has-error input:focus,
.has-error textarea:focus {
    outline-color: var(--error-red) !important;
}

/* ==========================================================================
   THE ZONE VERDICT

   Posted by checkout-direccion.js into Woo's own notice slot for the address step, the moment the
   shopper picks an address — so the answer to "do you even reach me?" arrives while they are still
   looking at the address, not four fields later as a missing shipping option.

   `success` is not decoration here: green vs amber IS the answer. It is backed by the text, never by
   the colour alone.
   ========================================================================== */

.wc-block-components-notice-banner {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    border-radius: 8px;
    margin: var(--form-label-gap) 0 0 0;
}

.wc-block-components-notice-banner.is-success {
    border-color: var(--forest-green);
    background: rgba(74, 103, 65, 0.06);
}

.wc-block-components-notice-banner.is-warning {
    border-color: var(--golden-accent);
    background: rgba(201, 169, 97, 0.1);
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
    color: var(--warm-black);
}


/* ==========================================================================
   CHECKOUT ORDER SUMMARY
   ========================================================================== */

/* Order summary title */
/* This is the <button> that collapses/expands the order summary on mobile — i.e. the control a
   shopper taps to check WHAT they are buying before paying. It had `padding: 0` and no focus style:
   no tap target, and invisible to the keyboard. */
.wc-block-components-order-summary__button {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: var(--fs-md) !important;
    font-weight: 600 !important;
    color: var(--warm-black) !important;
    padding: var(--sp-2) 0 !important;
    margin-bottom: var(--sp-4) !important;
    min-height: 44px !important;
    width: 100%;
    cursor: pointer;
}

.wc-block-components-order-summary__button:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Product items in summary */
/* WooCommerce core ships `display: table` on the summary's content wrapper. A table SHRINK-WRAPS to
   its contents and ignores its container's width — so at 320px it measured 239px inside a 150px box
   and shoved the line price 16px off the screen, where `overflow-x: clip` hid it. The shopper could
   not see what they were paying for the item.

   `min-width: 0` cannot rescue a table (the table is not a flex/grid item); it has to stop being a
   table. `display: block` lets it obey its parent, and the flex row inside can then wrap.

   The full ancestor prefix is required: core's selector is
   `.wc-block-components-order-summary .wc-block-components-order-summary__content` (0,2,0), so a bare
   class (0,1,0) silently loses and the table survives. */
.wc-block-components-order-summary .wc-block-components-order-summary__content {
    display: block !important;
    width: 100% !important;
}

.wc-block-components-order-summary-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
}

/* Let the long ERP product names wrap instead of forcing the row wider than the card. */
.wc-block-components-order-summary-item > * {
    min-width: 0;
}

.wc-block-components-order-summary-item:last-child {
    border-bottom: none;
}

.wc-block-components-order-summary-item__image {
    border-radius: 6px;
    overflow: hidden;
}

.wc-block-components-order-summary-item__description {
    font-family: 'Mulish', sans-serif;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-weight: 500;
    color: var(--warm-black);
    font-size: var(--fs-xs);
}

.wc-block-components-order-summary-item__total-price {
    font-weight: 600;
    color: var(--warm-black);
}

/* Totals section */
.wc-block-components-totals-wrapper {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Cart "Resumen del pedido": drop the stray empty separator lines. When the
   cart has no breakdown to show (no calculated shipping/tax/coupon), the
   order-summary wrapper divs still carry borders even with no content; the
   footer "Total estimado" row already provides its own top border. Scoped to
   the cart totals card so the checkout summary is unaffected. */
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wc-block-components-totals-item {
    font-family: 'Mulish', sans-serif;
    padding: var(--sp-2) 0;
}

.wc-block-components-totals-item__label {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.wc-block-components-totals-item__value {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--warm-black);
}

/* Final total */
.wc-block-components-totals-footer-item {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 2px solid var(--warm-black);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--warm-black);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    /* Use the body/price sans-serif (Mulish) with lining, tabular figures so
       the amount is legible and consistent with product prices, instead of
       Cormorant's old-style serif numerals. */
    font-family: 'Mulish', sans-serif;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
    font-size: var(--fs-lg);
    font-weight: 700;

    /* NOT --golden-accent. This is the grand total — the single number the shopper is deciding on —
       and gold (#C9A961) on white measures 2.2:1, well under the 4.5:1 AA minimum. It was the least
       readable text on the page precisely where legibility matters most. Gold is a decorative accent
       in this palette; it must never carry critical information. */
    color: var(--warm-black);
}

/* Coupon form in checkout */
.wc-block-components-totals-coupon {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   CHECKOUT RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1200px) {
    .checkout-page .checkout-form-container {
        padding: 0 30px !important;
    }

    .wc-block-components-sidebar-layout.wc-block-checkout {
        grid-template-columns: 1fr 380px !important;
        gap: 30px !important;
    }
}

@media (max-width: 991px) {
    .checkout-page .checkout-form-container {
        padding: 0 24px !important;
    }

    .wc-block-components-sidebar-layout.wc-block-checkout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Order summary on top for mobile — CHECKOUT ONLY.
       This selector used to be unscoped (`.wc-block-components-sidebar-layout .wc-block-components-sidebar`),
       and the CART's sidebar matches it too. Being later in the file AND `!important`, it beat the
       cart's own `order: 2`, so the cart showed the summary and the "Pasar al pago" button BEFORE the
       shopper had seen a single item. On the checkout the collapsed summary on top is correct (you
       already chose your items); on the cart it is backwards. Scope it. */
    .wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-sidebar {
        order: -1 !important;
    }

    /* Y SI ESTÁ ARRIBA EN UNA SOLA COLUMNA, NO PUEDE SER STICKY.
       Va pegado a la regla de arriba a propósito: son la misma decisión. La de arriba pone el
       resumen arriba de todo; ésta apaga el sticky que, en ese layout, lo dejaba clavado tapando el
       formulario mientras el cliente escribía la dirección.
       (Ya existe una regla que enciende el sticky arriba de 992px, más arriba en este archivo. NO
       alcanzaba, y por eso el bug sobrevivió en tablet.)

       LA TRAMPA, QUE ES POR LA QUE ESTO PASÓ: WooCommerce enciende el sticky con una CONTAINER
       QUERY, no con una media query —

           @container (min-width: 700px) { .wc-block-checkout__sidebar.is-sticky { position: sticky } }

       — o sea que mide el ancho del CONTENEDOR del checkout, mientras que el layout de una columna
       de acá mide el ancho de la VENTANA. Son dos varas distintas y nunca van a coincidir: en una
       tablet de 820px el contenedor daba 709px, pasaba los 700 de WooCommerce, y el resumen quedaba
       apilado arriba Y pegajoso al mismo tiempo. Por eso el apagado vive acá, en la misma media
       query que arma la columna única, y no en otra condición que haya que mantener sincronizada.

       La clase `is-sticky` la pone el JS de WooCommerce, así que hay que apagarlo por CSS. */
    .wc-block-checkout__sidebar.is-sticky,
    .wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-sidebar {
        position: static !important;
        top: auto !important;
    }

    .wp-block-woocommerce-checkout-fields-block {
        padding: 28px 32px !important;
    }

    .wp-block-woocommerce-checkout-order-summary-block {
        padding: 20px;
    }

    .checkout-title {
        font-size: var(--fs-xl) !important;
    }

    .checkout-trust-signals {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ==========================================================================
   CHECKOUT RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 600px) {
    .checkout-page .checkout-form-container {
        padding: 0 16px;
    }

    .checkout-title {
        font-size: var(--fs-xl) !important;
    }

    .checkout-progress {
        gap: 8px !important;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .checkout-progress p {
        font-size: var(--fs-xs);
    }

    .checkout-trust-signals {
        flex-wrap: wrap;
        gap: 12px !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .checkout-trust-signals p {
        font-size: var(--fs-xs);
    }

    .checkout-trust-signals .trust-divider {
        display: none;
    }

    .wp-block-woocommerce-checkout-fields-block {
        padding: 20px 24px !important;
        border-radius: 10px;
    }

    .wp-block-woocommerce-checkout-order-summary-block {
        padding: 16px;
        border-radius: 10px;
    }

    .wc-block-components-checkout-step__heading {
        font-size: var(--fs-md);
    }

    /* Symmetric padding — the labels are TOP-ALIGNED now, so the old 20/8 asymmetric padding that
       reserved room for a floating label is wrong and made inputs look lopsided on mobile. */
    .wc-block-components-text-input input,
    .wc-block-components-textarea textarea {
        padding: var(--input-padding-y) var(--input-padding-x) !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: var(--input-min-height) !important;
    }

    .wc-block-checkout__shipping-option .wc-block-components-radio-control__option,
    .wc-block-checkout__shipping-method .wc-block-components-radio-control__option,
    .wc-block-checkout__pickup-options .wc-block-components-radio-control__option,
    .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
        padding: 16px 16px 16px 48px;
    }

    .wc-block-components-text-input {
        margin-bottom: 16px;
    }

    .wc-block-components-combobox {
        margin-bottom: 16px;
    }

    .wc-block-components-checkout-step {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: var(--fs-md);
    }

    .wc-block-components-checkout-place-order-button {
        padding: 16px 20px !important;
        font-size: var(--fs-sm) !important;
    }
}

/* ==========================================================================
   MAYORISTAS (WHOLESALE) SECTION - FRONT PAGE
   ========================================================================== */

/* Section wrapper */
.mayoristas-section {
    background-color: var(--warm-cream);
}

/* Banner with gradient background */
.mayoristas-banner {
    background: linear-gradient(135deg, var(--dark-green) 0%, var(--forest-green) 50%, var(--dark-green) 100%);
    position: relative;
    overflow: hidden;
}

.mayoristas-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.mayoristas-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mayoristas-description {
    opacity: 0.95;
}

/* CTA Button */
.mayoristas-cta .wp-block-button__link {
    font-weight: 600 !important;
    letter-spacing: 0.3px;
}

/* 4-column grid for front-page cards */
.mayoristas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Card styling */
.mayoristas-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.mayoristas-card:hover {
    transform: translateY(-6px);
}

.mayoristas-card-inner {
    background: linear-gradient(135deg, var(--dark-green) 0%, var(--forest-green) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

.mayoristas-card:hover .mayoristas-card-inner {
    box-shadow: 0 12px 30px rgba(61, 90, 58, 0.35);
}

/* Card overlay for better text readability */
.mayoristas-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(61, 90, 58, 0.65);
    border-radius: 12px;
    transition: background 0.3s ease;
}

.mayoristas-card:hover .mayoristas-card-inner::before {
    background: rgba(61, 90, 58, 0.55);
}

/* Card content */
.mayoristas-card-title,
.mayoristas-card-description {
    position: relative;
    z-index: 1;
}

.mayoristas-card-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mayoristas-card-description {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 16px;
}

/* Card button */
.mayoristas-card-btn {
    position: relative;
    z-index: 1;
}

.mayoristas-card-btn .wp-block-button__link {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
}

.mayoristas-card-btn .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
    transform: none !important;
}

/* ==========================================================================
   MAYORISTAS PAGE - LANDING PAGE STYLES
   ========================================================================== */

/* Page wrapper */
.mayoristas-page {
    background-color: var(--warm-cream);
}

/* Hero section */
.mayoristas-hero {
    position: relative;
}

.mayoristas-hero-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Benefits section */
.mayoristas-benefits-section {
    overflow: hidden;
}

.mayoristas-benefits-grid {
    gap: 24px !important;
}

.mayoristas-benefit .wp-block-group {
    height: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mayoristas-benefit:hover .wp-block-group {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(74, 103, 65, 0.1);
}

/* 2-column landing grid */
.mayoristas-landing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Landing cards (larger than front-page cards) */
.mayoristas-landing-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.mayoristas-landing-card:hover {
    transform: translateY(-8px);
}

.mayoristas-landing-card-inner {
    background: linear-gradient(135deg, var(--dark-green) 0%, var(--forest-green) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

.mayoristas-landing-card:hover .mayoristas-landing-card-inner {
    box-shadow: 0 16px 40px rgba(61, 90, 58, 0.4);
}

/* Landing card overlay */
.mayoristas-landing-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(61, 90, 58, 0.6);
    border-radius: 12px;
    transition: background 0.3s ease;
}

.mayoristas-landing-card:hover .mayoristas-landing-card-inner::before {
    background: rgba(61, 90, 58, 0.5);
}

/* Landing card content */
.mayoristas-landing-card-inner h3,
.mayoristas-landing-card-inner p {
    position: relative;
    z-index: 1;
}

.mayoristas-landing-card-inner h3 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Landing card button */
.mayoristas-landing-btn {
    position: relative;
    z-index: 1;
}

.mayoristas-landing-btn .wp-block-button__link {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
}

.mayoristas-landing-btn .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
    transform: none !important;
}

/* WhatsApp CTA section */
.mayoristas-whatsapp-section .wp-block-group {
    text-align: center;
}

.mayoristas-whatsapp-btn .wp-block-button__link {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.mayoristas-whatsapp-btn .wp-block-button__link:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3) !important;
}

/* ==========================================================================
   MAYORISTAS RESPONSIVE - TABLET (992px)
   ========================================================================== */

@media (max-width: 992px) {
    /* Front-page: 2 columns */
    .mayoristas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mayoristas-card-inner {
        padding: 60px 25px !important;
    }

    .mayoristas-card-title {
        font-size: 1.15rem;
    }

    /* Landing page: 2 columns still */
    .mayoristas-landing-grid {
        gap: 24px;
    }

    .mayoristas-landing-card-inner {
        padding: 80px 30px !important;
    }

    /* Banner */
    .mayoristas-banner {
        padding: 50px 30px !important;
    }

    .mayoristas-title {
        font-size: 2rem !important;
    }

    /* Benefits */
    .mayoristas-benefits-grid {
        gap: 16px !important;
    }

    /* Mayoristas products grid: 2 columns on tablet */
    
}

/* ==========================================================================
   MAYORISTAS RESPONSIVE - MOBILE (600px)
   ========================================================================== */

@media (max-width: 600px) {
    /* Front-page section */
    .mayoristas-section {
        padding: 60px 16px !important;
    }

    /* Banner */
    .mayoristas-banner {
        padding: 40px 24px !important;
        border-radius: 12px !important;
    }

    .mayoristas-title {
        font-size: 1.75rem !important;
    }

    .mayoristas-description {
        font-size: 1rem !important;
    }

    /* Front-page grid: 1 column on small mobile */
    .mayoristas-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px !important;
    }

    .mayoristas-card-inner {
        padding: 50px 24px !important;
    }

    .mayoristas-card-title {
        font-size: 1.2rem;
    }

    /* Landing page */
    .mayoristas-hero {
        min-height: 350px !important;
    }

    .mayoristas-hero-title {
        font-size: 2.25rem !important;
    }

    .mayoristas-categories-section,
    .mayoristas-benefits-section,
    .mayoristas-whatsapp-section {
        padding: 60px 16px !important;
    }

    /* Benefits: stack vertically */
    .mayoristas-benefits-grid {
        flex-direction: column !important;
    }

    .mayoristas-benefits-grid .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 16px;
    }

    /* Landing grid: 1 column */
    .mayoristas-landing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mayoristas-landing-card-inner {
        padding: 60px 24px !important;
    }

    .mayoristas-landing-card-inner h3 {
        font-size: 1.5rem !important;
    }

    /* WhatsApp section */
    .mayoristas-whatsapp-section .wp-block-group {
        padding: 40px 24px !important;
    }

    /* Mayoristas products grid: 1 column on mobile */
    
}

/* ==========================================================================
   SINGLE PRODUCT PAGE (PDP)
   Extends the site design system (forest green / cream, Cormorant + Mulish,
   16px soft-shadow cards) to the product detail page.
   ========================================================================== */

/* The product page's breadcrumb override used to live here: a PDP-only copy that re-declared the
   font, size, colour and width because the GLOBAL breadcrumb rule was a 36px serif page-title and had
   to be fought off on any page that owned a real <h1>.

   That fight is over. The global rule is now a breadcrumb everywhere (see `.woocommerce-breadcrumb`
   in the shop section), so the PDP just inherits it — at 16px rather than the 14px this override set,
   which is the size bump requested. Nothing PDP-specific is left to say. */

/* --- Hide elements not relevant to shoppers --- */
.wp-block-woocommerce-product-sku,
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .sku {
    display: none !important;
}

/* Reviews/Valoraciones: hide the star-rating block under the title.
   (The Reviews tab itself is removed via the woocommerce_product_tabs filter.) */
.wp-block-woocommerce-product-rating,
.single-product .woocommerce-product-rating,
.single-product .wc-block-components-product-rating {
    display: none !important;
}

/* --- Overall layout & rhythm ---
   The page's gutter, width and bottom padding are NOT here. They live in the shared page-shell rule
   next to `.shop-page`, which is the point: the product page and the shop are the same shell. This
   used to carry a lone `padding-bottom: 64px` against the shop's 48/32; that is gone. */

/* Gallery ↔ buy box. --sp-8 is the same gap `.shop-layout` puts between its sidebar and its grid, so
   the two pages breathe at the same rate. */
.single-product .wp-block-columns.alignwide {
    gap: var(--sp-8);
    align-items: flex-start;
    margin-top: var(--sp-6);
}

/* Sticky gallery on desktop so the buy box stays in view while scrolling.
   Mismo offset derivado del header que el checkout y el carrito. Abajo de 992px el header se parte en
   dos filas y crece; la variable lo sigue, un `top` fijo no. */
@media (min-width: 783px) {
    .single-product .wp-block-columns.alignwide > .wp-block-column:first-child {
        position: sticky;
        top: calc(var(--sticky-header-h, 114px) + var(--sp-4));
        align-self: flex-start;
    }
}

/* --- Product gallery --- */
.single-product .woocommerce-product-gallery__image img,
.single-product .wp-block-woocommerce-product-image-gallery img {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

/* No-image placeholder: present it as an intentional, on-brand panel
   instead of WooCommerce's default flat gray box. */
.single-product .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--warm-cream);
    border: 1px solid rgba(74, 103, 65, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

.single-product .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder img {
    width: 45%;
    height: auto;
    opacity: 0.45;
    border-radius: 0;
    box-shadow: none;
    mix-blend-mode: multiply;
}

.single-product .flex-control-thumbs {
    margin-top: 14px;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.single-product .flex-control-thumbs li {
    margin: 0;
    width: 72px;
}

.single-product .flex-control-thumbs img {
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s ease;
    cursor: pointer;
}

.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--forest-green);
}

/* --- Summary column rhythm --- */
.single-product .wp-block-columns.alignwide > .wp-block-column:last-child > * {
    margin-top: 0;
    margin-bottom: 24px;
}

/* --- Title ---
   `.entry-summary` is a CLASSIC WooCommerce wrapper. It does not exist in a block theme, so that
   half of the selector never matched anything. Dropped. */
.single-product .wp-block-columns .wp-block-post-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--warm-black);
    margin-bottom: var(--sp-4);
}

/* --- Price (with restrained gold accent underline) ---
   :not(.shop-product-price) keeps this off the related-products cards further down the
   page — they carry the same block class, and without the exclusion every card gets a gold
   bar under its price. */
.single-product .wp-block-woocommerce-product-price:not(.shop-product-price) {
    position: relative;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-6);
}

/* The block carries fontSize:"large", which is 1.85rem in the parent theme. The price is the
   second-loudest thing on the page after the name, so it gets its own step on the scale. */
.single-product .wp-block-woocommerce-product-price:not(.shop-product-price) .woocommerce-Price-amount {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--forest-green);
}

.single-product .wp-block-woocommerce-product-price:not(.shop-product-price)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--golden-accent);
}

/* "/ kg" — the unit price. It has to stay legible: it is the only figure that lets a shopper
   compare two loose products. Lowercase, because uppercase was one of five shouting elements. */
.single-product .granel-unidad {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    color: var(--ink-muted);
}

/* --- Short description --- */
.single-product .wp-block-post-excerpt,
.single-product .wp-block-post-excerpt__excerpt,
.single-product .woocommerce-product-details__short-description {
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(44, 62, 45, 0.85);
}

/* --- Stock status --- */
.single-product .stock {
    font-family: 'Mulish', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.single-product .stock.in-stock {
    color: var(--forest-green);
}

.single-product .stock.out-of-stock {
    color: #b3261e;
}

/* --- Add-to-cart buy box ---
   Matches WooCommerce's own `.woocommerce div.product form.cart { margin-bottom: 2em }` selector
   rather than under-shooting it: at .single-product form.cart (0,2,0) we lost, and the buy box kept
   a 33.6px margin off the 8-point grid. Same specificity, loaded later, so this wins. */
.woocommerce div.product form.cart,
.single-product form.cart {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

/* A GRANEL buy box is a COLUMN: choose the weight, see what it costs, buy. One decision per row,
   in the order the shopper makes them.

   It was a flex ROW, and the pills are injected inside form.cart — so the pill block, the quantity
   box and the button ended up as three siblings competing on one line, with the input stretched to
   93px tall by `height: 100%`. That was the layout bug, not a styling one.

   :has() scopes this to loose products. An ordinary product keeps the [qty][button] row, which is
   correct for it and must not regress. */
.single-product form.cart:has(.almacen-peso-choose) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
}

/* The pills are the quantity control now, so the number box is type=hidden
   (almacen_granel_quantity_input_type). This removes the empty wrapper it leaves behind — the
   input itself stays in the form and still carries the kilos that get POSTed. */
.single-product form.cart:has(.almacen-peso-choose) .quantity {
    display: none;
}

.single-product form.cart .quantity {
    margin: 0;
}

.single-product form.cart .quantity input.qty {
    min-height: 52px;
    width: 88px;
    padding: 0 var(--sp-3);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    color: var(--warm-black);
    background: var(--white);
    border: 1px solid #d9d6cd;
    border-radius: 8px;
}

.single-product form.cart .quantity input.qty:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.18);
}

/* --- What this actually costs (see almacen_granel_pdp_total) --- */
.single-product .almacen-peso-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(74, 103, 65, 0.06);
    border: 1px solid rgba(74, 103, 65, 0.14);
    border-radius: 8px;
}

.single-product .almacen-peso-total__label {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-muted);
}

/* The number they will actually be charged. It reads one step below the per-kilo headline, so it
   completes the price rather than competing with it. */
.single-product .almacen-peso-total__value {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.2;
    color: var(--forest-green);
}

.single-product .single_add_to_cart_button {
    flex: 1 1 auto;
    min-height: 52px;
    padding: 0 var(--sp-8) !important;
    font-family: 'Mulish', sans-serif;
    /* Sentence case, 600. It was UPPERCASE 700 while the product cards said "Agregar al carrito" —
       the same action wearing two different faces. Caps also read slower, and this is the one
       control on the page nobody should have to parse. */
    font-size: var(--fs-sm) !important;
    font-weight: 600;
    letter-spacing: 0;
    border: none !important;
    border-radius: 8px !important;
    background-color: var(--forest-green) !important;
    color: var(--white) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.single-product .single_add_to_cart_button:hover {
    background-color: var(--dark-green) !important;
    box-shadow: 0 6px 20px rgba(74, 103, 65, 0.28);
}

/* --- Reassurance line (stock + free pickup) --- */
.single-product .almacen-peso-reassurance {
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-muted);
}

/* --- Product meta (categories / tags) ---
   The colour was rgba(44,62,45,0.6), which lands at 3.19:1 on the cream background — under the
   4.5:1 WCAG AA minimum for body text. Opacity is a bad way to build a text colour precisely
   because it produces numbers like that silently. --ink-muted is solid and measures 6.23:1. */
.single-product .wp-block-woocommerce-product-meta,
.single-product .product_meta {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: var(--sp-4);
    line-height: 1.6;
}

/* The terms element also carries WooCommerce's .wc-block-components-product-sku, which ships
   `font-size: 0.9em` — that is where the stray 14.4px came from. Pin it back to the scale. */
.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms,
.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms * {
    font-size: var(--fs-xs);
}

.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms__prefix,
.single-product .product_meta > span {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.single-product .wp-block-woocommerce-product-meta a,
.single-product .product_meta a {
    color: var(--forest-green);
    text-decoration: none;
}

.single-product .wp-block-woocommerce-product-meta a:hover,
.single-product .product_meta a:hover {
    text-decoration: underline;
}

/* --- Product details tabs (Description, etc.) --- */
.single-product .wp-block-woocommerce-product-details {
    margin-top: var(--sp-12);
}

.single-product .wc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-6) 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.single-product .wc-tabs li {
    margin: 0;
    list-style: none;
}

/* Was rgba(44,62,45,0.55) — 2.97:1, the worst contrast on the page. --ink-subtle is 5.05:1. */
.single-product .wc-tabs li a {
    display: inline-block;
    padding: var(--sp-3) var(--sp-1);
    margin-bottom: -1px;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-subtle);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.single-product .wc-tabs li a:hover {
    color: var(--warm-black);
}

.single-product .wc-tabs li.active a {
    color: var(--forest-green);
    border-bottom-color: var(--golden-accent);
}

.single-product .woocommerce-Tabs-panel {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--warm-black);
    /* ch, not px. A 760px column ran to ~95 characters a line; the readable band is 45-75, and
       past it the eye loses its place on the carriage return. `ch` is the width of "0", which in
       Mulish is wider than the average glyph — so 65ch still measured ~78 real characters. 60ch
       lands at ~72. Holds at any font size, which a px width does not. */
    max-width: 60ch;
}

.single-product .woocommerce-Tabs-panel h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-lg);
    color: var(--warm-black);
    margin-bottom: var(--sp-4);
}

/* --- Related products ("Productos relacionados") --- mirror homepage card.
   The live template renders related items via woocommerce/product-collection. */
.single-product .wp-block-woocommerce-product-collection {
    margin-top: var(--sp-12);
}



























/* --- Mobile --- */
@media (max-width: 782px) {
    .single-product .wp-block-columns.alignwide {
        gap: var(--sp-6);
    }

    /* These two sections stayed at 56px even on a phone, which is a lot of empty screen to scroll
       past on the width where scrolling costs the most. Same step-down the shell takes. */
    .single-product .wp-block-woocommerce-product-details,
    .single-product .wp-block-woocommerce-product-collection {
        margin-top: var(--sp-8);
    }

    .single-product .entry-summary .wp-block-post-title,
    .single-product .wp-block-columns .wp-block-post-title {
        font-size: 2rem;
    }

    .single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
    .single-product .wp-block-woocommerce-product-price ins {
        font-size: 1.6rem;
    }

    .single-product form.cart {
        gap: 10px;
    }

    .single-product .single_add_to_cart_button {
        flex: 1 1 100%;
    }

    
}

/* ==========================================================================
   ORDER RECEIVED (Thank you) — hide the "Información adicional" section.
   Its only content is the Hostinger Reach "Suscríbase a nuestro boletín"
   opt-in field, which renders "No" for unchecked orders. WooCommerce casts
   the checkbox to a boolean, so the section can't be suppressed server-side
   without leaving an empty heading — hide the whole wrapper on this page.
   ========================================================================== */
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-fields-wrapper {
    display: none !important;
}

/* The FREE-SHIPPING PROGRESS BAR used to be styled here — ~60 lines for `.almacen-shipping-bar`,
   its label, track, fill and qualified states. The header comment said it was "Injected by
   mini-cart-shipping-bar.js". That file does not exist: not in the theme, not in mu-plugins, nowhere
   in wp-content. Nothing has ever emitted this markup, so every one of those rules was dead. Deleted.
   If the feature is wanted, it needs the JS first. */

/* ==========================================================================
   "COMBINÁ CON…" CROSS-SELLS (single product) + native cart cross-sells
   ========================================================================== */
.almacen-combina-con {
    margin: 56px 0 0;
}

.almacen-combina-con__title,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-cart-cross-sells__title,
.wp-block-woocommerce-cart-cross-sells-block h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--warm-black, #2C3E2D);
    margin: 0 0 24px;
}

.almacen-combina-con__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 24px;
}

.almacen-combina-con__card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.almacen-combina-con__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.almacen-combina-con__image {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
}

.almacen-combina-con__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.almacen-combina-con__card:hover .almacen-combina-con__image img {
    transform: scale(1.08);
}

.almacen-combina-con__name {
    display: block;
    padding: 16px 16px 8px;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--warm-black, #2C3E2D);
    text-decoration: none;
}

.almacen-combina-con__name:hover {
    color: var(--forest-green, #4A6741);
}

.almacen-combina-con__price {
    padding: 0 16px 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--forest-green, #4A6741);
}

.almacen-combina-con__price del {
    color: #999;
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}

.almacen-combina-con__card .button,
.almacen-combina-con__card .add_to_cart_button {
    margin: auto 16px 16px;
    padding: 12px 16px;
    background: var(--forest-green, #4A6741);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.almacen-combina-con__card .button:hover,
.almacen-combina-con__card .add_to_cart_button:hover {
    background: var(--dark-green, #3D5A3A);
    transform: translateY(-2px);
}

/* Native cart cross-sells: match the shop card aesthetic */
.wp-block-woocommerce-cart-cross-sells-block {
    margin-top: 32px;
}

/* ==========================================
   VENTA A GRANEL — the product page

   A loose product is a SIMPLE product priced per kilo, and a pill sets a DECIMAL QUANTITY
   (250 g = quantity 0.25). There are no variations and no swatch plugin involved: the pills
   here and the ones on the card are the same component, driven by peso-pills.js.

   The card's copy of this lives with the product card at the end of this file, because it is
   absolutely positioned inside the image tile. Only the shared bits (.almacen-peso-options,
   .almacen-peso-pill) are common; the wrappers differ, so they are styled where they belong.
   ========================================== */

.almacen-peso-choose {
    margin: 0;
}

/* On the product page the pills have room, so they get a real tap target rather than the
   30px the card can afford. */
.almacen-peso-choose .almacen-peso-options {
    display: grid;
    /* The count comes from PHP (almacen_granel_pill_columns), because repeat() needs an integer and
       the product decides how many fractions it offers. The fallback reproduces the four-pill
       layout exactly, so this stylesheet is safe to ship before or after the plugin. */
    grid-template-columns: repeat(var(--peso-cols, 4), 1fr);
    gap: var(--sp-2);
    max-width: 420px;
}

/* The one uppercase element left on the page.
   It used to compete with four others — the /kg suffix, the CTA, the tab labels and the meta
   prefixes were all uppercase + 700 + letter-spaced at once, so none of them read as emphasis.
   Caps now mean exactly one thing here: this is a required choice, and it is this one. */
.almacen-peso-choose .almacen-peso-hint {
    display: block;
    margin-bottom: var(--sp-2);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--forest-green);
}

.almacen-peso-choose .almacen-peso-pill {
    height: 48px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-sm);
    border-radius: 8px;
}

/* The cart stepper is NOT hidden for granel lines any more. It used to be, because the quantity
   was the weight and it rendered a bare "0.25". The quantity now counts PORTIONS — it reads "2"
   next to "Peso: 250 g", which is both true and useful — so WooCommerce's own control is left
   exactly as it is. */

/* The price is per KILO now, so it has to say so or it reads as the price of the packet. */
.granel-unidad {
    font-family: 'Mulish', sans-serif;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}

@media (max-width: 600px) {
    /* NOTE: --peso-cols-sm is one variable serving TWO breakpoints — 600px here on the product page,
       782px on the card below. Between 601 and 782px the PDP is still on --peso-cols while the card
       has already switched. That is correct today, but the coincidence is load-bearing: changing
       either breakpoint without the other will silently mis-column one of the two surfaces. */
    .almacen-peso-choose .almacen-peso-options {
        grid-template-columns: repeat(var(--peso-cols-sm, 2), 1fr);
    }

    .almacen-peso-choose .almacen-peso-pill {
        height: 50px;   /* comfortable tap target */
    }
}

/* ==========================================================================
   THE PRODUCT CARD — one definition, every grid.
   Shop, category archives, search, the front-page rows, mayoristas, and the
   related-products strip on a product page all render this component.

   It replaces FIVE overlapping copies of "the card" that fought each other with
   !important and disagreed about which pages they applied to. If a card needs to
   change, change it here. Do not add a page-scoped override — that is exactly how
   the previous five got made.

   Two rules below are load-bearing, not cosmetic:

   1. The card is a FLEX COLUMN. WordPress renders the wrapping group as
      `is-layout-flow`, i.e. a block container, where the `margin-top:auto` that is
      meant to push the button to the bottom silently computes to 0. That is why the
      buttons used to land at a different height in every card in a row.

   2. .almacen-peso-pills is ABSOLUTELY POSITIONED inside the image tile, so it costs
      the card no flow height. A product sold by weight is therefore exactly as tall
      as a simple one. The plugin's version sat in the flow between the title and the
      price and made those cards twice the height of their neighbours.
   ========================================================================== */

/* --- the grid ------------------------------------------------------------ */

.wp-block-woocommerce-product-collection {
    width: 100%;
}

/* Explicit column counts, not auto-fill. The grids sit in containers of very different
   widths (the shop has a sidebar, the front page does not), and auto-fill silently gives
   each one a different number of columns from the same rule. */
ul.wc-block-product-template {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--sp-6) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The <li> is only a grid cell. All the card's looks live on the group inside it. */
ul.wc-block-product-template > li.wc-block-product {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: none;
    box-shadow: none;
}

/* --- the card ------------------------------------------------------------ */

.shop-product-card {
    display: flex !important;   /* overrides WordPress's is-layout-flow — see note 1 */
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(44, 62, 45, 0.08);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shop-product-card > * {
    margin: 0;
}

.shop-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(44, 62, 45, 0.12);
}

/* --- image --------------------------------------------------------------- */

.shop-product-image {
    position: relative;   /* the pills anchor to this box */
    flex: none;
    aspect-ratio: 1;
    overflow: hidden;
    background: #FAFAF7;
}

.shop-product-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-product-image img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    /* contain, NOT cover: these are packshots. Cover crops the label off the jar. */
    object-fit: contain;
    transition: transform 0.4s ease;
}

.shop-product-card:hover .shop-product-image img {
    transform: scale(1.04);
}

/* The sale badge's own container must not stretch across the tile and swallow clicks. */
.shop-product-image .wc-block-components-product-image__inner-container {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}

/* --- weight pills (see mu-plugins/almacen-granel.php) --------------------- */

.almacen-peso-pills {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 12px 8px 8px;
    /* Scrim, so the pills stay legible over a dark packshot without hiding it. */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.97) 60%, rgba(255, 255, 255, 0));
}

/* The caption is what makes the choice read as REQUIRED. The greyed-out button alone only
   says "something is wrong"; this says what. It doubles as the radio group's accessible name
   and as the aria-live region that answers a shopper who presses the button too early. */
.almacen-peso-hint {
    display: block;
    margin-bottom: 5px;
    font-family: 'Mulish', sans-serif;
    /* Was 9.5px, which is not a size anyone reads — it is a size people squint at and give up on.
       12px is the badge exception (uppercase, letter-spaced, bold, two words); nothing smaller
       exists anywhere in the theme now. */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: var(--forest-green);
    transition: color 0.2s ease;
}

/* Despite the section heading, this rule is NOT card-only: the product page's div carries the same
   class and simply loses on specificity (0,2,0 beats 0,1,0). Both resolve to the same custom
   property, so nothing breaks — but do not "clean this up" assuming it only ever styles a card. */
.almacen-peso-options {
    /* A GRID, not a flex row: equal columns can never overflow the card, however narrow it
       gets. A flex row of nowrap pills would spill out of a 196px card on the shop page. */
    display: grid;
    grid-template-columns: repeat(var(--peso-cols, 4), 1fr);
    gap: 4px;
}

.almacen-peso-pill {
    min-width: 0;
    height: 30px;
    padding: 0 2px;
    /* A label that outgrows its column must degrade INSIDE its own border. Without this it paints
       over the packshot and is then clipped by .shop-product-image's overflow:hidden — a silent
       failure with no scrollbar and no warning. Matters more now that a six-fraction product runs
       three narrower columns. */
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--warm-black);
    background: #fff;
    border: 1.5px solid rgba(44, 62, 45, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.almacen-peso-pill:hover {
    border-color: var(--forest-green);
    background: rgba(74, 103, 65, 0.06);
}

.almacen-peso-pill[aria-checked="true"] {
    color: #fff;
    background: var(--forest-green);
    border-color: var(--forest-green);
}

.almacen-peso-pill:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
}

/* Pressed the button without picking a weight. Say so, and point at the pills. */
.almacen-peso-pills.is-missing .almacen-peso-hint {
    color: #B8944D;   /* golden-accent, darkened for contrast on the white scrim */
}

.almacen-peso-pills.is-missing .almacen-peso-pill[aria-checked="false"] {
    border-color: #C9A961;
    animation: almacen-peso-pulse 0.4s ease;
}

@keyframes almacen-peso-pulse {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-3px); }
    65%      { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
    .almacen-peso-pills.is-missing .almacen-peso-pill[aria-checked="false"] {
        animation: none;   /* the colour change still carries the message */
    }
}

/* --- title --------------------------------------------------------------- */

.shop-product-title {
    box-sizing: border-box;
    padding: 14px 14px 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--warm-black);

    /* Reserve both lines, whether or not the title fills them. This is the half that
       actually matters: without it a one-line title and a three-line title push the price
       and the button to different heights, and the row stops reading as a row. */
    min-height: calc(14px + 2 * 1.35em);
    overflow: hidden;
}

/* The clamp goes on the ANCHOR, not on the <h3>.
   WordPress core ships `.wp-block-post-title :where(a) { display: inline-block }`, and the
   anchor is the title's only child. A -webkit-box on the <h3> therefore sees one atomic
   inline, not lines of text — the anchor wraps to four lines *inside* itself and the clamp
   counts one. Clamping the anchor is what actually truncates. */
.shop-product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.shop-product-card:hover .shop-product-title a {
    color: var(--forest-green);
}

/* --- price --------------------------------------------------------------- */

.shop-product-price {
    padding: 6px 14px 0;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--forest-green);
}

.shop-product-price bdi,
.shop-product-price ins {
    font-weight: 700;
    color: var(--forest-green);
    text-decoration: none;
}

.shop-product-price del {
    margin-right: 6px;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--ink-subtle);
}

/* Low-stock scarcity pill, appended to the price block by almacen_low_stock_badge() and shown only
   when exactly one unit is left. Outlined rather than filled so it reads as a quiet nudge, not a
   second call to action competing with the green button below. Aligned to the price's left padding. */
.shop-stock-badge {
    /* A direct flex child of the card (column, align-items:stretch), so without this the pill
       would stretch to the full card width instead of hugging its text. */
    align-self: flex-start;
    display: inline-block;
    margin: 8px 14px 0;
    padding: 3px 10px;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);   /* the theme's type floor */
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--forest-green);
    background: transparent;
    border: 1px solid rgba(74, 103, 65, 0.5);
    border-radius: 999px;
    white-space: nowrap;
}

/* --- call to action ------------------------------------------------------ */

.shop-add-to-cart {
    margin-top: auto !important;   /* real now that the card is a flex column */
    padding: 12px 14px 14px;
}

.shop-add-to-cart.wp-block-button {
    display: block;
}

.shop-add-to-cart .wp-block-button__link {
    /* WooCommerce ships `display:inline-flex; width:auto` for this button, which is why
       it used to shrink-wrap its label instead of filling the card. */
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* `height: auto` is NOT redundant — it is a bug fix, and removing it brings the bug back.
       WooCommerce ships `.wp-block-button__link { height: 100% }`, which assumes the button sits in
       a container with a definite height. Ours does not: the card is a flex COLUMN, so the button's
       wrapper is sized by its content — which is the button. That is a percentage-height loop
       (button = 100% of wrapper, wrapper = height of button), and the browser only resolves it to
       something sane on the first layout, where min-height pins it to 44px.

       The moment WooCommerce's Interactivity API rewrites the label ("Agregar al carrito" →
       "2 en carrito") the re-layout resolves that 100% against the now-definite wrapper and the
       button jumps 44px → 81px, dragging the whole card taller. Nothing in the class list changes,
       which is what makes it such a puzzling bug to look at.

       Sizing the button from its own content breaks the loop. min-height still guarantees the tap
       target. */
    height: auto;
    min-height: 44px;   /* tap target */
    padding: 10px 12px;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--forest-green);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.shop-add-to-cart .wp-block-button__link:not([aria-disabled="true"]):hover {
    background: var(--dark-green);
}

/* Weight products: the button says "Agregar al carrito" from the start, but stays inert until
   a weight is chosen.

   aria-disabled, not :disabled — see almacen_peso_render_card_cta(). The button must remain
   focusable, so DO NOT add `pointer-events: none` here: clicking it is how the shopper is told
   what is missing (peso-pills.js intercepts and nudges). Suppressing the pointer would take
   that away and hand back the dead control we are trying to avoid. */
/* The gated (weight-not-yet-chosen) state.
   #6C7268 on #E4E6E1 measured 3.94:1 — an AA failure. The usual "disabled controls are exempt from
   contrast" escape hatch does NOT apply here: this button is aria-disabled, not disabled, precisely
   so it stays focusable and pressable — pressing it is how the shopper learns a weight is missing.
   A control you are expected to press has to be readable. --ink-muted on this grey is 5.6:1. */
.shop-add-to-cart .wp-block-button__link[aria-disabled="true"] {
    color: var(--ink-muted);
    background: #E4E6E1;
    cursor: not-allowed;
    box-shadow: none;
}

/* Keep a disabled button inert on hover. The global `.wp-block-button__link:hover` rule up top
   darkens the background (with !important), lifts it 2px and adds a shadow — which makes a button
   that can't be clicked look clickable. This covers both the out-of-stock/at-max state (native
   `disabled`, set by stock-limit.js) and the granel "elegí un peso" gate (aria-disabled). */
.shop-add-to-cart .wp-block-button__link[aria-disabled="true"]:hover,
.shop-add-to-cart .wp-block-button__link:disabled:hover {
    background-color: #E4E6E1 !important;
    transform: none;
    box-shadow: none;
}

.shop-add-to-cart .wp-block-button__link.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* The "Ver carrito" link WooCommerce appends after a successful add.

   Centring it needs BOTH declarations below, and the reason is not obvious. WooCommerce forces the
   link to `display: inline-block`, and it lands inside an anonymous inline wrapper that shrink-wraps
   to the width of the text (~68px). So `text-align: center` on the LINK centres the text inside a box
   that is already exactly as wide as the text — a no-op, which is why it sat hard left under a
   full-width button. The centring has to be done by the block ancestor, hence `.shop-add-to-cart`. */
.shop-add-to-cart {
    text-align: center;
}

.shop-add-to-cart .added_to_cart {
    display: inline-block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--forest-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shop-add-to-cart .added_to_cart:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- the truncated-title tooltip ----------------------------------------- */

/* Shown only on titles the two-line clamp actually cuts off — see card-title-tooltip.js, which
   measures each title on hover and skips the ones that fit.

   `position: fixed` and a body-level parent are not stylistic: the title anchor, the <h3> and the
   card are all `overflow: hidden`, so a bubble living inside the card would be clipped three times
   over. Fixed positioning takes it out of that clipping chain entirely.

   z-index sits one above the header and the toast (both 9999) — a tooltip that slides under the
   sticky header when you hover a card near the top of the grid is exactly the case it exists for. */
.almacen-card-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(280px, calc(100vw - 32px));
    padding: var(--sp-2) var(--sp-3);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    color: var(--white);
    background: var(--warm-black);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(44, 62, 45, 0.28);

    /* The tooltip must never eat the hover it was opened by: pointing at the bubble instead of the
       title would fire mouseout on the link and close it, which reads as a flicker. */
    pointer-events: none;

    opacity: 0;
    transition: opacity 0.12s ease;
}

.almacen-card-tooltip.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .almacen-card-tooltip {
        transition: none;
    }
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1200px) {
    ul.wc-block-product-template {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 782px) {
    ul.wc-block-product-template {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* These used to drop to 13px / 15px on a phone — below the 14px floor the type scale declares,
       and on the smallest screen, where legibility is worth the most. A card at two columns has room
       for 14px; it never needed shrinking. Sizes now come from the scale at every width. */
    .shop-product-title {
        padding: 12px 12px 0;
        font-size: var(--fs-xs);
        min-height: calc(12px + 2 * 1.35em);
    }

    .shop-product-price {
        padding: 6px 12px 0;
        font-size: var(--fs-sm);
    }

    .shop-add-to-cart {
        padding: 10px 12px 12px;
    }

    /* Two columns leaves ~170px of card, too narrow for four pills side by side. Going
       2x2 keeps each one a real tap target — and it is still free, height-wise, because
       the strip is positioned inside the image tile either way. */
    .almacen-peso-pills {
        padding: 10px 6px 6px;
    }

    /* See the note at the 600px PDP rule: --peso-cols-sm is shared across both breakpoints. */
    .almacen-peso-options {
        grid-template-columns: repeat(var(--peso-cols-sm, 2), 1fr);
    }

    .almacen-peso-pill {
        height: 34px;
        font-size: 11px;
    }
}

/* UNA SOLA COLUMNA EN EL TELÉFONO.

   A dos columnas la tarjeta mide 173px, y en ese ancho el nombre se cortaba a mitad de palabra
   («ACAI MARACAIBO CON CACAO X…») y la chapita de stock —que es `white-space: nowrap` y no puede
   partirse— se salía de la tarjeta y quedaba cizallada por su `overflow: hidden`: se leía
   «QUEDAN 1 EN ST». A una columna la tarjeta pasa a 358px y las dos cosas entran solas, sin
   tocar ni el clamp del título ni la chapita.

   El escalón es 600px porque es donde este tema ya pasa a una columna las otras grillas de
   tarjetas (las de mayoristas), no porque 600 tenga nada de especial.

   LO QUE CUESTA, PARA QUE ESTÉ ESCRITO: la imagen es `aspect-ratio: 1`, así que a todo el ancho
   la tarjeta pasa de 354px a 539px de alto. Una página de 16 productos mide 8.242px en vez de
   2.654px — unas diez pantallas. Es una decisión tomada a propósito, con el número a la vista:
   se prioriza ver bien el producto por sobre ver muchos de una.

   `!important` porque la regla de 782px de arriba lo usa; sin él, ésta pierde aunque venga
   después. */
@media (max-width: 600px) {
    ul.wc-block-product-template {
        grid-template-columns: 1fr !important;
    }

    /* El `min-height` del título existe para que dos tarjetas lado a lado tengan la misma altura
       aunque un nombre ocupe un renglón y el otro dos. Con una sola columna no hay nada que
       emparejar, y reservar el segundo renglón siempre es un hueco que no dice nada. */
    .shop-product-title {
        min-height: 0;
    }
}

/* ==========================================================================
   THE ADD-TO-CART TOAST

   WooCommerce prints its "added to cart" notice as a full-width banner at the top of <main>, which
   shoves the page down and appears nowhere near where the shopper is looking. This restyles that
   SAME element as a toast — the markup, copy, action link and ARIA are WooCommerce's; only the box
   moves. toast.js decides what qualifies (never an error, never cart/checkout) and adds
   .almacen-toast.
   ========================================================================== */

.almacen-toast {
    position: fixed;
    z-index: 9999;
    right: var(--sp-6);
    bottom: var(--sp-6);
    left: auto;
    width: min(400px, calc(100vw - 32px));
    /* The block ships alignwide, and store-notices.css caps it at the global wide-size. */
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: almacen-toast-in 0.25s ease-out;
}

.almacen-toast .woocommerce-notices-wrapper {
    margin: 0;
}

.almacen-toast .wc-block-components-notice-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    /* store-notices.css sets `padding: 16px !important`, so this has to shout back. */
    margin: 0 !important;
    padding: var(--sp-3) var(--sp-4) !important;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--warm-black);
    background: var(--white);
    border: 1px solid rgba(74, 103, 65, 0.25);
    border-radius: 10px;
    /* A toast floats above the page, so it needs a shadow to read as a layer rather than a patch. */
    box-shadow: 0 10px 32px rgba(44, 62, 45, 0.18);
}

/* WooCommerce's tick is #4ab866 — a green that belongs to no other part of this site. */
.almacen-toast .wc-block-components-notice-banner.is-success > svg {
    flex: none;
    width: 22px;
    height: 22px;
    background-color: var(--forest-green);
    fill: var(--white);
    border-radius: 50%;
    padding: 2px;
}

.almacen-toast .wc-block-components-notice-banner__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Error variant. The success toast reads calm and green; an error has to read as an error the
   instant it lands, so the frame takes the theme's error red and the icon is tinted to match. */
.almacen-toast.has-error .wc-block-components-notice-banner {
    border-color: var(--error-red);
    box-shadow: 0 10px 32px rgba(212, 53, 28, 0.22);
}

.almacen-toast.has-error .wc-block-components-notice-banner.is-error > svg {
    flex: none;
    width: 22px;
    height: 22px;
    fill: var(--error-red);
}

/* "Ver carrito" arrives with class="button", which would make a second, competing green block
   inside a 400px toast. It is the secondary action here — the toast is a confirmation, not a
   decision — so it reads as a link. */
.almacen-toast .wc-block-components-notice-banner__content .button {
    display: inline;
    margin: 0 0 0 4px;
    padding: 0;
    font-size: inherit;
    font-weight: 700;
    color: var(--forest-green);
    background: none !important;
    border: 0;
    border-radius: 0;
    text-decoration: underline;
}

.almacen-toast .wc-block-components-notice-banner__content .button:hover {
    color: var(--dark-green);
}

.almacen-toast__dismiss {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32px: comfortably over the 24x24 minimum in WCAG 2.5.8 (Target Size). */
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.almacen-toast__dismiss:hover {
    color: var(--warm-black);
    background: rgba(44, 62, 45, 0.08);
}

.almacen-toast__dismiss:focus-visible {
    outline: 2px solid var(--forest-green);
    outline-offset: 2px;
}

.almacen-toast.is-hiding {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes almacen-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Full width at the bottom on a phone — a 400px card pinned to one corner is most of a small
   screen anyway, and centring it there is where the pattern is expected. */
@media (max-width: 600px) {
    .almacen-toast {
        right: var(--sp-4);
        bottom: var(--sp-4);
        left: var(--sp-4);
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .almacen-toast {
        animation: none;
    }

    .almacen-toast.is-hiding {
        transform: none;
        transition: opacity 0.2s ease;
    }
}


/* ==========================================================================
   THE ORDER SUMMARY CARD

   This is the panel that answers "what am I actually paying for, and how much". Baymard's finding is
   blunt: 33% of mobile sites fail to show the total cost before asking for card details, and users
   abandon over exactly that. So the card's job is not to be pretty — it is to be READABLE at a
   glance, and to make the TOTAL the loudest thing in it.

   The hierarchy, deliberately: total > line prices > product names > labels. Before this, the
   product name, the price and the "Subtotal" label were all the same weight and near the same size,
   so the card read as one grey block and the eye had nowhere to land.
   ========================================================================== */

/* ONE card, not a box-in-a-box. The base rule already gives this element a white background, a
   radius and a soft shadow — that IS the card. Adding a hard border on top of the shadow is what
   made it read as a bordered box sitting inside a card. Padding only here; the card treatment stays
   in the base rule so there is a single source of truth for it. */
.wp-block-woocommerce-checkout-order-summary-block {
    padding: var(--sp-6);
}

/* The heading. On desktop it is a title; on mobile Woo swaps it for a <button> that expands the
   card. Both get the same treatment so the card looks like one thing at every width. */
.wc-block-components-checkout-order-summary__title,
.wc-block-components-order-summary__button {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: var(--fs-md) !important;
    font-weight: 600 !important;
    color: var(--warm-black) !important;
}

/* CLEAN NUMBERS EVERYWHERE. Cormorant Garamond defaults to OLD-STYLE (text) figures — digits that
   sit at wandering heights and dip below the baseline. Lovely in a paragraph, wrong for money: it
   made "$17.645,00" look unstable. Force LINING + TABULAR figures on every formatted amount, so the
   digits are uniform height and column-aligned (`tnum`) like a proper price — the clean look of the
   product rows, applied to the serif totals too. */
.wc-block-formatted-money-amount {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* The collapsed summary's total specifically. The "Resumen del pedido" label keeps the elegant
   serif; the number switches to the same clean sans treatment as every other price in the summary
   (see the reference: the product-row price). Serif label + tabular sans number is a deliberate,
   common pairing — it reads as intentional, not mismatched. */
.wc-block-components-checkout-order-summary__title-price {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    color: var(--forest-green) !important;
}

/* PRODUCT ROWS. Thumbnail, name, price. The price is the thing being decided on, so it is the
   heaviest element in the row and it is right-aligned into a column of its own — a ragged price
   column is unreadable, and these are ERP names that wrap to three lines. */
/* EL HUECO LO DICTA LA CHAPITA, NO EL OJO.

   La chapita de cantidad se centra sobre la esquina de la miniatura con `translate(50%, -50%)`,
   así que la mitad de su ancho vive AFUERA de la miniatura. Medido: 29,6px de ancho, 14,8px de
   sobresalir — y es constante, no depende del ancho de la pantalla ni de si la cantidad tiene una
   cifra o dos (el `min-width: 24px` más el padding la dejan siempre en ~30px).

   Contra ese número, el hueco entre la miniatura y el nombre se calcula solo:
     12px (--sp-3) -> -2,8px : la chapita se MONTA sobre la primera letra
     16px (--sp-4) ->  1,2px : no se tocan, pero se rozan
     24px (--sp-6) ->  9,2px : aire de verdad
   De ahí --sp-6. No es una elección estética: 12 y 16 están, literalmente, por debajo de lo que
   la chapita ocupa. */
.wc-block-components-order-summary-item {
    padding: var(--sp-4) 0;
    gap: var(--sp-6);
}

/* THE PRICE WAS OVERFLOWING the card's right edge on mobile. The row is a flex; the name column has
   to be allowed to shrink (`min-width: 0`, or a long unbreakable ERP name pins the row wider than the
   card and shoves the price out), and the price column must not shrink or wrap.

   Y SE LE DEVUELVE EL ANCHO QUE WOO LE COBRABA DE GUTTER. Woo trae
   `padding: 4px 12px 12px 24px` en esta columna, y esos 24px de la izquierda se suman al `gap: 12px`
   de la fila: 36px de aire entre la miniatura y el nombre, en la columna más angosta de la página.
   Eso es lo que empujaba los nombres del ERP a cuatro y cinco renglones. El separador ya lo pone el
   `gap`, así que el padding izquierdo sobra.

   OJO CON LA ESPECIFICIDAD, que acá me equivoqué una vez: la regla de Woo es 0-1-0, igual que
   `.wc-block-components-order-summary-item__description` a secas, PERO checkout.css se encola
   DESPUÉS del style.css del tema. En un empate de especificidad gana el que viene último en la
   cascada, o sea Woo. Con el selector corto el `padding: 0` no ganaba nunca y el gutter seguía
   ahí, medido en el navegador. Hace falta subir a 0-2-0. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__description {
    min-width: 0;
    padding: 0;
}

.wc-block-components-order-summary-item__total-price {
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

/* LA MINIATURA NO SE ACHICA. Éste era el bug que se veía peor.

   Woo le da al contenedor de la imagen `width: 48px`, pero la fila es un flex y más arriba, en
   este mismo archivo, hay un `.wc-block-components-order-summary-item > * { min-width: 0 }`
   —puesto para que un nombre largo del ERP pueda encogerse en vez de empujar el precio afuera—
   que también le saca el piso a la miniatura. Con `flex-shrink` en su valor por defecto, el
   contenedor cedía ancho a medida que el nombre crecía: medido, 47px con un nombre corto y 29px
   con uno de 59 caracteres. La `<img>` de adentro NO se achicaba, así que se desbordaba y quedaba
   recortada contra el `overflow: hidden` del contenedor: eso es la astilla que se veía, y por eso
   cada producto tenía una miniatura de un tamaño distinto.

   `flex: 0 0 56px` + `min-width` explícito la sacan de la negociación: una miniatura no es
   contenido elástico. El `min-width` de arriba sigue valiendo para la columna del nombre, que es
   la que sí tiene que poder encogerse. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image {
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    margin-top: 0;
    padding-bottom: 0;
    position: relative;
    /* La chapita de cantidad se centra sobre la esquina con `translate(50%, -50%)`, o sea que la
       mitad vive AFUERA. Con `overflow: hidden` acá quedaba cortada al ras: sólo se veía un gajo
       verde y nunca el número. El recorte lo hace ahora la propia imagen con su border-radius. */
    overflow: visible;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img,
.wc-block-components-order-summary-item__image > img {
    width: 56px;
    max-width: 56px;
    height: 56px;
    /* `fill` era lo que venía: deformaba cualquier foto que no fuera cuadrada. */
    object-fit: cover;
    display: block;
}

.wc-block-components-order-summary-item__image img {
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* El nombre en la tipografía de interfaz, no en la de titulares. Woo lo emite como <h3>, así que
   se comía la regla global de encabezados y salía en Cormorant: una serif de display, con cifras
   de estilo antiguo, a 14px y en mayúsculas de nombres del ERP. Es la peor combinación posible
   para leer de un vistazo lo que uno está por pagar. */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.35;
}

/* UN SOLO PRECIO POR RENGLÓN.

   Woo dibuja siempre los dos: el unitario debajo del nombre y el total de la línea a la derecha.
   Con cantidad 1 —el caso normal— son EL MISMO NÚMERO, repetido a diez píxeles de distancia. Y
   con cantidad 3 son distintos pero los dos van sin etiqueta, así que el cliente ve dos importes
   y no sabe cuál es el que va a pagar. Un intento anterior lo achicó y lo apagó; el problema no
   era el peso, era que estaba.

   Queda el total de la línea, que es el número que suma al pedido, y la cantidad la sigue
   diciendo la chapita verde sobre la miniatura. Es el patrón de cualquier resumen de compra.
   Si alguna vez hace falta mostrar el unitario, va con etiqueta ("c/u") y sólo cuando la cantidad
   es mayor que 1 — y eso no se puede decidir desde CSS. */
.wc-block-components-order-summary-item__individual-prices {
    display: none;
}

/* The quantity badge — a green pill over the thumbnail. The `!important`s are not decoration: the
   Mercado Pago plugin's stylesheet forces this element to a white background with a 2px border
   (measured in the browser), which turned the badge into a washed-out box that read as a broken
   image. We have to outrank it. */
.wc-block-components-order-summary-item__quantity {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--sp-2);
    border: none !important;
    border-radius: 12px !important;
    background: var(--forest-green) !important;
    color: var(--white) !important;
    font-family: 'Mulish', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* EN EL TELÉFONO EL PRECIO SE APILA DEBAJO DEL NOMBRE.

   La fila es miniatura | nombre | precio, y el precio es `white-space: nowrap` y `flex: 0 0 auto`
   —tiene que serlo, si no un importe largo se parte por la mitad—. En un teléfono de 360px eso
   deja de cerrar: medido, la fila entera mide 262px, de los cuales la miniatura se lleva 56, el
   precio 78, y al nombre le quedan 68. En 68px un nombre del ERP no se acomoda, se DESARMA:
   «ACAI MARAC / AIBO / 450 cc», cortado a mitad de palabra por el `overflow-wrap: anywhere` que
   Woo le pone al nombre.

   Apilado, el nombre pasa a 194px y el precio se va al renglón de abajo, alineado con él. Se usa
   grid y no `flex-wrap` porque hace falta decir explícitamente que el precio va en la COLUMNA DEL
   NOMBRE: envolviendo, el precio caería en la columna de la miniatura.

   El `padding: 0` de la descripción va acá otra vez, y con la especificidad subida a 0-2-0 a
   propósito: Woo le pone `padding: 4px 12px 12px 24px` con 0-1-0 igual que la regla de más
   arriba, pero checkout.css se encola DESPUÉS del tema, así que en un empate gana Woo. Sin esto
   el nombre queda indentado 24px respecto del precio y los dos renglones no alinean.

   El hueco entre columnas es el mismo --sp-6 que arriba, y por la misma razón medida: la chapita
   sobresale 14,8px de la miniatura, así que cualquier cosa por debajo de eso la deja montada
   sobre la primera letra del nombre. */
@media (max-width: 600px) {
    .wc-block-components-order-summary-item {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: var(--sp-6);
        row-gap: 2px;
        align-items: start;
    }

    .wc-block-components-order-summary-item__image {
        grid-column: 1;
        grid-row: 1;
    }

    .wc-block-components-order-summary .wc-block-components-order-summary-item__description,
    .wc-block-components-order-summary-item__description {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
    }

    /* `margin-left: auto` y `text-align: right` son de Woo, y sirven mientras el precio es una
       columna a la derecha. Apilado debajo del nombre tienen que irse los dos. */
    .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price,
    .wc-block-components-order-summary-item__total-price {
        grid-column: 2;
        grid-row: 2;
        margin-left: 0 !important;
        text-align: left !important;
        padding-top: 0 !important;
    }
}

/* TOTALS. Label left, number right, on a quiet baseline. */
.wc-block-components-totals-item {
    padding: var(--sp-2) 0;
}

.wc-block-components-totals-item__label {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.wc-block-components-totals-item__value {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--warm-black);
}

/* The shipping row carries a long explanatory string ("Retiro en local (Retiro en local — Almacén
   ...)"). Let it breathe and stop it shoving the price off the row. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__label {
    line-height: 1.4;
}

/* THE TOTAL. The single most important number on the page. It gets its own rule, its own weight and
   a real rule above it — a shopper should be able to find it without reading anything else. */
.wc-block-components-totals-footer-item {
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 2px solid var(--warm-black);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--warm-black);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--fs-lg);
    font-weight: 700;
}

/* ==========================================================================
   MOBILE

   The phone is where this store's orders come from, so this is not a "shrink the desktop" block.
   Two things get fixed: the summary stops being a wall of text you have to scroll past to reach the
   form, and the vertical spacing stops being desktop spacing at phone size.
   ========================================================================== */

@media (max-width: 991px) {
    /* FIELDS GO EDGE-TO-EDGE. On a phone the white form card with 28-32px of side padding wastes a
       quarter of the screen framing inputs that are already inside a page gutter. The card is
       redundant on mobile — the page background can BE the form background. So: transparent, no
       shadow, no radius, no side padding. The inputs then run to the page gutter and get the full
       width. Overrides the base `background:white !important` and the 991/600 padding rules, which is
       why these carry `!important` and sit late in the file. */
    .wp-block-woocommerce-checkout-fields-block,
    .wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* THE COLLAPSED SUMMARY IS A CONTROL, SO MAKE IT LOOK LIKE ONE.
       Woo drops the order summary above the form on mobile as a collapsed toggle. It rendered as a
       bare line of text — no affordance that it opens, and no total. Baymard: keep the summary
       "collapsed but accessible", and never make the shopper hunt for what they are paying. Now it
       is a full-width 56px row: name on the left, TOTAL on the right, always visible without
       opening it. */
    .wc-block-components-order-summary__button {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        min-height: 56px !important;
        margin-bottom: 0 !important;
        padding: var(--sp-3) 0 !important;
    }

    .wc-block-components-order-summary__button-text {
        flex: 1 1 auto;
        text-align: left;
    }

    /* Woo's chevron. It had no transition and no size, so it read as a stray glyph. */
    .wc-block-components-order-summary__button-icon {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        transition: transform var(--reveal-ms) var(--reveal-ease);
    }

    /* The summary card itself sits at the top of the page: tighter, and visually secondary to the
       form, which is what the shopper actually has to DO. */
    .wp-block-woocommerce-checkout-order-summary-block {
        padding: var(--sp-4);
    }

    .wc-block-components-order-summary-item {
        padding: var(--sp-3) 0;
    }

    /* Sections were carrying desktop rhythm (40px) on a 390px screen, which turns the form into a
       scroll. 24px is enough to separate two steps when each one is a full-width card row. */
    .wc-block-components-checkout-step {
        margin-bottom: var(--sp-6);
        padding-bottom: var(--sp-4);
    }

    /* The page header ate the first screenful: a 36px serif title, then a breadcrumb, then 30px of
       padding, before anything actionable. */
    .checkout-page .checkout-header-section {
        padding-top: var(--sp-4) !important;
        padding-bottom: var(--sp-4) !important;
    }

    .checkout-title {
        font-size: 1.75rem !important;
    }

    .checkout-progress {
        gap: var(--sp-2) !important;
    }

    /* Trust signals: they wrapped into a ragged three-line stack. Let them sit on one row, and drop
       the dividers, which were doing nothing but adding glyphs. */
    .checkout-trust-signals {
        flex-wrap: wrap !important;
        gap: var(--sp-2) var(--sp-3) !important;
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    .checkout-trust-signals .trust-divider {
        display: none;
    }
}

@media (max-width: 600px) {
    /* ----------------------------------------------------------------------
       ENVIAR / RETIRO EN EL TELÉFONO: una ficha, no una fila apretada.

       Las dos tarjetas siguen lado a lado —es lo que deja comparar retiro contra envío, y
       separarlas es cómo el 60% de los sujetos de Baymard se pierde el retiro— pero a 390px cada
       una mide 173px, con 141px útiles adentro. En esa fila entran la marca (18px + 10px de
       margen), el ícono (28px) y el texto. «Enviar» suma 102px y entra; «Retiro en local» suma
       158px y NO entra, así que el texto se caía al renglón de abajo y la marca quedaba pegada al
       ícono como si fueran dos íconos sueltos. Las dos tarjetas terminaban con formas distintas:
       una de un renglón, la otra de dos.

       Se acomoda como ficha: el ícono arriba, el texto abajo, y la marca sale del flujo a la
       esquina. Así las dos tarjetas tienen la MISMA forma, el texto entra en un renglón hasta en
       320px (138px de ancho, 97.7px de texto — verificado), y la marca en la esquina es el gesto
       de "elegida" que ya usa cualquier ficha seleccionable.

       El selector repite `[role="radio"]` a propósito: la regla de pintado es 0-3-0 y una media
       query no suma especificidad. La regla que había acá era 0-1-0 y NUNCA ganó — su
       `min-height: 56px` jamás se aplicó, la tarjeta siguió en los 72px de la regla de pintado.
       ---------------------------------------------------------------------- */
    .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option[role="radio"] {
        min-height: 76px;
        padding: var(--sp-3) var(--sp-2);
        gap: var(--sp-1);
    }

    /* Ícono arriba, texto abajo. `nowrap` porque acá ya no hay nada que envolver: la marca salió
       del flujo y quedan dos hijos, uno por renglón. */
    .wc-block-checkout__shipping-method-option-title-wrapper {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--sp-1);
        text-align: center;
    }

    /* La marca a la esquina. Ancla contra la tarjeta, que ya es `position: relative`. Se anula el
       `margin-right` de la regla base, que sólo tiene sentido cuando la marca va en la fila. */
    .wc-block-checkout__shipping-method-option-title-wrapper::before {
        position: absolute;
        top: var(--sp-2);
        right: var(--sp-2);
        margin-right: 0;
    }

    /* ----------------------------------------------------------------------
       EL PUNTO DE RETIRO, CON LA MISMA GRAMÁTICA QUE LAS DE ARRIBA.

       Las tarjetas de «Entrega» ponen la marca en la esquina superior derecha; ésta la tenía
       adentro del renglón, a la izquierda del nombre. Dos tarjetas apiladas, a diez píxeles una
       de otra, diciendo "elegida" de dos maneras distintas. Va a la misma esquina.

       El precio se corre 30px para dejarle lugar: la marca mide 18px y se apoya a 16px del borde,
       así que sin ese margen «GRATIS» se le encimaba. Se usa `margin-right` y NO `padding-right`
       en el grupo: ese contenedor es `content-box`, y ahí el padding no encoge la caja, la
       desborda — probado, el precio seguía cayendo debajo de la marca.

       `margin-top: 0` pisa el 1px de alineación óptica de la regla base, que existe para cuando la
       marca va en el renglón. Acá está posicionada, no alineada.
       ---------------------------------------------------------------------- */
    .wc-block-checkout__pickup-options .wc-block-components-radio-control__secondary-label {
        margin-right: 30px;
    }

    .wc-block-checkout__pickup-options .wc-block-components-radio-control__label::before {
        position: absolute;
        top: var(--sp-4);
        right: var(--sp-4);
        margin-top: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   MOBILE GUTTERS: one, not three.   (Must stay LAST — see below.)
   ========================================================================== */

/* On a 393px phone the checkout nested THREE horizontal gutters: the page shell's 16px, inside the
   checkout block's 24px, inside the fields card's 24px. 104px of a 393px screen — 26% of it — spent
   on padding before a single character of the form.

   This block lives at the END of the file on purpose. The earlier `@media (max-width: 1200px)` and
   `@media (max-width: 991px)` sections both re-apply `padding: 0 24px !important` to
   `.checkout-form-container`, and BOTH of them still match at 393px. Same specificity, so the last
   one in the file wins — putting this override earlier (as I first did) silently loses to them.
   Cascade order, not specificity. */
@media (max-width: 782px) {
    .checkout-page .checkout-form-container,
    .checkout-page .wp-block-woocommerce-checkout {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The SUMMARY and cart totals are cards — they keep their internal padding. */
    .wp-block-woocommerce-checkout-order-summary-block,
    .wp-block-woocommerce-cart-totals-block,
    .wc-block-cart__items {
        padding: var(--sp-4) !important;
    }

    /* The FIELDS block is NOT a card on mobile (it went transparent, see the 991px block). It gets no
       padding of its own — the inputs run edge-to-edge inside the single page gutter (the 16px on
       `.checkout-page`). This is the "more horizontal space" ask: 32px of inset each side (page +
       card) becomes 16px (page only). Must live here, after the group rule above, or the card padding
       wins on source order. */
    .wp-block-woocommerce-checkout-fields-block,
    .wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block {
        padding: 0 !important;
    }

    .checkout-page .checkout-trust-signals {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ==========================================================================
   THE CART LINE ITEM — container query, deliberately.
   ========================================================================== */

/* This has to be an `@container` rule, and that is the whole point.

   WooCommerce lays the cart row out with `@container (max-width: 699px)` on `.wp-block-woocommerce-cart`
   (which declares `container-type: inline-size`). The theme was overriding that row with a VIEWPORT
   media query at 782px. Between those two thresholds the rules disagreed: at a 740–782px viewport the
   container measures ~708–750px, so WooCommerce switched to its DESKTOP table layout while the theme
   was still forcing the mobile grid on top of it. The product column computed to `0px` and the name
   printed straight through the line total. That is the overlap you can see in the screenshot.

   Matching WooCommerce's own condition means there is no band where the two can contradict each other.

   The other half of the bug: the image. WooCommerce's mobile grid gives it an 80px track and the theme
   forced `width: 88px !important`, so the image spilled into the product column and the name, price and
   stepper were painted underneath it. It is sized to fit its track now. */
@container (max-width: 699px) {
    .cart-page table.wc-block-cart-items .wc-block-cart-items__row {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) auto !important;
        column-gap: var(--sp-3);
        row-gap: var(--sp-2);
        align-items: start;
        padding: var(--sp-4) 0 !important;
        border-bottom: 1px solid var(--line);
    }

    .cart-page .wc-block-cart-items__row:last-child {
        border-bottom: none;
    }

    .cart-page .wc-block-cart-item__image {
        /* !important throughout: WooCommerce places these cells with
           `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__*` — a 3-class
           selector (0,3,0) that outranks anything reasonable we can write. Without it, its
           `grid-column-end: 4` survives and the PRODUCT cell spans across the TOTAL's column, so the
           name prints straight through the price. */
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 72px !important;
        min-width: 72px !important;
        padding: 0 !important;
    }

    .cart-page .wc-block-cart-item__image img {
        width: 72px !important;
        height: auto;
        border-radius: 8px;
    }

    .cart-page .wc-block-cart-item__product {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 !important;
        min-width: 0;
    }

    .cart-page .wc-block-cart-item__total {
        grid-column: 3 !important;
        grid-row: 1 !important;
        padding: 0 !important;
        text-align: right;
        white-space: nowrap;
    }

    /* The stepper and the remove button belong on ONE line. WooCommerce stacks them in a column (and
       hides the remove link outright on mobile, which the theme overrides), so the trash icon was
       landing on a line of its own, centred under the row, attached to nothing. */
    .cart-page .wc-block-cart-item__quantity {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--sp-2);
        margin-top: var(--sp-2);
        padding: 0 !important;
    }

    .cart-page .wc-block-cart-item__remove-link {
        margin-top: 0 !important;
        flex: 0 0 auto;
    }
}

/* Long ERP product names must WRAP, not widen the row. WooCommerce ships
   `max-width: max-content` on the name, which lets it grow past its grid track and run straight
   through the line total. This applies at every width — the collision was visible on desktop too. */
.cart-page .wc-block-components-product-name {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   EL TOGGLE «ENVIAR | RETIRO EN LOCAL»: MIENTRAS EL CARRITO SE RECALCULA

   Tocar el toggle cambia tres cosas a la vez: los medios de pago (sólo hay «Efectivo» si el
   cliente pasa por el local), el descuento del 10% y la línea de envío. Todo eso lo decide el
   servidor, y aunque ahora viaja en UN solo request en vez de dos, sigue habiendo un viaje.

   Medido en producción antes de este trabajo: 1887ms desde el click hasta que la lista de pagos
   era correcta, sin ninguna señal de que estuviera pasando algo. El cliente veía la lista vieja,
   después un parpadeo, y a veces la lista correcta se revertía sola. Se leía como un bug.

   Dos capas, y el orden importa:
     1. OPTIMISTA — lo que ya sabemos, se aplica en el mismo frame del click. Al pasar a «Enviar»,
        «Efectivo» se va sin esperar a nadie.
     2. ESQUELETO — lo que hay que preguntarle al servidor se tapa mientras viaja.

   Por qué esconder «Efectivo» acá y no en JS: `:has()` se re-evalúa sola en cada render de React.
   Con JS habría que reaplicar la clase cada vez que Woo redibuja la lista, que es exactamente el
   parpadeo que ya tiene `montarManual()` en checkout-direccion.js. En un navegador sin `:has()`
   la regla se descarta entera y «Efectivo» se esconde recién con la respuesta: el comportamiento
   de antes, que es el modo correcto de fallar.

   ESCONDER NO ES AUTORIZAR. El que decide sigue siendo `almacen_efectivo_solo_en_retiro()` en
   PHP: bajo «Enviar» el gateway no está en `get_available_payment_gateways()`, así que aunque
   alguien saltee el CSS no puede pagar en efectivo un pedido con envío.
   ========================================================================== */

body.almacen-sin-efectivo .wc-block-checkout__payment-method
    .wc-block-components-radio-control-accordion-option:has( input[value="cod"] ) {
    display: none;
}

/* El esqueleto se dibuja SOBRE el contenido, no en su lugar: la lista real sigue ocupando su
   altura, atenuada. Así la caja no cambia de tamaño y nada salta cuando termina — el problema que
   tiene cualquier esqueleto que reemplaza el contenido y tiene que adivinar su alto. */
.wc-block-checkout__payment-method .wc-block-components-checkout-step__content {
    position: relative;
}

body.almacen-sincronizando .wc-block-checkout__payment-method .wc-block-components-radio-control {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity var(--reveal-ms) var(--reveal-ease);
}

body.almacen-sincronizando .wc-block-checkout__payment-method
    .wc-block-components-checkout-step__content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    background-image: linear-gradient(
        100deg,
        rgba(245, 240, 232, 0) 25%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(245, 240, 232, 0) 75%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: almacen-esqueleto 1.15s ease-in-out infinite;
}

@keyframes almacen-esqueleto {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
}

/* El descuento por retiro y la línea de envío también cambian con el toggle, y llegan en la misma
   respuesta. Atenuarlos evita que el cliente lea un total que está por cambiar.

   OJO CON LOS NOMBRES: el fee NO se dibuja con `.wc-block-components-totals-fees` — esa clase no
   existe en el DOM de esta versión. Verificado en vivo: el bloque es
   `.wp-block-woocommerce-checkout-order-summary-fee-block`. La línea de envío sí usa
   `.wc-block-components-totals-shipping`. */
body.almacen-sincronizando .wp-block-woocommerce-checkout-order-summary-fee-block,
body.almacen-sincronizando .wp-block-woocommerce-checkout-order-summary-discount-block,
body.almacen-sincronizando .wc-block-components-totals-shipping {
    opacity: 0.4;
    transition: opacity var(--reveal-ms) var(--reveal-ease);
}

/* «Realizar el pedido» no se puede tocar mientras el total está en el aire.
   `pointer-events` ataja el mouse; el Enter con el foco puesto lo ataja el listener en fase de
   captura de almacen-descuento-retiro.js. NO se usa el atributo `disabled`: lo maneja React y lo
   reescribe en el próximo render, y además un botón deshabilitado pierde el foco. */
body.almacen-sincronizando .wc-block-components-checkout-place-order-button {
    opacity: 0.5 !important;
    cursor: progress !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* La misma regla que el resto del tema: si pidieron menos movimiento, no hay brillo. El velo se
   queda quieto y sigue diciendo lo mismo. */
@media ( prefers-reduced-motion: reduce ) {
    body.almacen-sincronizando .wc-block-checkout__payment-method
        .wc-block-components-checkout-step__content::after {
        animation: none;
        background-image: none;
        background-color: rgba(245, 240, 232, 0.55);
    }
}

/* =============================================================================
   DRAWER MÓVIL DE CATEGORÍAS
   =============================================================================

   Reemplaza al overlay del bloque Navigation, que volcaba las 52 categorías en una lista plana,
   en mayúsculas y sin buscador. Ahora: buscador arriba, 9 grupos en acordeón y las hojas adentro.

   TODO SALE DE LOS TOKENS DE :root. No hay un solo color, tamaño ni espacio inventado acá: los
   grises se toman de --ink-muted / --ink-subtle (medidos sobre AA), el tipo de la escala --fs-*
   con piso de 14px, y el espaciado de la grilla de 8pt --sp-*.

   El panel entra desde la DERECHA porque la hamburguesa vive arriba a la derecha: que el panel
   salga de donde está el dedo es lo que hace que se lea como una sola acción. */

.almacen-drawer-open {
    display: none;            /* sólo móvil; se prende en el media query de abajo */
    align-items: center;
    justify-content: center;
    width: 44px;              /* el mínimo cómodo, igual que el resto de los controles del tema */
    height: 44px;
    /* MARGIN 0, Y HACE FALTA DECIRLO. El botón es hijo directo de un `wp:group`, y WordPress le
       aplica a todo hijo de un grupo la regla global `:root :where(.is-layout-flow) > *` con
       `margin-block-start: 1.2rem`. Son 19,2px arriba que el carrito y la cuenta no tienen: el
       botón quedaba 9,6px MÁS ABAJO que los otros dos iconos del header. Como `:where()` no suma
       especificidad, alcanza con declararlo acá. */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--warm-black);
    cursor: pointer;
}

.almacen-drawer-open:hover { color: var(--forest-green); }

.almacen-drawer[hidden] { display: none; }

.almacen-drawer {
    position: fixed;
    inset: 0;
    z-index: 999999;          /* por encima del header sticky */
}

.almacen-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(44, 62, 45, 0.55);
    opacity: 0;
    transition: opacity 240ms ease;
}

.almacen-drawer.is-open .almacen-drawer__scrim { opacity: 1; }

.almacen-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(88vw, 380px);
    height: 100%;
    background: var(--white);
    box-shadow: -8px 0 32px rgba(44, 62, 45, 0.18);
    transform: translateX(100%);
    transition: transform 240ms ease;
    /* El notch y la barra de gestos: sin esto el botón de cerrar queda debajo del notch en iOS. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.almacen-drawer.is-open .almacen-drawer__panel { transform: translateX(0); }

/* ---------- cabecera ---------- */

.almacen-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--warm-cream);
    border-bottom: 1px solid var(--line);
}

.almacen-drawer__brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--warm-black);
}

.almacen-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: calc(var(--sp-3) * -1);   /* alinea el icono con el borde óptico */
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--warm-black);
    cursor: pointer;
}

.almacen-drawer__close:hover { background: rgba(44, 62, 45, 0.08); }

/* ---------- buscador ---------- */

.almacen-drawer__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.almacen-drawer__search-icon {
    position: absolute;
    left: calc(var(--sp-4) + var(--sp-3));
    color: var(--ink-subtle);
    pointer-events: none;
}

/* DOS CLASES, Y NO ES DECORACIÓN: la regla global de arriba es `input[type="search"]`, que con su
   selector de atributo pesa (0,1,1) — MÁS que una clase sola (0,1,0). Con `.almacen-drawer__search-input`
   a secas ganaba ella y el padding-left volvía a 16px, así que el icono de la lupa quedaba encima
   del placeholder. Anidando la clase del formulario llegamos a (0,2,0) y gana sin usar !important. */
.almacen-drawer__search .almacen-drawer__search-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 var(--sp-4) 0 var(--sp-12);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--warm-cream);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);   /* 16px: por debajo de esto iOS hace zoom al enfocar */
    color: var(--warm-black);
}

.almacen-drawer__search-input::placeholder { color: var(--ink-subtle); }

.almacen-drawer__search-input:focus {
    outline: 2px solid var(--forest-green);
    outline-offset: 1px;
    background: var(--white);
}

/* ---------- cuerpo scrolleable ---------- */

.almacen-drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-3) 0 var(--sp-6);
}

.almacen-drawer__label {
    margin: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}

.almacen-drawer__quick,
.almacen-drawer__groups,
.almacen-drawer__sub,
.almacen-drawer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.almacen-drawer__quick a,
.almacen-drawer__links a,
.almacen-drawer__group-btn,
.almacen-drawer__group-link,
.almacen-drawer__sub a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    /* HACE FALTA: los <button> ya vienen en border-box, pero los <a> heredan content-box, así que
       la misma regla daba filas de 48px en los grupos y de 72px (48 + 24 de padding) en los
       enlaces. Dos alturas distintas para filas que se leen como la misma cosa. */
    box-sizing: border-box;
    min-height: 48px;          /* > 44px: son las filas que más se tocan */
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    background: transparent;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    color: var(--warm-black);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.almacen-drawer__quick a:hover,
.almacen-drawer__links a:hover,
.almacen-drawer__group-btn:hover,
.almacen-drawer__group-link:hover,
.almacen-drawer__sub a:hover {
    background: rgba(74, 103, 65, 0.08);
    color: var(--forest-green);
}

/* Los nombres llegan del ERP en MAYÚSCULAS ("ADEREZOS, CONSERVAS Y FERMENTOS") y una columna
   entera gritando es ilegible. Se arregla en presentación, no en los datos: el próximo sync del
   ERP reescribiría cualquier cambio hecho sobre los términos.
   `inline-block` es necesario: ::first-letter sólo aplica sobre una caja de bloque. */
[data-drawer-text] {
    display: inline-block;
    text-transform: lowercase;
}

[data-drawer-text]::first-letter { text-transform: uppercase; }

/* El nombre empuja al conteo contra el borde derecho. Va también sobre el texto de las hojas: sin
   esto el número quedaba pegado al nombre ("Frutas 26") en vez de alineado con el resto de la
   columna. (Ya no hay conteo a la derecha, pero el `flex: 1` se queda: es lo que hace que la fila
   entera sea zona de toque y no sólo el ancho del texto.) */
.almacen-drawer__name,
.almacen-drawer__sub a > [data-drawer-text] {
    flex: 1;
}

/* ---------- accesos rápidos ---------- */

.almacen-drawer__quick {
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line);
}

.almacen-drawer__quick a { font-weight: 600; }

/* ---------- grupos (acordeón) ---------- */

.almacen-drawer__group + .almacen-drawer__group { border-top: 1px solid var(--line); }

.almacen-drawer__group-btn { font-weight: 600; }

.almacen-drawer__chevron {
    flex-shrink: 0;
    color: var(--ink-subtle);
    transition: transform 200ms ease;
}

.almacen-drawer__group.is-open > .almacen-drawer__group-btn { color: var(--forest-green); }
.almacen-drawer__group.is-open .almacen-drawer__chevron { transform: rotate(180deg); }

.almacen-drawer__sub {
    background: var(--warm-cream);
    border-top: 1px solid var(--line);
}

.almacen-drawer__sub a {
    min-height: 44px;
    padding-left: var(--sp-8);   /* la sangría es lo que dice "esto cuelga de lo de arriba" */
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.almacen-drawer__all { font-weight: 600; color: var(--forest-green) !important; }

/* Categoría en la que estás. MISMO tratamiento que la opción elegida en la hoja de «Ordenar»:
   fondo tenue + verde + negrita + tilde a la derecha (el tilde lo pone mobile-drawer.js). Antes
   llevaba además una barra vertical a la izquierda, y eso hacía que dos hojas hermanas marcaran
   "lo elegido" de dos maneras distintas. El tilde ya cumple lo importante —no depender sólo del
   color para distinguirlo—, así que la barra sobraba. */
.almacen-drawer__sub a.is-current,
.almacen-drawer__group-link.is-current {
    background: rgba(74, 103, 65, 0.10);
    color: var(--forest-green);
    font-weight: 700;
}

/* ---------- enlaces institucionales ---------- */

.almacen-drawer__links {
    margin-top: var(--sp-4);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
}

.almacen-drawer__links a {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.almacen-drawer__empty {
    margin: var(--sp-6) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    text-align: center;
}

/* ---------- pie ---------- */

.almacen-drawer__foot {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    background: var(--warm-cream);
}

.almacen-drawer__wpp {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px;
    background: var(--forest-green);
    color: var(--white);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
}

.almacen-drawer__wpp:hover { background: var(--dark-green); color: var(--white); }

/* ---------- bloqueo de scroll del fondo ---------- */

body.almacen-drawer-abierto {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ---------- sólo móvil ---------- */

@media (max-width: 782px) {
    .almacen-drawer-open { display: flex; }
}

@media (min-width: 783px) {
    .almacen-drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .almacen-drawer__panel,
    .almacen-drawer__scrim,
    .almacen-drawer__chevron {
        transition: none;
    }
}

/* =============================================================================
   SIDEBAR DE LA TIENDA — mismo lenguaje que el drawer
   =============================================================================

   Al agrupar la taxonomía, el bloque de WooCommerce pasó a dibujar el árbol solo y shop-sidebar.js
   ya le ponía los carets. Falta lo que el drawer sí tenía: filtro para escribir en vez de abrir
   grupos a ciegas, y el conteo alineado a la derecha. */

.sidebar-filter {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--sp-3);
}

.sidebar-filter__icon {
    position: absolute;
    left: var(--sp-3);
    color: var(--ink-subtle);
    pointer-events: none;
}

/* Dos clases por lo mismo que en el drawer: `input[type="search"]` (0,1,1) le gana a una clase
   sola (0,1,0) y le pisaba el padding, dejando la lupa encima del texto. */
.sidebar-filter .sidebar-filter__input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 var(--sp-3) 0 var(--sp-8);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    color: var(--warm-black);
}

.sidebar-filter .sidebar-filter__input:focus {
    outline: 2px solid var(--forest-green);
    outline-offset: 1px;
}

.sidebar-filter__empty {
    margin: var(--sp-4) 0;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    text-align: center;
}

/* Acá vivían las reglas del conteo por categoría (posicionarlo a la derecha, correrlo para no chocar
   con el caret, y reservarle padding en el enlace). Se fueron con el conteo: el número no ayuda a
   elegir y delataba las categorías flacas. El `padding-right: 38px` que necesitan los padres para su
   caret ya lo pone la regla `.has-children > a` de más arriba, que es anterior a todo esto. */

/* =============================================================================
   BARRA COMPACTA DE LA TIENDA (MÓVIL)
   =============================================================================

   Antes la cabecera de /tienda/ apilaba cuatro bloques de ancho completo —breadcrumb, «Categorías»,
   buscador, y conteo + orden— que sumaban 246px: en una pantalla de 812 el primer producto arrancaba
   en y=428, o sea que más de la mitad era interfaz. Acá van los mismos controles en dos renglones.

   Los tres controles compartían página pero no lenguaje: botón verde sólido de radio 8, input blanco
   soldado a un botón cuadrado, y un <select> pelado. Ahora los tres miden 44px, tienen el mismo radio
   y salen de los mismos tokens. */

.shop-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

/* ---------- renglón 1: buscador ---------- */

.shop-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
}

.shop-toolbar__search-icon {
    position: absolute;
    left: var(--sp-3);
    color: var(--ink-subtle);
    pointer-events: none;
}

/* Dos clases, igual que en el drawer: `input[type="search"]` pesa (0,1,1) por el selector de
   atributo y le gana a una clase sola (0,1,0), pisándole el padding y metiendo la lupa encima del
   texto. Anidando llegamos a (0,2,0) y no hace falta !important. */
.shop-toolbar__search .shop-toolbar__search-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 var(--sp-4) 0 var(--sp-12);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);   /* 16px: por debajo de esto iOS hace zoom al enfocar */
    color: var(--warm-black);
}

.shop-toolbar__search .shop-toolbar__search-input::placeholder {
    color: var(--ink-subtle);
    opacity: 1;
}

.shop-toolbar__search .shop-toolbar__search-input:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.18);   /* el patrón de foco del tema, no el del navegador */
}

/* ---------- renglón 2: chips + conteo ---------- */

.shop-toolbar__row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--warm-black);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* NOWRAP, Y NO ES COSMÉTICO. Los chips son items de un flex donde el conteo va con `nowrap` y
   `margin-left:auto`: sin esto los chips ceden todo el ancho, «Categorías» se parte en una letra por
   renglón y el chip pasa de 44px a 177px de alto. Medido: la barra entera se iba a 340px, MÁS que
   los 246px que veníamos a arreglar. */
.shop-chip {
    white-space: nowrap;
}

/* «Categorías» es corto y no se negocia. El de orden sí puede achicarse, y por eso lleva `min-width:0`:
   sin eso un flex item nunca baja de su contenido y el ellipsis del valor no llega a activarse. */
.shop-chip--categorias {
    flex-shrink: 0;
}

.shop-chip--orden {
    min-width: 0;
}

.shop-chip svg {
    flex-shrink: 0;
    color: var(--forest-green);
}

/* LA ETIQUETA VA EN UN <span>, NO SUELTA.
   Un texto suelto adentro de un flex container se mete en una "caja anónima" que arrastra los saltos
   de línea del HTML —el colapso `>\s+<` no los alcanza, porque ahí el espacio está entre una etiqueta
   y TEXTO, no entre dos etiquetas—. Resultado medido: el icono quedaba centrado en el chip y el texto
   8,8px más abajo. Con un span de verdad hay un item de flex con su propia caja, y `align-items:center`
   lo centra igual que al icono.
   NI `line-height: 1` NI `overflow: hidden`, y esto es una cicatriz: los puse juntos y se comieron la
   "g" de «Categorías». Con `line-height: 1` la caja de línea mide exactamente el alto de la fuente,
   así que los descendentes (g, j, p, y) sobresalen; `overflow: hidden` los recortaba al ras. El
   centrado no los necesitaba: lo da `align-items: center` del chip sobre este span. */
.shop-chip__label {
    display: block;
}

/* Feedback de toque: es de las pocas cosas que separan una web de una app. */
.shop-chip:active {
    transform: scale(0.97);
    background: rgba(74, 103, 65, 0.08);
}

.shop-chip:focus-visible {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.18);
}

/* Hay un orden distinto del de fábrica aplicado. El chip no dice CUÁL —no entra al lado del conteo—
   pero sí que hay algo puesto; cuál es se ve en la hoja, tildado. */
.shop-chip.is-active {
    border-color: var(--forest-green);
    background: rgba(74, 103, 65, 0.10);
    color: var(--forest-green);
}


/* ---------- quién se ve dónde ---------- */

/* El chip de orden depende de JavaScript (abre la hoja). Sin JS no se muestra, y en su lugar queda
   el <select> nativo de WooCommerce: si lo escondiéramos igual, la tienda se quedaría sin forma de
   ordenar. La clase `almacen-js` la pone mobile-drawer.js. */
.shop-chip--orden {
    display: none;
}

.almacen-js .shop-chip--orden {
    display: inline-flex;
}

@media (max-width: 782px) {
    /* En móvil manda la barra compacta: los bloques nativos (conteo largo + select) se esconden,
       pero SÓLO si hay JS, por lo mismo de arriba. */
    .almacen-js .shop-top-bar {
        display: none !important;
    }

    /* El breadcrumb medía 56px para decir «Inicio / Tienda». */
    .shop-page .wc-block-breadcrumbs,
    .shop-page .woocommerce-breadcrumb {
        font-size: var(--fs-xs) !important;
        margin-bottom: var(--sp-3) !important;
    }
}

@media (min-width: 783px) {
    /* En escritorio los chips no van: las categorías son una columna y el orden es el select nativo,
       que ahí tiene lugar de sobra. Queda sólo el buscador. */
    .shop-toolbar__row {
        display: none;
    }
}

/* =============================================================================
   HOJA INFERIOR — modificador del drawer
   =============================================================================

   Es el MISMO componente que el drawer de categorías: `mobile-drawer.js` inicializa cualquier
   `.almacen-drawer` con un botón que le apunte por `aria-controls`, y degrada solo si no hay grupos
   ni buscador. O sea que scrim, trampa de foco, bloqueo de scroll, Escape y click en el fondo vienen
   heredados. Lo único propio es esto: anclarla abajo en vez de a la derecha. */

.almacen-drawer--sheet .almacen-drawer__panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 32px rgba(44, 62, 45, 0.18);
}

.almacen-drawer--sheet.is-open .almacen-drawer__panel {
    transform: translateY(0);
}

/* El "agarre" de las hojas nativas: no hace nada, pero es la señal de que esto se desliza desde
   abajo y se puede cerrar. */
.almacen-drawer--sheet .almacen-drawer__head::before {
    content: '';
    position: absolute;
    top: var(--sp-2);
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    transform: translateX(-50%);
}

.almacen-drawer--sheet .almacen-drawer__head {
    position: relative;
    padding-top: var(--sp-6);
}

.almacen-sheet__opciones {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--sp-4);
    overflow-y: auto;
}

.almacen-sheet__opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    box-sizing: border-box;
    min-height: 52px;          /* filas de hoja: más generosas que una lista común */
    padding: var(--sp-3) var(--sp-4);
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-sm);
    color: var(--warm-black);
    text-decoration: none;
}

.almacen-sheet__opcion:hover {
    background: rgba(74, 103, 65, 0.08);
    color: var(--forest-green);
}

/* La opción aplicada: verde, negrita Y un tilde. No sólo color, para que se distinga sin percibir
   el matiz. */
.almacen-sheet__opcion.is-current {
    color: var(--forest-green);
    font-weight: 700;
    background: rgba(74, 103, 65, 0.10);
}

.almacen-sheet__tilde {
    flex-shrink: 0;
    color: var(--forest-green);
}

@media (prefers-reduced-motion: reduce) {
    .shop-chip,
    .almacen-drawer--sheet .almacen-drawer__panel {
        transition: none;
    }
}

/* «Ver todo» del sidebar de escritorio: la primera fila de una categoría padre abierta.
   Existe porque el nombre del padre ahora ABRE en vez de navegar (ver shop-sidebar.js), igual que
   en la hoja del teléfono. Se destaca en verde como su equivalente `.almacen-drawer__all` para que
   se lea como "entrar", y no como una subcategoría más de la lista. */
.shop-sidebar .cat-ver-todo {
    font-weight: 600 !important;
    color: var(--forest-green) !important;
}

/* El nombre del padre pasó a ser un control que abre: que el cursor lo diga. */
.shop-sidebar .has-children > a {
    cursor: pointer;
}