/** Shopify CDN: Minification failed

Line 67:63 Expected identifier but found whitespace
Line 411:75 Expected ":"

**/
/* ==========================================================================
   cirrus-header-overlay.css                                    [seq 20 — v3]
   Cirrus 3D Prints — dark instrument-panel skin for the NATIVE Heritage 4.1.4
   header and SHOP mega-menu.

   Supersedes seq 12, the seq 13 patch, and seq 16. REPLACE WHOLESALE.

   Layout: option 1a (category rail + featured-card band), per seq 14.

   ==========================================================================
   THE REAL DOM (seq 19 — verified from blocks/_header-menu.liquid and
   snippets/mega-menu-list.liquid). Everything below hangs off this:

     div.menu-list__submenu                 theme owns position + visibility
       div.menu-list__submenu-inner
         div.mega-menu.section
           div.mega-menu__grid              theme: display:grid, N columns
             ul.mega-menu__list             <-- the REAL inner grid (subgrid)
               li.mega-menu__column         <-- categories (x6), siblings...
                 div > a.mega-menu__link--parent > span.wrap-text
               span.mega-menu__content      <-- ...of THIS
                 ul.mega-menu__content-list--products
                   li.mega-menu__content-list-item
                     product-card-link.resource-card__wrapper
                       div.resource-card

   The two elements that broke every previous version: ul.mega-menu__list and
   span.mega-menu__content. My earlier files placed items as though they were
   direct children of .mega-menu__grid. They are not. All placement now happens
   on ul.mega-menu__list, which is the actual parent of both groups.

   ==========================================================================
   THREE RULES FOR ANYONE EDITING THIS FILE

   1. NEUTRALISE, DON'T FIGHT, THE SUBGRID.
      The theme gives .mega-menu__list `grid-template-columns:subgrid` and
      `grid-column:span var(--menu-columns-desktop)`. We override both: the
      list becomes its own 2-track grid spanning 1/-1. Leaving it as subgrid
      means our rail width is ignored in favour of the theme's N equal columns.

   2. PLACEMENT ORDER STILL MATTERS (the seq 13 lesson).
      span.mega-menu__content is given BOTH grid-column and grid-row, making it
      fully definite so it is placed before the auto-row category columns. Make
      either value auto and the cards will claim the rail track again.

   3. THE --span-N CLASSES MUST BE OVERRIDDEN.
      Columns carry .mega-menu__column--span-1/2/3/4 depending on child-link
      count, and the theme sets `grid-column: span N` from that. In a 2-track
      layout a span-2 category would swallow the card band. Our rule forces
      every column to `grid-column:1` and wins on specificity. Do not relax it.

   Row capacity is 10 min-content rows; unused rows collapse to zero, so 1-10
   categories need no edit. Past 10 the extras land below the card band —
   visibly wrong rather than broken, which is the failure mode I want.

   Appearance only. Does NOT touch position/top/z-index on the header or
   submenu, display/visibility/opacity/transform on [inert] submenus, the card
   lazy-load, --resource-card-aspect-ratio, or the secondary-image hover swap.

   Scoped under #header-group. Radius 0. No shadows.
   !important count: 4, each marked  /* !- */  with its reason.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

#header-group{
  --c3d-bg:#0A0C0E;
  --c3d-surface:#0F1215;
  --c3d-raised:#161A1D;
  --c3d-line:#23292E;
  --c3d-line-soft:rgba(35,41,46,.55);
  --c3d-line-strong:#3C444B;
  --c3d-text:#F2F4F5;
  --c3d-text-2:#B9BEC4;
  --c3d-body:#9BA2A9;
  --c3d-muted:#7E868E;
  --c3d-accent:#46C6D8;
  --c3d-accent-hi:#8AE3EF;
  --c3d-ink:#08171A;
  --c3d-warn:#C9A227;

  --c3d-fd:var(--font-heading--family, 'Saira', system-ui, sans-serif);
  --c3d-fb:var(--font-body--family, 'Barlow', system-ui, sans-serif);
  --c3d-fm:var(--font-accent--family, 'IBM Plex Mono', ui-monospace, monospace);

  --c3d-ease:cubic-bezier(.4,0,.2,1);

  --c3d-mm-rail:248px;      /* category rail width */
  --c3d-mm-row:48px;        /* minimum category row height */
  --c3d-mm-pad:24px;        /* panel vertical padding */
  --c3d-mm-gutter:40px;     /* rail-to-cards gutter */
  --c3d-mm-card-gap:20px;
  --c3d-mm-card-max:260px;  /* keeps 3 cards from sprawling on a wide viewport */
}

#header-group,
#header-group *,
#header-group *::before,
#header-group *::after{
  border-radius:0;
  box-shadow:none;
}


/* ==========================================================================
   2. HEADER SHELL
   ========================================================================== */

#header-group header.header{
  background:rgba(10,12,14,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #1C2126;
}

#header-group .header__row.header__navigation-bar-row{
  align-items:center;
}


/* ==========================================================================
   3. TOP NAV   (unchanged from seq 16 — verified working)
   ========================================================================== */

#header-group .header-menu__inner > ul.menu-list{
  display:flex;
  align-items:stretch;
  gap:clamp(18px, 2.2vw, 34px);
}

#header-group ul.menu-list > li.menu-list__list-item{
  display:flex;
  align-items:stretch;
}

#header-group .menu-list__trigger,
#header-group li.menu-list__list-item > a.menu-list__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:100%;
  border-bottom:2px solid transparent;
  transition:color .15s var(--c3d-ease), border-color .15s var(--c3d-ease);
}

#header-group .menu-list__link-title{
  font-family:var(--c3d-fd);
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c3d-text);
  white-space:nowrap;
  transition:color .15s var(--c3d-ease);
}

#header-group a.menu-list__link:hover .menu-list__link-title,
#header-group .menu-list__trigger:hover .menu-list__link-title{
  color:var(--c3d-accent);
}

#header-group a.menu-list__link--active .menu-list__link-title,
#header-group a.menu-list__link[aria-current="page"] .menu-list__link-title,
#header-group li.menu-list__list-item:has(.menu-list__link--active) > .menu-list__trigger .menu-list__link-title{
  color:var(--c3d-accent);
}
#header-group a.menu-list__link--active,
#header-group a.menu-list__link[aria-current="page"],
#header-group li.menu-list__list-item:has(.menu-list__link--active) > .menu-list__trigger{
  border-bottom-color:var(--c3d-accent);
}

#header-group button.menu-list__disclosure{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  min-height:20px;
  padding:0;
  background:none;
  border:0;
  color:var(--c3d-accent);
}
#header-group svg.menu-list__disclosure-icon{
  width:9px;
  height:9px;
  color:currentColor;
  transition:transform .18s var(--c3d-ease);
}
#header-group li.menu-list__list-item:hover svg.menu-list__disclosure-icon,
#header-group button.menu-list__disclosure[aria-expanded="true"] svg.menu-list__disclosure-icon{
  transform:rotate(180deg);
}

#header-group :focus-visible{
  outline:2px solid var(--c3d-accent);
  outline-offset:2px;
}


/* ==========================================================================
   4. DROPDOWN PANEL SURFACE
   ========================================================================== */

#header-group .menu-list__submenu{
  background:var(--c3d-surface);
  border-top:1px solid var(--c3d-line);
  border-bottom:1px solid var(--c3d-line);
}

#header-group .menu-list__submenu-inner{
  background:transparent;
  /* Theme writes inline --menu-* font vars here. Not fought — every rule below
     sets font properties directly on elements, so those vars go unused. */
}

#header-group .menu-list__submenu .mega-menu,
#header-group .menu-list__submenu .mega-menu.section{
  background:transparent;
  border:0;
}


/* ==========================================================================
   5. MEGA-MENU LAYOUT — 1a rail + band, placed on ul.mega-menu__list
   --------------------------------------------------------------------------
   Read the three rules in the file header before changing anything here.
   ========================================================================== */

/* 5a. The outer grid stops being a grid. It has exactly one child
   (ul.mega-menu__list); its N-column template is pure interference. */
#header-group .menu-list__submenu .mega-menu__grid{
  display:block;
  margin:0;
  padding:var(--c3d-mm-pad) 0;
  gap:0;
  list-style:none;
}

/* 5b. The real layout. Overrides subgrid + the theme's span. */
#header-group .menu-list__submenu ul.mega-menu__list{
  display:grid;
  grid-template-columns:var(--c3d-mm-rail) minmax(0, 1fr);
  grid-template-rows:repeat(10, min-content);
  grid-column:1 / -1;          /* cancels `span var(--menu-columns-desktop)` */
  column-gap:var(--c3d-mm-gutter);
  row-gap:0;
  align-items:stretch;
  margin:0;
  padding:0;
  list-style:none;
}

/* 5c. Categories: forced into track 1, overriding every --span-N variant. */
#header-group ul.mega-menu__list > li.mega-menu__column,
#header-group ul.mega-menu__list > li.mega-menu__column--span-1,
#header-group ul.mega-menu__list > li.mega-menu__column--span-2,
#header-group ul.mega-menu__list > li.mega-menu__column--span-3,
#header-group ul.mega-menu__list > li.mega-menu__column--span-4{
  grid-column:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:0;
  padding:0 var(--c3d-mm-gutter) 0 0;

  /* One border per row; row-gap is 0, so the stack reads as a single
     continuous hairline dividing rail from cards. */
  border-right:1px solid var(--c3d-line);
}
#header-group ul.mega-menu__list > li.mega-menu__column + li.mega-menu__column{
  border-top:1px solid var(--c3d-line-soft);
}

/* 5d. The card zone. FULLY DEFINITE — see rule 2 in the header. */
#header-group ul.mega-menu__list > span.mega-menu__content{
  grid-column:2;
  grid-row:1 / -1;
  display:block;
  align-self:start;
  min-width:0;
}

/* 5e. Card row. Overrides the theme's
   grid-template-columns:repeat(var(--menu-content-columns-desktop), …)
   so card count no longer changes the track math. */
#header-group span.mega-menu__content > ul.mega-menu__content-list{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  gap:var(--c3d-mm-card-gap);
  margin:0;
  padding:0;
  list-style:none;
}

#header-group ul.mega-menu__content-list > li.mega-menu__content-list-item{
  flex:1 1 0;
  min-width:0;
  max-width:var(--c3d-mm-card-max);
  margin:0;
  padding:0;
  list-style:none;
}

/* ---- category links ---- */
#header-group .mega-menu__link.mega-menu__link--parent{
  position:relative;
  display:flex;
  align-items:center;
  min-height:var(--c3d-mm-row);
  padding:10px 12px 10px 16px;
  font-family:var(--c3d-fb);
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
  text-transform:none;   /* sentence case — the top nav owns the shouty register */
  color:var(--c3d-text-2);
  transition:color .15s var(--c3d-ease), background-color .15s var(--c3d-ease);
}

#header-group .mega-menu__link.mega-menu__link--parent::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:2px;
  background:var(--c3d-accent);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .18s var(--c3d-ease);
}
#header-group .mega-menu__link.mega-menu__link--parent:hover{
  color:var(--c3d-text);
  background:rgba(70,198,216,.05);
}
#header-group .mega-menu__link.mega-menu__link--parent:hover::before{
  transform:scaleY(1);
}
#header-group .mega-menu__link.mega-menu__link--parent[aria-current="page"],
#header-group .mega-menu__link.mega-menu__link--parent.mega-menu__link--active{
  color:var(--c3d-accent);
}
#header-group .mega-menu__link.mega-menu__link--parent[aria-current="page"]::before,
#header-group .mega-menu__link.mega-menu__link--parent.mega-menu__link--active::before{
  transform:scaleY(1);
}

/* ---- third-level sub-links, if a category gains children ---- */
#header-group li.mega-menu__column > div > ul,
#header-group li.mega-menu__column > ul{
  margin:0 0 6px 0;
  padding:0 0 0 16px;
  list-style:none;
}
#header-group li.mega-menu__column li.menu-list__list-item{
  display:block;
}
#header-group li.mega-menu__column ul a.mega-menu__link{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 12px 6px 14px;
  border-left:1px solid var(--c3d-line);
  font-family:var(--c3d-fb);
  font-size:14px;
  color:var(--c3d-body);
  transition:color .15s var(--c3d-ease), border-color .15s var(--c3d-ease);
}
#header-group li.mega-menu__column ul a.mega-menu__link:hover{
  color:var(--c3d-accent);
  border-left-color:var(--c3d-accent);
}

#header-group .mega-menu__link .wrap-text{
  display:block;
}


/* ==========================================================================
   6. FEATURED PRODUCT CARDS   (unchanged from seq 16 — exact selectors)
   ========================================================================== */

#header-group li.mega-menu__content-list-item product-card-link,
#header-group li.mega-menu__content-list-item .resource-card__wrapper{
  display:block;
  height:100%;
}

#header-group li.mega-menu__content-list-item .resource-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--c3d-bg);
  border:1px solid var(--c3d-line);
  overflow:hidden;
  transition:border-color .15s var(--c3d-ease);
}
#header-group li.mega-menu__content-list-item .resource-card__wrapper:hover .resource-card,
#header-group li.mega-menu__content-list-item .resource-card:focus-within{T
  border-color:var(--c3d-accent);
}

#header-group li.mega-menu__content-list-item a.resource-card__link:focus-visible{
  outline:2px solid var(--c3d-accent);
  outline-offset:-2px;
}

#header-group li.mega-menu__content-list-item .resource-card__media{
  background:var(--c3d-raised);
  border-bottom:1px solid var(--c3d-line);
  overflow:hidden;
}
#header-group li.mega-menu__content-list-item img.resource-card__image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
}

#header-group li.mega-menu__content-list-item .resource-card__image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:var(--c3d-raised);
  font-family:var(--c3d-fm);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#4E565D;
  text-align:center;
}

#header-group li.mega-menu__content-list-item .resource-card__content{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px;
  background:var(--c3d-bg);
}

#header-group li.mega-menu__content-list-item p.resource-card__title,
#header-group li.mega-menu__content-list-item .resource-card__title.paragraph{
  margin:0;
  font-family:var(--c3d-fd);
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
  color:var(--c3d-text);
  transition:color .15s var(--c3d-ease);
}
#header-group li.mega-menu__content-list-item .resource-card__wrapper:hover p.resource-card__title{
  color:var(--c3d-accent);
}

#header-group li.mega-menu__content-list-item .price,
#header-group li.mega-menu__content-list-item .price__container,
#header-group li.mega-menu__content-list-item .price__regular{
  margin:0;
  padding:0;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
#header-group li.mega-menu__content-list-item .price-item--regular,
#header-group li.mega-menu__content-list-item .price-item--sale{
  font-family:var(--c3d-fd);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--c3d-text);
}
#header-group li.mega-menu__content-list-item .price-item--compare,
#header-group li.mega-menu__content-list-item .price s{
  font-family:var(--c3d-fm);
  font-size:12px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--c3d-muted);
  text-decoration:line-through;
}
#header-group li.mega-menu__content-list-item .price--on-sale .price-item--sale{
  color:var(--c3d-accent);
}
#header-group li.mega-menu__content-list-item [class*="badge"]{
  font-family:var(--c3d-fm);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
  background:var(--c3d-accent);
  color:var(--c3d-ink);
}


/* ==========================================================================
   7. PLAIN (non-mega) DROPDOWNS
   Detected by the ABSENCE of span.mega-menu__content — the wrapper is the
   reliable signal now that we know it exists.
   ========================================================================== */

#header-group .menu-list__submenu:not(:has(span.mega-menu__content)) ul.mega-menu__list{
  display:block;
  min-width:236px;
  grid-column:auto;
}
#header-group .menu-list__submenu:not(:has(span.mega-menu__content)) li.mega-menu__column{
  border:0;
  padding:0;
  display:block;
}
#header-group .menu-list__submenu:not(:has(span.mega-menu__content)) .mega-menu__link--parent{
  min-height:44px;
  padding:11px 20px;
}


/* ==========================================================================
   8. HEADER ACTIONS   (unchanged from seq 16)
   ========================================================================== */

#header-group .header-actions__action,
#header-group .account-button{
  color:var(--c3d-text);
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:color .15s var(--c3d-ease);
}
#header-group .header-actions__action:hover,
#header-group .account-button:hover{
  color:var(--c3d-accent);
}

#header-group a.header-actions__action.action__cart{
  color:var(--c3d-accent);
}
#header-group a.header-actions__action.action__cart:hover{
  color:var(--c3d-accent-hi);
}
#header-group .header-actions__cart-icon svg,
#header-group .header-actions__action svg,
#header-group .account-button svg{
  width:20px;
  height:20px;
  color:currentColor;
}

#header-group .header-actions__cart-count,
#header-group .cart-count,
#header-group [class*="cart-count"],
#header-group [class*="cart-bubble"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  background:var(--c3d-accent);
  color:var(--c3d-ink) !important;   /* !- 1 of 4: theme sets this inline */
  font-family:var(--c3d-fm);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
}

#header-group .localization-selector,
#header-group .dropdown-localization,
#header-group .localization-selector button,
#header-group .dropdown-localization button{
  font-family:var(--c3d-fm);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c3d-muted);
  background:transparent;
  border:1px solid var(--c3d-line);
  transition:border-color .15s var(--c3d-ease), color .15s var(--c3d-ease);
}
#header-group .localization-selector button:hover,
#header-group .dropdown-localization button:hover{
  color:var(--c3d-accent);
  border-color:var(--c3d-line-strong);
}
#header-group .dropdown-localization [role="listbox"],
#header-group .localization-selector [role="listbox"]{
  background:var(--c3d-surface);
  border:1px solid var(--c3d-line);
}
#header-group .dropdown-localization [role="option"],
#header-group .localization-selector [role="option"]{
  font-family:var(--c3d-fb);
  font-size:14px;
  color:var(--c3d-text-2);
  min-height:44px;
}
#header-group .dropdown-localization [role="option"]:hover,
#header-group .localization-selector [role="option"]:hover{
  background:var(--c3d-raised);
  color:var(--c3d-accent);
}

#header-group input[type="search"],
#header-group .search input{
  background:var(--c3d-bg) !important;   /* !- 2 of 4: theme sets a light inline bg */
  color:var(--c3d-text) !important;      /* !- 3 of 4: same inline rule */
  border:1px solid var(--c3d-line-strong);
  font-family:var(--c3d-fb);
  font-size:15px;
  min-height:44px;
}
#header-group input[type="search"]::placeholder{
  color:var(--c3d-muted);
}
#header-group input[type="search"]:focus{
  border-color:var(--c3d-accent);
  outline:none;
}


/* ==========================================================================
   9. MOBILE / DRAWER
   The grid-area reset is REQUIRED — without it the desktop placements fight
   the single-column layout.
   ========================================================================== */

#header-group .header__drawer,
#header-group [class*="menu-drawer"],
#header-group dialog[class*="drawer"]{
  background:var(--c3d-bg);
  border-right:1px solid var(--c3d-line);
}

#header-group [class*="menu-drawer"] a,
#header-group [class*="menu-drawer"] button{
  min-height:52px;
  font-family:var(--c3d-fd);
  font-size:17px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c3d-text);
  border-bottom:1px solid var(--c3d-line);
}
#header-group [class*="menu-drawer"] a:hover,
#header-group [class*="menu-drawer"] a[aria-current="page"]{
  color:var(--c3d-accent);
}
#header-group [class*="menu-drawer"] ul ul a{
  font-family:var(--c3d-fb);
  font-size:15px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--c3d-body);
  min-height:48px;
  padding-left:18px;
  border-left:1px solid var(--c3d-line);
  border-bottom:0;
}

#header-group .header__icon svg,
#header-group [class*="hamburger"] svg{
  color:var(--c3d-text);
  width:22px;
  height:22px;
}

@media (max-width:989px){
  #header-group{
    --c3d-mm-pad:20px;
    --c3d-mm-gutter:0px;
  }
  #header-group .menu-list__submenu ul.mega-menu__list{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
  }
  /* REQUIRED — clears the desktop placements */
  #header-group ul.mega-menu__list > li.mega-menu__column,
  #header-group ul.mega-menu__list > li.mega-menu__column--span-1,
  #header-group ul.mega-menu__list > li.mega-menu__column--span-2,
  #header-group ul.mega-menu__list > li.mega-menu__column--span-3,
  #header-group ul.mega-menu__list > li.mega-menu__column--span-4,
  #header-group ul.mega-menu__list > span.mega-menu__content{
    grid-area:auto;
  }
  #header-group ul.mega-menu__list > li.mega-menu__column{
    border-right:0;
    border-bottom:1px solid var(--c3d-line);
    padding-right:0;
  }
  #header-group ul.mega-menu__list > span.mega-menu__content{
    margin-top:14px;
  }
  #header-group span.mega-menu__content > ul.mega-menu__content-list{
    flex-wrap:wrap;
    gap:12px;
  }
  #header-group ul.mega-menu__content-list > li.mega-menu__content-list-item{
    flex:1 1 calc(50% - 6px);
    max-width:none;
  }
}


/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  #header-group *{
    transition-duration:.01ms !important;   /* !- 4 of 4: must beat theme rules */
  }
}

/* v3 deployed 20260815T140553Z */