/* One native header; its host reserves the expanded height in document flow. */
html[data-mc-header] .storefront-sticky-header {
  position: sticky !important; top: 0 !important; height: 69px !important;
  min-height: 69px !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: none !important; overflow: visible !important;
}
html[data-mc-header] .storefront-sticky-header > div {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  box-sizing: border-box; width: 100% !important; max-width: none !important;
  height: 69px; margin: 0 !important; padding: 12px max(24px, calc((100% - 1104px)/2)) !important;
  gap: 16px !important; border: 1px solid transparent !important;
  border-bottom-color: var(--brand-border) !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--brand-bg) 95%, transparent) !important;
  box-shadow: 0 0 0 transparent !important; backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); overflow: visible !important;
}
html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header > div {
  top: 20px; width: min(850px, calc(100% - 40px)) !important; height: 70px;
  padding: 12px 14px 12px 28px !important; gap: 8px !important;
  border-color: color-mix(in srgb, var(--brand-border) 70%, transparent) !important;
  border-radius: 50px !important; background: color-mix(in srgb, var(--brand-bg) 95%, transparent) !important;
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / .2) !important;
}
html[data-mc-header] .storefront-sticky-header > div > a { min-height: 44px; }
html[data-mc-header] .storefront-sticky-header > div > a img { height: 40px !important; max-width: 160px !important; width: auto; }
html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header > div > a img { height: 24px !important; }
html[data-mc-header] .storefront-sticky-header > div > div:last-child { gap: 8px !important; }
html[data-mc-header] .storefront-sticky-header > div > div:last-child > :is(button,a) {
  height: 44px !important; min-width: 44px !important; flex-shrink: 0; justify-content: center;
}
html[data-mc-header] .storefront-sticky-header button[aria-label^="Abrir carrito"] { padding: 8px 12px !important; gap: 8px !important; font-size: 14px !important; }
html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header button[aria-label^="Abrir carrito"] { padding: 8px 10px !important; gap: 6px !important; font-size: 12px !important; }
html[data-mc-header] .storefront-sticky-header button[aria-label^="Abrir carrito"] > span[aria-hidden="true"] { height: 20px !important; min-width: 20px !important; font-size: 10px !important; }
html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header button[aria-label^="Abrir carrito"] > span[aria-hidden="true"] { height: 16px !important; min-width: 16px !important; font-size: 9px !important; }
html[data-mc-header] .storefront-sticky-header :is(a,button) > svg { width: 16px !important; height: 16px !important; }
html[data-mc-header] .storefront-sticky-header button[aria-label="Favoritos"] > svg { width: 20px !important; height: 20px !important; }
html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header :is(a,button):not([aria-label="Favoritos"]) > svg { width: 14px !important; height: 14px !important; }
html[data-mc-header] #storefront-search { height: 44px !important; padding: 10px 16px 10px 20px !important; }
html[data-mc-header] .storefront-sticky-header form > button { min-width: 44px; height: 44px; padding-inline: 20px !important; }
html[data-mc-header][data-mc-compact="true"] #storefront-search { padding-inline: 16px 12px !important; }
html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header form > button { padding-inline: 14px !important; }
html[data-mc-header] #storefront-search-results { max-height: min(384px, calc(100dvh - 120px)); }
/* All native state-dependent dimensions share the same reversible timing. */
html[data-mc-motion-ready] .storefront-sticky-header > div,
html[data-mc-motion-ready] .storefront-sticky-header :is(a,button,img,svg,input,span[aria-hidden="true"]),
html[data-mc-motion-ready] .storefront-sticky-header > div > div:last-child {
  transition: 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), font-size 1s cubic-bezier(.16,1,.3,1), min-width 1s cubic-bezier(.16,1,.3,1),
    border-radius 1s cubic-bezier(.16,1,.3,1), background-color 700ms, border-color 700ms, box-shadow 700ms !important;
}
html[data-mc-header]:not([data-mc-motion-ready]) .storefront-sticky-header * { transition: none !important; }
@media(max-width:760px) {
  html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header > div { top: 12px; height: 64px; width: calc(100% - 28px) !important; padding: 9px 12px !important; }
}
@media(max-width:639px) {
  html[data-mc-header] .storefront-sticky-header { height: 65px !important; min-height: 65px !important; }
  html[data-mc-header] .storefront-sticky-header > div { height: 65px; padding: 10px 12px !important; gap: 8px !important; }
  html[data-mc-header] .storefront-sticky-header > div > a img { height: 32px !important; max-width: 96px !important; }
  html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header > div > a img { height: 24px !important; }
  html[data-mc-header] .storefront-sticky-header > div > div:last-child { gap: 4px !important; }
  html[data-mc-header] .storefront-sticky-header button[aria-label^="Abrir carrito"] { width: 44px !important; padding: 8px !important; }
  html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header > div { height: 64px; }
}
@media(max-width:360px) {
  html[data-mc-header] .storefront-sticky-header > div { padding-inline: 6px !important; gap: 4px !important; }
  html[data-mc-header] .storefront-sticky-header > div > div:last-child { gap: 2px !important; }
  /* Five native actions remain >=44px, including Favorites; no control is hidden. */
  html[data-mc-header][data-mc-compact="true"] .storefront-sticky-header > div { width: max(calc(100% - 28px), min(294px, calc(100% - 12px))) !important; padding-inline: 6px !important; gap: 4px !important; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-mc-header] .storefront-sticky-header,
  html[data-mc-header][data-mc-compact][data-mc-motion-ready] .storefront-sticky-header * { transition: none !important; }
}
/* Keep the previous directional adapter's edge spacing, without hiding the header. */
[data-mc-edge-action] { right: max(8px, env(safe-area-inset-right)) !important; left: auto !important; }
/* Measured newsletter gutter was 4.4px at 390px: let the input shrink, not the CTA. */
.storefront-theme footer form:has(input[type="email"]) button[type="submit"] { flex-shrink: 0; padding-inline: 16px; min-height: 44px; }
.storefront-theme footer form:has(input[type="email"]) input { min-width: 0; }
.storefront-theme main button.mc-gold-action { min-height: 44px; }
[role="dialog"][aria-labelledby="mobile-search-title"] button:not(.inset-0),
[role="dialog"][aria-labelledby="mobile-filter-title"] button:not(.inset-0) { min-width: 44px; min-height: 44px; }
[role="dialog"][aria-labelledby="mobile-search-title"] form input { padding-right: 56px; }