/** Shopify CDN: Minification failed

Line 1975:0 Expected "}" to go with "{"

**/
/* Ekimall firm sticky header — deep fix
   ROOT CAUSE: Horizon sticky uses header-component[sticky] + .header-section{position:sticky}.
   #header-group must stay display:contents so announcement + header pin independently.
   Socialmediabar / Recentsale sit in header-group; never sticky the whole group (taller than viewport = never pins).
   Horizon also sets .header[data-sticky-state=idle|/active+animating]{opacity:0} which can hide the bar —
   force opaque/transform-none when sticky=always.
   Ancestors must not use overflow:hidden on the scroll axis. */

/* CRITICAL: do NOT set overflow-x on html/body.
   Any non-visible overflow-x makes overflow-y compute to auto → sticky fails on homepage.
   Drawers use html[scroll-lock]{overflow:hidden} from Horizon base.css. */

/* Restore Horizon group model */
#header-group:has(#header-component[sticky]),
#header-group:has(#header-component[sticky='always']),
#header-group:has(#header-component[sticky="always"]) {
  display: contents !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  background: transparent !important;
  overflow: visible !important;
}

/* 1) Announcement vertical padding — Theme Editor 內距 上方/下方
   v60: FORCE padding from TE CSS vars (inline style sets --padding-block-*).
   Collapse-on-scroll rules below still zero padding when hidden. */

aside.announcement-bar.spacing-style,
.announcement-bar.spacing-style.section,
.shopify-section:has(.announcement-bar) .announcement-bar.spacing-style {
  padding-block-start: var(--padding-block-start, 15px) !important;
  padding-block-end: var(--padding-block-end, 15px) !important;
}

.announcement-bar__slider,
.announcement-bar__slides,
.announcement-bar__slide {
  min-height: 0 !important;
}

.announcement-bar .announcement-bar__text,
.announcement-bar .custom-typography,
.announcement-bar .custom-typography > * {
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  margin-block: 0 !important;
  /* section 內距 owns vertical pad */
  padding-block: 0 !important;
}

/* 2) Logo vertical middle — flex center + optical SVG nudge (v123) */
.header__row--top .header__columns,
.header__row .header__columns {
  align-items: center !important;
}

/* Desktop only — on mobile Horizon needs display:contents so drawer/logo/icons
   participate in the 5-column grid (leftA leftB center rightA rightB). */
@media screen and (min-width: 750px) {
  .header__row--top .header__column,
  .header__row--top .header__column--center,
  .header__row--top .header__column--right,
  .header__row--top .header__column--left {
    align-items: center !important;
    display: flex !important;
  }
}

.header--collapse-row-paddings .header__row--top .header__columns,
.header--compact .header__row--top .header__columns,
.header__row--top .header__columns {
  --padding-block-start: var(--header-padding, 0.25rem) !important;
  --padding-block-end: var(--header-padding, 0.25rem) !important;
}

.header-logo,
a.header-logo,
.header__columns .header-logo,
.header__column .header-logo,
.header__row--top .header-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin-block: 0 !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
}

.header-logo__image-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

.header-logo__image,
.header-logo img,
.header-logo__image-container img {
  display: block !important;
  margin-block: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  object-position: center center !important;
  /* Optical: Ekimall SVG ink sits high in viewBox (empty bottom ~11%).
     Nudge down ~5.5% of logo height so glyph centers with header icons. */
  transform: translateY(5.5%) !important;
}

@media screen and (min-width: 750px) {
  .header-logo__image,
  .header-logo img,
  .header-logo__image-container img {
    margin-top: 0 !important;
  }
}

/* 3) Compact middle bar */
.header.header--compact,
.header--compact {
  --header-padding: var(--padding-3xs, 0.25rem) !important;
}

.header--compact .header__columns {
  --padding-block-start: var(--header-padding) !important;
  --padding-block-end: var(--header-padding) !important;
}

/* 4) v15: announcement NOT sticky (scrolls away); header sticky below */
#header-group:has(#header-component[sticky='always']) > .shopify-section:has(.announcement-bar),
#header-group:has(#header-component[sticky='always']) > .shopify-section:has(announcement-bar-component),
#header-group:has(#header-component[sticky="always"]) > .shopify-section:has(.announcement-bar),
#header-group:has(#header-component[sticky="always"]) > .shopify-section:has(announcement-bar-component) {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--layer-sticky, 8) + 2) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

#header-group:has(#header-component[sticky='always']) > .shopify-section:has(.announcement-bar) .section-background,
#header-group:has(#header-component[sticky='always']) > .shopify-section:has(.announcement-bar) .announcement-bar,
#header-group:has(#header-component[sticky="always"]) > .shopify-section:has(.announcement-bar) .section-background,
#header-group:has(#header-component[sticky="always"]) > .shopify-section:has(.announcement-bar) .announcement-bar {
  /* v12: ungated paint removed — see transparent-at-top kill + scrolled restore in header style */
}

#header-group:has(#header-component[sticky='always']) > .header-section,
#header-group:has(#header-component[sticky="always"]) > .header-section,
.header-section:has(> #header-component[sticky='always']),
.header-section:has(> #header-component[sticky="always"]) {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* v5: opaque fill gated — skip when transparent at top */
#header-group:has(#header-component[sticky='always']:not([transparent])) > .header-section,
#header-group:has(#header-component[sticky='always']:not([transparent])) > .header-section .header,
#header-group:has(#header-component[sticky='always']:not([transparent])) > .header-section .header__row,
#header-group:has(#header-component[sticky="always"]:not([transparent])) > .header-section,
#header-group:has(#header-component[sticky="always"]:not([transparent])) > .header-section .header,
#header-group:has(#header-component[sticky="always"]:not([transparent])) > .header-section .header__row,
#header-group:has(#header-component[sticky='always'][data-ekimall-header-scrolled="1"]) > .header-section,
#header-group:has(#header-component[sticky='always'][data-ekimall-header-scrolled="1"]) > .header-section .header,
#header-group:has(#header-component[sticky='always'][data-ekimall-header-scrolled="1"]) > .header-section .header__row,
#header-group:has(#header-component[sticky="always"][data-ekimall-header-scrolled="1"]) > .header-section,
#header-group:has(#header-component[sticky="always"][data-ekimall-header-scrolled="1"]) > .header-section .header,
#header-group:has(#header-component[sticky="always"][data-ekimall-header-scrolled="1"]) > .header-section .header__row {
  /* v54: TE sticky scheme via --ekimall-sticky-header-bg; cream/white fallback — never page pink */
  background-color: var(--ekimall-sticky-header-bg, #ffffff) !important;
  background: var(--ekimall-sticky-header-bg, #ffffff) !important;
  opacity: 1 !important;
}

/* Kill Horizon hide-on-idle / animating for always-sticky */
#header-component[sticky='always'],
#header-component[sticky="always"],
#header-component[sticky='always'] .header,
#header-component[sticky="always"] .header,
#header-component[sticky='always'] .header[data-sticky-state],
#header-component[sticky="always"] .header[data-sticky-state],
#header-component[sticky='always'] .header[data-sticky-state='idle'],
#header-component[sticky='always'] .header[data-sticky-state='inactive'],
#header-component[sticky='always'] .header[data-sticky-state='active'],
#header-component[sticky='always'] .header[data-sticky-state='active'][data-animating],
#header-component[sticky="always"] .header[data-sticky-state='idle'],
#header-component[sticky="always"] .header[data-sticky-state='inactive'],
#header-component[sticky="always"] .header[data-sticky-state='active'],
#header-component[sticky="always"] .header[data-sticky-state='active'][data-animating],
.header-section:has(> #header-component[sticky='always']) .header[data-sticky-state],
.header-section:has(> #header-component[sticky="always"]) .header[data-sticky-state] {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Trust bar (if re-added to header-group) */
#header-group:has(#header-component[sticky='always']) > .shopify-section:has(.ekimall-trust-bar),
#header-group:has(#header-component[sticky='always']) > .ekimall-trust-bar-section {
  position: sticky !important;
  top: 0 !important;
  z-index: calc(var(--layer-sticky, 8) + 2) !important;
}

/* Social / recent-sale siblings must never be sticky */
#header-group > .shopify-section[id*="socialmediabar"],
#header-group > .shopify-section[id*="recentsale"],
#header-group > .shopify-section[id*="Socialmediabar"],
#header-group > .shopify-section[id*="Recentsale"] {
  position: static !important;
  top: auto !important;
}


/* 5) Tighten space under menu row (before hero) */
.header--compact .header__row--bottom .header__columns,
.header__row--bottom .header__columns {
  --padding-block-start: 0.15rem !important;
  --padding-block-end: 0.15rem !important;
  padding-block-start: 0.15rem !important;
  padding-block-end: 0.15rem !important;
}
.header__row--bottom {
  --padding-block-start: 0.15rem !important;
  --padding-block-end: 0.15rem !important;
}
#MainContent[data-template='index'] > .shopify-section:first-child .section,
#MainContent[data-template='index'] > .shopify-section:first-child .spacing-style {
  --padding-block-start: 0px !important;
}

/* 6) Sticky harden: header-announcements section (Horizon) */
#header-group:has(#header-component[sticky='always']) > .shopify-section:has(header-announcements),
#header-group:has(#header-component[sticky="always"]) > .shopify-section:has(header-announcements),
#header-group:has(#header-component[sticky='always']) > .shopify-section[id*="header_announcements"],
#header-group:has(#header-component[sticky="always"]) > .shopify-section[id*="header_announcements"] {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--layer-sticky, 8) + 2) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* v8: sticky always for header-component (transparent or not) — NO absolute overlay */
#header-component[sticky='always'],
#header-component[sticky="always"],
#header-component[sticky='always'][transparent],
#header-component[sticky="always"][transparent],
#header-component[sticky='always'][transparent]:not([data-ekimall-header-scrolled="1"]),
#header-component[sticky="always"][transparent]:not([data-ekimall-header-scrolled="1"]),
#header-component[sticky='always'][transparent][data-ekimall-header-scrolled="1"],
#header-component[sticky="always"][transparent][data-ekimall-header-scrolled="1"] {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
  width: 100% !important;
}
/* Transparent at top: keep section sticky in stack (do NOT collapse height / absolute) */
.header-section:has(> #header-component[sticky='always'][transparent]:not([data-ekimall-header-scrolled="1"])),
.header-section:has(> #header-component[sticky="always"][transparent]:not([data-ekimall-header-scrolled="1"])),
#header-group > .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: var(--ekimall-transparent-header-bg, transparent) !important;
  box-shadow: none !important;
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
}
/* v56: once scrolled / opaque class, header-section must drop pink tint */
#header-group > .header-section:has(> #header-component[data-ekimall-header-scrolled="1"]),
#header-group > .header-section:has(> #header-component.ekimall-header-opaque),
html[data-ekimall-page-scrolled="1"] #header-group > .header-section:has(> #header-component[transparent]) {
  background: var(--ekimall-sticky-header-bg, #ffffff) !important;
  background-color: var(--ekimall-sticky-header-bg, #ffffff) !important;
}


/* ============================================================
   Mobile header — ONE row: drawer | search | logo | icons
   Ekimall v88: desktop≈v82 + language right; mobile≈v85 + language right; no HKD
   bookends (left drawer+search, right 3 icons). Firm stable height.
   No HKD. Keep sticky rules below untouched.
   ============================================================ */
@media screen and (max-width: 749px) {
  .header__row .header__column--left,
  .header__row--top .header__column--left {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* v85: even tidy gap drawer → search */
    gap: 0.12rem !important;
    grid-area: leftCluster !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header__row .header__column--center,
  .header__row--top .header__column--center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(48vw, 160px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .header__row .header__column--right,
  .header__row--top .header__column--right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.04rem !important;
    grid-area: rightCluster !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    /* Extra end inset so account/wishlist/cart sit a bit left of the screen edge */
    padding: 0 0.35rem 0 0 !important;
    box-sizing: border-box !important;
  }

  .header,
  .header-section,
  #header-component,
  .header__row {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .header__columns {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .header__row--top .header__columns,
  .header--compact .header__row--top .header__columns,
  .header__columns {
    --header-mobile-bookend: 2.25rem !important;
    --header-left: 1fr !important;
    --header-center: auto !important;
    --header-right: 1fr !important;
    --header-template-columns: 1fr auto 1fr !important;
    --padding-block-start: 0.2rem !important;
    --padding-block-end: 0.2rem !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas: 'leftCluster center rightCluster' !important;
    column-gap: 0.12rem !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding-block: 0.25rem !important;
    /* v124: balanced side inset — left hamburger already feels inset; give right icons matching air */
    padding-inline: 0.5rem !important;
    /* Grow with Theme Editor mobile logo height so logo + icons share one center line */
    min-height: max(52px, calc(var(--header-logo-image-height-mobile, 28px) + 16px)) !important;
    height: auto !important;
  }

  /* Drawer + search in left cluster */
  header-drawer,
  .header-drawer,
  .header__drawer,
  .header__drawer--mobile {
    grid-area: unset !important;
    justify-self: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--header-mobile-bookend) !important;
    min-width: var(--header-mobile-bookend) !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Never unhide mobile:hidden search ghosts */
  .header__columns .search-action.mobile\:hidden,
  .header .search-action.mobile\:hidden {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
  }

  .header__column--left .search-action,
  .header__column--left .search-action:not(.mobile\:hidden) {
    grid-area: unset !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header__column--right .search-action {
    display: none !important;
  }

  .header-logo,
  a.header-logo,
  .header__row--top .header-logo {
    grid-area: unset !important;
    justify-self: unset !important;
    align-self: center !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
    transform: none !important;
    translate: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
  }

  .header-logo__image-container {
    max-width: min(calc(var(--header-logo-image-height-mobile, 28px) * 6), 70vw) !important;
  }

  .header-logo__image,
  .header-logo img,
  .header-logo__image-container img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Honor Theme Editor logo_height_mobile (was hard-locked 28px) */
    height: var(--header-logo-image-height-mobile, 28px) !important;
    max-height: var(--header-logo-image-height-mobile, 28px) !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Ekimall v126: language + currency selectors tidy on right */
  .header__column--right .dropdown-localization,
  .header__column--right dropdown-localization-component,
  .header__column--right localization-form-component {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 0.05rem 0 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header__column--right .language-selector,
  .header__column--right .language-selector--collapse-space {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.05rem !important;
  }

  .header__column--right .localization-form__select,
  .header__column--right .dropdown-localization__button,
  .header__column--right .dropdown-localization .localization-selector {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.1rem !important;
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    padding-inline: 0.15rem 0.1rem !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    max-width: 5.5rem !important;
  }

  .header__column--right .language-selector .svg-wrapper.icon-caret,
  .header__column--right .dropdown-localization__button .icon-caret {
    width: 0.55rem !important;
    height: 0.55rem !important;
    margin: 0 !important;
  }

  /* Ekimall v126: currency code visible on desktop currency selector; hide flags for tidy look */
  .header__column--right .dropdown-localization--currency .dropdown-localization__button .icon-flag {
    display: none !important;
  }

  .header__column--right .dropdown-localization--currency [data-testid="localization-currency-code"] {
    display: inline !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
  }

  /* Hide currency selector on mobile (also has mobile:hidden class) */
  @media screen and (max-width: 749px) {
    .header__column--right .dropdown-localization--currency,
    .header__column--right dropdown-localization-component.dropdown-localization--currency {
      display: none !important;
    }
  }

  header-actions,
  .header-actions,
  .header__column--right header-actions {
    grid-area: unset !important;
    grid-column: unset !important;
    justify-self: unset !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.04rem !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    /* keep icons in one flex row; end inset comes from column + row padding */
    flex: 0 0 auto !important;
  }

  header-actions .account-popover,
  header-actions .account-popover.mobile\:hidden,
  header-actions anchored-popover-component.account-popover {
    display: none !important;
  }

  header-actions .account-drawer,
  header-actions .cart-drawer,
  header-actions cart-drawer-component,
  header-actions dialog-component.account-drawer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* v118b: closed dialog must not take flex space / drop cart below header row */
  header-actions cart-drawer-component .cart-drawer__dialog:not([open]) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: fixed !important;
  }

  .header-actions__action,
  .header__icon,
  .header__icon--menu,
  .search-action .header-actions__action,
  header-actions .header-actions__action,
  header-actions .account-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.1rem !important;
    height: 2.25rem !important;
    min-width: 2.1rem !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 2.1rem !important;
  }

  .header-actions__action svg,
  .header__icon svg,
  .header-drawer-icon,
  .search-action svg,
  header-actions .account-button svg,
  header-actions .account-button__icon svg,
  header-actions .header-actions__cart-icon svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
  }

  .header__row--bottom {
    display: none !important;
  }

  .announcement-bar .announcement-bar__text,
  .announcement-bar .custom-typography,
  .announcement-bar .custom-typography > * {
    padding-block: 0 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
  }

  #header-group:has(#header-component[sticky='always']) > .header-section,
  #header-group:has(#header-component[sticky="always"]) > .header-section,
  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky="always"]) {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .header__row--mobile {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header__row--mobile::-webkit-scrollbar {
    display: none;
  }
}

/* Ekimall v87 desktop: restore v82-like TOP row + full-width BOTTOM menu.
   Do NOT apply 1fr|auto|1fr / max-width:220px to ALL .header__columns —
   that clipped BOTTOMS on the menu row (v84/v85 regression). */
@media screen and (min-width: 750px) {
  /* Ekimall v126: language + currency visible on desktop right */
  .header__row--top .header__column--right .dropdown-localization,
  .header__row--top .header__column--right dropdown-localization-component,
  .header__row--top .header__column--right localization-form-component {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 0.15rem 0 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .header__row--top .header__column--right .dropdown-localization--currency {
    margin-inline-end: 0.2rem !important;
  }

  .header__row--top .header__column--right .dropdown-localization--currency .dropdown-localization__button {
    gap: 0.15rem !important;
    max-width: 4.5rem !important;
    padding-inline: 0.2rem 0.15rem !important;
  }

  .header__row--top .header__column--right .localization-form__select {
    font-size: 0.8125rem !important;
    max-width: 6.5rem !important;
  }

  /* TOP row only — logo bookends; firm bar */
  .header__row--top .header__columns,
  .header--compact .header__row--top .header__columns {
    --header-left: 1fr !important;
    --header-center: auto !important;
    --header-right: 1fr !important;
    --header-template-columns: 1fr auto 1fr !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas: 'left center right' !important;
    align-items: center !important;
    /* Grow with Theme Editor desktop logo height so logo + icons share one center line */
    min-height: max(56px, calc(var(--header-logo-image-height, 36px) + 12px)) !important;
    column-gap: 0.5rem !important;
    overflow: visible !important;
    /* v124: tidy side inset so right icons aren't flush to viewport */
    padding-inline: 0.75rem !important;
    box-sizing: border-box !important;
  }

  .header__row--top .header__column--left {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    gap: 0.2rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .header__row--top .header__column--center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    width: auto !important;
    max-width: 220px !important;
    transform: none !important;
    translate: none !important;
  }

  .header__row--top .header__column--right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: stretch !important;
    gap: 0.05rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline-end: 0.25rem !important;
    box-sizing: border-box !important;
  }

  .header__row--top .header__column--right header-actions {
    gap: 0.05rem !important;
  }

  .header__row--top .header-logo,
  .header__row--top a.header-logo {
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: auto !important;
    line-height: 0 !important;
  }

  .header__row--top .header-logo__image,
  .header__row--top .header-logo img,
  .header__row--top .header-logo__image-container img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Honor Theme Editor logo_height (was hard-locked 36px) */
    height: var(--header-logo-image-height, 36px) !important;
    max-height: var(--header-logo-image-height, 36px) !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* BOTTOM menu row — full width like v82; never clamp to logo width */
  .header__row--bottom .header__columns,
  .header--compact .header__row--bottom .header__columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: 'center' !important;
    justify-items: center !important;
    align-items: center !important;
    min-height: 0 !important;
    max-width: none !important;
    width: 100% !important;
    overflow: visible !important;
    column-gap: 0 !important;
    --padding-block-start: 0.15rem !important;
    --padding-block-end: 0.15rem !important;
    padding-block-start: 0.15rem !important;
    padding-block-end: 0.15rem !important;
  }

  .header__row--bottom .header__column--center,
  .header__row--bottom .header__column {
    max-width: none !important;
    width: 100% !important;
    justify-content: center !important;
    justify-self: stretch !important;
    overflow: visible !important;
  }

  .header__row--bottom .header-menu,
  .header__row--bottom .menu-list,
  .header__row--bottom .overflow-menu {
    max-width: none !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .header__row--bottom .menu-list__link,
  .header__row--bottom .menu-list__list-item {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Desktop search RIGHT (v82); hide left mobile twin */
  html body .header__row--top .header__column--right .search-action,
  html body .header__row--top .header__column--right search-button.search-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body .header__row--top .header__column--left .search-action,
  html body .header__row--top .header__column--center .search-action {
    display: none !important;
  }
}

/* Ekimall v87 mobile (≤749): keep v85 — search LEFT beside drawer; hide right/desktop ghosts */
@media screen and (max-width: 749px) {
  html body .header__column--left .search-action,
  html body .header__column--left search-button.search-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body .header__column--right .search-action,
  html body .header__column--right search-button.search-action,
  html body .header__column--center .search-action,
  html body .header__columns .search-action.mobile\:hidden,
  html body .header .search-action.mobile\:hidden {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* === STICKY NUCLEAR 2026-10-21 === */
/* Ensure scrollport is the viewport, not an overflow ancestor */
html {
  overflow-x: visible;
  overflow-y: scroll; /* explicit viewport scrollport; do not use auto on body */
}
body {
  overflow: visible !important;
}
html[scroll-lock] {
  overflow: hidden !important; /* drawers/modals */
}

/* #header-group MUST be display:contents — Socialmediabar + Recentsale live here.
   Sticky on the whole group (taller than viewport) never pins. */
#header-group,
#header-group:has(#header-component[sticky]),
#header-group:has(#header-component[sticky='always']),
#header-group:has(#header-component[sticky="always"]) {
  display: contents !important;
  position: static !important;
  top: auto !important;
  inset: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

/* Kill any leftover trust-bar / app CSS that sticky'd the whole group */
.shopify-section-group-header-group {
  display: contents !important;
  position: static !important;
  overflow: visible !important;
}

/* v15: announcement in-flow only — scrolls away */
body > .shopify-section:has(.announcement-bar),
body > .shopify-section:has(announcement-bar-component),
body > .shopify-section:has(header-announcements),
body > .shopify-section[id*="header_announcements"],
#header-group > .shopify-section:has(.announcement-bar),
#header-group > .shopify-section:has(header-announcements),
#header-group > .shopify-section[id*="header_announcements"] {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--layer-sticky, 8) + 2) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}

body > .header-section,
body > .header-section:has(> #header-component[sticky='always']),
body > .header-section:has(> #header-component[sticky="always"]),
#header-group > .header-section,
#header-group > .header-section:has(> #header-component[sticky='always']),
.header-section:has(> #header-component[sticky='always']),
.header-section:has(> #header-component[sticky="always"]) {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
  width: 100% !important;
  /* flex-item sticky needs full width + not shrinking away */
  flex-shrink: 0 !important;
  align-self: stretch !important;
}
/* v5: gate opaque bg — layout sticky rules above unchanged */
body > .header-section:not(:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"]))),
#header-group > .header-section:not(:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"]))),
.header-section:has(> #header-component[sticky='always']:not([transparent])),
.header-section:has(> #header-component[sticky='always'][data-ekimall-header-scrolled="1"]),
.header-section:has(> #header-component[sticky="always"]:not([transparent])),
.header-section:has(> #header-component[sticky="always"][data-ekimall-header-scrolled="1"]) {
  background-color: var(--ekimall-sticky-header-bg, var(--color-background, #fbf7f2)) !important;
}

/* Horizon hide-on-idle looks like sticky "broken" */
#header-component[sticky='always'] .header[data-sticky-state='idle'],
#header-component[sticky='always'] .header[data-sticky-state='active'][data-animating],
#header-component[sticky="always"] .header[data-sticky-state='idle'],
#header-component[sticky="always"] .header[data-sticky-state='active'][data-animating],
.header-section:has(> #header-component[sticky='always']) .header[data-sticky-state='idle'],
.header-section:has(> #header-component[sticky='always']) .header[data-sticky-state='active'][data-animating] {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Social / recent-sale must never sticky or create overflow traps */
body > .shopify-section[id*="socialmediabar"],
body > .shopify-section[id*="Socialmediabar"],
body > .shopify-section[id*="recentsale"],
body > .shopify-section[id*="Recentsale"],
#header-group > .shopify-section[id*="socialmediabar"],
#header-group > .shopify-section[id*="Socialmediabar"],
#header-group > .shopify-section[id*="recentsale"],
#header-group > .shopify-section[id*="Recentsale"] {
  position: static !important;
  top: auto !important;
  overflow: visible !important;
  transform: none !important;
  contain: none !important;
}

/* === STICKY NUCLEAR V2 2026-10-21T01:30HKT === */
/* Marker: ekimall-sticky-nuclear-v2 — if this string is on CDN, this fix shipped. */
html, body {
  overflow-x: visible !important;
}
html {
  overflow-y: scroll !important;
}
html[scroll-lock],
html[scroll-lock] body {
  overflow: hidden !important;
}
#header-group,
.shopify-section-group-header-group {
  display: contents !important;
  position: static !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
  perspective: none !important;
}
/* v15: announcement NOT sticky — scrolls away */
.shopify-section:has(.announcement-bar),
.shopify-section:has(announcement-bar-component),
.shopify-section:has(header-announcements),
.shopify-section[id*="header_announcements"] {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--layer-sticky, 8) + 2) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}
.header-section,
.header-section:has(> #header-component),
#header-component[sticky],
#header-component[sticky="always"],
#header-component[sticky="scroll-up"],
#header-component[sticky][transparent],
#header-component[sticky="always"][transparent],
#header-component[sticky][transparent]:not([data-ekimall-header-scrolled="1"]),
#header-component[sticky="always"][transparent]:not([data-ekimall-header-scrolled="1"]),
#header-component[sticky][transparent][data-ekimall-header-scrolled="1"],
#header-component[sticky="always"][transparent][data-ekimall-header-scrolled="1"] {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
  width: 100% !important;
}
.header[data-sticky-state],
.header[data-sticky-state="idle"],
.header[data-sticky-state="inactive"],
.header[data-sticky-state="active"],
.header[data-sticky-state="active"][data-animating] {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.shopify-section[id*="socialmediabar"],
.shopify-section[id*="Socialmediabar"],
.shopify-section[id*="recentsale"],
.shopify-section[id*="Recentsale"] {
  position: static !important;
  top: auto !important;
  transform: none !important;
  contain: none !important;
}

:root{--ekimall-sticky-nuclear-v2:1;--ekimall-sticky-fix-shipped:2026-10-21T01:30HKT}

/* ===== Ekimall v10 gentle transparent sticky =====
   ROOT CAUSES (v7 still broken):
   A) blocks/_header-menu.liquid hardcoded .menu-list__link { color:#444 } —
      透明時顏色預設 could never change menu titles (scheme class + inherit useless).
   B) Absolute overlay + header-section height:0 + CB after announcement +
      Horizon z-index:layer-overlay(16) raced --announcement-height → menu under/over bar.
   FIX: scheme-driven menu color; sticky stack only; beat Horizon absolute/overlay.
*/
/* v20: do NOT wipe scheme bg — Liquid sets --ekimall-transparent-header-bg from 透明時顏色預設 */
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]),
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--top,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--bottom,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--mobile,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row[class*="color-"],
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row[class*="color-scheme"],
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__columns,
html body .ekimall-transparent-header[transparent]:not([data-ekimall-header-scrolled="1"]),
html body .ekimall-transparent-header[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row,
html body .ekimall-transparent-header[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--bottom,
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])),
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) .header__row,
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) .header__row--bottom {
  --header-bg-color: var(--ekimall-transparent-header-bg, transparent) !important;
  /* v55: do not poison sticky-bg with transparent pink */
  --ekimall-sticky-header-bg: #ffffff;
  background: var(--ekimall-transparent-header-bg, transparent) !important;
  background-color: var(--ekimall-transparent-header-bg, transparent) !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* Avoid double-stacking tint on absolute section-background */
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .section-background,
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) > .section-background {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Beat Horizon .header[transparent]{position:absolute;top:0;z-index:overlay} */
html body #header-component[transparent],
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]),
html body #header-component[transparent][data-ekimall-header-scrolled="1"],
html body #header-component[sticky='always'][transparent],
html body #header-component[sticky="always"][transparent] {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  inset-block-start: 0 !important; /* v15 */
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
}
html body .header-section:has(> #header-component[transparent]) {
  position: sticky !important;
  top: 0 !important; /* v15: no announce offset */
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
}
/* v15: announcement not sticky */
html body .shopify-section:has(.announcement-bar),
html body .shopify-section:has(announcement-bar-component),
html body .shopify-section:has(header-announcements),
html body .shopify-section[id*="header_announcements"] {
  position: relative !important;
  top: auto !important;
  z-index: calc(var(--layer-sticky, 8) + 3) !important;
}

/* v20/v21: paint via --ekimall-transparent-header-bg / --header-bg-color only (no --color-background; v21 containment) */
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]),
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--bottom,
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) {
  --header-bg-color: var(--ekimall-transparent-header-bg, transparent) !important;
  /* v55: sticky-bg stays cream/white reserve; transparent tint uses --ekimall-transparent-header-bg only */
  --ekimall-sticky-header-bg: #ffffff !important;
  background: var(--ekimall-transparent-header-bg, transparent) !important;
  background-color: var(--ekimall-transparent-header-bg, transparent) !important;
}

:root {
  --ekimall-transparent-sticky-schemes: 56;
  --ekimall-v56-fix: scrolled-sticky-no-pink-nuclear + announce-black-te;
  --ekimall-transparent-sticky-shipped: 2026-10-23T06:20HKT;
  --ekimall-v10-base: 189297492196;
  --ekimall-v11-base: 189297557732;
  --ekimall-v10-fix: no-scheme-class-black + picker-fg-only + sticky-stack;
  --ekimall-v11-fix: layout-nuclear-transparent + firm-linked;
  --ekimall-v20-fix: transparent-scheme-bg-tint + mega-white + announce;
}

/* ===== ekimall v17: announce Liquid scheme RGB + collapse-on-hide (no white see-through) ===== */
:root {
  --ekimall-v15-base: 189298639076;
  --ekimall-v16-base: 189298901220;
  --ekimall-v17-base: 189299720420;
  --ekimall-v15-fix: announce-unsticky-hide-on-scroll + header-top-0;
  --ekimall-v16-fix: announce-scheme-opaque-not-root-white;
  --ekimall-v17-fix: liquid-scheme-rgb + collapse-hide-no-white-ghost;
  --announcement-height: 0px;
}

/*
  ROOT CAUSE (v16 still white):
  1) Hide used opacity:0/visibility:hidden but KEPT HEIGHT → body scheme-1 white showed through
     the invisible bar (= "white announcement"). TE scroll quirks can false-set scrolled at top.
  2) Painting via var(--color-background) still fragile vs transparent-header !important vars.
  FIX: header-announcements.liquid sets --ekimall-announce-bg from scheme.settings.background.rgb;
       firm/nuclear paint with that (fallback to scheme var); COLLAPSE bar on hide (height:0).
*/
.shopify-section:has(.announcement-bar),
.shopify-section:has(announcement-bar-component),
.shopify-section:has(header-announcements),
.shopify-section[id*="header_announcements"],
header-announcements {
  position: relative !important;
  top: auto !important;
  inset-block-start: auto !important;
  /* Prefer Liquid --ekimall-announce-bg; never fall back to :root white via missing scheme on wrapper */
  background-color: var(--ekimall-announce-bg, var(--color-background)) !important;
  background-image: none !important;
}
.shopify-section:has(.announcement-bar) > .section-background,
.shopify-section:has(announcement-bar-component) > .section-background,
.shopify-section:has(header-announcements) > .section-background,
.shopify-section[id*="header_announcements"] > .section-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-color: var(--ekimall-announce-bg, var(--color-background)) !important;
  background-image: none !important;
}
.shopify-section:has(.announcement-bar) .announcement-bar,
.shopify-section:has(announcement-bar-component) .announcement-bar,
.shopify-section[id*="header_announcements"] .announcement-bar,
.announcement-bar.section,
.announcement-bar[class*="color-"] {
  background-color: var(--ekimall-announce-bg, var(--color-background)) !important;
  background-image: none !important;
}

/* Hide = COLLAPSE (no opacity ghost → no white body strip). Header stays top:0. */
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section:has(.announcement-bar),
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section:has(announcement-bar-component),
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section:has(header-announcements),
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section[id*="header_announcements"],
html:has(#header-component[data-ekimall-header-scrolled="1"]) header-announcements,
html[data-ekimall-announce-away="1"] .shopify-section:has(.announcement-bar),
html[data-ekimall-announce-away="1"] .shopify-section:has(header-announcements),
html[data-ekimall-announce-away="1"] .shopify-section[id*="header_announcements"],
html[data-ekimall-announce-away="1"] header-announcements {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  line-height: 0 !important;
}
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section:has(.announcement-bar) .announcement-bar,
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section[id*="header_announcements"] .announcement-bar,
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section:has(.announcement-bar) > .section-background,
html:has(#header-component[data-ekimall-header-scrolled="1"]) .shopify-section[id*="header_announcements"] > .section-background,
html[data-ekimall-announce-away="1"] .announcement-bar,
html[data-ekimall-announce-away="1"] .shopify-section:has(.announcement-bar) > .section-background,
html[data-ekimall-announce-away="1"] .shopify-section[id*="header_announcements"] > .section-background {
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Header always sticky flush top */
html body #header-component[sticky],
html body #header-component[sticky="always"],
html body #header-component[transparent],
html body #header-component[transparent][data-ekimall-header-scrolled="1"],
html body .header-section,
html body .header-section:has(> #header-component),
html body .header-section:has(> #header-component[transparent]) {
  position: sticky !important;
  top: 0 !important;
  inset-block-start: 0 !important;
  z-index: calc(var(--layer-sticky, 8) + 1) !important;
}

/* v20 Transparent-at-top: HEADER MENU paints 透明時顏色預設 tint */
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]),
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--top,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--bottom,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--mobile,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row[class*="color-"],
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__columns,
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) {
  --header-bg-color: var(--ekimall-transparent-header-bg, transparent) !important;
  /* v55: sticky-bg stays cream/white reserve; transparent tint uses --ekimall-transparent-header-bg only */
  --ekimall-sticky-header-bg: #ffffff !important;
  background: var(--ekimall-transparent-header-bg, transparent) !important;
  background-color: var(--ekimall-transparent-header-bg, transparent) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .section-background {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== ekimall v19: pure-white mega panel + top air ===== */
:root {
  --ekimall-v18-base: 189300375780;
  --ekimall-v19-fix: mega-menu-pure-white + top-padding;
  --ekimall-v20-fix: transparent-preset-paints-bar;

/*
  ekimall-v27: product section BACKGROUND must follow scheme token (scheme-1 = white).

  ROOT CAUSE (Emi v26: scheme change updates BUTTON colors but BG stays solid black):
  - Horizon paints scheme BG on sibling `.section-background` (position:absolute;
    z-index: var(--layer-section-background) = -2).
  - `.shopify-section … :is(.section) { background: transparent }` beats the
    `.color-* { background-color: var(--color-background) }` rule, so
    `.product-information.section.color-*` stays TRANSPARENT.
  - Buttons use --color-primary-button-* from the same `.color-*` class → FG works.
  - Transparent section + failed/under-stacked section-background → TE chrome /
    ancestor black shows through → "solid black" BG while buttons still recolor.

  FIX: paint scheme BG on `.product-information` itself (same node as button tokens)
  + force `.section-background` above -2 via isolation/z-index:0 !important.
*/
html {
  --ekimall-v27-fix: product-section-scheme-bg-paint;
}

/* Stacking context so section-background z-index:-2 cannot escape behind ancestors */
html body .shopify-section:has(.product-information),
html body .shopify-section:has(> .product-information),
html body #MainContent .shopify-section:has(.product-information) {
  position: relative !important;
  isolation: isolate;
  z-index: 0;
}

/* CRITICAL: override Horizon transparent .section — paint scheme BG where FG already works */
html body .product-information.section,
html body .product-information.section[class*="color-"],
html body #MainContent .product-information.section {
  background-color: var(--color-background) !important;
  background-image: none !important;
}

/* section-background sibling: same token + bring above -2 layer */
html body .section-background:has(+ .product-information),
html body .shopify-section:has(.product-information) > .section-background,
html body .shopify-section:has(.product-information) .section-background,
html body #MainContent .shopify-section:has(.product-information) > .section-background {
  background-color: var(--color-background) !important;
  background-image: none !important;
  z-index: 0 !important;
}

/* scheme-1 = solid white (settings_data scheme-1.background #ffffff) */
html body .product-information.section.color-scheme-1,
html body .section-background.color-scheme-1:has(+ .product-information),
html body .shopify-section:has(.product-information) > .section-background.color-scheme-1,
html body .shopify-section:has(.product-information) .section-background.color-scheme-1,
html body #MainContent .product-information.color-scheme-1,
html body #MainContent .shopify-section:has(.product-information) .section-background.color-scheme-1 {
  --color-background: #ffffff !important;
  --color-background-rgb: 255 255 255 !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Media wells follow section scheme (no white lock) */
html body #MainContent .product-media-container,
html body #MainContent .card-gallery .product-media-container,
html body #MainContent .card-gallery .media-fit,
html body #MainContent media-gallery .product-media-container,
html body #MainContent .media-gallery .product-media-container {
  background-color: var(--color-background, #ffffff);
}



/*
  ekimall-v29: collection (商品系列 / main-collection) scheme BG paint.
  ROOT CAUSE (v28): (1) themeDuplicate async race wiped upsert — tip had no
  collection paint; (2) same Horizon issue as product: `.section { background:
  transparent }` beats `.color-* { background-color: var(--color-background) }`
  on `results-list.section.product-grid-container`, while `.section-background`
  sits at z-index var(--layer-section-background)=-2 → TE chrome black shows.

  REAL MARKUP (sections/main-collection.liquid):
    <div class="section-background color-{{ section.settings.color_scheme }}">
    <results-list class="section product-grid-container color-{{ … }}">

  FIX: mirror v27 product — paint scheme BG on results-list / product-grid-
  container; raise section-background to z-index 0; scheme-1 #fff; plus
  liquid {% style %} scoped to #shopify-section-{{ section.id }} (cannot miss).
*/
html {
  --ekimall-v29-fix: collection-section-scheme-bg-paint-scoped;
  --ekimall-v229-fix: collection-sort-grid-price-hit-targets;
}

/* Stacking context — section-background -2 must not escape behind TE chrome */
html body .shopify-section:has(.product-grid-container),
html body .shopify-section:has(results-list),
html body .shopify-section:has(> results-list),
html body .shopify-section:has(> .section-background + results-list),
html body #MainContent .shopify-section:has(.product-grid-container),
html body #MainContent .shopify-section:has(results-list) {
  position: relative !important;
  isolation: isolate;
  z-index: 0;
}

/* CRITICAL: override Horizon transparent .section on REAL collection node */
html body results-list.section,
html body results-list.product-grid-container,
html body results-list.section.product-grid-container,
html body .product-grid-container.section,
html body results-list.section[class*="color-"],
html body .product-grid-container.section[class*="color-"],
html body #MainContent results-list.section,
html body #MainContent results-list.product-grid-container,
html body #MainContent .product-grid-container.section {
  background-color: var(--color-background) !important;
  background-image: none !important;
}

/* section-background sibling (immediately before results-list) */
html body .section-background:has(+ results-list),
html body .section-background:has(+ .product-grid-container),
html body .shopify-section:has(results-list) > .section-background,
html body .shopify-section:has(.product-grid-container) > .section-background,
html body .shopify-section:has(results-list) .section-background,
html body .shopify-section:has(.product-grid-container) .section-background,
html body #MainContent .shopify-section:has(results-list) > .section-background,
html body #MainContent .shopify-section:has(.product-grid-container) > .section-background {
  background-color: var(--color-background) !important;
  background-image: none !important;
  z-index: 0 !important;
  /* v229: absolute BG at z-index:0 must never steal collection chrome clicks */
  pointer-events: none !important;
}

/* v229: keep results-list (facets + Sort + grid) above the paint layer */
html body results-list.section,
html body results-list.product-grid-container,
html body .product-grid-container.section {
  position: relative;
  z-index: 1;
}

/* scheme-1 = solid white on collection main */
html body results-list.color-scheme-1,
html body results-list.section.color-scheme-1,
html body .product-grid-container.color-scheme-1,
html body .section-background.color-scheme-1:has(+ results-list),
html body .section-background.color-scheme-1:has(+ .product-grid-container),
html body .shopify-section:has(results-list) > .section-background.color-scheme-1,
html body .shopify-section:has(.product-grid-container) > .section-background.color-scheme-1,
html body .shopify-section:has(results-list) .section-background.color-scheme-1,
html body #MainContent results-list.color-scheme-1,
html body #MainContent .product-grid-container.color-scheme-1,
html body #MainContent .shopify-section:has(results-list) .section-background.color-scheme-1,
html body #MainContent .shopify-section:has(.product-grid-container) .section-background.color-scheme-1 {
  --color-background: #ffffff !important;
  --color-background-rgb: 255 255 255 !important;
  background-color: #ffffff !important;
  background-image: none !important;
}


/*
  v18 painted scheme RGB correctly but menu was scheme-2 (#f1f1f1) → muddy gray vs
  product #fff. Also color-scheme-matches-parent zeroed --submenu-padding-block-start.
  v19: Liquid forces near-white → rgb(255 255 255); firm paints solid #fff with no
  alpha/backdrop; keep 2.75rem top padding (never 0).
*/
html body #header-component .menu-list__submenu,
html body #header-component .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
html body #header-component .overflow-menu::after,
html body .header-menu .menu-list__submenu,
html body .header-menu .overflow-menu::after,
html body #header-component .overflow-menu::part(overflow) {
  background-color: var(--ekimall-menu-panel-bg, #ffffff) !important;
  background-image: none !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}

html body #header-component[transparent] .menu-list__submenu,
html body #header-component[transparent] .overflow-menu,
html body #header-component .menu-list__submenu,
html body #header-component .overflow-menu {
  --color-background: var(--ekimall-menu-panel-bg, #ffffff) !important;
  --opacity-background: 1 !important;
}

html body #header-component .menu-list__submenu,
html body #header-component .overflow-menu::part(overflow),
html body .header-menu .menu-list__submenu {
  --submenu-padding-block-start: 2.75rem !important;
}

html body #header-component .menu-list__submenu-inner,
html body .header-menu .menu-list__submenu-inner {
  padding-block-start: var(--submenu-padding-block-start, 2.75rem) !important;
}


/* ekimall-v55-sticky-no-pink: scrolled sticky OPAQUE cream/white — hard-kill scheme-4 pink bleed */
html body #header-component[data-ekimall-header-scrolled="1"],
html body #header-component[data-ekimall-header-scrolled="1"] .header,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row--top,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row--bottom,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row--mobile,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row[class*="color-"],
html body #header-component[data-ekimall-header-scrolled="1"] .header__columns,
html body #header-component[data-ekimall-header-scrolled="1"] .section-background,
html body .header-section:has(> #header-component[data-ekimall-header-scrolled="1"]),
html body .header-section:has(> #header-component[data-ekimall-header-scrolled="1"]) .header__row,
html body .header-section:has(> #header-component[data-ekimall-header-scrolled="1"]) > .section-background {
  /* Floor is #ffffff; liquid TE sticky scheme overrides same selectors later in document */
  --ekimall-sticky-header-bg: #ffffff !important;
  --ekimall-transparent-header-bg: #ffffff !important;
  --header-bg-color: #ffffff !important;
  --color-background: #ffffff !important;
  --color-background-rgb: 255 255 255 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Absolute fallback if sticky var somehow still holds pink alpha */
html body #header-component[data-ekimall-header-scrolled="1"] .color-scheme-4,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row.color-scheme-4 {
  --color-background: #ffffff !important;
  --color-background-rgb: 255 255 255 !important;
  background-color: var(--ekimall-sticky-header-bg, #ffffff) !important;
}


/* ===== v56 NUCLEAR scrolled opaque cream/white — never transparent pink ===== */
html[data-ekimall-page-scrolled="1"] body #header-component[transparent],
html[data-ekimall-page-scrolled="1"] body #header-component[transparent] .header,
html[data-ekimall-page-scrolled="1"] body #header-component[transparent] .header__row,
html[data-ekimall-page-scrolled="1"] body #header-component[transparent] .header__row--top,
html[data-ekimall-page-scrolled="1"] body #header-component[transparent] .header__row--bottom,
html[data-ekimall-page-scrolled="1"] body #header-component[transparent] .header__row--mobile,
html[data-ekimall-page-scrolled="1"] body #header-component[transparent] .header__columns,
html[data-ekimall-page-scrolled="1"] body .header-section:has(> #header-component[transparent]),
html[data-ekimall-page-scrolled="1"] body .header-section:has(> #header-component[transparent]) .header__row,
html body #header-component.ekimall-header-opaque,
html body #header-component.ekimall-header-opaque .header,
html body #header-component.ekimall-header-opaque .header__row,
html body #header-component.ekimall-header-opaque .header__row--top,
html body #header-component.ekimall-header-opaque .header__row--bottom,
html body #header-component.ekimall-header-opaque .header__row--mobile,
html body #header-component.ekimall-header-opaque .header__columns,
html body .header-section:has(> #header-component.ekimall-header-opaque),
html body .header-section:has(> #header-component.ekimall-header-opaque) .header__row,
html body #header-component[data-ekimall-header-scrolled="1"],
html body #header-component[data-ekimall-header-scrolled="1"] .header,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row--top,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row--bottom,
html body #header-component[data-ekimall-header-scrolled="1"] .header__row--mobile,
html body #header-component[data-ekimall-header-scrolled="1"] .header__columns,
html body .header-section:has(> #header-component[data-ekimall-header-scrolled="1"]),
html body .header-section:has(> #header-component[data-ekimall-header-scrolled="1"]) .header__row {
  --header-bg-color: var(--ekimall-sticky-header-bg, #ffffff) !important;
  --ekimall-transparent-header-bg: var(--ekimall-sticky-header-bg, #ffffff) !important;
  --ekimall-transparent-header-bg-alpha: 1 !important;
  background: var(--ekimall-sticky-header-bg, #ffffff) !important;
  background-color: var(--ekimall-sticky-header-bg, #ffffff) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* ===== ekimall v119: hard-edge solid translucent pink (no soft fade) =====
   Soft fade (v118b linear-gradient alpha→0 + 14px pad/neg-margin) WAS the light
   haze band under the menu. Replace with solid rgb(rgb / alpha) + background-image:none.
   Keep children destacked so multi-layer alpha cannot darken / hairline.
*/
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"])::after,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"])::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Destack: children / section must NOT paint (hard cut + alpha darkening) */
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--top,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--bottom,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--mobile,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__row--top.divider--page-width .header__columns,
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) .header__columns,
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])),
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) .header__row,
html body #header-group:has(#header-component[transparent]:not([data-ekimall-header-scrolled="1"])) {
  --header-bg-color: transparent !important;
  --border-bottom-width: 0px !important;
  --border-bottom-width-mobile: 0px !important;
  --border-bottom-style: none !important;
  border: none !important;
  border-bottom: none !important;
  border-block-end: none !important;
  border-top: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Single paint: solid translucent pink, hard bottom edge (no fade bleed) */
html body #header-component[transparent]:not([data-ekimall-header-scrolled="1"]) {
  --border-bottom-width: 0px !important;
  --border-bottom-style: none !important;
  border: none !important;
  border-bottom: none !important;
  border-block-end: none !important;
  border-top: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  will-change: auto !important;
  isolation: auto !important;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: rgb(var(--ekimall-transparent-header-bg-rgb, 255 221 226) / var(--ekimall-transparent-header-bg-alpha, 0.43)) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
}

/* v119: flush announcement → pink header (kill gap hairline above) */
html body .shopify-section:has(.announcement-bar),
html body .shopify-section:has(announcement-bar-component),
html body .shopify-section:has(header-announcements),
html body .shopify-section[id*="header_announcements"],
html body .shopify-section:has(.announcement-bar) .announcement-bar,
html body .shopify-section:has(.announcement-bar) > .section-background {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
html body .header-section:has(> #header-component),
html body .header-section:has(> #header-component[transparent]:not([data-ekimall-header-scrolled="1"])) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* First homepage section: no top stroke under overlapping header */
html body #MainContent[data-template='index'] > .shopify-section:first-child,
html body #MainContent[data-template='index'] > .shopify-section:first-child .section,
html body #MainContent[data-template='index'] > .shopify-section:first-child .section-background,
html body #MainContent[data-template='index'] > .shopify-section:first-child .slideshow-section,
html body #MainContent[data-template='index'] > .shopify-section:first-child .custom-section-content,
html body #MainContent[data-template='index'] > .shopify-section:first-child .border-style,
html body #MainContent[data-template='index'] > .shopify-section:first-child .group-block,
html body .content-for-layout > .shopify-section:first-child,
html body .content-for-layout > .shopify-section:first-child .section-background {
  border-top: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ekimall v130: logged-in account avatar vertical align with wishlist + cart
   (desktop + mobile). Circle with initial was sitting higher than heart/bag. */
header-actions,
.header__column--right header-actions,
.header__row--top .header__column--right header-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Account wrappers must share the same flex midline as wishlist/cart */
header-actions .account-popover,
header-actions anchored-popover-component.account-popover,
header-actions .account-drawer,
header-actions dialog-component.account-drawer {
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  max-height: 2.25rem !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 750px) {
  header-actions .account-popover,
  header-actions anchored-popover-component.account-popover {
    display: flex !important;
  }

  header-actions .account-drawer,
  header-actions dialog-component.account-drawer {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  header-actions .account-popover,
  header-actions anchored-popover-component.account-popover {
    display: none !important;
  }

  header-actions .account-drawer,
  header-actions dialog-component.account-drawer {
    display: flex !important;
  }
}

header-actions .account-button,
header-actions .header-actions__action.account-button,
header-actions .account-popover .account-button,
header-actions .account-drawer .account-button {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-height: 2.25rem !important;
  flex: 0 0 2.25rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  translate: none !important;
}

header-actions .account-button__avatar,
header-actions .account-button shop-user-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0 !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  box-sizing: border-box !important;
}

/* Closed account dialog must not inflate the header icon row (same idea as cart) */
header-actions .account-drawer dialog:not([open]),
header-actions dialog-component.account-drawer dialog:not([open]),
header-actions .account-drawer .dialog-modal:not([open]),
header-actions .account-popover__panel:not(:popover-open) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: fixed !important;
  overflow: hidden !important;
}

/* Ekimall v136: cart count as ONE fused speech-bubble silhouette
   (single SVG mask — tip + body share one outline; no bolted-on triangle).
   Digit optically centered in the round body (tiny tip nudge only). */
header-actions .header-actions__cart-icon,
header-actions cart-icon.header-actions__cart-icon {
  --cart-bubble-size: 17px !important;
  --cart-bubble-height: 19px !important; /* body + fused tip */
  --cart-bubble-top: -5px !important;
  --cart-bubble-right: -4px !important;
  --cart-bubble-fill: var(--color-primary-button-background);
  --cart-bubble-ink: var(--color-primary-button-text, #fff);
  position: relative !important;
  overflow: visible !important;
}

header-actions .header-actions__action:has(.header-actions__cart-icon),
header-actions .header-actions__action:has(cart-icon) {
  overflow: visible !important;
}

header-actions .header-actions__cart-icon .cart-bubble,
header-actions cart-icon.header-actions__cart-icon .cart-bubble {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--cart-bubble-size, 17px) !important;
  height: var(--cart-bubble-height, 19px) !important;
  min-width: var(--cart-bubble-size, 17px) !important;
  top: var(--cart-bubble-top, -5px) !important;
  right: var(--cart-bubble-right, -4px) !important;
  inset-inline-end: var(--cart-bubble-right, -4px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  /* Soft shadow that follows the fused silhouette */
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.18)) !important;
}

/* One cohesive speech-bubble shape via mask (tip fused into body) */
header-actions .header-actions__cart-icon .cart-bubble__background,
header-actions cart-icon.header-actions__cart-icon .cart-bubble__background {
  inset: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background-color: var(--cart-bubble-fill) !important;
  box-shadow: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2044%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M20%201.8c10.8%200%2018.7%207.05%2018.7%2016.2%200%209.15-7.9%2016.2-18.7%2016.2-2.85%200-5.55-.5-7.95-1.4-1.15%202.85-2.95%205.55-5.35%207.85-.7.65-1.85.15-1.65-.8.7-3.15.75-6.1.2-8.65C3.15%2028.2%201.5%2023.5%201.5%2018%201.5%208.85%209.2%201.8%2020%201.8z%22%2F%3E%3C%2Fsvg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2044%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M20%201.8c10.8%200%2018.7%207.05%2018.7%2016.2%200%209.15-7.9%2016.2-18.7%2016.2-2.85%200-5.55-.5-7.95-1.4-1.15%202.85-2.95%205.55-5.35%207.85-.7.65-1.85.15-1.65-.8.7-3.15.75-6.1.2-8.65C3.15%2028.2%201.5%2023.5%201.5%2018%201.5%208.85%209.2%201.8%2020%201.8z%22%2F%3E%3C%2Fsvg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* Kill any legacy bolted-on tip pseudo */
header-actions .header-actions__cart-icon .cart-bubble__background::before,
header-actions .header-actions__cart-icon .cart-bubble__background::after,
header-actions cart-icon.header-actions__cart-icon .cart-bubble__background::before,
header-actions cart-icon.header-actions__cart-icon .cart-bubble__background::after {
  content: none !important;
  display: none !important;
}

header-actions .header-actions__cart-icon .cart-bubble__text,
header-actions .header-actions__cart-icon .cart-bubble__text-count {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  /* Optical center of round body — light tip compensation only */
  padding: 0 0 1.5px !important;
  transform: none !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--cart-bubble-ink) !important;
  text-align: center !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Keep the full bag silhouette — do not cut a donut under the badge */
header-actions .header-actions__cart-icon.header-actions__cart-icon--has-cart svg,
header-actions cart-icon.header-actions__cart-icon--has-cart svg {
  mask: none !important;
  -webkit-mask: none !important;
}

/* Empty / no-digit: minimal tidy corner dot — no tip */
header-actions cart-icon:has(.cart-bubble__text-count:empty),
header-actions .header-actions__cart-icon:has(.cart-bubble__text-count:empty) {
  --cart-bubble-size: 7px !important;
  --cart-bubble-height: 7px !important;
  --cart-bubble-top: 0px !important;
  --cart-bubble-right: 0px !important;
}

header-actions cart-icon:has(.cart-bubble__text-count:empty) .cart-bubble,
header-actions .header-actions__cart-icon:has(.cart-bubble__text-count:empty) .cart-bubble {
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.14)) !important;
}

header-actions cart-icon:has(.cart-bubble__text-count:empty) .cart-bubble__background,
header-actions .header-actions__cart-icon:has(.cart-bubble__text-count:empty) .cart-bubble__background {
  border-radius: 50% !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;
}

@media screen and (max-width: 749px) {
  header-actions .header-actions__cart-icon,
  header-actions cart-icon.header-actions__cart-icon {
    --cart-bubble-size: 16px !important;
    --cart-bubble-height: 18px !important;
    --cart-bubble-top: -4px !important;
    --cart-bubble-right: -3px !important;
  }

  header-actions .header-actions__cart-icon .cart-bubble__text,
  header-actions .header-actions__cart-icon .cart-bubble__text-count {
    font-size: 9px !important;
    padding: 0 0 1.5px !important;
  }
}