/* v3.110.0 header styles, compact phone header and bottom tab bar.
   The header element carries: hs hs-<style> [hs-compact] [hs-smart]. Colours always come from the theme (--tc-*). */

.tc-header-actions { display: contents; }

/* ---------- Boutique centred (desktop) ---------- */
@media (min-width: 769px) {
  .hs-boutique .tc-header-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .hs-boutique .tc-header-row > a:first-child { grid-column: 2; grid-row: 1; justify-self: center; font-size: 28px; }
  .hs-boutique .tc-header-search-wrap { grid-column: 1; grid-row: 1; max-width: 340px; }
  .hs-boutique .tc-header-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
  .hs-boutique .tc-nav-strip { justify-content: center; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; gap: 24px; }
}

/* ---------- Search first ---------- */
.hs-searchfirst .tc-header-search-wrap { flex: 2 1 0; }
.hs-searchfirst #search-input { padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
.hs-searchfirst .tc-nav-strip { background: var(--tc-accent); color: var(--hs-strip-fg, #fff); border-top: 0; }
.hs-searchfirst .tc-nav-strip a, .hs-searchfirst #all-menu-btn { color: var(--hs-strip-fg, #fff) !important; }
.hs-searchfirst .tc-nav-strip a.tc-glow { background: var(--hs-strip-fg, #fff) !important; color: var(--tc-accent) !important; }

/* ---------- Slim with tab bar (desktop = slim row + bold offer strip) ---------- */
.hs-tabbar #top-bar-strip { font-weight: 700; }
@media (min-width: 769px) {
  .hs-tabbar .tc-header-row { padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- Gradient marketplace ---------- */
.hs-gradient { background: var(--tc-dark) !important; }
.hs-gradient { background: linear-gradient(135deg, var(--tc-dark), color-mix(in srgb, var(--tc-dark) 55%, var(--tc-accent))) !important; }
.hs-gradient .tc-nav-strip { border-top: 0; gap: 8px; padding-bottom: 10px; }
.hs-gradient .tc-nav-strip > a, .hs-gradient #all-menu-btn { background: rgba(255, 255, 255, .14); padding: 5px 12px !important; border-radius: 999px; color: #fff !important; opacity: 1; }
.hs-gradient .tc-nav-strip > a[style*="color:"]:not(.tc-glow) { background: var(--tc-accent); }

/* ---------- Phones: compact header (all styles) ---------- */
@media (max-width: 768px) {
  .hs-compact .tc-header-row { flex-wrap: nowrap; gap: 4px; row-gap: 0; padding: 6px 10px; display: flex; }
  .hs-compact .tc-header-row > a:first-child { min-height: 36px; font-size: 16px; gap: 6px; }
  .hs-compact .tc-header-row > a:first-child img { height: 22px !important; }
  .hs-compact .tc-header-search-wrap { flex: 1 1 0; flex-basis: 0; order: 0; min-width: 0; }
  .hs-compact #search-input { padding: 7px 10px; }
  .hs-compact .tc-header-search-wrap button[type="submit"] { min-height: 36px; min-width: 40px; }
  .hs-compact #voice-search-btn { min-height: 36px; }
  .hs-compact .tc-header-actions > div > a, .hs-compact .tc-header-actions > div > button,
  .hs-compact .tc-header-actions > a, .hs-compact .tc-header-actions > button { min-height: 40px; min-width: 38px; padding-left: 4px; padding-right: 4px; justify-content: center; }
  .hs-compact #lang-switch-trigger .tc-lang-name { display: none; }
  .hs-compact #lang-switch-trigger { padding: 4px; }
  .hs-compact #top-bar-strip { font-size: 11px; }
  .hs-compact #top-bar-strip .tc-topbar-inner { padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs-compact .tc-nav-strip { padding-top: 0; padding-bottom: 0; gap: 14px; }
  .hs-compact div.tc-nav-strip > a, .hs-compact #all-menu-btn { min-height: 36px; }
  .hs-gradient.hs-compact .tc-nav-strip { padding-bottom: 6px; gap: 6px; }
  .hs-gradient.hs-compact .tc-nav-strip > a, .hs-gradient.hs-compact #all-menu-btn { min-height: 32px; }

  .hs-smart { transition: transform .25s ease; will-change: transform; }
  .hs-smart.hs-hidden { transform: translateY(-100%); }

  /* Bottom tab bar */
  #hs-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    background: var(--tc-card-bg, #fff); color: var(--tc-dark, #2B2320); border-top: 1px solid rgba(0, 0, 0, .1);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); }
  #hs-tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 11px; text-decoration: none; color: inherit; opacity: .7; min-height: 44px; align-content: center; }
  #hs-tabbar a.on { opacity: 1; color: var(--tc-accent); font-weight: 700; }
  #hs-tabbar a.hs-tab-cart { opacity: 1; position: relative; top: -14px; min-height: 0; }
  #hs-tabbar a.hs-tab-cart b { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--tc-accent); color: var(--hs-strip-fg, #fff); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
  #hs-tabbar a.hs-tab-cart i { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; background: #E11D48; color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; align-items: center; justify-content: center; }
  html.has-tabbar body { padding-bottom: 68px; }
  html.has-tabbar #fd-floating-bar { bottom: 64px !important; }
  /* Pages with their own sticky buy bar (product, cart, checkout) keep the screen to themselves. */
  html.has-tabbar:not(.ux-no-fd) #wa-widget-root { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  html.has-tabbar.hs-cookie-open:not(.ux-no-fd) #wa-widget-root { bottom: calc(88px + var(--hs-banner-h, 0px) + env(safe-area-inset-bottom, 0px)); }
  html.has-tabbar:not(.ux-no-fd) #sp-widget { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  html.ux-no-fd #hs-tabbar { display: none; }
  html.ux-no-fd.has-tabbar body { padding-bottom: 0; }
}
@media (min-width: 769px) { #hs-tabbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .hs-smart { transition: none; } }

/* ---------- v3.110.4: full-width backgrounds on wide screens ----------
   When "Full width" is off, the page content is capped at 1500px. A boxed dark header/footer floating on
   a cream page looked broken on big monitors, so the new header/footer styles stretch their colour edge to edge
   and keep their content aligned with the page. Nothing changes below 1500px, on phones, or for the classic header. */
@media (min-width: 1501px) {
  header.hs:not(.hs-classic):not(.tc-full-bleed) { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
  header.hs:not(.hs-classic) > #top-bar-strip,
  header.hs:not(.hs-classic) > .tc-header-row,
  header.hs:not(.hs-classic) > .tc-nav-strip { padding-left: calc((100vw - 1500px) / 2 + 16px); padding-right: calc((100vw - 1500px) / 2 + 16px); }
  footer.ftx:not(.tc-full-bleed) { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); border-radius: 0 !important; }
  footer.ftx > * { padding-left: calc((100vw - 1500px) / 2 + 16px) !important; padding-right: calc((100vw - 1500px) / 2 + 16px) !important; }
  .ftx-pay { width: 100vw; margin-left: calc(-50vw + 50%); }
}

/* v3.110.9 — mobile touch targets (>=40px) and a 12px text floor.
   Header menu pills were 32px tall and several badges/captions 10-11px. */
@media (max-width: 768px) {
  header.hs .tc-nav-strip > a,
  header.hs .tc-nav-strip #all-menu-btn,
  header.hs div.tc-nav-strip > a,
  .hs-compact div.tc-nav-strip > a,
  .hs-compact #all-menu-btn,
  .hs-gradient.hs-compact .tc-nav-strip > a,
  .hs-gradient.hs-compact #all-menu-btn { min-height: 40px !important; display: inline-flex !important; align-items: center; }
  .hs-gradient .tc-nav-strip > a, .hs-gradient #all-menu-btn { padding-left: 14px !important; padding-right: 14px !important; }
  header.hs .tc-nav-strip { gap: 8px; }
  .text-\[10px\], .text-\[11px\], .text-\[10\.5px\], .text-\[11\.5px\] { font-size: 12px !important; }
  #hs-tabbar a { font-size: 12px; }
  .hs-compact #top-bar-strip { font-size: 12px; }
  header.hs button, header.hs .hs-icon-btn { min-width: 40px; min-height: 40px; }
}

/* v3.111.0 — slimmer cookie-consent (Secure Privacy) preference window.
   It used to open as a wide, tall modal that covered the footer. Now it is a
   compact card tucked into the bottom-left corner, above the shield button;
   on phones it is a bottom sheet that stays clear of the tab bar. */
dialog#sp-preference-center.sp-preference-center {
  top: auto !important; right: auto !important; left: 20px !important; bottom: 84px !important;
  margin: 0 !important; width: min(380px, calc(100vw - 24px)) !important;
  height: min(500px, calc(100vh - 110px)) !important; max-width: none !important; max-height: none !important;
  border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, .06) !important;
  box-shadow: 0 18px 50px rgba(20, 20, 40, .22) !important;
}
dialog#sp-preference-center.sp-preference-center[open] { animation: sp-card-in .22s ease-out; }
@keyframes sp-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog#sp-preference-center.sp-preference-center[open] { animation: none; } }
@media (max-width: 640px) {
  dialog#sp-preference-center.sp-preference-center {
    left: 10px !important; right: 10px !important; width: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important; height: min(480px, 70vh) !important;
  }
  html.has-tabbar:not(.ux-no-fd) dialog#sp-preference-center.sp-preference-center { bottom: calc(76px + env(safe-area-inset-bottom)) !important; height: min(460px, 64vh) !important; }
}