/** Shopify CDN: Minification failed

Line 1253:0 Unexpected "{"
Line 1253:1 Expected identifier but found "%"
Line 1253:59 Expected identifier but found "%"
Line 1254:0 Unexpected "<"

**/
/* ===== Mega Menu — full-width panel, fade/slide in ===== */
:root{
  --mm-ease: cubic-bezier(.22,.61,.36,1);
  --mm-fade: 180ms;
  --mm-slide: 160ms;
  --mm-radius: 0;                        /* square corners */
  --mm-panel-bg: rgba(255,255,255,.72);  /* neutral glass */
  --mm-panel-border: rgba(255,255,255,.35);
  --mm-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --mm-link: #111;
  --mm-link-hover: #8d001c;
  --mm-col-min: 160px;
  --mm-gap-x: 28px;
  --mm-gap-y: 12px;
  --mm-pad-x: clamp(12px, 3vw, 36px);    /* comfy side padding */
  --mm-pad-y: 12px;
  --header-height: 72px;                 /* JS sets this accurately */
}

/* Remove default bullets/spacing */
.header__inline-menu .list-menu,
.mega-menu__list{ list-style:none; margin:0; padding:0; }

.mega-menu{ position:relative; }
.mega-menu summary{ cursor:pointer; list-style:none; }
.mega-menu summary::-webkit-details-marker{ display:none; }

/* Caret rotate */
.mega-menu summary .icon-caret,
.mega-menu summary svg{
  transition: transform var(--mm-fade) var(--mm-ease);
  transform-origin: 50% 45%;
}
.mega-menu[open] summary .icon-caret,
.mega-menu[open] summary svg{ transform: rotate(180deg); }

/* Panel (hidden by default) */
.mega-menu__content{
  position: fixed;               /* anchor to viewport */
  left: 0; right: 0;
  top: var(--header-height);     /* sits directly under header */
  width: 100vw; max-width: 100vw;
  background: var(--mm-panel-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--mm-panel-border);
  border-bottom: 1px solid var(--mm-panel-border);
  border-radius: 0;               /* edge-to-edge */
  box-shadow: var(--mm-shadow);
  padding: var(--mm-pad-y) var(--mm-pad-x);
  opacity: 0; transform: translateY(8px);
  visibility: hidden; pointer-events: none;
  transition:
    opacity var(--mm-fade) var(--mm-ease),
    transform var(--mm-slide) var(--mm-ease),
    visibility var(--mm-fade) var(--mm-ease);
  z-index: 50;
}

/* Visible: click/tap open OR hover (desktop) */
.mega-menu[open] .mega-menu__content{
  opacity:1; transform:translateY(0);
  visibility:visible; pointer-events:auto;
}

/* Desktop hover support */
@media (pointer:fine) and (min-width:990px){
  .mega-menu:hover .mega-menu__content{
    opacity:1; transform:translateY(0);
    visibility:visible; pointer-events:auto;
  }
}

/* Full-bleed grid that distributes links from left to right */
.mega-menu__list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mm-col-min), 1fr));
  column-gap: var(--mm-gap-x);
  row-gap: var(--mm-gap-y);
  align-items:start;
}
.mega-menu__list > li{ margin:0; }

.mega-menu__content a{
  display:block;
  padding:12px 10px;
  color:var(--mm-link);
  text-decoration:none;
  font-weight:600; letter-spacing:.01em; line-height:1.25;
  border-radius:0;
  transition: color 140ms var(--mm-ease), background-color 140ms var(--mm-ease);
}
.mega-menu__content a:hover,
.mega-menu__content a:focus-visible{
  background: rgba(0,0,0,.06);
  color: var(--mm-link-hover);
  outline:none;
}

/* Mobile keeps the same full-bleed behavior; just larger touch targets */
@media (max-width:989px){
  .mega-menu__content a{ padding:14px; }
}

/* Keep header above content if you use a sticky/hide header */
[data-cc-header-root]{ z-index:60; }


/* ===== Inline Subnav Swap (child links replace parent in header) ===== */
:root{
  --swap-ease: cubic-bezier(.22,.61,.36,1);
  --swap-fade: 180ms;
  --swap-slide: 160ms;
  --swap-gap: clamp(14px, 2.2vw, 28px);
  --swap-pad-y: 6px;
  --swap-pad-x: clamp(8px, 1.6vw, 18px);
  --swap-link: #111;
  --swap-link-hover: #8d001c;
}

/* Make the swap row sit exactly where the inline menu sits */
.inline-subnav{
  grid-area: navigation;
  display: flex;
  align-items: center;
  gap: var(--swap-gap);
  padding: var(--swap-pad-y) var(--swap-pad-x);
  opacity: 0; transform: translateY(6px);
  visibility: hidden; pointer-events: none;
  transition:
    opacity var(--swap-fade) var(--swap-ease),
    transform var(--swap-slide) var(--swap-ease),
    visibility var(--swap-fade) var(--swap-ease);
}

/* When active, hide the top-level menu and show the swap row */
.header.nav-swap--active .header__inline-menu{
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--swap-fade) var(--swap-ease);
}

.header.nav-swap--active .inline-subnav{
  opacity: 1; transform: translateY(0);
  visibility: visible; pointer-events: auto;
}

/* Items row */
.inline-subnav__items{
  display: flex;
  gap: var(--swap-gap);
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.inline-subnav__items::-webkit-scrollbar{ display:none; }

/* Links */
.inline-subnav__items a{
  display: inline-block;
  white-space: nowrap;
  padding: 8px 4px;
  font-weight: 600;
  text-decoration: none;
  color: var(--swap-link);
  border-radius: 8px;
  transition: color 140ms var(--swap-ease), background-color 140ms var(--swap-ease);
}
.inline-subnav__items a:hover,
.inline-subnav__items a:focus-visible{
  color: var(--swap-link-hover);
  background: rgba(0,0,0,.06);
  outline: none;
}

/* Back button */
.inline-subnav__back{
  appearance:none; border:0; background:transparent;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; margin-right: 2px; border-radius: 10px;
  font-weight: 600; cursor:pointer;
  transition: background-color 140ms var(--swap-ease), color 140ms var(--swap-ease);
}
.inline-subnav__back:hover,
.inline-subnav__back:focus-visible{
  background: rgba(0,0,0,.06);
  outline: none;
}
.inline-subnav__back-icon{ font-size: 14px; line-height: 1; }

/* Make sure any dropdown panel is suppressed while swapping */
.header.nav-swap--active .mega-menu__content{ display:none !important; }

/* Small screens: bigger targets */
@media (max-width: 989px){
  .inline-subnav__items a{ padding: 10px 6px; }
}


/* ===== Nav & logo vertical alignment (desktop & tablet) ===== */
:root{
  --nav-height: 68px;   /* adjust to your header height */
  --nav-gap: 24px;      /* subtle spacing between the 3 parent links */
}

/* Make the whole header row align to center */
.header{ align-items: center; }

/* Logo link: same height as nav and centered */
.header__heading-link{
  display:flex; align-items:center; height:var(--nav-height);
  padding-block:0; /* kill stray top/bottom padding */
}

/* Inline menu container centered with the logo */
.header__inline-menu{
  align-self:center; margin-top:0 !important; /* Dawn sometimes nudges this down */
}

/* Parent links row */
.header__inline-menu > .list-menu--inline{
  display:flex; align-items:center; gap:var(--nav-gap);
  height:var(--nav-height); /* matches logo line */
}

/* Each parent item (including <summary> used by mega menu) */
.header__menu-item,
.mega-menu > summary.header__menu-item{
  display:flex; align-items:center; height:100%;
  padding-block:0; line-height:1; margin:0;
}

/* Caret icon alignment */
.header__menu-item .icon-caret,
.mega-menu > summary .icon-caret{
  margin-left:.35rem; vertical-align:middle; position:relative; top:.5px;
}

/* Keep the right-side icon group centered too */
.header__icons{ align-self:center; }

/* Optional: remove any header wrapper padding that can shift baselines */
.header-wrapper{ padding-block:0; }

/* Mobile trims (smaller hit area & gaps on narrow screens) */
@media (max-width: 989px){
  :root{ --nav-height:56px; --nav-gap:18px; }
}











/* ===== Desktop header breathing room + caret spacing ================== */
:root{
  --header-pad-x: 24px;   /* left/right space inside the header */
  --header-pad-y: 10px;   /* top/bottom space inside the header */
  --parent-gap: 22px;     /* already used for link spacing; tweak if needed */
  --caret-gap: 8px;       /* space between text and caret */
  --nav-height: 64px;     /* keep the row comfortable */

  /* NEW: minimum horizontal gutters for the inline child row */
  --cc-inline-gutters: 28px; /* bump this up if you want even more edge space */
}

@media (min-width: 990px){
  .header-wrapper{ padding-block: var(--header-pad-y); }
  .header{
    padding-inline: var(--header-pad-x);
    grid-template-areas: "heading navigation icons";
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .header__inline-menu > .list-menu--inline{
    gap: var(--parent-gap);
    height: var(--nav-height);
  }

  .mega-menu > summary.header__menu-item,
  .header__menu-item{
    display: inline-flex;
    align-items: center;
    column-gap: var(--caret-gap);
    line-height: 1;
    padding-block: 0;
    height: 100%;
    white-space: nowrap;
  }

  .header__menu-item .icon-caret{
    position: static !important;
    margin-left: var(--caret-gap);
    width: 12px; height: 12px; flex-shrink: 0;
    transform-origin: center;
  }
  details[open] > .header__menu-item .icon-caret{ transform: rotate(180deg); }
}

@media (min-width: 1400px){
  :root{ --header-pad-x: 36px; --parent-gap: 26px; }
}

/* ===== Inline replace row (desktop) =================================== */
:root{
  --cc-inline-gap: 24px;
  --cc-inline-fade: .18s;
}

.cc-inline-row{
  grid-area: navigation;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--cc-inline-gap);
  height: var(--nav-height, 64px);
  opacity: 0;
  transition: opacity var(--cc-inline-fade) ease;
  white-space: nowrap;
}

.header--replace .header__inline-menu{ visibility: hidden; opacity: 0; pointer-events: none; }
.header--replace .cc-inline-row{ display: flex; opacity: 1; }

.cc-inline-row a{
  text-decoration: none;
  font-weight: 600;
  color: rgb(var(--color-foreground, 0,0,0));
  padding: .35rem .4rem;
}
.cc-inline-row a:hover{ text-decoration: underline; }

.cc-inline-back{
  appearance: none; background: transparent; border: 0; font: inherit;
  color: rgba(var(--color-foreground,0,0,0), .75);
  padding: .3rem .6rem; border-radius: 999px; cursor: pointer;
}
.cc-inline-back:hover{ text-decoration: underline; }

.mega-menu.is-active > summary .icon-caret{ transform: rotate(180deg); }
.mega-menu__content{ z-index: 40; }

@media (max-width: 989px){
  .cc-inline-row{ display: none !important; }
  .header--replace .header__inline-menu{ visibility: visible; opacity: 1; pointer-events: auto; }
}

/* --- Mega menu hover + inline strip essentials --- */
header, .header-wrapper, .header__inline-menu { overflow: visible; }
.header__inline-menu { position: relative; z-index: 30; }
.header__inline-menu > .list-menu--inline{ display: flex; gap: 28px; align-items: center; }

.header__inline-menu summary.header__menu-item{
  display: inline-flex; align-items: center; gap: .4rem; line-height: 1; cursor: pointer;
}
.header__menu-item .icon-caret{ margin-left: .35rem; }

.mega-menu{ position: relative; }
.mega-menu__content{
  position: absolute; top: 100%; left: 0; right: 0;
  transform-origin: top;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 40;
}
.mega-menu.is-open .mega-menu__content{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* -------- Inline “replace parent with children” strip -------- */
.header__inline-menu .list-menu--inline{ transition: opacity .18s ease; }
.header__inline-menu.cc-inline-active .list-menu--inline{ opacity: 0; }

/* The strip overlays the same row as the parents */
#cc-inline-children{
  position: absolute;
  inset: 0;
  /* NEW: add real gutters + safe-area; border-box prevents cropping */
  box-sizing: border-box;
  padding-left: calc(max(var(--header-pad-x), var(--cc-inline-gutters)) + env(safe-area-inset-left, 0px));
  padding-right: calc(max(var(--header-pad-x), var(--cc-inline-gutters)) + env(safe-area-inset-right, 0px));

  display: flex; align-items: center; justify-content: center;
  gap: 34px;                           /* tasteful spacing between child links */
  opacity: 0; pointer-events: none; transition: opacity .18s ease;

  /* allow gentle scroll if it overflows, but don’t clip text */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#cc-inline-children::-webkit-scrollbar{ display: none; }

.header__inline-menu.cc-inline-active #cc-inline-children{ opacity: 1; pointer-events: auto; }

/* Child link visuals */
#cc-inline-children a{
  white-space: nowrap;
  font-size: 1.5rem; line-height: 1; letter-spacing: .02em; font-weight: 600;
  text-decoration: none;
  padding: .35rem .1rem; border-radius: .4rem;
  transition: opacity .15s ease, transform .15s ease;
}
#cc-inline-children a:hover{ opacity: .85; transform: translateY(-1px); }

/* Touch: no hover strip */
@media (hover: none){
  .mega-menu__content{ position: static; opacity: 1; transform: none; pointer-events: auto; }
  #cc-inline-children{ display: none; }
}
/* Center the parent links (desktop) */
@media (min-width: 990px){
  /* let the nav fill the middle grid column and anchor itself in the middle */
  .header__inline-menu{
    grid-area: navigation;
    justify-self: center;   /* sits in the middle between logo + icons */
    width: 100%;
  }

  /* the actual row of parent links */
  .header__inline-menu > .list-menu--inline{
    display: flex;          /* already set, safe to repeat */
    justify-content: center;/* <-- makes the links centered */
    margin: 0 auto;         /* keeps it centered if the row is narrower */
  }
}


/* === Brand color for CHILD links (inline strip + inline row + fallback panel) === */
:root{
  --fp-burgundy: #8d001c;      /* primary */
  --fp-burgundy-dk: #6e0015;   /* hover/active */
  --fp-burgundy-veil: rgba(141,0,28,.10); /* subtle hover bg */
}

/* Inline strip when you hover a parent */
.header__inline-menu[data-cc-mega] #cc-inline-children a,
.header--replace .cc-inline-row a,
.mega-menu__content .mega-menu__link {
  color: var(--fp-burgundy) !important;
  text-decoration: none;          /* kill default blue underline */
}

/* Keep visited links the SAME brand color (stop the purple/grey) */
.header__inline-menu[data-cc-mega] #cc-inline-children a:visited,
.header--replace .cc-inline-row a:visited,
.mega-menu__content .mega-menu__link:visited {
  color: var(--fp-burgundy) !important;
}

/* Hover/focus polish */
.header__inline-menu[data-cc-mega] #cc-inline-children a:hover,
.header--replace .cc-inline-row a:hover,
.mega-menu__content .mega-menu__link:hover {
  color: var(--fp-burgundy-dk) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.header__inline-menu[data-cc-mega] #cc-inline-children a:focus-visible,
.header--replace .cc-inline-row a:focus-visible,
.mega-menu__content .mega-menu__link:focus-visible {
  outline: 2px solid var(--fp-burgundy);
  outline-offset: 2px;
  border-radius: 6px;
}
/* subtle readability + cleaner underline */
.header__inline-menu[data-cc-mega] #cc-inline-children a,
.header--replace .cc-inline-row a,
.mega-menu__content .mega-menu__link{
  text-underline-offset: 3px;      /* lift underline off the type */
  letter-spacing: .01em;           /* a hair of tracking */
  transition: color .15s ease, transform .15s ease, text-decoration-color .15s ease;
}

/* gentle hover lift */
.header__inline-menu[data-cc-mega] #cc-inline-children a:hover,
.header--replace .cc-inline-row a:hover,
.mega-menu__content .mega-menu__link:hover{
  transform: translateY(-1px);
  text-decoration-color: currentColor;
}

/* tiny contrast boost when sitting over imagery */
.header--replace .cc-inline-row a{
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
@supports (backdrop-filter: blur(1px)){
  .header--replace .cc-inline-row{
    background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0));
    backdrop-filter: blur(2px) saturate(120%);
  }
}

/* keep visited color locked on Safari too */
@supports (-webkit-touch-callout: none){
  .header__inline-menu[data-cc-mega] #cc-inline-children a:visited,
  .header--replace .cc-inline-row a:visited,
  .mega-menu__content .mega-menu__link:visited{
    color: var(--fp-burgundy) !important;
  }
}
/* ====== Shrink-on-scroll + glassmorphism header ======================= */
/* Tunables */
:root{
  --cc-shrink-threshold: 120px;      /* how far to scroll before shrinking (JS reads this) */
  --cc-shrink-gap: 18px;             /* parent-link spacing when shrunk */
  --cc-nav-scale: .96;               /* how much the parent row scales down */
  --cc-logo-scale: .88;              /* logo scale in shrink state */
  --cc-shrink-pad-y: 6px;            /* header vertical padding when shrunk */
  --cc-glass-bg: rgba(255,255,255,.55);
  --cc-glass-border: rgba(0,0,0,.06);
  --cc-glass-blur: 12px;
}

/* smooth transitions on the wrapper */
.header-wrapper{
  transition:
    padding var(--cc-header-slide,260ms) var(--cc-header-ease,cubic-bezier(.22,.61,.36,1)),
    background 220ms var(--cc-header-ease,cubic-bezier(.22,.61,.36,1)),
    backdrop-filter 220ms var(--cc-header-ease,cubic-bezier(.22,.61,.36,1)),
    box-shadow 220ms var(--cc-header-ease,cubic-bezier(.22,.61,.36,1));
  background: transparent;
}

/* when shrunk: add glass + slightly tighter padding */
[data-cc-header-root].is-shrunk .header-wrapper{
  padding-block: var(--cc-shrink-pad-y);
  background: var(--cc-glass-bg);
  -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--cc-glass-blur)) saturate(160%);
  border-bottom: 1px solid var(--cc-glass-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* center the parent row in the grid when shrunk */
@media (min-width: 990px){
  [data-cc-header-root].is-shrunk .header__inline-menu{ justify-self: center; }
  [data-cc-header-root].is-shrunk .header__inline-menu > .list-menu--inline{
    gap: var(--cc-shrink-gap);
    transform: translateY(-1px) scale(var(--cc-nav-scale));
    transform-origin: center top;
    transition: transform 200ms var(--cc-header-ease,cubic-bezier(.22,.61,.36,1));
  }

  /* keep logo left, just tuck it a bit */
  [data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
    transform: scale(var(--cc-logo-scale));
    transform-origin: left center;
    transition: transform 200ms var(--cc-header-ease,cubic-bezier(.22,.61,.36,1));
  }

  /* make parent items feel lighter when shrunk */
  [data-cc-header-root].is-shrunk .header__menu-item{
    letter-spacing: .01em;
  }
}

/* plays nice with your hide-on-scroll: when hidden, transform wins */
[data-cc-header-root].header--hidden{ opacity:0; transform:translate3d(0,-100%,0)!important; }






/* ====== Header shrink + glass (desktop) =============================== */
:root{
  /* sizes you can tune */
  --cc-headH-lg: 78px;  /* visual target only */
  --cc-headH-sm: 54px;

  --cc-logoW-lg: 120px;
  --cc-logoW-sm: 92px;   /* a touch larger for crispness */

  --cc-padY-lg: 12px;
  --cc-padY-sm: 6px;

  --cc-navFs-lg: 14px;
  --cc-navFs-sm: 12px;

  /* motion tokens */
  --cc-ease: cubic-bezier(.22,.61,.36,1);
  --cc-dur:  260ms;

  /* glass tokens (themeable) */
  --cc-glass-bg: rgba(255,255,255,.45);
  --cc-glass-border: rgba(255,255,255,.35);
  --cc-glass-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* only apply on desktop */
@media (min-width: 990px){

  /* ROOT: transitions + glass baseline (no scroll) */
  [data-cc-header-root]{
    background-color: transparent;
    transition:
      background-color var(--cc-dur) var(--cc-ease),
      backdrop-filter   var(--cc-dur) var(--cc-ease),
      -webkit-backdrop-filter var(--cc-dur) var(--cc-ease),
      box-shadow       var(--cc-dur) var(--cc-ease);
    will-change: backdrop-filter, background-color, box-shadow;
    z-index: 40;
  }

  /* GLASS: JS toggles .cc-glass-on */
  [data-cc-header-root].cc-glass-on{
    background-color: var(--cc-glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
            backdrop-filter: blur(12px) saturate(160%);
    box-shadow: var(--cc-glass-shadow);
    border-bottom: 1px solid var(--cc-glass-border);
  }

  /* Fallback when backdrop-filter is unsupported */
  @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
    [data-cc-header-root].cc-glass-on{
      background-color: rgba(255,255,255,.88);
      box-shadow: var(--cc-glass-shadow);
    }
  }

  /* INNER ROW: animate via transform; small padding transition for layout */
  [data-cc-header-root] .header{
    /* promote to its own layer for buttery frames */
    transform: translateZ(0) translateY(0) scale(1);
    transform-origin: top center;
    padding-block: var(--cc-padY-lg);
    transition:
      transform var(--cc-dur) var(--cc-ease),
      padding   var(--cc-dur) var(--cc-ease);
    will-change: transform;
  }

  /* LOGO */
  [data-cc-header-root] .header__heading-logo-wrapper{
    width: var(--cc-logoW-lg);
    transition: width var(--cc-dur) var(--cc-ease);
  }

  /* NAV ROW: keep crisp — no scale here, only slight lift if desired */
  [data-cc-header-root] .header__inline-menu{
    transform: translateY(0);
    transform-origin: top center;
    transition: transform var(--cc-dur) var(--cc-ease), opacity var(--cc-dur) var(--cc-ease);
  }

  /* NAV PARENTS: type shifts gently */
  [data-cc-header-root] .header__menu-item{
    font-size: var(--cc-navFs-lg);
    letter-spacing: .02em;
    transition:
      font-size      var(--cc-dur) var(--cc-ease),
      letter-spacing var(--cc-dur) var(--cc-ease);
    white-space: nowrap;
  }

  /* === SHRUNK STATE ==================================================== */
  [data-cc-header-root].is-shrunk .header{
    /* slightly higher, subtle scale to suggest compaction */
    transform: translateZ(0) translateY(-4px) scale(.965); /* .955–.975 sweet spot */
    padding-block: var(--cc-padY-sm);
  }

  [data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
    width: var(--cc-logoW-sm);
  }

  /* keep nav crisp; just lift, no scale */
  [data-cc-header-root].is-shrunk .header__inline-menu{
    transform: translateY(-2px);
  }

  [data-cc-header-root].is-shrunk .header__menu-item{
    font-size: var(--cc-navFs-sm);
    letter-spacing: .015em;
  }
}

/* keep icons aligned while shrinking */
@media (min-width: 990px){
  .header{ align-items: center; }
  .header__icons{ align-self: center; }
}

/* No snap on initial compute / BFCache restore */
[data-cc-header-root].cc-no-anim,
[data-cc-header-root].cc-no-anim .header,
[data-cc-header-root].cc-no-anim .header__heading-logo-wrapper,
[data-cc-header-root].cc-no-anim .header__inline-menu{
  transition: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-cc-header-root],
  [data-cc-header-root] .header,
  [data-cc-header-root] .header__heading-logo-wrapper,
  [data-cc-header-root] .header__inline-menu,
  [data-cc-header-root] .header__menu-item{
    transition: none !important;
  }
}



/* --- Make sure nothing opaque sits under the glass ------------------- */
@media (min-width: 990px){
  /* kill theme backgrounds that block blur */
  [data-cc-header-root],
  [data-cc-header-root] .section-header,
  [data-cc-header-root] .header-wrapper{
    background: transparent !important;
  }

  /* use a pseudo-layer for the frosted glass */
  [data-cc-header-root] .header-wrapper{
    position: relative;
    isolation: isolate;          /* new stacking context so ::before sits behind content */
  }

  /* show glass once we've scrolled (html.cc-scrolled is set by your JS) */
  html.cc-scrolled [data-cc-header-root] .header-wrapper::before{
    content: "";
    position: absolute;
    inset: 0;
    /* a tiny alpha is required for Safari to render backdrop-filter */
    background: rgba(255,255,255,.45);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
            backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    z-index: -1;                 /* sit behind the header content */
    pointer-events: none;
    transition: opacity .28s ease, background-color .28s ease, backdrop-filter .28s ease;
  }
}
/* === White-at-top, Glass-on-scroll header ============================== */
:root{
  --cc-glass-blur: 12px;
  --cc-glass-alpha: .45;      /* needs to be >0 for Safari to render blur */
}

/* Header wrapper stays transparent; we render layers with pseudo elements */
[data-cc-header-root] .header-wrapper{
  background: transparent !important;
  position: relative;
  isolation: isolate;         /* gives ::before/::after their own stacking context */
}

/* GLASS layer (on top of white, below content) — hidden at top */
[data-cc-header-root] .header-wrapper::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,var(--cc-glass-alpha));
  -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(160%);
          backdrop-filter: blur(var(--cc-glass-blur)) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  pointer-events:none;
  z-index:-1;
  opacity: 0;                                /* off at top */
  transition: opacity .25s cubic-bezier(.22,.61,.36,1);
}

/* WHITE base layer — visible at top, fades out when scrolled */
[data-cc-header-root] .header-wrapper::after{
  content:"";
  position:absolute; inset:0;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
  z-index:-2;                                 /* sits under the glass layer */
  opacity: 1;                                 /* on at top */
  transition: opacity .25s cubic-bezier(.22,.61,.36,1);
}

/* After a tiny scroll (or when shrunk), swap layers: glass in, white out */
html.cc-scrolled [data-cc-header-root] .header-wrapper::before,
[data-cc-header-root].is-shrunk .header-wrapper::before{
  opacity: 1;
}
html.cc-scrolled [data-cc-header-root] .header-wrapper::after,
[data-cc-header-root].is-shrunk .header-wrapper::after{
  opacity: 0;
}

/* Fallback for browsers without backdrop-filter: keep a soft white tint */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  [data-cc-header-root] .header-wrapper::before{
    background: rgba(255,255,255,.9);
  }
}
/* ===== White-at-top, Glass-on-scroll, + shrink ========================= */
:root{
  --cc-glass-blur: 14px;                 /* blur strength */
  --cc-glass-alpha: .48;                 /* needs >0 for Safari to render blur */
  --cc-ease: cubic-bezier(.22,.61,.36,1);
  --cc-shrink-threshold: 120;            /* px before we shrink/swap layers */
}

/* Make sure we’re targeting the actual wrapper no matter your structure */
[data-cc-header-root] .header-wrapper,
.section-header .header-wrapper,
.shopify-section-header-sticky .header-wrapper{
  position: relative;
  isolation: isolate;                    /* own stacking context */
  background: transparent !important;    /* we paint bg with ::before/::after */
  overflow: visible;                     /* don’t clip the layers */
}

/* Header content stays ABOVE the bg layers */
[data-cc-header-root] .header-wrapper > *,
.section-header .header-wrapper > *,
.shopify-section-header-sticky .header-wrapper > *{
  position: relative;
  z-index: 2;
}

/* GLASS layer (hidden at top, fades in after scroll) */
.header-wrapper::before{
  content:"";
  position:absolute; inset:0;
  z-index: 1;                            /* under content, over white */
  background: rgba(255,255,255,var(--cc-glass-alpha));
  -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(160%);
          backdrop-filter: blur(var(--cc-glass-blur)) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  pointer-events:none;
  opacity: 0;                            /* off at top */
  transition: opacity .28s var(--cc-ease);
}

/* WHITE base (visible at top, fades out after scroll) */
.header-wrapper::after{
  content:"";
  position:absolute; inset:0;
  z-index: 0;
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
  opacity: 1;                            /* on at top */
  transition: opacity .28s var(--cc-ease);
}

/* Swap layers once we’ve scrolled a bit (either flag works) */
html.cc-scrolled .header-wrapper::before,
[data-cc-header-root].is-shrunk .header-wrapper::before{ opacity: 1; }
html.cc-scrolled .header-wrapper::after,
[data-cc-header-root].is-shrunk .header-wrapper::after{ opacity: 0; }

/* Shrink treatment (tweak to taste) */
[data-cc-header-root].is-shrunk .header{
  transform: translateY(-2px) scale(.96);
  transform-origin: center top;
  transition: transform .28s var(--cc-ease);
}
[data-cc-header-root] .header{ transition: transform .28s var(--cc-ease); }

/* Fallback when backdrop-filter isn’t supported */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .header-wrapper::before{
    background: rgba(255,255,255,.92);
  }
}
/* If you previously dimmed the parents while the strip is open,
   they’ll pop back to 1.0 when we close. Keep this if you want the dim;
   otherwise, remove it entirely. */
.header__inline-menu.cc-inline-active .list-menu--inline { opacity: .22; }
/* === Sticky shrink header (keeps parents visible) ===================== */
:root{
  --cc-shrink-threshold: 120px;   /* px scrolled before shrinking */
  --cc-h-lg: 84px;                /* tall state height */
  --cc-h-sm: 56px;                /* shrunk state height */
  --cc-pad-lg: 14px;              /* top/bottom padding tall */
  --cc-pad-sm: 6px;               /* top/bottom padding shrunk */
}

.shopify-section-header-sticky{ --header-height: var(--cc-h, var(--cc-h-lg)); }

[data-cc-header-root]{
  --cc-h: var(--cc-h-lg);
}

/* Bar sizing + animation */
[data-cc-header-root] .header{
  min-height: var(--cc-h);
  padding-block: var(--cc-pad-lg);
  transition:
    min-height .28s cubic-bezier(.22,.61,.36,1),
    padding     .28s cubic-bezier(.22,.61,.36,1),
    backdrop-filter .28s ease,
    background-color .28s ease;
}

/* Shrunk state */
[data-cc-header-root].is-shrunk{
  --cc-h: var(--cc-h-sm);
}
[data-cc-header-root].is-shrunk .header{
  padding-block: var(--cc-pad-sm);
}

/* Keep the header from sliding away while we use shrink mode */
[data-cc-header-root].cc-sticky-shrink.header--hidden{
  transform: none !important;
  opacity: 1 !important;
}

/* Logo + menu scale down a touch */
[data-cc-header-root] .header__heading-logo-wrapper{
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  transform-origin: left center;
}
[data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
  transform: scale(.88);
}

[data-cc-header-root] .header__inline-menu > .list-menu--inline{
  font-size: 0.98rem;
  gap: 26px;
  transition: font-size .28s cubic-bezier(.22,.61,.36,1), gap .28s cubic-bezier(.22,.61,.36,1);
}
[data-cc-header-root].is-shrunk .header__inline-menu > .list-menu--inline{
  font-size: 0.90rem;
  gap: 20px;
}

/* Glass only while scrolled (you already liked this look) */
[data-cc-header-root].cc-glass-on .header-wrapper{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
[data-cc-header-root].is-shrunk.cc-glass-on .header-wrapper{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}

/* Make sure the header sits above content */
[data-cc-header-root]{ z-index: 50; }

/* === Sticky shrink that wins against old hideJS ====================== */
:root{
  --cc-shrink-threshold: 120px;         /* scroll px before shrinking */
  --cc-ease: cubic-bezier(.22,.61,.36,1);

  /* sizes */
  --cc-h-lg: 84px;                      /* tall bar */
  --cc-h-sm: 58px;                      /* compact bar */
  --cc-pad-lg: 14px;                    /* top/bottom tall */
  --cc-pad-sm: 6px;                     /* top/bottom compact */
}

/* Tell Dawn how tall the sticky header is */
.shopify-section-header-sticky{ --header-height: var(--cc-h, var(--cc-h-lg)); }

[data-cc-header-root]{ --cc-h: var(--cc-h-lg); }

/* Keep header visible even if an older script adds header--hidden */
[data-cc-header-root].cc-sticky-shrink.header--hidden{
  transform: none !important;
  opacity: 1 !important;
}

/* Base sizing + animation */
[data-cc-header-root] .header{
  min-height: var(--cc-h-lg);
  transition: min-height .30s var(--cc-ease);
}
[data-cc-header-root] .header-wrapper{
  padding-block: var(--cc-pad-lg);
  transition: padding .30s var(--cc-ease),
              background-color .30s ease,
              backdrop-filter .30s ease;
}

/* Shrunk state */
[data-cc-header-root].is-shrunk{
  --cc-h: var(--cc-h-sm);
}
[data-cc-header-root].is-shrunk .header{
  min-height: var(--cc-h-sm);
}
[data-cc-header-root].is-shrunk .header-wrapper{
  padding-block: var(--cc-pad-sm);
}

/* Gentle content scale so the change is obvious and “Apple-y” */
[data-cc-header-root] .header__heading-logo-wrapper{
  transform-origin: left center;
  transition: transform .30s var(--cc-ease);
}
[data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
  transform: scale(.90);
}
[data-cc-header-root] .header__inline-menu > .list-menu--inline{
  transition: gap .30s var(--cc-ease), font-size .30s var(--cc-ease);
  gap: 26px;
  font-size: .98rem;
}
[data-cc-header-root].is-shrunk .header__inline-menu > .list-menu--inline{
  gap: 20px;
  font-size: .90rem;
}

/* Glassmorphism only while scrolled */
[data-cc-header-root].cc-glass-on .header-wrapper{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
[data-cc-header-root].is-shrunk.cc-glass-on .header-wrapper{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}

/* Make sure we sit above content */
[data-cc-header-root]{ z-index: 50; }
/* Keep header visible even if legacy script adds header--hidden */
[data-cc-header-root].cc-sticky-shrink.header--hidden{
  transform: none !important;
  opacity: 1 !important;
}




:root{
  --cc-shrink-threshold: 120;         /* px before ‘is-shrunk’ toggles */
  --cc-header-height: 84px;           /* normal height */
  --cc-header-height-shrunk: 52px;    /* shrunk height */
}

/* Smooth height + padding transition on the bar itself */
[data-cc-header-root] .header{
  height: var(--cc-header-height);
  transition:
    height .25s cubic-bezier(.22,.61,.36,1),
    padding .25s cubic-bezier(.22,.61,.36,1);
}

/* Shrunk state */
[data-cc-header-root].is-shrunk .header{
  height: var(--cc-header-height-shrunk);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Glass effect only after you leave the very top */
[data-cc-header-root].cc-glass-on .header-wrapper{
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* While at the very top, keep it clean white */
[data-cc-header-root]:not(.cc-glass-on) .header-wrapper{
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Hide mega nav on mobile; show hamburger instead */
@media (max-width:989px){[data-cc-desktop-nav]{display:none!important}.header__icon--menu{display:flex!important}}
@media (min-width:990px){.header__icon--menu{display:none!important}}




:root{--cc-ease:cubic-bezier(.22,.61,.36,1);--cc-dur:260ms;--cc-pad-lg:14px}
[data-cc-header-root] .header{
  transform:translateZ(0) translateY(0) scale(1);
  padding-block:var(--cc-pad-lg);
  transition:transform var(--cc-dur) var(--cc-ease),padding var(--cc-dur) var(--cc-ease);
  will-change:transform;
}
[data-cc-header-root] .header__heading-logo-wrapper{
  transform:scale(1);transition:transform var(--cc-dur) var(--cc-ease)
}
@media (min-width:990px){
  [data-cc-header-root] .header__inline-menu>.list-menu--inline{
    transition:gap var(--cc-dur) var(--cc-ease)
  }
}
[data-cc-header-root] .header-wrapper::before{
  transition:opacity var(--cc-dur) var(--cc-ease),background-color var(--cc-dur),backdrop-filter var(--cc-dur)
}
/* === Header: smooth shrink + glass + smart hide ====================== */
:root{ --cc-shrink-threshold:120 } /* px before shrink */

[data-cc-header-root]{
  position:sticky; top:0; z-index:50;
  transition:opacity .22s ease, transform .26s ease;
  will-change:opacity,transform; backface-visibility:hidden;
}

/* fade/slide away when JS adds .header--hidden */
[data-cc-header-root].header--hidden{
  opacity:0; transform:translate3d(0,-100%,0); pointer-events:none;
}

/* glass cue once not at the very top */
[data-cc-header-root].cc-glass-on{
  background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
          backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* inner row animates (scale/translate feels like height change) */
[data-cc-header-root] .header{
  transform:translateZ(0) translateY(0) scale(1);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),
             padding   .26s cubic-bezier(.22,.61,.36,1);
  padding-block:14px;
}

/* shrink state */
[data-cc-header-root].is-shrunk .header{
  transform:translateY(-2px) scale(.965);
  padding-block:6px;
}

/* optional: logo micro-scale on shrink */
[data-cc-header-root] .header__heading-logo-wrapper{
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
[data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
  transform:scale(.9);
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  [data-cc-header-root],
  [data-cc-header-root] .header,
  [data-cc-header-root] .header__heading-logo-wrapper{ transition:none !important; }
}
:root{ --cc-shrink-threshold:120 } /* px before shrink */

[data-cc-header-root]{
  position:sticky; top:0; z-index:50;
  transition:opacity .22s ease, transform .26s ease;
  will-change:opacity,transform; backface-visibility:hidden;
}
[data-cc-header-root].header--hidden{
  opacity:0; transform:translate3d(0,-100%,0); pointer-events:none;
}
[data-cc-header-root].cc-glass-on{
  background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
          backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
[data-cc-header-root] .header{
  transform:translateZ(0) translateY(0) scale(1);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),
             padding   .26s cubic-bezier(.22,.61,.36,1);
  padding-block:14px;
}
[data-cc-header-root].is-shrunk .header{
  transform:translateY(-2px) scale(.965);
  padding-block:6px;
}
[data-cc-header-root] .header__heading-logo-wrapper{
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
[data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
  transform:scale(.9);
}
@media (prefers-reduced-motion:reduce){
  [data-cc-header-root],
  [data-cc-header-root] .header,
  [data-cc-header-root] .header__heading-logo-wrapper{ transition:none !important; }
}
[data-cc-header-root]{
  transition:opacity .22s ease, transform .26s ease;
  will-change:opacity,transform; backface-visibility:hidden;
}
[data-cc-header-root].header--hidden{
  opacity:0; transform:translate3d(0,-100%,0); pointer-events:none;
}
[data-cc-header-root].cc-glass-on{
  background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
          backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
[data-cc-header-root] .header{
  transform:translateZ(0) translateY(0) scale(1);
  transition:transform .26s cubic-bezier(.22,.61,.36,1), padding .26s cubic-bezier(.22,.61,.36,1);
  padding-block:14px;
}
[data-cc-header-root].is-shrunk .header{
  transform:translateY(-2px) scale(.965);
  padding-block:6px;
}
[data-cc-header-root] .header__heading-logo-wrapper{
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
[data-cc-header-root].is-shrunk .header__heading-logo-wrapper{
  transform:scale(.9);
}
/* Phones/tablets use hamburger; hide desktop mega */
@media (max-width: 989px){
  [data-cc-desktop-nav]{display:none!important;}
  .header__icon--menu{display:flex!important;}   /* hamburger button */
}

/* Desktop shows mega; hide hamburger/drawer trigger */
@media (min-width: 990px){
  .header__icon--menu,
  #menu-drawer,
  [data-cc-mobile-nav]{display:none!important;}
}
@media (max-width: 989px){
  [data-cc-desktop-only]{display:none!important;}
}
@media (min-width: 990px){
  [data-cc-mobile-only]{display:none!important;}
}









{%- comment -%} Boot the glass overlay before first paint {%- endcomment -%}
<script>document.documentElement.classList.add('cc-pt-boot');</script>