/**
 * Cabecera dos bandas (referencia densa tipo Walmart MX): barra de marca + subnavegación clara.
 * Carga después de theme.css y brand.css.
 */

/* --- Barra principal (marca verde, texto claro) --- */
.at-header-rail {
    background: linear-gradient(102deg, #0c3d28 0%, #157a4d 48%, #0f5a3c 100%);
    color: #f6fffb;
    padding-block: 0.35rem;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12);
    /* Altura visual de la marca = misma caja que la píldora de búsqueda (botón 2.5rem + padding 3px×2); no crece la barra */
    --at-header-rail-logo-max-h: calc(2.5rem + 6px);
}

/* Flex: la búsqueda crece entre bloque izquierdo y acciones (tipo Walmart). */
.at-header-rail__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px))
        max(var(--space-4), env(safe-area-inset-right, 0px));
}

.at-header-rail__logo {
    display: block;
    line-height: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(22rem, 52vw, 100%);
    border-radius: var(--ui-radius-md);
    transition:
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.at-header-rail__logo:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgb(255 255 255 / 0.28),
        0 10px 28px rgb(0 0 0 / 0.22);
}

.at-header-rail__logo:active {
    transform: translateY(0) scale(0.96);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.14),
        0 3px 12px rgb(0 0 0 / 0.2);
}

.at-header-rail__logo:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px rgb(var(--rgb-mint) / 0.45),
        0 8px 22px rgb(0 0 0 / 0.18);
}

.at-header-rail__logo picture {
    display: block;
    line-height: 0;
    max-width: 100%;
}

.at-header-rail__logo img {
    display: block;
    width: auto;
    height: auto;
    /* Logos horizontales: el ancho va en el <a>; altura = fila de búsqueda sin agrandar la barra */
    max-height: var(--at-header-rail-logo-max-h);
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--ui-radius-sm);
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));
    transition: filter var(--duration-fast) var(--ease-default);
}

.at-header-rail__logo:hover img {
    filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35)) brightness(1.06);
}

.at-header-rail__logo:active img {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.28)) brightness(0.97);
}

.at-header-rail__delivery {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    max-width: 13rem;
    padding: 0.2rem var(--space-2);
    border-radius: var(--ui-radius-md);
    background: rgb(0 0 0 / 0.22);
    border: 1px solid rgb(255 255 255 / 0.18);
    color: inherit;
    text-decoration: none;
    font-size: var(--font-xs);
    line-height: var(--line-snug);
    transition:
        background var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.at-header-rail__delivery:hover {
    background: rgb(0 0 0 / 0.32);
    border-color: rgb(255 255 255 / 0.32);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.12),
        0 8px 22px rgb(0 0 0 / 0.22),
        0 0 0 1px rgb(255 255 255 / 0.08);
}

.at-header-rail__delivery:active {
    transform: translateY(0) scale(0.98);
    background: rgb(0 0 0 / 0.38);
    border-color: rgb(255 255 255 / 0.22);
    box-shadow:
        inset 0 2px 6px rgb(0 0 0 / 0.25),
        0 2px 8px rgb(0 0 0 / 0.15);
}

.at-header-rail__delivery:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(var(--rgb-mint) / 0.45);
}

.at-header-rail__delivery-icon {
    flex-shrink: 0;
    display: flex;
    opacity: 0.95;
}

.at-header-rail__delivery-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.at-header-rail__delivery-kicker {
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

.at-header-rail__delivery-strong {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-header-rail__delivery-chev {
    flex-shrink: 0;
    font-size: 0.65rem;
    opacity: 0.75;
    transition: transform var(--duration-fast) var(--ease-default);
}

/* Invitados: slot + popover “¿Cómo quieres tus artículos?” */
.at-delivery-slot {
    position: relative;
    flex: 0 1 auto;
    max-width: min(22rem, 40vw);
    min-width: 0;
}

.at-delivery-slot.is-open .at-header-rail__delivery-chev {
    transform: rotate(180deg);
}

.at-delivery-popover__mode {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.at-header-rail__delivery--guest {
    max-width: none;
    width: 100%;
}

/* Disparador invitado: pastilla oscura continua (referencia Walmart MX). */
.at-delivery-slot .at-header-rail__delivery--guest {
    padding: 0.35rem 0.75rem;
    border-radius: 0.55rem;
    background: rgb(4 36 24 / 0.78);
    border: 1px solid rgb(255 255 255 / 0.14);
}

.at-header-rail__delivery-strong--guest {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Popover invitado: div + backdrop (no <dialog>) — el JS mueve ambos a body para posición estable. */
.at-delivery-popover-backdrop[hidden] {
    display: none !important;
}

.at-delivery-popover-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgb(0 0 0 / 0.28);
    backdrop-filter: blur(1px);
    pointer-events: auto;
}

.at-delivery-popover[hidden] {
    display: none !important;
}

/* Patrón tipo Walmart MX: tarjeta blanca, cabecera oscura, cuerpo gris; posición la fija el JS. */
.at-delivery-popover:not([hidden]) {
    position: fixed;
    left: 1rem;
    top: 4rem;
    transform: none;
    z-index: var(--z-modal);
    width: min(24rem, calc(100vw - 1rem));
    max-width: min(24rem, calc(100vw - 1rem));
    height: fit-content;
    max-height: min(34rem, calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    margin: 0;
    padding: 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
    border-radius: 0.65rem;
    background: #fff;
    color: var(--at-ink);
    border: 1px solid rgb(0 0 0 / 0.08);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.06),
        0 12px 32px rgb(0 0 0 / 0.14),
        0 24px 48px rgb(0 0 0 / 0.08);
}

.at-delivery-popover__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.85rem 0.9rem 0.75rem;
    background: linear-gradient(180deg, #0a2e1f 0%, #062818 100%);
    color: #f6fffb;
    border-bottom: 1px solid rgb(0 0 0 / 0.12);
}

/* Evita que el título largo tape el × y robe los clics (flex sin min-width:0). */
.at-delivery-popover__head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.at-delivery-popover__title {
    margin: 0;
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    color: inherit;
}

.at-delivery-popover__eyebrow {
    margin: 0.15rem 0 0;
    font-size: var(--font-xs);
    opacity: 0.9;
    line-height: var(--line-snug);
    overflow-wrap: anywhere;
    color: rgb(255 255 255 / 0.92);
}

.at-delivery-popover__close {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default);
}

.at-delivery-popover__close-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    opacity: 0.98;
}

.at-delivery-popover__close:hover {
    background: rgb(255 255 255 / 0.22);
}

.at-delivery-popover__close:active {
    transform: scale(0.94);
}

.at-delivery-popover__body {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: #f3f5f4;
    flex: 1 1 auto;
    min-height: 0;
}

.at-delivery-popover__toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.at-delivery-popover__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: var(--space-3) var(--space-2);
    border-radius: 0.5rem;
    border: 2px solid #d5dde0;
    background: #fff;
    color: var(--at-forest);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition:
        border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default);
}

.at-delivery-popover__toggle:hover {
    border-color: #b8c4c9;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
}

.at-delivery-popover__toggle.is-pressed {
    border-color: rgb(var(--rgb-brand-mid));
    box-shadow:
        0 0 0 1px rgb(var(--rgb-brand-mid) / 0.35),
        0 4px 14px rgb(var(--rgb-brand-shadow) / 0.15);
}

.at-delivery-popover__toggle-icon {
    display: flex;
    color: #94a3b8;
}

.at-delivery-popover__toggle.is-pressed .at-delivery-popover__toggle-icon {
    color: rgb(var(--rgb-brand-shadow));
}

.at-delivery-popover__toggle-label {
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
    color: #64748b;
}

.at-delivery-popover__toggle.is-pressed .at-delivery-popover__toggle-label {
    color: var(--at-ink);
}

.at-delivery-popover__toggle-hint {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.at-delivery-popover__toggle.is-pressed .at-delivery-popover__toggle-hint {
    color: rgb(var(--rgb-brand-shadow));
}

.at-delivery-popover__card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--at-ink);
    border: 1px solid rgb(0 0 0 / 0.08);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.at-delivery-popover__card--link {
    text-decoration: none;
    color: inherit;
    align-items: center;
    transition:
        border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default);
}

.at-delivery-popover__card--link:hover {
    border-color: rgb(var(--rgb-brand) / 0.28);
    box-shadow: 0 6px 18px rgb(var(--rgb-brand-shadow) / 0.12);
}

.at-delivery-popover__card--link:active {
    transform: scale(0.99);
}

.at-delivery-popover__card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    color: rgb(var(--rgb-brand-shadow));
}

.at-delivery-popover__card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.at-delivery-popover__card-title {
    margin: 0 0 0.25rem;
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
    color: var(--at-ink);
}

.at-delivery-popover__card-meta {
    margin: 0 0 var(--space-2);
    font-size: var(--font-xs);
    color: var(--at-slate);
    line-height: var(--line-snug);
}

.at-delivery-popover__card .at-delivery-popover__cta {
    margin-top: var(--space-1);
    align-self: flex-start;
}

.at-delivery-popover__card--link .at-delivery-popover__card-title {
    margin-bottom: 0.2rem;
}

.at-delivery-popover__card--link .at-delivery-popover__card-meta {
    margin-bottom: 0;
}

.at-delivery-popover__chev {
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: var(--font-weight-semibold);
    color: var(--at-muted);
    line-height: 1;
}

/* Búsqueda tipo Walmart MX: píldora blanca dominante + lupa en círculo (colores / sombras Angel Touch).
   Selector form.at-header-rail__search: anula brand.css `form { max-width: 28rem }` y gana a `form button[type=submit]`. */
form.at-header-rail__search {
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    max-width: none;
    margin-top: 0;
    background: #fff;
    border-radius: var(--ui-radius-pill);
    border: 1px solid rgb(var(--rgb-brand) / 0.1);
    padding: 3px 4px 3px max(var(--space-4), 0.85rem);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.85),
        0 1px 2px rgb(0 0 0 / 0.06),
        0 4px 18px rgb(var(--rgb-brand-shadow) / 0.22);
    transition:
        box-shadow var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default);
}

form.at-header-rail__search:hover {
    border-color: rgb(var(--rgb-brand) / 0.16);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.95),
        0 1px 3px rgb(0 0 0 / 0.08),
        0 8px 26px rgb(var(--rgb-brand-shadow) / 0.28);
}

form.at-header-rail__search:focus-within {
    border-color: rgb(255 255 255 / 0.75);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 1),
        0 0 0 2px #fff,
        0 0 0 5px rgb(var(--rgb-mint) / 0.45),
        0 6px 22px rgb(var(--rgb-brand-shadow) / 0.32);
}

.at-header-rail__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
    line-height: 1.35;
    color: var(--at-ink);
    padding: 0.45rem 0.35rem 0.45rem 0;
    outline: none;
}

.at-header-rail__search-input::placeholder {
    color: rgb(var(--rgb-brand-mid) / 0.58);
    font-weight: var(--font-weight-normal, 400);
}

form.at-header-rail__search button.at-header-rail__search-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(185deg, #157a4d 0%, #0c3d28 42%, #062a1c 100%);
    color: #fff;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.18),
        inset 0 -1px 0 rgb(0 0 0 / 0.28),
        0 1px 3px rgb(0 0 0 / 0.22);
    transition:
        filter var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

form.at-header-rail__search button.at-header-rail__search-submit:hover {
    filter: brightness(1.09);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.22),
        inset 0 -1px 0 rgb(0 0 0 / 0.25),
        0 2px 6px rgb(var(--rgb-brand-shadow) / 0.45);
}

form.at-header-rail__search button.at-header-rail__search-submit:active {
    transform: scale(0.97);
    filter: brightness(0.98);
}

form.at-header-rail__search button.at-header-rail__search-submit:focus-visible {
    outline: none;
    box-shadow:
        var(--ui-focus-ring),
        inset 0 1px 0 rgb(255 255 255 / 0.2),
        inset 0 -1px 0 rgb(0 0 0 / 0.25),
        0 1px 3px rgb(0 0 0 / 0.22);
}

/* Lupa: escritorio oculta; móvil inline en .at-header-rail__actions (junto a cuenta/carrito) */
.at-header-rail__search-toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--ui-touch-target-sm);
    min-width: var(--ui-touch-target-sm);
    height: var(--ui-touch-target-sm);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgb(0 0 0 / 0.2);
    color: inherit;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default);
}

.at-header-rail__search-toggle:hover {
    background: rgb(255 255 255 / 0.14);
}

.at-header-rail__search-toggle[aria-expanded='true'] {
    background: rgb(255 255 255 / 0.18);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.at-header-rail__search-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(var(--rgb-mint) / 0.35);
}

.at-header-rail__search-toggle:active {
    transform: scale(0.96);
}

.at-header-rail__search-toggle-icon {
    display: block;
}

.at-header-rail__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.at-header-rail__ghost {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    text-decoration: none;
    color: inherit;
    line-height: var(--line-snug);
    padding: 0.2rem var(--space-2);
    border-radius: var(--ui-radius-md);
    transition:
        color var(--duration-fast) var(--ease-default),
        background var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

@media (min-width: 52rem) {
    .at-header-rail__ghost {
        display: flex;
    }
}

.at-header-rail__ghost:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.12);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        0 8px 22px rgb(0 0 0 / 0.18);
}

.at-header-rail__ghost:active {
    transform: translateY(0) scale(0.98);
    background: rgb(255 255 255 / 0.07);
    box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.12);
}

.at-header-rail__ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(var(--rgb-mint) / 0.35);
}

.at-header-rail__ghost-k {
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}

.at-header-rail__ghost-s {
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
}

.at-header-rail__ghost-k--sentence {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
}

/* --- Vuelve a pedirlos / Listas (desplegable tipo grandes superficies) --- */
.at-header-rail__reorder-dropdown {
    position: relative;
    z-index: calc(var(--z-header) + 24);
}

.at-header-rail__ghost--trigger {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    margin: 0;
    padding: 0.35rem 0.85rem 0.35rem 0.65rem;
    border: 0;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.22);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.at-header-rail__ghost--trigger:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.14);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        0 8px 22px rgb(0 0 0 / 0.18);
}

.at-header-rail__ghost--trigger[aria-expanded='true'] {
    background: rgb(255 255 255 / 0.18);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.at-header-rail__ghost-icon {
    flex: 0 0 auto;
    display: flex;
    opacity: 0.95;
}

.at-header-rail__ghost-icon svg {
    display: block;
}

.at-header-rail__ghost-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.at-header-rail__reorder-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    width: min(16rem, calc(100vw - 2rem));
    padding: var(--space-3);
    border-radius: var(--ui-radius-lg, 12px);
    background: var(--at-white);
    color: var(--at-ink);
    box-shadow:
        0 4px 6px rgb(var(--rgb-shadow) / 0.06),
        0 18px 40px rgb(var(--rgb-shadow) / 0.16);
    border: 1px solid rgb(var(--rgb-shadow) / 0.08);
}

.at-header-rail__reorder-panel[hidden] {
    display: none !important;
}

.at-header-rail__reorder-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.at-header-rail__reorder-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.55rem var(--space-3);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    color: var(--at-ink);
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
    transition: background var(--duration-fast) var(--ease-default);
}

.at-header-rail__reorder-link:hover {
    background: rgb(var(--rgb-brand) / 0.06);
    color: var(--at-grad-a);
}

.at-header-rail__reorder-ic {
    flex: 0 0 auto;
    display: flex;
    color: var(--at-slate);
}

.at-header-rail__reorder-link:hover .at-header-rail__reorder-ic {
    color: var(--at-grad-a);
}

.at-header-rail__account {
    display: flex;
    align-items: center;
}

.at-header-rail__account-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    line-height: var(--line-snug);
    padding: 0.2rem var(--space-2);
    border-radius: var(--ui-radius-md);
    max-width: 9rem;
    min-width: 0;
    transition:
        color var(--duration-fast) var(--ease-default),
        background var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.at-header-rail__account-box:hover {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        0 8px 22px rgb(0 0 0 / 0.18);
}

.at-header-rail__account-box:active {
    transform: translateY(0) scale(0.98);
    background: rgb(255 255 255 / 0.07);
    box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.12);
}

.at-header-rail__account-box:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(var(--rgb-mint) / 0.35);
}

.at-header-rail__account-line {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.at-header-rail__account-strong {
    display: block;
    width: 100%;
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
}

/* --- Cuenta: desplegable (referencia tipo grandes superficies) --- */
.at-header-rail__account-dropdown {
    position: relative;
    z-index: calc(var(--z-header) + 25);
}

.at-header-rail__account-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 11rem;
    min-width: 0;
    margin: 0;
    padding: 0.25rem var(--space-2);
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgb(0 0 0 / 0.2);
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    line-height: var(--line-snug);
    transition:
        background var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.at-header-rail__account-trigger:hover {
    background: rgb(255 255 255 / 0.14);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        0 8px 22px rgb(0 0 0 / 0.18);
}

.at-header-rail__account-trigger[aria-expanded='true'] {
    background: rgb(255 255 255 / 0.18);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.at-header-rail__account-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(var(--rgb-mint) / 0.35);
}

.at-header-rail__account-icon {
    flex: 0 0 auto;
    display: flex;
    opacity: 0.95;
}

.at-header-rail__account-icon svg {
    display: block;
}

.at-header-rail__account-trigger-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.at-header-rail__account-dropdown .at-header-rail__account-line,
.at-header-rail__account-dropdown .at-header-rail__account-strong {
    text-align: left;
}

.at-header-rail__account-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    width: min(18rem, calc(100vw - 2rem));
    padding: var(--space-4);
    border-radius: var(--ui-radius-lg, 12px);
    background: var(--at-white);
    color: var(--at-ink);
    box-shadow:
        0 4px 6px rgb(var(--rgb-shadow) / 0.06),
        0 18px 40px rgb(var(--rgb-shadow) / 0.16);
    border: 1px solid rgb(var(--rgb-shadow) / 0.08);
}

.at-header-rail__account-panel[hidden] {
    display: none !important;
}

/* Móvil: anclado al viewport y centrado (el JS fija top/left; evita panel “cortado” 3/4 en la fila de acciones) */
@media (max-width: 47.99em) {
    .at-header-rail__account-dropdown.is-open .at-header-rail__account-panel {
        position: fixed;
        right: auto;
        z-index: var(--z-modal);
        width: min(18rem, calc(100vw - 1.5rem));
        box-sizing: border-box;
        max-height: min(72vh, 34rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

.at-header-rail__account-cta {
    display: block;
    width: 100%;
    padding: 0.65rem var(--space-4);
    border-radius: var(--ui-radius-pill, 999px);
    text-align: center;
    text-decoration: none;
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
    color: var(--at-white) !important;
    background: linear-gradient(135deg, var(--at-grad-a) 0%, var(--at-grad-b) 100%);
    box-shadow: 0 4px 14px rgb(var(--rgb-brand-mid) / 0.35);
    transition:
        filter var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default);
}

.at-header-rail__account-cta:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.at-header-rail__account-subcta {
    margin: var(--space-2) 0 0;
    font-size: var(--font-xs);
    text-align: center;
}

.at-header-rail__account-subcta a {
    color: var(--at-grad-a);
    font-weight: var(--font-weight-semibold);
}

.at-header-rail__account-divider {
    height: 1px;
    margin: var(--space-3) 0;
    background: rgb(var(--rgb-shadow) / 0.1);
}

.at-header-rail__account-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.at-header-rail__account-menu-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.5rem var(--space-2);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    color: var(--at-ink);
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
    transition: background var(--duration-fast) var(--ease-default);
}

.at-header-rail__account-menu-link:hover {
    background: rgb(var(--rgb-brand) / 0.06);
    color: var(--at-grad-a);
}

.at-header-rail__account-menu-ic {
    flex: 0 0 auto;
    display: flex;
    color: var(--at-slate);
}

.at-header-rail__account-menu-link:hover .at-header-rail__account-menu-ic {
    color: var(--at-grad-a);
}

.at-header-rail__account-menu-link--btn {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.at-header-rail__account-panel-form {
    margin: 0;
}

.at-header-rail__cart {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.2rem 0.45rem 0.2rem 0.4rem;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: rgb(255 255 255 / 0.12);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition:
        background var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.at-header-rail__cart:hover {
    background: rgb(255 255 255 / 0.2);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.22),
        0 8px 24px rgb(0 0 0 / 0.2),
        0 0 0 1px rgb(255 255 255 / 0.1);
}

.at-header-rail__cart:active {
    transform: translateY(0) scale(0.98);
    background: rgb(255 255 255 / 0.14);
    box-shadow:
        inset 0 2px 10px rgb(0 0 0 / 0.18),
        0 2px 8px rgb(0 0 0 / 0.12);
}

.at-header-rail__cart:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(var(--rgb-mint) / 0.35);
}

.at-header-rail__cart-iconwrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-header-rail__cart-svg {
    display: block;
}

.at-header-rail__cart-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.45rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    border-radius: var(--ui-radius-pill);
    background: #f5c400;
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1rem;
    text-align: center;
}

.at-header-rail__cart-meta {
    display: flex;
    flex-direction: column;
    line-height: var(--line-snug);
    min-width: 0;
}

.at-header-rail__cart-total {
    font-size: var(--font-small);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Carrito: solo importe visible; “Finalizar compra” retirado — el propósito va en aria-label */

/* Invitado · entrega: pastilla corta bajo el icono (lectura completa en .at-visually-hidden del enlace) */
.at-header-rail__delivery-text--guest-chip .at-header-rail__delivery-kicker {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.at-header-rail__delivery-text--guest-chip .at-header-rail__delivery-strong--guest {
    margin-top: 0.05rem;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 47.99em) {
    .at-header-rail__account-trigger--guest {
        position: relative;
        max-width: none;
        padding: 0.35rem 0.5rem;
    }

    /* Invitado móvil: icono visible; acción descrita en aria-label */
    .at-header-rail__account-trigger--guest .at-header-rail__account-trigger-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Entrega / recogida: no en el rail móvil (reubicación futura en flujo de compra) */
    .at-header-rail__inner > .at-delivery-slot,
    .at-header-rail__inner > a.at-header-rail__delivery {
        display: none !important;
    }

    .at-header-rail__search-toggle {
        display: inline-flex;
        align-self: center;
    }

    .at-header-rail__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "hdr-logo hdr-actions"
            "hdr-search hdr-search";
        align-items: center;
        gap: var(--space-2);
    }

    .at-header-rail__logo {
        grid-area: hdr-logo;
        min-width: 0;
        justify-self: start;
    }

    form.at-header-rail__search {
        grid-area: hdr-search;
        flex: none;
        width: 100%;
    }

    .at-header-rail__inner:not(.is-header-search-open) form.at-header-rail__search {
        display: none !important;
    }

    /* Reorden + cuenta + carrito en un bloque junto con la lupa (menos hueco disperso) */
    .at-header-rail__actions {
        grid-area: hdr-actions;
        margin-inline-start: 0;
        flex-wrap: nowrap;
        gap: var(--space-1);
        max-width: 100%;
    }
}

@media (max-width: 30rem) {
    .at-header-rail__ghost {
        display: none;
    }
}

/* --- Subnavegación (fondo claro, enlaces tipo Walmart fila 2) --- */
.at-header-subnav {
    background: linear-gradient(180deg, #f4fbf7 0%, #eef6f1 100%);
    border-bottom: 1px solid rgb(var(--rgb-brand) / 0.12);
}

.at-header-subnav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0 max(var(--space-4), env(safe-area-inset-left, 0px)) 0
        max(var(--space-4), env(safe-area-inset-right, 0px));
    min-height: 2.25rem;
}

@media (min-width: 48rem) {
    .at-header-subnav__inner {
        flex-wrap: nowrap;
    }
}

/* Idioma / mercado / moneda: misma barra que el menú; a la derecha en escritorio */
.at-header-subnav__storefront {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-inline-start: auto;
    min-width: 0;
    max-width: 100%;
    align-self: center;
    padding-inline-start: var(--space-1);
    border-inline-start: 1px solid rgb(var(--rgb-brand) / 0.1);
}

.at-header-subnav__storefront .at-storefront-controls {
    max-width: 100%;
}

.at-header-subnav__storefront .at-storefront-controls__bar {
    background: rgb(255 255 255 / 0.55);
    border-color: rgb(var(--rgb-brand) / 0.12);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45);
}

@media (max-width: 47.99rem) {
    .at-header-subnav__storefront {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        margin-inline-start: 0;
        padding-inline: 0;
        padding-block: var(--space-2);
        border-inline-start: 0;
        border-top: 1px solid rgb(var(--rgb-brand) / 0.14);
        background: linear-gradient(180deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0.2) 100%);
        /* Segunda fila: menú arriba con scroll; controles abajo, alineados a la derecha y con wrap si hace falta */
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--space-2);
        row-gap: var(--space-1);
    }

    .at-header-subnav__storefront .at-storefront-controls__bar {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }

    .at-header-subnav__storefront .at-storefront-controls__segment {
        flex: 0 1 auto;
    }
}

.at-header-subnav__menu {
    align-self: center;
    flex-shrink: 0;
}

.at-header-subnav__scroll {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* El panel del menú «Productos» usa position:absolute y cae por debajo de esta barra.
   Con overflow-x:auto el navegador suele aplicar también recorte vertical al contenido
   hijo, de modo que solo se ven las primeras filas del submenú (faltan Ofertas/Novedades).
   En viewport anchos el bloque del nav cabe sin scroll horizontal. */
@media (min-width: 64rem) {
    .at-header-subnav__scroll {
        overflow: visible;
    }
}

/* Mega “Catálogo / Facial…” (fuera del scroll horizontal para no recortar paneles) */
.at-header-subnav__mega {
    display: none;
    flex-shrink: 0;
    align-items: center;
    border-inline-end: 1px solid rgb(var(--rgb-brand) / 0.12);
    padding-inline-end: var(--space-2);
    margin-inline-end: var(--space-1);
}

@media (min-width: 48rem) {
    .at-header-subnav__mega {
        display: flex;
    }
}

.at-header-subnav__mega .at-mega--subnav {
    display: flex;
    position: relative;
    align-items: center;
    padding: 0;
    margin: 0;
    border: none;
}

.at-header-subnav__mega .at-mega__list {
    flex-wrap: nowrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
}

.at-header-subnav__mega .at-mega__trigger {
    min-height: 2.125rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--at-forest);
    white-space: nowrap;
    border-radius: var(--ui-radius-sm);
}

.at-header-subnav__mega .at-mega__trigger--dept::before {
    content: '▦';
    display: inline-block;
    margin-inline-end: 0.35rem;
    font-size: 0.85em;
    opacity: 0.85;
}

.at-header-subnav__mega .at-mega__trigger:hover {
    background: rgb(var(--rgb-brand) / 0.06);
    color: var(--at-grad-a);
}

.at-header-subnav__mega .at-mega__panel {
    z-index: 40;
}

/* Nav principal en subbar: visible desde tablet (antes solo escritorio) */
.at-header-subnav .at-layout__nav-desktop {
    display: none;
}

@media (min-width: 48rem) {
    .at-header-subnav .at-layout__nav-desktop {
        display: flex;
    }
}

.at-header-subnav .at-layout__nav-desktop.at-nav--header a {
    min-height: 2.125rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
    color: var(--at-forest);
    border-radius: 0;
}

.at-header-subnav .at-layout__nav-desktop.at-nav--header a:hover {
    background: rgb(var(--rgb-brand) / 0.05);
    color: var(--at-grad-a);
}

.at-header-subnav .at-layout__nav-desktop.at-nav--header a[aria-current='page'] {
    background: transparent;
    color: var(--at-grad-a);
    box-shadow: inset 0 -2px 0 0 var(--at-forest);
}

@media (min-width: 48rem) {
    .at-header-subnav .at-layout__nav-toggle {
        display: none !important;
    }
}