/* Epsoltec: presentation only. The 65px native sticky box remains in flow. */
/* Preserve the former script's existing 8px floating-action anchor, unchanged. */
html .fixed:has(> a[aria-label^="Escribir al"][href^="https://wa.me/"]):has(> button[aria-label="Abrir carrito"]) { right: max(8px, env(safe-area-inset-right)) !important; left: auto !important; }
html header:has(#storefront-search) {
    position: sticky !important;
    top: 0 !important;
    height: 65px !important;
    padding: 0 !important;
    overflow: visible !important;
    translate: none !important;
    transform: none !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    background: var(--brand-bg) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    transition: background-color 700ms, border-color 700ms, backdrop-filter 700ms !important;
}
html header:has(#storefront-search) > div { padding: 0 !important; overflow: visible !important; }
html header:has(#storefront-search) > div > div {
    position: absolute !important;
    inset-inline: 0 !important;
    top: 0;
    width: 100%;
    max-width: 1152px !important;
    height: 68px;
    box-sizing: border-box;
    margin-inline: auto !important;
    padding: 11px 24px !important;
    gap: 16px !important;
    border: 1px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    transition: none !important;
}
html header:has(#storefront-search) > div > div > a {
    min-height: 44px;
    min-width: 0;
}
html header:has(#storefront-search) > div > div > a > img { width: 36px !important; height: 36px !important; }
html header:has(#storefront-search) > div > div > a > span { font-size: 18px !important; }
html header:has(#storefront-search) form { min-width: 0; }
html header:has(#storefront-search) button,
html header:has(#storefront-search) a[aria-label],
html header:has(#storefront-search) input { min-height: 44px !important; }
html header:has(#storefront-search) button,
html header:has(#storefront-search) a[aria-label] { min-width: 44px !important; }
html header:has(#storefront-search) button[title="Cambiar tema"],
html header:has(#storefront-search) a[href="/cliente"] { width: 44px !important; height: 44px !important; }
html[data-eps-header-compact="true"] header:has(#storefront-search) { background: transparent !important; border-color: transparent !important; }
html[data-eps-header-compact="true"] header:has(#storefront-search) > div > div {
    top: 20px;
    width: calc(100% - 40px);
    max-width: 850px !important;
    height: 64px;
    padding: 9px 14px 9px 28px !important;
    gap: 12px !important;
    border-color: var(--brand-border) !important;
    border-radius: 50px;
    background: var(--panel-strong) !important;
    box-shadow: 0 8px 28px rgb(0 0 0 / .18) !important;
}
html[data-eps-header-compact="true"] header:has(#storefront-search) > div > div > a > img { width: 32px !important; height: 32px !important; }
html[data-eps-header-compact="true"] header:has(#storefront-search) > div > div > a > span { font-size: 16px !important; }
/* The React >12px classes no longer own geometry; one attribute owns both ends. */
html:not([data-eps-header-ready="true"]) header:has(#storefront-search),
html:not([data-eps-header-ready="true"]) header:has(#storefront-search) * { transition: none !important; }
html[data-eps-header-ready="true"] header:has(#storefront-search) > div > div,
html[data-eps-header-ready="true"] header:has(#storefront-search) > div > div > a > img,
html[data-eps-header-ready="true"] header:has(#storefront-search) > div > div > a > span {
    transition: width 1s cubic-bezier(.16,1,.3,1), max-width 1s cubic-bezier(.16,1,.3,1), height 1s cubic-bezier(.16,1,.3,1), top 1s cubic-bezier(.16,1,.3,1), padding 1s cubic-bezier(.16,1,.3,1), gap 1s cubic-bezier(.16,1,.3,1), border-radius 1s cubic-bezier(.16,1,.3,1), font-size 1s cubic-bezier(.16,1,.3,1), background-color 700ms, border-color 700ms, box-shadow 700ms, backdrop-filter 700ms !important;
}
@media (min-width: 768px) {
    html header:has(#storefront-search) { background: color-mix(in srgb, var(--brand-bg) 90%, transparent) !important; backdrop-filter: blur(8px) !important; }
    html[data-eps-header-compact="true"] header:has(#storefront-search) { background: transparent !important; backdrop-filter: none !important; }
    html[data-eps-header-compact="true"] header:has(#storefront-search) > div > div { backdrop-filter: blur(12px) !important; }
}
@media (max-width: 760px) {
    html[data-eps-header-compact="true"] header:has(#storefront-search) > div > div { top: 12px; width: calc(100% - 28px); padding-inline: 12px !important; }
}
@media (max-width: 639px) {
    html header:has(#storefront-search) > div > div { height: 64px; padding: 9px 11px !important; gap: 8px !important; }
    html header:has(#storefront-search) > div > div > a { flex-shrink: 1 !important; }
    html header:has(#storefront-search) > div > div > a > img { width: 32px !important; height: 32px !important; }
    html header:has(#storefront-search) > div > div > a > span { font-size: 16px !important; }
    html[data-eps-header-compact="true"] header:has(#storefront-search) > div > div { padding-inline: 11px !important; gap: 8px !important; }
}
/* No clipping of native listboxes; short screens scroll inside the native list. */
html header:has(#storefront-search) [role="listbox"] { max-height: min(18rem, calc(100dvh - var(--eps-header-bottom, 100px) - 16px)); overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
    html header:has(#storefront-search), html header:has(#storefront-search) * { transition: none !important; animation: none !important; }
}