/* =================================================================================================
   Header styles — Eurosur Sanlúcar
   PR_header_modernization_v1 — 2026-07-24 (revisión post-feedback 2026-07-24-bis)

   Header de 2 niveles:
     - .eu-header__main   (logo + search + acciones, sticky en xs+)
     - .eu-header__nav     (menú principal + call-support, sticky+hidden en xs)

   Adaptaciones responsive (mobile-first):
     - xs (≤575px):   [☰] | [LOGO centered 1fr] | [🔍] | [🛒+badge]    — bottom-sheet minicart
     - sm/md (576-991): [☰] | [LOGO] | [search-pill 1fr] | [🛒+badge]    — bottom-sheet minicart
                          + fila 2 menú compacto (Inicio · Productos · Catálogo · Ofertas · Contacto)
     - lg+ (≥992):   [LOGO] | [search-pill 1fr] | [👤 ▼] | [🛒+badge]    — right-drawer minicart
                          + fila 2 nav full-width con phones

   Carga: AFTER style.css (blocks/head.php) → gana la cascada sobre `.mini_cart`,
          `.offcanvas_menu`, `.header_account_list`, etc. del theme legacy.

   Tokens consumidos de tokens.css (--eu-primary, --eu-ink, --eu-steel, --eu-bg,
   --eu-bg-soft, --eu-border, --eu-radius*, --eu-shadow*, --eu-font-*,
   --eu-focus-ring-shadow, --eu-z-*, --eu-touch-target).
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   1. .eu-header — wrapper sticky (todos los viewports)
   El header está en `var(--eu-z-header)` (1040 con nuevo orden z) — POR DEBAJO del backdrop
   (1045) para que cuando un drawer se abra, el backdrop DIM el header (UX ecommerce estándar).
   Y en `var(--eu-z-drawer)`+1 está el drawer activo (1050).
   ------------------------------------------------------------------------------------------------- */
.eu-header {
    position: sticky;
    top: 0;
    z-index: var(--eu-z-header);
    background: var(--eu-bg-soft);
    border-bottom: 1px solid var(--eu-border);
    box-shadow: var(--eu-shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
    .eu-header { transition: none; }
}
.sticky-header.sticky.eu-header {
    background: rgba(255, 255, 255, 0.98);
}

/* -------------------------------------------------------------------------------------------------
   2. .eu-header__main — fila 1 con layout GRID mobile-first
   - Centrado: max-width + margin: 0 auto (mismo ancho que .container Bootstrap 1320px).
   - xs (default): grid `auto 1fr auto auto` → [☰] | [LOGO 1fr] | [🔍] | [🛒]. El LOGO aparece
     centrado entre hamburger e icono-search gracias al `justify-content: center` en la 1fr.
   - sm/md (≥576): grid `auto auto 1fr auto` → [☰] | [LOGO auto] | [search-pill 1fr] | [🛒].
   - lg (≥992): grid `auto 1fr auto auto` → [LOGO] | [search-pill 1fr] | [account] | [🛒].
   ------------------------------------------------------------------------------------------------- */
.eu-header__main {
    display: grid;
    align-items: center;
    column-gap: .5rem;
    width: 100%;
    max-width: 1320px;            /* match Bootstrap .container xl */
    margin: 0 auto;
    padding: .65rem 1rem;
    min-height: 64px;
    grid-template-columns: auto 1fr auto auto;
}

/* Tablet: reorganiza para dar más espacio al search-pill */
@media (min-width: 576px) {
    .eu-header__main {
        column-gap: 1rem;
        padding: .85rem 1.25rem;
        min-height: 72px;
        grid-template-columns: auto auto 1fr auto;
    }
}

/* Desktop: layout clásico ecommerce (LOGO | search centrado | account | minicart) */
@media (min-width: 992px) {
    .eu-header__main {
        column-gap: 1.5rem;
        padding: 1rem 2rem;
        min-height: 88px;
        grid-template-columns: auto 1fr auto auto;
    }
}

/* -------------------------------------------------------------------------------------------------
   3. Trigger hamburguesa (mobile + tablet). En lg está d-lg-none en markup.
   ------------------------------------------------------------------------------------------------- */
.eu-header__trigger {
    flex: 0 0 auto;
}
.eu-header__trigger > a,
.eu-header__trigger > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--eu-touch-target);
    min-height: var(--eu-touch-target);
    padding: 0 .65rem;
    color: var(--eu-ink);
    background: transparent;
    border: 0;
    border-radius: var(--eu-radius-sm);
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
    text-decoration: none;
    cursor: pointer;
}
.eu-header__trigger > a:hover,
.eu-header__trigger > a:focus-visible,
.eu-header__trigger > button:hover,
.eu-header__trigger > button:focus-visible {
    background: var(--eu-bg);
    color: var(--eu-primary);
    box-shadow: var(--eu-focus-ring-shadow);
    outline: none;
}
.eu-header__trigger > a[aria-expanded="true"],
.eu-header__trigger > button[aria-expanded="true"] {
    color: var(--eu-primary);
}
.eu-header__trigger i { font-size: 1.15rem; }

/* -------------------------------------------------------------------------------------------------
   4. Logo (centrado en mobile, left en desktop). `justify-content: center` lo centra dentro
   de su celda 1fr → aparece visualmente en mitad entre hamburger e icono-search.
   ------------------------------------------------------------------------------------------------- */
.eu-header__logo {
    display: flex;
    align-items: center;
    justify-content: center;       /* mobile: el logo se centra en su celda 1fr */
    text-decoration: none;
    min-height: 36px;
    min-width: 0;                  /* crítico en grid: permite al logo encoger dentro de su celda */
}
.eu-header__logo img {
    max-height: 40px;
    width: auto;
    max-width: 100%;               /* no superar la celda 1fr en mobile */
    transition: transform .2s ease;
}
@media (min-width: 576px) {
    .eu-header__logo { justify-content: flex-start; }
    .eu-header__logo img { max-height: 44px; }
}
@media (min-width: 992px) {
    .eu-header__logo img { max-height: 56px; max-width: 200px; }
    .eu-header__logo:hover img { transform: scale(1.02); }
}

/* -------------------------------------------------------------------------------------------------
   5. Buscador pill (sm+) y botón-icono xs. en xs sólo visible el botón (.d-sm-none).
   El `min-width: 0` en el input es crítico para que el grid 1fr no rompa el recuadro.
   ------------------------------------------------------------------------------------------------- */
.eu-header__search {
    width: 100%;                   /* llena la celda del grid (1fr) */
    min-width: 0;                  /* crítico: flex/grid item puede encoger < contenido intrínseco */
    max-width: 720px;
    margin: 0;
}
.eu-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--eu-bg);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: .25rem .35rem .25rem 1.1rem;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    min-width: 0;                  /* input encoge si es muy largo */
    width: 100%;
}
.eu-search-box:focus-within {
    background: var(--eu-bg-soft);
    border-color: var(--eu-primary);
    box-shadow: var(--eu-focus-ring-shadow);
}
.eu-search-box__icon {
    color: var(--eu-steel);
    font-size: 1rem;
    margin-right: .65rem;
    flex: 0 0 auto;
}
.eu-search-box__input {
    flex: 1 1 auto;
    min-width: 0;                  /* crítico en grid/flex: input no rompe el pill */
    border: 0;
    background: transparent;
    color: var(--eu-ink);
    font-family: var(--eu-font-sans);
    font-size: .95rem;
    padding: .55rem 0;
    outline: 0;
}
.eu-search-box__input::placeholder {
    color: var(--eu-steel-soft);
    font-weight: 400;
}
.eu-search-box__submit {
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
    border: 0;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color .15s ease,
        transform .1s ease;
    flex: 0 0 auto;
}
.eu-search-box__submit:hover { background: var(--eu-primary-dark); }
.eu-search-box__submit:active { transform: scale(.96); }
.eu-search-box__submit:focus-visible {
    outline: none;
    box-shadow: var(--eu-focus-ring-shadow);
}

@media (min-width: 576px) and (max-width: 991.98px) {
    /* Tablet: input un pelín más compacto */
    .eu-search-box__input { font-size: .9rem; padding: .5rem 0; }
    .eu-search-box__submit { width: 34px; height: 34px; }
}

/* -------------------------------------------------------------------------------------------------
   6. Acciones genéricas (search-icon-only xs, minicart). Comparten base styling.
   ------------------------------------------------------------------------------------------------- */
.eu-header__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: var(--eu-touch-target);
    min-height: var(--eu-touch-target);
    padding: 0 .65rem;
    color: var(--eu-ink);
    background: transparent;
    border: 0;
    border-radius: var(--eu-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}
.eu-header__action:hover,
.eu-header__action:focus-visible {
    background: var(--eu-bg);
    color: var(--eu-primary);
    box-shadow: var(--eu-focus-ring-shadow);
    outline: none;
}
.eu-header__action i { font-size: 1.15rem; }

/* Botón-icono de search en xs — handler delegado en assets/js/header.js. */
.js-search-overlay-trigger.eu-header__action {
    text-decoration: none;
}

/* Trigger minicart (direct child <a> de .mini_cart_wrapper). */
.eu-minicart__trigger {
    /* hereda de .eu-header__action (los estilos comunes están arriba) */
}

/* -------------------------------------------------------------------------------------------------
   7. Badge del minicart (.eu-minicart__badge + legacy .item_count para retro-compat
   con cualquier style.css de tema que lo estile, sin romper su regla).
   ------------------------------------------------------------------------------------------------- */
.eu-minicart__badge.item_count,
.eu-minicart__badge {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 .35rem;
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
    border-radius: 999px;
    font-family: var(--eu-font-display);
    font-weight: 700;
    font-size: .68rem;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}
.eu-minicart__trigger:hover .eu-minicart__badge,
.eu-minicart__trigger:focus-visible .eu-minicart__badge {
    background: var(--eu-primary-dark);
}

/* Ocultar el badge legacy posicionamiento anterior (.header_account_list span.item_count) si
   cargara por separado — defensa contra reglas style.css muy específicas para `.item_count`. */
.eu-minicart__badge.item_count {
    right: 4px !important;
    top: 6px !important;
    left: auto !important;
    background: var(--eu-primary) !important;
    color: var(--eu-bg-soft) !important;
    border: 0 !important;
    font-family: var(--eu-font-display) !important;
}

/* -------------------------------------------------------------------------------------------------
   8. Cuenta (desktop, lg+). Dropdown Bootstrap sobreescrito a tokens.
   ------------------------------------------------------------------------------------------------- */
.eu-header__account { min-width: 0; }
.eu-account__trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: var(--eu-touch-target);
    min-height: var(--eu-touch-target);
    padding: 0 .85rem;
    color: var(--eu-ink);
    background: transparent;
    border: 0;
    border-radius: var(--eu-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}
.eu-account__trigger:hover,
.eu-account__trigger:focus-visible {
    background: var(--eu-bg);
    color: var(--eu-primary);
    box-shadow: var(--eu-focus-ring-shadow);
    outline: none;
}
.eu-account__name {
    font-family: var(--eu-font-sans);
    font-size: .9rem;
    font-weight: 500;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eu-account__chevron {
    font-size: .65rem;
    color: var(--eu-steel);
    transition: transform .15s ease;
}
.eu-account__trigger[aria-expanded="true"] .eu-account__chevron { transform: rotate(180deg); }

.eu-account__dropdown-menu {
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    background: var(--eu-bg-soft);
    box-shadow: var(--eu-shadow-md);
    padding: .35rem;
    min-width: 220px;
    margin-top: .5rem !important;
}
.eu-account__dropdown-menu .dropdown-item {
    color: var(--eu-ink);
    font-family: var(--eu-font-sans);
    font-size: .88rem;
    padding: .55rem .9rem;
    border-radius: var(--eu-radius-sm);
    transition:
        background-color .15s ease,
        color .15s ease;
}
.eu-account__dropdown-menu .dropdown-item:hover,
.eu-account__dropdown-menu .dropdown-item:focus-visible {
    background: var(--eu-primary-soft);
    color: var(--eu-primary-dark);
}
.eu-account__dropdown-menu .dropdown-item.text-danger:hover {
    background: var(--eu-red-bg);
    color: var(--eu-red);
}

/* -------------------------------------------------------------------------------------------------
   9. .eu-header__nav — fila 2 (menú principal + teléfono, sm/md/lg)
   ------------------------------------------------------------------------------------------------- */
.eu-header__nav {
    background: var(--eu-bg-soft);
    border-top: 1px solid var(--eu-border);
}
.eu-nav__list-wrap { padding: .25rem 0; }
.eu-nav__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .92rem;
}
.eu-nav__list li { margin: 0; }
.eu-nav__list li > a {
    display: inline-flex;
    align-items: center;
    padding: .35rem 0;
    color: var(--eu-ink);
    text-decoration: none;
    position: relative;
    transition: color .15s ease;
}
.eu-nav__list li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--eu-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
    border-radius: 2px;
}
.eu-nav__list li > a:hover,
.eu-nav__list li > a.active {
    color: var(--eu-primary);
}
.eu-nav__list li > a:hover::after,
.eu-nav__list li > a.active::after { transform: scaleX(1); }

.eu-nav__contact { padding: .5rem 0; }
.eu-nav__phone {
    margin: 0;
    color: var(--eu-steel);
    font-family: var(--eu-font-sans);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.eu-nav__phone i { color: var(--eu-primary); }
.eu-nav__phone-link {
    color: var(--eu-ink);
    font-family: var(--eu-font-mono);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.eu-nav__phone-link:hover { color: var(--eu-primary); }
.eu-nav__phone-label {
    font-family: var(--eu-font-sans);
    font-size: .72rem;
    color: var(--eu-steel);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-left: .35rem;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .eu-nav__list {
        gap: 1rem;
        font-size: .82rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .eu-nav__contact { text-align: center !important; padding: .5rem 0; }
    .eu-nav__phone { font-size: .78rem; justify-content: center; }
    .eu-nav__phone-label { display: none; }
}

/* -------------------------------------------------------------------------------------------------
   10. .eu-minicart — right-drawer full-height en TODOS los viewports (Bug 1, fix 2026-07-24-tris).
   Antes era bottom-sheet en xs/sm/md y right-drawer en lg+; ahora siempre right-drawer
   según requisito del usuario. Width se ajusta por breakpoint:
     - xs               → 100% del viewport (fullscreen drawer)
     - sm/md (576-991)  → 360 px
     - lg+              → 380 px
   Selector .eu-minicart GANA sobre .mini_cart (style.css) por orden de carga: header.css se
   carga DESPUÉS de style.css (ver blocks/head.php). z-index var(--eu-z-drawer) (1050)
   > backdrop (1045) > header (1040): el drawer queda visible por encima de todo.
   ------------------------------------------------------------------------------------------------- */
.eu-minicart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: var(--eu-bg-soft);
    border-left: 1px solid var(--eu-border);
    border-radius: 0;
    box-shadow: var(--eu-shadow-lg);
    z-index: var(--eu-z-drawer);                /* 1050 — encima del backdrop 1045 y del header 1040 */
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
}
.eu-minicart.active {
    transform: translateX(0);
    visibility: visible;
}

@media (min-width: 576px) {
    /* sm/md: drawer compacto (360 px) */
    .eu-minicart { width: 360px; max-width: 360px; }
}

@media (min-width: 992px) {
    /* lg+: drawer ancho (380 px) */
    .eu-minicart { width: 380px; max-width: 380px; }
}

/* --- Minicart: close-bar (título + close) --- */
.eu-minicart__close-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--eu-border);
    position: relative;
    background: var(--eu-bg-soft);
    flex: 0 0 auto;
}
.eu-minicart__title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.05rem;
    color: var(--eu-ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.eu-minicart__title i { color: var(--eu-primary); }
.eu-minicart__count {
    color: var(--eu-steel);
    font-size: .85rem;
    margin-left: .35rem;
    text-transform: none;
    letter-spacing: 0;
}
.eu-minicart__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--eu-ink);
    background: transparent;
    border-radius: var(--eu-radius-sm);
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
}
.eu-minicart__close:hover,
.eu-minicart__close:focus-visible {
    background: var(--eu-bg);
    color: var(--eu-primary);
    box-shadow: var(--eu-focus-ring-shadow);
    outline: none;
}
.eu-minicart__close:active { transform: scale(.96); }
.eu-minicart__close i { font-size: 1.15rem; }

/* --- Minicart: items list (scrollable) --- */
.eu-minicart__items {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75rem 1.4rem;
    background: var(--eu-bg-soft);
}

/* --- Minicart: item card --- */
.eu-minicart__item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--eu-border);
}
.eu-minicart__item:last-child { border-bottom: 0; }
.eu-minicart__item-img a {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: var(--eu-radius-sm);
    overflow: hidden;
    background: var(--eu-bg);
    border: 1px solid var(--eu-border);
}
.eu-minicart__item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.eu-minicart__item-info { min-width: 0; }
.eu-minicart__item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--eu-font-sans);
    font-weight: 500;
    font-size: .92rem;
    color: var(--eu-ink);
    text-decoration: none;
    line-height: 1.25;
}
.eu-minicart__item-name:hover { color: var(--eu-primary); }
.eu-minicart__item-meta {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: var(--eu-steel);
    font-family: var(--eu-font-sans);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.eu-minicart__item-qty { color: var(--eu-steel); }
.eu-minicart__item-price {
    color: var(--eu-ink);
    font-family: var(--eu-font-mono);
    font-weight: 600;
}
.eu-minicart__item-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--eu-radius-sm);
    color: var(--eu-steel);
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease;
}
.eu-minicart__item-remove a:hover,
.eu-minicart__item-remove a:focus-visible {
    background: var(--eu-red-bg);
    color: var(--eu-red);
    outline: none;
}

/* Empty state */
.eu-minicart__empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--eu-steel);
}
.eu-minicart__empty i {
    font-size: 2.5rem;
    color: var(--eu-steel-soft);
    margin-bottom: .5rem;
}
.eu-minicart__empty-title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1rem;
    color: var(--eu-ink);
    margin: .5rem 0 .25rem;
}
.eu-minicart__empty-sub {
    font-family: var(--eu-font-sans);
    font-size: .9rem;
    color: var(--eu-steel);
    margin: 0 0 1.25rem;
}
.eu-minicart__empty-cta {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.2rem;
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
    border-radius: var(--eu-radius);
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .15s ease, transform .1s ease;
}
.eu-minicart__empty-cta:hover { background: var(--eu-primary-dark); color: var(--eu-bg-soft); }
.eu-minicart__empty-cta:active { transform: scale(.97); }

/* --- Minicart: footer (total + actions) --- */
.eu-minicart__footer {
    border-top: 1px solid var(--eu-border);
    padding: 1.1rem 1.4rem 1.4rem;
    background: var(--eu-bg);
    flex: 0 0 auto;
}
.eu-minicart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--eu-border);
}
.eu-minicart__total-label {
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .92rem;
    color: var(--eu-ink);
}
.eu-minicart__total-value {
    font-family: var(--eu-font-mono);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--eu-ink);
}
.eu-minicart__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}
.eu-minicart__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem .5rem;
    border-radius: var(--eu-radius);
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color .15s ease,
        color .15s ease,
        transform .1s ease,
        box-shadow .15s ease;
    min-height: var(--eu-touch-target);
    border: 1px solid transparent;
}
.eu-minicart__action:active { transform: scale(.97); }
.eu-minicart__action:focus-visible { outline: none; box-shadow: var(--eu-focus-ring-shadow); }
.eu-minicart__action i { margin-right: .35rem; }
.eu-minicart__action--secondary {
    background: var(--eu-bg-soft);
    color: var(--eu-ink);
    border-color: var(--eu-border);
}
.eu-minicart__action--secondary:hover {
    background: var(--eu-bg);
    color: var(--eu-primary);
    border-color: var(--eu-primary);
}
.eu-minicart__action--primary {
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
}
.eu-minicart__action--primary:hover {
    background: var(--eu-primary-dark);
    color: var(--eu-bg-soft);
    box-shadow: var(--eu-shadow-md);
}

/* -------------------------------------------------------------------------------------------------
   11. Backdrop oscuro compartido (.off_canvars_overlay = legado, .eu-sheet-backdrop = BEM).
   Nuevo orden z (2026-07-24-tris): backdrop 1045 AHORA está POR ENCIMA del header 1040,
   de modo que cuando un drawer se abre, el fondo gris DIM el header también (UX estándar
   ecommerce donde el header pasa a ser "no interactuable" durante el overlay). El drawer
   sigue arriba de todo (1050).
   ------------------------------------------------------------------------------------------------- */
.eu-sheet-backdrop,
.off_canvars_overlay.eu-sheet-backdrop {
    background: var(--eu-modal-backdrop);
}
.off_canvars_overlay.eu-sheet-backdrop.active,
.eu-sheet-backdrop.active {
    background: var(--eu-modal-backdrop);
}

/* -------------------------------------------------------------------------------------------------
   12. .eu-mobile-menu — left-drawer (mobile menu)
   .active se aplica en dos casos (la fuente de verdad es el MutationObserver en header.js):
     a) main.js añade `.active` a `.offcanvas_menu_wrapper` (legacy) — observado y propagado a .eu-mobile-menu.
     b) Por contrato BEM, si en el futuro alguien añade `.active` directo, también funciona.
   ------------------------------------------------------------------------------------------------- */
.eu-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    background: var(--eu-bg-soft);
    z-index: var(--eu-z-drawer);                /* 1050 — encima del backdrop 1040 ✓ */
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    border-right: 1px solid var(--eu-border);
    box-shadow: var(--eu-shadow-md);
    visibility: hidden;
}
.eu-mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
}

.eu-mobile-menu__close {
    text-align: right;
}
.eu-mobile-menu__close > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--eu-ink);
    background: transparent;
    border-radius: var(--eu-radius-sm);
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}
.eu-mobile-menu__close > a:hover,
.eu-mobile-menu__close > a:focus-visible {
    background: var(--eu-bg);
    color: var(--eu-primary);
    box-shadow: var(--eu-focus-ring-shadow);
    outline: none;
}
.eu-mobile-menu__close i { font-size: 1.2rem; }

.eu-mobile-menu__logo {
    padding: 1rem 0 1.25rem 1rem;
    border-bottom: 1px solid var(--eu-border);
    margin-bottom: .75rem;
}
.eu-mobile-menu__logo img { max-height: 40px; }

.eu-mobile-menu__wrapper { padding: .5rem 0 2rem; }

.eu-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.eu-mobile-menu__list li {
    border-bottom: 1px solid var(--eu-border);
}

.eu-mobile-menu__list li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1.25rem;
    color: var(--eu-ink);
    font-family: var(--eu-font-display);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease,
        padding-left .15s ease;
}
.eu-mobile-menu__list li > a:hover,
.eu-mobile-menu__list li > a.active {
    background: var(--eu-primary-soft);
    color: var(--eu-primary-dark);
    padding-left: 1.5rem;
}

.eu-mobile-menu__account {
    padding: 1rem 1.25rem;
    background: var(--eu-bg);
    margin-top: 1rem;
}
.eu-mobile-menu__section-title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .82rem;
    color: var(--eu-steel);
    margin: 0 0 .65rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--eu-primary);
    display: inline-block;
}
.eu-mobile-menu__account-list { list-style: none; margin: 0; padding: 0; }
.eu-mobile-menu__account-list li { margin-bottom: .35rem; }
.eu-mobile-menu__account-list li > a {
    display: flex;
    align-items: center;
    padding: .55rem .5rem;
    color: var(--eu-ink);
    font-family: var(--eu-font-sans);
    font-size: .92rem;
    text-decoration: none;
    border-radius: var(--eu-radius-sm);
    transition:
        background-color .15s ease,
        color .15s ease;
}
.eu-mobile-menu__account-list li > a:hover,
.eu-mobile-menu__account-list li > a:focus-visible {
    background: var(--eu-primary-soft);
    color: var(--eu-primary-dark);
    outline: none;
}
.eu-mobile-menu__account-list li > a.text-danger:hover {
    background: var(--eu-red-bg);
    color: var(--eu-red);
}
.eu-mobile-menu__account-greeting {
    font-family: var(--eu-font-sans);
    font-size: .88rem;
    color: var(--eu-steel);
    margin: .85rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid var(--eu-border);
}

.eu-mobile-menu__login-btn {
    width: 100%;
    justify-content: center;
}

.eu-mobile-menu__contact {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--eu-border);
}
.eu-mobile-menu__contact p {
    margin: 0;
    color: var(--eu-ink);
    font-family: var(--eu-font-sans);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.eu-mobile-menu__contact i { color: var(--eu-primary); }

.eu-mobile-menu__footer {
    padding: 1rem 1.25rem;
    background: var(--eu-bg);
    border-top: 1px solid var(--eu-border);
}
.eu-mobile-menu__footer a {
    color: var(--eu-steel);
    text-decoration: none;
    font-family: var(--eu-font-sans);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.eu-mobile-menu__footer a:hover { color: var(--eu-primary); }

/* -------------------------------------------------------------------------------------------------
   13. En lg, ocultamos explícitamente el trigger icono-search (sólo xs) y el hamburger
   (en lg ya hay nav principal). Los `display: none` de Bootstrap ganan sobre el inline-block
   base que dimos arriba (`.eu-header__trigger i` solo afecta al icono interno).
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .js-search-overlay-trigger.eu-header__action { display: none !important; }
}

/* =================================================================================================
   FIXES (2026-07-24-tris) — overrides de alta especificidad para ganarle a reglas legacy
   de style.css (tercer-party) que entraban en conflicto en:

     Bug 1A / Bug 5: backdrop z-index AHORA 1045 (cubre header 1040, queda bajo drawer 1050).
     Bug 1B: minicart se desplazaba a top:55px al hacer scroll (regla legacy
             .sticky-header.sticky .mini_cart { top: 55px } con specificity 3-clase).
     Bug 2  + 5: legacy `.canvas_open { position:absolute; right:17px; top:26px }` saca el
                 hamburger del grid y lo manda arriba-derecha → se solapa con minicart.
     Bug 2 (R2): legacy `.sticky-header.sticky { position:inherit }` en mobile/tablet
                 mata el comportamiento sticky del header.
     Bug 3 (R2): hamburger abre menú doble (legacy .offcanvas_menu_wrapper con estilo
                 visible independiente del <aside class="eu-mobile-menu>).
     Bug 4 (R2): badge .item_count cubre el icono del carrito (corner badge ya corregido,
                 maintenu en este bloque).

   Todas estas overrides usan `!important` para defender la regla frente a
   specificity 3-clase del legacy (.sticky-header.sticky .mini_cart) Y frente a futuros rebotes
   de style.css. Localizadas al final del archivo y comentadas individualmente para auditoria.
   ================================================================================================= */

/* Bug 2 + 5 (sticky + sin animación). Reglas consolidadas en UNA regla con specificity 3-clase
   para ganarle al legacy `.sticky-header.sticky` (2-clase) en TODOS los media queries
   (style.css líneas 596-625). Al usar `position: sticky !important` (en vez del `position:fixed`
   que usa legacy), el header:
     1. Permanece sticky en mobile/tablet (donde legacy lo pone `position: inherit`).
     2. NO usa el fadeInDown de 900 ms (animation: none elimina el keyframe).
     3. NO aplica la transición universal de `.3s` (transition: none acorta a 0).
   El resto de transiciones internas (search-box focus, icon hover) NO se ven afectadas
   porque `transition` no se hereda — sólo aplica al propio header. */
.sticky-header.sticky.eu-header {
    position: sticky !important;          /* Bug 2: sticky también en mobile/tablet */
    animation: none !important;           /* Bug 4 (R2): sin fadeInDown al activarse */
    transition: none !important;          /* Bug 4 (R2): sin transición en background al activarse */
}

/* Bug 2 (R2): hamburguesa y su <a> interno deben volver al GRID flow — legacy los saca
   con position:absolute. Encapsulamos bajo .eu-header__main para no afectar otros
   canvas_open hipotéticos fuera del header (ej. footer legado hipotético). */
.eu-header__main .canvas_open {
    position: static !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
}

/* Bug 1B. .sticky-header.sticky .mini_cart { top: 55px } (style.css línea 634) tiene
   specificity 3-clase y desplazaba el minicart 55 px hacia abajo en scroll. Restauramos
   top:0 — el minicart ya es right-drawer full-height en TODOS los viewports (ver § 10),
   por lo que basta con un único override (sin media queries). */
.sticky-header.sticky .eu-minicart {
    top: 0 !important;
}

/* Bug 3 (R2): menú hamburguesa doble. main.js líneas 749-755 añade `.active` a
   `.offcanvas_menu_wrapper` y `.off_canvars_overlay` al click. Mi MutationObserver
   (header.js) propaga `.active` también a `.eu-mobile-menu` (<aside>). El wrapper
   legacy (`.offcanvas_menu_wrapper`) tenía estilo propio (position:fixed, width:290px,
   background:#fff, height:100vh) y al volverse .active hace aparecer VISUALMENTE un
   segundo drawer idéntico al <aside>. Como wrapper es requerido por:
     - main.js selectores `.offcanvas_menu_wrapper` (legacy open/close handlers)
     - Slinky plugin (target dentro del wrapper)
   NO podemos eliminarlo del DOM. La fix es resetear sus estilos visuales con
   `all: revert` (deja que el navegador use su presentación por defecto del wrapper —
   sin position:fixed, sin background propio, sin width fija —) y darle
   `display: contents` para que sus hijos se rendericen directamente dentro del <aside>
   (transparente para el usuario, sin perder sus clases para los hooks JS). */
.eu-mobile-menu__wrapper,
.offcanvas_menu_wrapper.eu-mobile-menu__wrapper,
.offcanvas_menu_wrapper {
    all: revert !important;
    display: contents !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    overflow: visible !important;
}

/* Bug 1A / Bug 5 (R3). Backdrop .off_canvars_overlay.eu-sheet-backdrop heredaba
   z-index:999 heredado (style.css línea 408) sin override. Con el NUEVO orden z
   (header 1040, backdrop 1045, drawer 1050), el backdrop queda POR ENCIMA del header
   (lo dimm) y por debajo del drawer (drawer visible). !important protege contra
   rebotes futuros de style.css. */
.eu-sheet-backdrop,
.off_canvars_overlay.eu-sheet-backdrop,
.off_canvars_overlay.eu-sheet-backdrop.active {
    z-index: var(--eu-z-backdrop) !important;        /* 1045 ahora */
}

/* Bug 4 (R1 mantenido). Badge .item_count estaba dentro del area visible del icono
   del carrito. Esquina externa (corner badge estándar) sobresaliendo top-right del trigger
   para que el icono del carrito SEA COMPLETAMENTE VISIBLE. */
.eu-minicart__badge.item_count,
.eu-minicart__badge {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    transform: translate(45%, -45%) !important;     /* sobresale ~8px en cada lado del TR */
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 .35rem !important;
    background: var(--eu-primary) !important;
    color: var(--eu-bg-soft) !important;
    border: 2px solid var(--eu-bg-soft) !important;  /* anillo blanco que separa del icono */
    border-radius: 999px !important;
    font-family: var(--eu-font-display) !important;
    font-weight: 700 !important;
    font-size: .68rem !important;
    line-height: 14px !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

/* Padding interno en la celda del grid del minicart (en mobile) para que el badge
   que sobresale no choque contra el icono search adyacente ni contra el borde del
   contenedor. Scope a mobile: en desktop la celda ya tiene espacio natural. */
@media (max-width: 991.98px) {
    .eu-header__minicart {
        padding-right: 6px !important;
        overflow: visible !important;
    }
}

/* Bug 2 (R4) bis: position:sticky del header estaba limitado al primer viewport porque
   el style.css legacy declara `html, body { height: 100% }` (línea 56-58). Esto fuerza
   el containing-block del sticky a 1vh — el header deja de anclarse tras pasar el slider
   principal (~1 viewport). Lo corregimos forzando html/body a crecer con contenido,
   manteniendo min-height:100vh en body para que páginas cortas (login, 404, carrito
   vacío) sigan ocupando al menos una pantalla y no produzcan footer flotante.
   `!important` gana specificity contra style.css (mismo tag-specificity 0,1,0 + 1-tag). */
html {
    height: auto !important;
}
body {
    height: auto !important;
    min-height: 100vh !important;
}