/* Presentation adapter for the existing Obsidiana header, not a second navigation. */
header[data-compact] {
    --obs-motion-duration: 1s;
    --obs-motion-ease: cubic-bezier(.16,1,.3,1);
    --obs-motion-top: 0px;
    --obs-motion-width: 100%;
    --obs-motion-surface-height: 69px;
    position: sticky !important;
    top: var(--obs-motion-top) !important;
    z-index: 30;
    height: var(--obs-motion-reserve,69px) !important;
    min-height: var(--obs-motion-reserve,69px);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    translate: none !important;
    pointer-events: none;
    transition: top var(--obs-motion-duration) var(--obs-motion-ease) !important;
}
header[data-compact]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--obs-motion-width);
    height: var(--obs-motion-surface-height);
    transform: translateX(-50%);
    border-radius: 0;
    background: color-mix(in srgb,var(--brand-bg) 90%,transparent);
    border-bottom: 1px solid color-mix(in srgb,var(--brand-border) 30%,transparent);
    backdrop-filter: blur(8px);
    transition: width var(--obs-motion-duration) var(--obs-motion-ease),height var(--obs-motion-duration) var(--obs-motion-ease),border-radius var(--obs-motion-duration) var(--obs-motion-ease),background-color 700ms var(--obs-motion-ease),box-shadow 700ms var(--obs-motion-ease),backdrop-filter 700ms var(--obs-motion-ease);
}
header[data-compact] > div:first-child {
    position: relative;
    width: var(--obs-motion-width);
    max-width: 1152px !important;
    height: 68px;
    min-height: 68px;
    margin: 0 auto !important;
    padding: 12px 24px !important;
    gap: 16px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    pointer-events: auto;
    transition: width var(--obs-motion-duration) var(--obs-motion-ease),height var(--obs-motion-duration) var(--obs-motion-ease),gap var(--obs-motion-duration) var(--obs-motion-ease),padding var(--obs-motion-duration) var(--obs-motion-ease) !important;
}
header[data-compact] > div:first-child > a { min-height: 44px; }
header[data-compact] > div:first-child > a > span,
header[data-compact] > div:first-child > a img { height: 36px !important; transition: height var(--obs-motion-duration) var(--obs-motion-ease),width var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-compact] > div:first-child > form { height: 44px; }
header[data-compact] > div:first-child > form input { min-width: 0; padding: 10px 16px 10px 20px !important; transition: padding var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-compact] > div:first-child > form button { padding-inline: 20px !important; transition: padding var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-compact] > div:first-child > form button,
header[data-compact] > div:first-child > button,
header[data-compact] > div:first-child > div:last-child > :is(button,a) {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}
header[data-compact] > div:first-child > div:last-child { gap: 8px !important; transition: gap var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-compact] > div:first-child > div:last-child > :is(button,a) > svg,
header[data-compact] > div:first-child > form svg { width: 16px !important; height: 16px !important; transition: width var(--obs-motion-duration) var(--obs-motion-ease),height var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-compact] > div:first-child > div:last-child > [title="Favoritos"] > svg { width: 20px !important; height: 20px !important; }
header[data-compact] > div:first-child > button > svg { width: 20px !important; height: 20px !important; transition: width var(--obs-motion-duration) var(--obs-motion-ease),height var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-obs-motion][data-obs-motion="compact"] {
    --obs-motion-top: 20px;
    --obs-motion-width: min(850px,calc(100% - 40px));
    --obs-motion-surface-height: 70px;
}
header[data-obs-motion="compact"]::before {
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand-bg) 95%,transparent);
    box-shadow: 0 6px 24px -12px rgb(6 15 14 / 25%);
    backdrop-filter: blur(24px);
}
header[data-obs-motion="compact"] > div:first-child { height: 70px; min-height: 70px; gap: 8px !important; padding: 13px 16px !important; }
header[data-obs-motion="compact"] > div:first-child > a > span,
header[data-obs-motion="compact"] > div:first-child > a img { height: 28px !important; }
header[data-obs-motion="compact"] > div:first-child > div:last-child { gap: 6px !important; }
header[data-obs-motion="compact"] > div:first-child > div:last-child > :is(button,a) > svg,
header[data-obs-motion="compact"] > div:first-child > form svg { width: 14px !important; height: 14px !important; }
header[data-obs-motion="compact"] > div:first-child > div:last-child > [title="Favoritos"] > svg { width: 20px !important; height: 20px !important; }
header[data-obs-motion="compact"] > div:first-child > button > svg { width: 16px !important; height: 16px !important; }
header[data-obs-motion="compact"] > div:first-child > form input { padding: 6px 16px !important; }
header[data-obs-motion="compact"] > div:first-child > form button { padding-inline: 16px !important; }
html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) {
    --obs-motion-top: 20px;
    --obs-motion-width: min(850px,calc(100% - 40px));
    --obs-motion-surface-height: 70px;
}
html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion])::before { border-radius: 999px; }
html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) > div:first-child { height: 70px; min-height: 70px; padding: 13px 16px !important; gap: 8px !important; }
header[data-compact] button[title="Buscar productos"] { display: none !important; }
/* Outrank the scoped inner-control transitions as well as the native utilities. */
html header[data-compact][data-compact][data-compact][data-compact][data-obs-motion-ready="false"],
html header[data-compact][data-compact][data-compact][data-compact][data-obs-motion-ready="false"]::before,
html header[data-compact][data-compact][data-compact][data-compact][data-obs-motion-ready="false"] *,
html header[data-compact][data-compact][data-compact][data-compact]:not([data-obs-motion]),
html header[data-compact][data-compact][data-compact][data-compact]:not([data-obs-motion])::before,
html header[data-compact][data-compact][data-compact][data-compact]:not([data-obs-motion]) * { transition: none !important; }
@media (min-width:640px) {
    header[data-compact] > div:first-child > div:last-child > [aria-label="Abrir carrito"] { gap: 8px !important; padding: 8px 12px !important; white-space: nowrap; transition: padding var(--obs-motion-duration) var(--obs-motion-ease),gap var(--obs-motion-duration) var(--obs-motion-ease) !important; }
    header[data-obs-motion="compact"] > div:first-child > div:last-child > [aria-label="Abrir carrito"] { gap: 6px !important; padding: 6px 10px !important; }
}
header[data-compact] button[aria-label="Abrir carrito"] > span.rounded-full { width: 20px !important; height: 20px !important; font-size: 10px !important; transition: width var(--obs-motion-duration) var(--obs-motion-ease),height var(--obs-motion-duration) var(--obs-motion-ease),font-size var(--obs-motion-duration) var(--obs-motion-ease) !important; }
header[data-obs-motion="compact"] button[aria-label="Abrir carrito"] > span.rounded-full { width: 16px !important; height: 16px !important; font-size: 9px !important; }
@media (min-width:640px) and (max-width:1023px) {
    header[data-compact] > div:first-child { gap: 8px !important; padding-inline: 16px !important; }
    header[data-compact] > div:first-child > a img { max-width: 112px !important; }
}
@media (max-width:639px) {
    header[data-compact] { --obs-motion-surface-height: 125px; --obs-motion-reserve: 125px; }
    header[data-compact] > div:first-child {
        height: 68px !important;
        min-height: 68px;
        padding: 12px 8px !important;
        gap: 4px !important;
    }
    header[data-compact] > div:first-child > a { margin: 0; }
    header[data-compact] > div:first-child > a img { height: 28px !important; max-width: 108px !important; }
    header[data-compact] > div:first-child > a > span { height: 28px !important; max-width: 108px !important; }
    header[data-compact] > div:first-child > div:last-child { gap: 4px !important; }
    header[data-obs-motion="expanded"] > div:first-child > div:last-child > a { display: inline-flex !important; }
    header[data-compact] > div:nth-child(2) {
        position: relative;
        width: 100%;
        max-height: 56px !important;
        height: 56px;
        padding: 0 24px 12px !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: opacity 700ms var(--obs-motion-ease) !important;
    }
    header[data-obs-motion][data-obs-motion="compact"],
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) { --obs-motion-top: 12px; --obs-motion-width: calc(100% - 28px); --obs-motion-surface-height: 64px; }
    header[data-obs-motion="compact"]::before { border-radius: 999px; }
    header[data-obs-motion="compact"] > div:first-child,
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) > div:first-child { height: 64px !important; min-height: 64px; padding: 10px 8px !important; gap: 4px !important; }
    header[data-obs-motion="compact"] button[data-obs-mobile-icon] { display: inline-flex !important; width: 44px !important; height: 44px !important; opacity: 1 !important; pointer-events: auto !important; }
    header[data-obs-motion="compact"] > div:nth-child(2) { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }
}
@media (max-width:414px) {
    header[data-compact] > div:first-child > a img { max-width: 88px !important; }
    header[data-compact] > div:first-child > a > span { max-width: 88px !important; }
}
@media (min-width:375px) and (max-width:386px) {
    header[data-obs-motion][data-obs-motion="compact"],
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) { --obs-motion-surface-height: 108px; }
    header[data-obs-motion="compact"]::before,
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion])::before { border-radius: 28px; }
    header[data-obs-motion="compact"] > div:first-child,
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) > div:first-child { flex-wrap: wrap; justify-content: center; height: 108px !important; min-height: 108px; padding: 8px 12px 5px !important; align-content: start; }
    header[data-obs-motion="compact"] > div:first-child > a { flex: 1; justify-content: center; margin-right: 44px; }
    header[data-obs-motion="compact"] > div:first-child > div:last-child { width: 100%; margin: 0 !important; justify-content: center; }
}
@media (max-width:374px) {
    header[data-compact] { --obs-motion-surface-height: 165px; --obs-motion-reserve: 165px; }
    header[data-compact] > div:first-child { flex-wrap: wrap; justify-content: center; height: 109px !important; min-height: 109px; padding: 8px 12px 5px !important; align-content: start; }
    header[data-compact] > div:first-child > a { flex: 1; justify-content: center; margin-right: 44px; }
    header[data-compact] > div:first-child > div:last-child { width: 100%; margin: 0 !important; justify-content: center; }
    header[data-obs-motion][data-obs-motion="compact"],
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) { --obs-motion-surface-height: 108px; }
    header[data-obs-motion="compact"]::before,
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion])::before { border-radius: 28px; }
    header[data-obs-motion="compact"] > div:first-child,
    html[data-obs-motion-start="compact"] header[data-compact]:not([data-obs-motion]) > div:first-child { height: 108px !important; min-height: 108px; padding: 8px 12px 5px !important; }
}
@media (prefers-reduced-motion:reduce) {
    html header[data-compact][data-compact][data-compact][data-compact][data-compact],html header[data-compact][data-compact][data-compact][data-compact][data-compact]::before,html header[data-compact][data-compact][data-compact][data-compact][data-compact] * { transition: none !important; animation: none !important; }
}
/* Measured40px storefront actions: preserve labels, colors, icons and state. */
main .product-card-cta { min-height: 44px; }
@media (max-width:374px) {
    main .product-card-cta { min-height: 50px; padding: 8px !important; gap: 6px !important; white-space: normal !important; }
    main .product-card-cta > span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}
main button[aria-label="Ver ofertas anteriores"],
main button[aria-label="Ver más ofertas"] { min-width: 44px; min-height: 44px; }
/* Retain the old navigation adapter's edge placement, not its hiding behavior. */
a.fixed[aria-label="Comprar por WhatsApp"],
button.fixed[aria-label="Abrir carrito"] { right: max(8px,env(safe-area-inset-right)) !important; left: auto !important; }