/* AUTO-GENERATED from s4-header.css - do not edit.
   Identical rules, every declaration flagged !important so the
   legacy Warp theme.css / bootstrap.css cannot override the header.
   Edit s4-header.css and re-run build-important.py. */

/* ============================================================
   Step4 Header component.

   Everything is namespaced .s4h- and scoped inside .s4h so it
   cannot be reached by, or reach into, the legacy Warp
   bootstrap.css / theme.css / uikit.css that still runs the
   rest of the site. Remove that legacy CSS only when the last
   template has been migrated.
   ============================================================ */

/* ---- local aliases (map the design system onto short names) ---- */
.s4h {
  --s4h-paper: var(--s4-cream) !important;
  --s4h-paper-2: var(--s4-cream-deep) !important;
  --s4h-sage: var(--s4-sage) !important;
  --s4h-sage-2: var(--s4-sage-soft) !important;
  --s4h-pine: var(--s4-green-deep) !important;
  --s4h-honey: var(--s4-terracotta) !important;
  --s4h-clay: var(--s4-sand) !important;
  --s4h-ink: var(--s4-ink) !important;
  --s4h-ink-soft: var(--s4-ink-soft) !important;
  --s4h-line: var(--s4-hairline) !important;
  --s4h-brick: var(--s4-brick) !important;
  --s4h-brick-soft: var(--s4-brick-soft) !important;
  --s4h-brick-wash: var(--s4-brick-wash) !important;
  --s4h-display: var(--s4-font-head) !important;
  --s4h-body: var(--s4-font-body) !important;
  --s4h-wrap: var(--s4-wrap) !important;
  --s4h-ease: var(--s4-ease) !important;
  --s4h-r-md: var(--s4-r-md) !important;
  --s4h-shadow-sm: var(--s4-shadow-sm) !important;
  --s4h-shadow-md: var(--s4-shadow-md) !important;
  --s4h-shadow-lg: var(--s4-shadow-lg) !important;}

/* ---- defensive reset: neutralise inherited UIkit/Bootstrap rules ---- */
.s4h,
.s4h *,
.s4h *::before,
.s4h *::after { box-sizing: border-box !important;}

.s4h a { text-decoration: none !important; color: inherit !important;}
.s4h a:hover { text-decoration: none !important;}
.s4h img { max-width: 100% !important; display: block !important; height: auto !important;}
.s4h ul { list-style: none !important; margin: 0 !important; padding: 0 !important;}
.s4h h3 { font-family: var(--s4h-display) !important; font-weight: 800 !important; line-height: 1.08 !important; margin: 0 !important; letter-spacing: -.01em !important; text-transform: none !important;}
.s4h p { margin: 0 !important;}
.s4h button {
  font: inherit !important; background: none !important; border: none !important; margin: 0 !important;
  color: inherit !important; cursor: pointer !important; text-transform: none !important;
  -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;}
.s4h input[type="search"] { -webkit-appearance: none !important; appearance: none !important;}
.s4h svg { display: inline-block !important; vertical-align: middle !important;}

.s4h a:focus-visible,
.s4h button:focus-visible,
.s4h input:focus-visible {
  outline: 3px solid var(--s4h-honey) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.s4h-util {
  background: var(--s4h-pine) !important;
  color: rgba(255, 255, 255, .85) !important;
  font-family: var(--s4h-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 610 !important;
  overflow: hidden !important;}
.admin-bar .s4h-util { top: 32px !important;}
@media (max-width: 782px) { .admin-bar .s4h-util { top: 46px !important;}}

/* Organic pebble accents (brand shape kit) */
.s4h-util::before {
  content: "" !important; position: absolute !important; right: -30px !important; top: -46px !important;
  width: 150px !important; height: 150px !important;
  border-radius: 58% 42% 55% 45% / 52% 48% 55% 45% !important;
  background: rgba(219, 231, 218, .14) !important; pointer-events: none !important;}
.s4h-util::after {
  content: "" !important; position: absolute !important; left: -24px !important; bottom: -40px !important;
  width: 96px !important; height: 96px !important; border-radius: 100% 0 0 0 !important;
  background: rgba(239, 218, 206, .12) !important; transform: rotate(90deg) !important; pointer-events: none !important;}
.s4h-util-in { position: relative !important; z-index: 1 !important;}
.s4h-util-in {
  max-width: var(--s4h-wrap) !important; margin: 0 auto !important; padding: 12px 28px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;}
.s4h-util-l { display: inline-flex !important; align-items: center !important; gap: 9px !important; letter-spacing: .01em !important; color: inherit !important;}
.s4h-util-l svg { width: 17px !important; height: 17px !important; color: var(--s4h-clay) !important;}
.s4h-util-r { display: flex !important; align-items: center !important; gap: 2px !important;}
.s4h-util-r a,
.s4h-util-r button {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  color: rgba(255, 255, 255, .92) !important; padding: 6px 12px !important;
  border-radius: 999px !important; transition: background .2s var(--s4h-ease) !important;
  font: inherit !important;}
.s4h-util-r a:hover,
.s4h-util-r button:hover { background: rgba(255, 255, 255, .13) !important;}
.s4h-util-r svg { width: 16px !important; height: 16px !important;}
.s4h-util-sep { width: 1px !important; height: 15px !important; background: rgba(255, 255, 255, .22) !important; margin: 0 5px !important;}
.s4h-util-cart b {
  background: var(--s4-clay-cta) !important; color: #fff !important; font-weight: 800 !important; font-size: 11px !important;
  border-radius: 999px !important; padding: 1px 7px !important; margin-left: 1px !important;}
.s4h-util-search {
  /* Resting: soft cream pill on the green bar, no visible border. */
  background: #F1EDE4 !important;
  border: 1px solid transparent !important;
  color: var(--s4h-ink) !important;
  padding: 9px 28px !important; gap: 9px !important; font-weight: 700 !important;
  justify-content: center !important; min-width: 300px !important; font-size: 14px !important;
  transition: background .22s var(--s4h-ease), color .22s var(--s4h-ease) !important;}
.s4h-util-search svg { color: var(--s4h-ink) !important;}
/* Hover: terracotta fill, white label and icon. */
.s4h-util-search:hover {
  background: var(--s4-clay-cta) !important;
  border-color: var(--s4-clay-cta) !important;
  color: #fff !important;}
.s4h-util-search:hover svg { color: #fff !important;}

@media (max-width: 820px) {
  .s4h-util-l .s4h-util-hide { display: none !important;}
  .s4h-util-r a span, .s4h-util-search span { display: none !important;}
  .s4h-util-search { min-width: 0 !important; padding: 8px 14px !important;}
  .s4h-util-sep { display: none !important;}}

/* ============================================================
   STICKY HEADER
   ============================================================ */
/* The utility bar pins at 0, so the header pins directly beneath it.
   --s4h-util-h is the measured utility-bar height (set by JS on load and
   resize) so the two never overlap at any breakpoint. */
.s4h { --s4h-util-h: 48px !important;}

.s4h-head {
  position: sticky !important; top: var(--s4h-util-h) !important; z-index: 600 !important;
  background: rgba(251, 248, 242, .92) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--s4h-line) !important;
  overflow: visible !important;}
.admin-bar .s4h-head { top: calc(var(--s4h-util-h) + 32px) !important;}
@media (max-width: 782px) { .admin-bar .s4h-head { top: calc(var(--s4h-util-h) + 46px) !important;}}

/* Organic accents (brand shape kit) */
.s4h-head::before {
  content: "" !important; position: absolute !important; left: 34% !important; top: 0 !important; width: 170px !important; height: 78px !important;
  clip-path: inset(0 round 0 0 60% 55%) !important;
  border-radius: 58% 42% 55% 45% / 52% 48% 55% 45% !important;
  background: rgba(219, 231, 218, .4) !important; z-index: 0 !important; pointer-events: none !important;}
.s4h-head::after {
  content: "" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; width: 84px !important; height: 56px !important;
  border-radius: 0 0 0 100% !important; background: rgba(204, 151, 111, .14) !important;
  z-index: 0 !important; pointer-events: none !important;}
@media (max-width: 1040px) { .s4h-head::before, .s4h-head::after { display: none !important;}}

.s4h-head-in {
  position: relative !important; z-index: 1 !important;
  max-width: var(--s4h-wrap) !important; margin: 0 auto !important; padding: 20px 28px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important;}
.s4h-brand { display: flex !important; align-items: center !important; gap: 9px !important; flex: none !important;}
.s4h-brand img { height: 48px !important; width: auto !important;}

.s4h-nav { display: flex !important; align-items: center !important; gap: 28px !important;}
.s4h-nav > a,
.s4h-mega-trigger > button {
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 15.5px !important;
  color: var(--s4h-ink) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 0 !important; line-height: 1 !important; white-space: nowrap !important;
  transition: color .2s var(--s4h-ease) !important;}
.s4h-nav > a:hover { color: var(--s4h-pine) !important;}
.s4h-mega-trigger > button { color: var(--s4h-brick) !important; font-size: 16px !important;}
.s4h-mega-trigger:hover > button,
.s4h-mega-trigger:focus-within > button { color: #8A3D2F !important;}
.s4h-mega-trigger > button svg { width: 13px !important; height: 13px !important; transition: transform .25s var(--s4h-ease) !important;}
.s4h-mega-trigger:hover > button svg,
.s4h-mega-trigger:focus-within > button svg { transform: rotate(180deg) !important;}

.s4h-cta { display: flex !important; align-items: center !important; gap: 12px !important;}
.s4h-cta .s4h-btn { padding: 11px 20px !important; font-size: 14px !important;}

.s4h-burger { display: none !important; color: var(--s4h-ink) !important; padding: 6px !important;}
.s4h-burger svg { width: 26px !important; height: 26px !important;}

/* ---- buttons ---- */
.s4h-btn {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 15.5px !important;
  padding: 15px 28px !important; border-radius: 999px !important; border: 1.6px solid transparent !important;
  cursor: pointer !important; white-space: nowrap !important; line-height: 1.1 !important;
  transition: transform .25s var(--s4h-ease), background .25s var(--s4h-ease),
              box-shadow .25s var(--s4h-ease), color .25s var(--s4h-ease) !important;}
.s4h-btn svg { width: 17px !important; height: 17px !important; flex: 0 0 auto !important;}
.s4h-btn--pine { background: var(--s4h-pine) !important; color: #fff !important; box-shadow: var(--s4h-shadow-sm) !important;}
.s4h-btn--pine:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(30, 78, 69, .28) !important; color: #fff !important;}
/* Quick-packs CTA — steel blue (#35708F), white label. */
.s4h-btn--honey { background: #35708F !important; color: #fff !important; box-shadow: 0 8px 22px rgba(53, 112, 143, .34) !important;}
.s4h-btn--honey:hover { background: #2C5D77 !important; transform: translateY(-2px) !important; box-shadow: 0 16px 34px rgba(53, 112, 143, .46) !important; color: #fff !important;}
.s4h-btn--ghost { background: transparent !important; color: var(--s4h-pine) !important; border-color: rgba(30, 78, 69, .32) !important;}
.s4h-btn--ghost:hover { background: var(--s4h-pine) !important; color: #fff !important; border-color: var(--s4h-pine) !important; transform: translateY(-2px) !important;}

/* ============================================================
   MEGA MENU
   ============================================================ */
.s4h-mega-trigger { position: static !important;}
.s4h-mega {
  position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important;
  background: var(--s4h-paper) !important;
  border-top: 1px solid var(--s4h-line) !important; border-bottom: 1px solid var(--s4h-line) !important;
  box-shadow: var(--s4h-shadow-md) !important;
  opacity: 0 !important; visibility: hidden !important; transform: translateY(8px) !important;
  transition: opacity .22s var(--s4h-ease), transform .22s var(--s4h-ease), visibility .22s !important;
  z-index: 599 !important;}
.s4h-mega-trigger:hover .s4h-mega,
.s4h-mega-trigger:focus-within .s4h-mega,
.s4h-mega-trigger.is-open .s4h-mega { opacity: 1 !important; visibility: visible !important; transform: none !important;}

.s4h-mega-in {
  max-width: var(--s4h-wrap) !important; margin: 0 auto !important; padding: 20px 28px 30px !important;
  display: grid !important; grid-template-columns: 1.7fr 1.1fr 1.1fr 1.2fr !important; gap: 0 !important;
  /* max-height, NOT height: a fixed height forced column one to scroll
     even when there was room to grow. The panel now sizes to its tallest
     column and only scrolls if it genuinely exceeds the viewport. */
  max-height: 88vh !important;}

.s4h-mcol {
  display: flex !important; flex-direction: column !important; gap: 1px !important;
  /* bottom padding so the last row never sits flush against the edge */
  padding: 0 16px 14px !important;
  min-width: 0 !important; min-height: 0 !important; max-height: 100% !important;
  /* auto, not scroll - no bar unless the content actually overflows */
  overflow-y: auto !important;
  scrollbar-width: none !important; -ms-overflow-style: none !important;}
.s4h-mcol::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important;}
.s4h-mcol-1 { padding-left: 0 !important;}
.s4h-mcol + .s4h-mcol { border-left: 1px solid var(--s4h-line) !important;}

.s4h-mh {
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 10.5px !important;
  letter-spacing: .15em !important; text-transform: uppercase !important; color: var(--s4h-ink-soft) !important;
  padding: 2px 14px 9px !important; position: sticky !important; top: 0 !important; background: var(--s4h-paper) !important; z-index: 1 !important;}
.s4h-mh a { color: inherit !important; transition: color .15s var(--s4h-ease) !important;}
.s4h-mh a:hover { color: var(--s4h-pine) !important; text-decoration: underline !important; text-underline-offset: 3px !important;}

.s4h-mlink {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important;
  padding: 8px 14px !important; border-radius: 12px !important; color: var(--s4h-ink) !important;
  font-family: var(--s4h-display) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.25 !important;
  cursor: pointer !important; text-align: left !important; width: 100% !important;
  transition: background .15s var(--s4h-ease), color .15s var(--s4h-ease) !important;}
.s4h-mlink .s4h-chev {
  width: 14px !important; height: 14px !important; flex: none !important; opacity: 0 !important; transform: translateX(-4px) !important;
  transition: opacity .15s var(--s4h-ease), transform .15s var(--s4h-ease) !important;}
.s4h-mlink:hover, .s4h-mlink.is-active { background: var(--s4h-pine) !important; color: #fff !important;}
.s4h-mlink:hover .s4h-mlbl small,
.s4h-mlink.is-active .s4h-mlbl small { color: rgba(255, 255, 255, .82) !important;}
.s4h-mlink:hover .s4h-chev, .s4h-mlink.is-active .s4h-chev { opacity: .85 !important; transform: none !important;}
.s4h-mlink .s4h-mlbl { min-width: 0 !important;}

.s4h-mcol-1 .s4h-mlink { justify-content: flex-start !important; gap: 10px !important; padding: 10px 14px !important;}
.s4h-mcol-1 .s4h-mlink .s4h-chev { margin-left: auto !important;}
.s4h-cat-ico { width: 22px !important; height: 22px !important; display: grid !important; place-items: center !important; flex: none !important; color: var(--s4h-pine) !important; transition: color .15s var(--s4h-ease) !important;}
.s4h-cat-ico svg { width: 22px !important; height: 22px !important;}
.s4h-mcol-1 .s4h-mlink:hover .s4h-cat-ico,
.s4h-mcol-1 .s4h-mlink.is-active .s4h-cat-ico { color: #fff !important;}
.s4h-mcol-1 .s4h-mlink .s4h-mlbl b { display: block !important; font-weight: 700 !important; font-size: 14.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;}
.s4h-mcol-1 .s4h-mlink .s4h-mlbl small {
  display: block !important; font-family: var(--s4h-body) !important; font-weight: 500 !important; font-size: 10.5px !important;
  color: var(--s4h-ink-soft) !important; margin-top: 1px !important; line-height: 1.3 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;}
.s4h-mcol-empty { padding: 14px !important; color: var(--s4h-ink-soft) !important; font-family: var(--s4h-body) !important; font-size: 12.5px !important; line-height: 1.5 !important;}

/* ---- col-1 special rows ---- */
.s4h-mlink.s4h-find-toggle { margin-top: 14px !important; position: relative !important;}
.s4h-mlink.s4h-find-toggle::before {
  content: "" !important; position: absolute !important; left: 14px !important; right: 14px !important; top: -8px !important;
  height: 1px !important; background: var(--s4h-line) !important;}
.s4h-ft-ico { width: 22px !important; height: 22px !important; border-radius: 7px !important; background: var(--s4h-honey) !important; color: #fff !important; display: grid !important; place-items: center !important; flex: none !important;}
.s4h-ft-ico svg { width: 14px !important; height: 14px !important;}
.s4h-ft-ico.is-pine { background: var(--s4h-pine) !important;}
.s4h-ft-ico.is-clay { background: var(--s4h-brick-soft) !important;}

a.s4h-mlink.s4h-warehouse-link { color: var(--s4h-brick) !important;}
a.s4h-mlink.s4h-warehouse-link .s4h-mlbl b { color: var(--s4h-brick) !important;}
a.s4h-mlink.s4h-warehouse-link .s4h-mlbl small { color: var(--s4h-brick) !important; opacity: .75 !important;}
a.s4h-mlink.s4h-warehouse-link:hover,
a.s4h-mlink.s4h-warehouse-link.is-active { background: var(--s4h-brick-wash) !important; color: var(--s4h-brick) !important;}
.s4h-wh-badge {
  display: inline-block !important; vertical-align: 1px !important; margin-left: 6px !important; font-size: 10px !important;
  font-weight: 800 !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: #fff !important;
  background: var(--s4h-brick-soft) !important; border-radius: 999px !important; padding: 2px 8px !important;}

/* ---- feature panel ---- */
.s4h-feature { scrollbar-width: none !important; -ms-overflow-style: none !important; padding-left: 22px !important; min-height: 0 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important;}
.s4h-feature-eyebrow {
  display: inline-flex !important; align-self: flex-start !important; align-items: center !important; gap: 7px !important;
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; color: #fff !important; background: var(--s4h-pine) !important;
  padding: 5px 11px !important; border-radius: 999px !important; margin-bottom: 11px !important;}
.s4h-feature-eyebrow::before { content: "" !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #fff !important;}
.s4h-feature-card {
  position: relative !important; min-height: 204px !important; flex: 0 0 auto !important; aspect-ratio: 16/10 !important;
  border-radius: var(--s4h-r-md) !important; overflow: hidden !important; box-shadow: var(--s4h-shadow-sm) !important;
  background: var(--s4h-sage) !important;}
.s4h-feature-card img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
  opacity: 0 !important; transition: opacity .45s var(--s4h-ease) !important; transform: scale(1.02) !important;}
.s4h-feature-card img.is-on { opacity: 1 !important;}
.s4h-feature-card .s4h-cap {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 18px 18px 16px !important; z-index: 2 !important; color: #fff !important;
  background: linear-gradient(to top, rgba(26, 38, 30, .82) 12%, rgba(26, 38, 30, .32) 60%, rgba(26, 38, 30, 0)) !important;}
.s4h-feature-card .s4h-cap .k { font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .15em !important; text-transform: uppercase !important; opacity: .82 !important;}
.s4h-feature-card .s4h-cap b { font-family: var(--s4h-display) !important; font-weight: 700 !important; font-size: 19px !important; display: block !important; margin-top: 3px !important; letter-spacing: -.01em !important;}
.s4h-feature-cta {
  margin-top: 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; align-self: flex-start !important;
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 13px !important; color: #fff !important;
  padding: 9px 16px !important; border-radius: 999px !important; background: var(--s4h-pine) !important;
  transition: gap .18s var(--s4h-ease), filter .18s var(--s4h-ease) !important;}
.s4h-feature-cta:hover { gap: 12px !important; filter: brightness(.92) !important; color: #fff !important;}
.s4h-feature-cta svg { width: 15px !important; height: 15px !important;}
.s4h-feature-tags { margin-top: 13px !important; display: flex !important; flex-direction: column !important; gap: 6px !important;}
.s4h-feature-tags .s4h-fh { font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .15em !important; text-transform: uppercase !important; color: var(--s4h-ink-soft) !important; padding: 0 2px 3px !important;}
.s4h-ftag {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 9px 13px !important; border-radius: 12px !important; background: var(--s4h-paper-2) !important; color: var(--s4h-ink) !important;
  font-family: var(--s4h-display) !important; font-weight: 600 !important; font-size: 13.5px !important; line-height: 1.2 !important;
  transition: background .15s var(--s4h-ease), color .15s var(--s4h-ease) !important;}
.s4h-ftag svg { width: 14px !important; height: 14px !important; flex: none !important; opacity: .5 !important; transition: transform .15s var(--s4h-ease), opacity .15s var(--s4h-ease) !important;}
.s4h-ftag:hover { background: var(--s4h-pine) !important; color: #fff !important;}
.s4h-ftag:hover svg { opacity: 1 !important; transform: translateX(2px) !important;}

/* ---- swap-in panels (find / quick / warehouse) ---- */
.s4h-panel {
  grid-column: 2 / -1 !important; display: none !important; min-width: 0 !important; min-height: 0 !important;
  overflow-y: auto !important; padding-left: 26px !important; border-left: 1px solid var(--s4h-line) !important; position: relative !important;}
.s4h-mega-in.show-find .s4h-mcol-2,
.s4h-mega-in.show-find .s4h-mcol-3,
.s4h-mega-in.show-find .s4h-feature,
.s4h-mega-in.show-quick .s4h-mcol-2,
.s4h-mega-in.show-quick .s4h-mcol-3,
.s4h-mega-in.show-quick .s4h-feature,
.s4h-mega-in.show-warehouse .s4h-mcol-2,
.s4h-mega-in.show-warehouse .s4h-mcol-3,
.s4h-mega-in.show-warehouse .s4h-feature { display: none !important;}
.s4h-mega-in.show-find .s4h-panel--find,
.s4h-mega-in.show-quick .s4h-panel--quick,
.s4h-mega-in.show-warehouse .s4h-panel--warehouse { display: block !important;}

.s4h-panel-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; opacity: .5 !important; z-index: 0 !important;}
.s4h-panel-head { position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 22px !important;}
.s4h-panel-badge { width: 44px !important; height: 44px !important; border-radius: 13px !important; background: var(--s4h-honey) !important; color: #fff !important; display: grid !important; place-items: center !important; flex: none !important; box-shadow: var(--s4h-shadow-sm) !important;}
.s4h-panel-badge.is-pine { background: var(--s4h-pine) !important;}
.s4h-panel-badge.is-clay { background: var(--s4h-brick-soft) !important;}
.s4h-panel-badge svg { width: 24px !important; height: 24px !important;}
.s4h-panel-head h3 { font-size: 21px !important; letter-spacing: -.02em !important; color: var(--s4h-ink) !important;}
.s4h-panel--warehouse .s4h-panel-head h3 { color: var(--s4h-brick) !important;}
.s4h-panel-head p { font-family: var(--s4h-body) !important; font-size: 13px !important; color: var(--s4h-ink-soft) !important; margin: 2px 0 0 !important;}

.s4h-routes { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important;}
.s4h-routes::before { content: "" !important; position: absolute !important; left: 9% !important; right: 9% !important; top: 50px !important; border-top: 2px dashed var(--s4h-sage-2) !important; z-index: 0 !important;}
.s4h-route {
  position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  text-align: center !important; gap: 8px !important; padding: 22px 14px 18px !important; border-radius: 18px !important;
  background: var(--s4h-paper-2) !important; color: inherit !important;
  transition: transform .2s var(--s4h-ease), box-shadow .2s var(--s4h-ease), background .2s var(--s4h-ease) !important;}
.s4h-route:hover { background: #fff !important; transform: translateY(-5px) !important; box-shadow: var(--s4h-shadow-md) !important;}
.s4h-ricon {
  position: relative !important; width: 56px !important; height: 56px !important; border-radius: 50% !important;
  background: var(--s4h-sage) !important; color: var(--s4h-pine) !important; display: grid !important; place-items: center !important;
  transition: background .2s var(--s4h-ease), color .2s var(--s4h-ease) !important;
  box-shadow: 0 0 0 6px var(--s4h-paper) !important;}
.s4h-route:hover .s4h-ricon { background: var(--s4h-pine) !important; color: #fff !important;}
.s4h-ricon svg { width: 26px !important; height: 26px !important;}
.s4h-rnum {
  position: absolute !important; top: -4px !important; right: -4px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important;
  background: var(--s4h-honey) !important; color: #fff !important; font-family: var(--s4h-body) !important; font-weight: 800 !important;
  font-size: 10px !important; font-style: normal !important; display: grid !important; place-items: center !important; box-shadow: 0 0 0 3px var(--s4h-paper) !important;}
.s4h-route b { font-family: var(--s4h-display) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -.01em !important; margin-top: 4px !important;}
.s4h-route small { font-family: var(--s4h-body) !important; font-size: 11.5px !important; color: var(--s4h-ink-soft) !important; line-height: 1.35 !important;}
.s4h-rgo {
  margin-top: auto !important; padding-top: 8px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 11.5px !important; letter-spacing: .04em !important;
  text-transform: uppercase !important; color: var(--s4h-pine) !important; opacity: 0 !important; transform: translateY(4px) !important;
  transition: opacity .2s var(--s4h-ease), transform .2s var(--s4h-ease) !important;}
.s4h-rgo svg { width: 13px !important; height: 13px !important;}
.s4h-route:hover .s4h-rgo { opacity: 1 !important; transform: none !important;}

.s4h-panel-foot {
  position: relative !important; z-index: 1 !important; margin-top: 18px !important; display: flex !important; align-items: center !important;
  gap: 14px !important; padding: 16px 20px !important; border-radius: 16px !important; background: var(--s4h-sage) !important;}
.s4h-panel-foot > svg { width: 26px !important; height: 26px !important; color: var(--s4h-pine) !important; flex: none !important;}
.s4h-pf-txt { flex: 1 !important; min-width: 0 !important;}
.s4h-pf-txt b { display: block !important; font-family: var(--s4h-display) !important; font-weight: 700 !important; font-size: 15px !important; color: var(--s4h-ink) !important;}
.s4h-pf-txt span { font-family: var(--s4h-body) !important; font-size: 12.5px !important; color: var(--s4h-ink-soft) !important;}
.s4h-pf-cta {
  flex: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 13px !important; color: #fff !important;
  background: var(--s4h-pine) !important; padding: 11px 18px !important; border-radius: 999px !important;
  transition: gap .18s var(--s4h-ease), transform .18s var(--s4h-ease) !important;}
.s4h-pf-cta:hover { gap: 12px !important; transform: translateY(-1px) !important; color: #fff !important;}
.s4h-pf-cta svg { width: 15px !important; height: 15px !important; flex: none !important;}

/* ---- warehouse panel ---- */
.s4h-lc-eyebrow {
  display: inline-block !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; color: #fff !important; background: var(--s4h-brick-soft) !important;
  border-radius: 999px !important; padding: 3px 10px !important; margin-bottom: 5px !important;}
.s4h-lc-grid { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 1fr !important; gap: 8px !important;}
.s4h-lc-grid a {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important;
  min-height: 52px !important; font-family: var(--s4h-display) !important; font-weight: 700 !important; font-size: 13.5px !important;
  line-height: 1.25 !important; color: var(--s4h-ink) !important; background: #fff !important;
  border: 1px solid var(--s4h-line) !important; border-radius: 12px !important; padding: 10px 14px !important;
  transition: all .18s var(--s4h-ease) !important;}
.s4h-lc-grid a svg { width: 13px !important; height: 13px !important; flex: none !important; color: var(--s4h-brick-soft) !important; opacity: 0 !important; transform: translateX(-3px) !important; transition: all .18s var(--s4h-ease) !important;}
.s4h-lc-grid a:hover { border-color: var(--s4h-brick-soft) !important; background: #FBF1EE !important; color: var(--s4h-brick) !important;}
.s4h-lc-grid a:hover svg { opacity: 1 !important; transform: none !important;}
.s4h-lc-foot {
  position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; gap: 12px !important;
  margin-top: 16px !important; background: var(--s4h-brick-wash) !important; border-radius: 14px !important; padding: 13px 18px !important;}
.s4h-lc-foot b { font-family: var(--s4h-display) !important; font-size: 14px !important; color: var(--s4h-brick) !important;}
.s4h-lc-foot span { font-family: var(--s4h-body) !important; font-weight: 600 !important; font-size: 12.5px !important; color: #8A5A2B !important;}
.s4h-lc-foot .s4h-pf-cta { margin-left: auto !important; background: var(--s4h-brick-soft) !important; padding: 10px 20px !important;}
.s4h-lc-foot .s4h-pf-cta:hover { background: var(--s4h-brick) !important;}

@media (max-width: 1080px) {
  .s4h-mega-in { grid-template-columns: 1fr 1fr 1.2fr !important;}
  .s4h-mcol-3 { display: none !important;}
  .s4h-routes { grid-template-columns: repeat(3, 1fr) !important;}
  .s4h-routes::before { display: none !important;}
  .s4h-lc-grid { grid-template-columns: repeat(2, 1fr) !important;}}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.s4h-drawer { position: fixed !important; inset: 0 !important; z-index: 800 !important; display: none !important;}
.s4h-drawer[open] { display: block !important;}
.s4h-scrim { position: absolute !important; inset: 0 !important; background: rgba(34, 30, 22, .42) !important;}
.s4h-panel-m {
  position: absolute !important; top: 0 !important; right: 0 !important; height: 100% !important; width: min(380px, 86vw) !important;
  background: var(--s4h-paper) !important; box-shadow: var(--s4h-shadow-lg) !important;
  padding: 22px 22px 40px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important;}
.s4h-m-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important;}
.s4h-m-top .s4h-brand img { height: 40px !important;}
.s4h-m-close {
  background: var(--s4h-paper-2) !important; width: 40px !important; height: 40px !important; border-radius: 50% !important;
  font-size: 22px !important; color: var(--s4h-ink) !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important;}
.s4h-panel-m a {
  font-family: var(--s4h-body) !important; font-weight: 700 !important; font-size: 17px !important; color: var(--s4h-ink) !important;
  padding: 13px 8px !important; border-bottom: 1px solid var(--s4h-line) !important;}
.s4h-panel-m .s4h-m-sub { font-weight: 600 !important; font-size: 14.5px !important; color: var(--s4h-ink-soft) !important; padding: 9px 8px 9px 20px !important; border: none !important;}
.s4h-m-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 18px !important;}
.s4h-m-actions a { border-bottom: none !important; justify-content: center !important;}
.s4h-m-search { display: flex !important; align-items: center !important; gap: 8px !important; background: #fff !important; border: 1px solid var(--s4h-line) !important; border-radius: 999px !important; padding: 6px 6px 6px 16px !important; margin-bottom: 10px !important;}
.s4h-m-search input { flex: 1 !important; min-width: 0 !important; border: none !important; background: none !important; font-family: var(--s4h-body) !important; font-size: 15px !important; color: var(--s4h-ink) !important; padding: 8px 0 !important;}
.s4h-m-search input:focus { outline: none !important;}
.s4h-m-search button { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--s4h-pine) !important; color: #fff !important; display: grid !important; place-items: center !important; flex: none !important;}
.s4h-m-search button svg { width: 17px !important; height: 17px !important;}

@media (max-width: 1040px) {
  .s4h-nav, .s4h-cta .s4h-btn { display: none !important;}
  .s4h-burger { display: inline-flex !important;}
  .s4h-head-in { padding: 14px 20px !important;}
  .s4h-brand img { height: 40px !important;}}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.s4h-search { position: fixed !important; inset: 0 !important; z-index: 820 !important; display: none !important;}
.s4h-search[open] { display: block !important;}
.s4h-search-box { position: absolute !important; left: 50% !important; top: 14vh !important; transform: translateX(-50%) !important; width: min(720px, 92vw) !important;}
.s4h-search-box form {
  display: flex !important; align-items: center !important; gap: 10px !important; background: #fff !important;
  border-radius: 999px !important; padding: 10px 10px 10px 22px !important; box-shadow: var(--s4h-shadow-lg) !important;}
.s4h-search-box form > svg { width: 20px !important; height: 20px !important; color: var(--s4h-ink-soft) !important; flex: none !important;}
.s4h-search-box input {
  flex: 1 !important; min-width: 0 !important; border: none !important; background: none !important;
  font-family: var(--s4h-body) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--s4h-ink) !important; padding: 10px 0 !important;}
.s4h-search-box input:focus { outline: none !important;}
.s4h-search-box .s4h-btn { padding: 12px 24px !important; font-size: 14px !important;}
.s4h-search-x { width: 40px !important; height: 40px !important; border-radius: 50% !important; color: var(--s4h-ink-soft) !important; display: grid !important; place-items: center !important; flex: none !important;}
.s4h-search-x svg { width: 18px !important; height: 18px !important;}


.s4h-feature::-webkit-scrollbar,
.s4h-panel::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important;}
.s4h-panel { scrollbar-width: none !important; -ms-overflow-style: none !important;}

/* ----------------------------------------------------------------
   TEXT-COLOUR SPECIFICITY FIX

   The reset above is `.s4h a { color: inherit }`. In the generated
   !important build every declaration gets !important, which makes
   that reset (2 selectors) outrank any single-class colour rule —
   so button labels and hover states fell back to inherit.

   Re-declaring them as `.s4h a.<class>` matches the reset's
   specificity and comes later in the file, so these win.
   ---------------------------------------------------------------- */

/* header CTAs */
.s4h a.s4h-btn--honey,
.s4h a.s4h-btn--honey:hover,
.s4h a.s4h-btn--pine,
.s4h a.s4h-btn--pine:hover { color: #fff !important;}
.s4h a.s4h-btn--ghost { color: var(--s4h-pine) !important;}
.s4h a.s4h-btn--ghost:hover { color: #fff !important;}

/* "Shop all …" feature CTA and the panel CTAs */
.s4h a.s4h-feature-cta,
.s4h a.s4h-feature-cta:hover,
.s4h a.s4h-pf-cta,
.s4h a.s4h-pf-cta:hover { color: #fff !important;}

/* "View all" link inside the empty third column */
.s4h .s4h-mcol-empty a.s4h-feature-cta,
.s4h .s4h-mcol-empty a.s4h-feature-cta:hover { color: #fff !important;}

/* mega-menu rows: label and description both go white on hover */
.s4h a.s4h-mlink:hover,
.s4h a.s4h-mlink.is-active,
.s4h a.s4h-mlink:hover .s4h-mlbl b,
.s4h a.s4h-mlink.is-active .s4h-mlbl b { color: #fff !important;}
.s4h a.s4h-mlink:hover .s4h-mlbl small,
.s4h a.s4h-mlink.is-active .s4h-mlbl small { color: rgba(255, 255, 255, .82) !important;}

/* the same rows rendered as <button> rather than <a> */
.s4h button.s4h-mlink:hover .s4h-mlbl b,
.s4h button.s4h-mlink.is-active .s4h-mlbl b { color: #fff !important;}
.s4h button.s4h-mlink:hover .s4h-mlbl small,
.s4h button.s4h-mlink.is-active .s4h-mlbl small { color: rgba(255, 255, 255, .82) !important;}

/* feature tags */
.s4h a.s4h-ftag:hover { color: #fff !important;}

/* warehouse rows keep brick, not inherit */
.s4h a.s4h-warehouse-link,
.s4h a.s4h-warehouse-link:hover { color: var(--s4h-brick) !important;}


/* ----------------------------------------------------------------
   FIBOSEARCH
   The utility bar renders [fibosearch] when the plugin is active.
   Written to cover BOTH FiboSearch styles (solaris and pirx) and
   both layouts, since the plugin's own classes differ between them.
   ---------------------------------------------------------------- */

/* The search bar must never push the account links off the row.
   The wrapper is a block element by default and stretches to fill the
   flex line — that is what hid Login / Register / Cart and left the
   magnifier stranded at the wrapper's far left. */
.s4h-util-r {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;}
/* account + cart links never shrink */
.s4h-util-r > a,
.s4h-util-r > .s4h-util-sep,
.s4h-util-r > button { flex: 0 0 auto !important;}

.s4h .dgwt-wcas-search-wrapp,
.s4h .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris,
.s4h .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx,
.s4h-util-r .dgwt-wcas-search-wrapp {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 280px !important;
  max-width: 280px !important;
  min-width: 0 !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  vertical-align: middle !important;}

.s4h .dgwt-wcas-search-form,
.s4h .dgwt-wcas-sf-wrapp {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;}

/* ---- the input IS the pill ---- */
.s4h .dgwt-wcas-search-input,
.s4h input.dgwt-wcas-search-input,
.s4h input.dgwt-wcas-search-input[type="search"],
.s4h .dgwt-wcas-style-pirx .dgwt-wcas-search-input {
  display: block !important;
  box-sizing: border-box !important;
  height: 40px !important;
  line-height: 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #F1EDE4 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 0 40px 0 42px !important;
  margin: 0 !important;
  font-family: var(--s4h-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--s4h-ink) !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  transition: background .22s var(--s4h-ease), color .22s var(--s4h-ease) !important;}
.s4h .dgwt-wcas-search-input::placeholder {
  color: var(--s4h-ink-soft) !important;
  font-weight: 700 !important;
  opacity: 1 !important;}

/* ---- magnifier: our own, positioned inside the pill ----
   Anchored to the wrapper (which is now exactly the pill's width),
   not the inner form, so it can't drift. */
.s4h .dgwt-wcas-search-wrapp::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-50%) !important;
  background: var(--s4h-ink) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat !important;
  pointer-events: none !important;
  z-index: 3 !important;
  transition: background .22s var(--s4h-ease) !important;}

/* ---- hide every control FiboSearch adds; the design has none ----
   Both style variants and every layout are listed, because the
   plugin renders a different subset depending on configuration. */
.s4h .dgwt-wcas-search-submit,
.s4h .dgwt-wcas-search-icon-arrow,
.s4h .dgwt-wcas-voice-search,
.s4h .dgwt-wcas-om-bar,
.s4h .dgwt-wcas-om-return,
.s4h .dgwt-wcas-enable-mobile-form,
.s4h .dgwt-wcas-open-search,
.s4h .dgwt-wcas-icon-preloader,
.s4h .js-dgwt-wcas-search-icon-handler,
.s4h .dgwt-wcas-search-icon,
.s4h .dgwt-wcas-ico-magnifier,
.s4h .dgwt-wcas-ico-magnifier-handler {
  display: none !important;}

/* close (×) and spinner sit inside the pill, not beside it */
.s4h .dgwt-wcas-close,
.s4h .dgwt-wcas-preloader {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 4 !important;}

/* ---- hover / focus: terracotta pill, white text ---- */
.s4h .dgwt-wcas-search-wrapp:hover .dgwt-wcas-search-input,
.s4h .dgwt-wcas-search-input:focus {
  background: var(--s4-clay-cta) !important;
  border-color: var(--s4-clay-cta) !important;
  color: #fff !important;
  outline: none !important;}
.s4h .dgwt-wcas-search-wrapp:hover .dgwt-wcas-search-input::placeholder,
.s4h .dgwt-wcas-search-input:focus::placeholder { color: rgba(255, 255, 255, .85) !important;}
.s4h .dgwt-wcas-search-wrapp:hover::before { background: #fff !important;}
.s4h .dgwt-wcas-search-wrapp:hover .dgwt-wcas-close,
.s4h .dgwt-wcas-search-input:focus ~ .dgwt-wcas-close { color: #fff !important;}

/* ---- suggestions dropdown (rendered outside .s4h) ---- */
.dgwt-wcas-suggestions-wrapp {
  border-radius: 18px !important;
  border: 1px solid rgba(60, 57, 48, .14) !important;
  box-shadow: 0 18px 44px rgba(60, 57, 48, .16) !important;
  overflow: hidden !important;
  margin-top: 8px !important;}
.dgwt-wcas-suggestion { font-family: "Raleway", sans-serif !important; font-size: 14px !important;}
.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover { background: #F1EDE4 !important;}

/* ---- narrow screens: let the bar shrink rather than overflow ---- */
@media (max-width: 1040px) {
  .s4h .dgwt-wcas-search-wrapp,
  .s4h .dgwt-wcas-search-wrapp.dgwt-wcas-style-solaris,
  .s4h .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 220px !important;}}
@media (max-width: 700px) {
  .s4h .dgwt-wcas-search-wrapp { max-width: 150px !important;}
  .s4h .dgwt-wcas-search-input { padding: 0 14px 0 38px !important; font-size: 13px !important;}}

/* ============================================================
   LEGACY HEADER SUPPRESSION
   The old Warp header markup is removed in layouts/theme.php.
   These rules are belt-and-braces for any cached page or any
   widget position that still prints part of it.
   ============================================================ */
body.s4-header-active #responsive_menu,
body.s4-header-active #header,
body.s4-header-active #navigation { display: none !important;}

@media print { .s4h-util, .s4h-mega, .s4h-drawer, .s4h-search { display: none !important;}}

@media (prefers-reduced-motion: reduce) {
  .s4h *, .s4h *::before, .s4h *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;}}