/* =====================================================================
 * mouldshop-navbar.css — standalone Mouldshop navbar (utility bar +
 * header + mega-menu + universal drawer).
 *
 * Ported from the export kept in docs/. The upstream repository is a competitor and its
 * name is deliberately absent from shipped code; the ref it was cut at is recorded in
 * WORKLOG.md, which is where provenance belongs.
 * Composition (in cascade order — do not reorder):
 *   1. Token subset          — from assets/mouldshop-tokens.css
 *   2. Base shim             — the only assets/base.css rules the markup needs
 *   3. .page-width ladder    — assets/mouldshop-tokens.css (DEC-014), verbatim
 *   4. assets/mouldshop-header.css          — verbatim, whole file
 *   5. assets/mouldshop-universal-drawer.css — verbatim, whole file
 *
 * Nothing else from the theme is required. No @import, no external asset.
 * ===================================================================== */

/* =====================================================================
 * 1. TOKENS — the 20 custom properties this navbar consumes.
 * Values copied verbatim from assets/mouldshop-tokens.css.
 * ===================================================================== */
:root {
  /* Typography */
  --default-font-family: "Titillium Web", sans-serif;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-12: 0.75rem;  /* 12px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem;  /* 20px */
  --line-height-base: 1.2;

  /* Neutrals */
  --color-white: oklch(1 0 0);

  /* Brand — navy ramp */
  --color-nicknavyblue-20: oklch(0.8621 0.0153 260.73);
  --color-nicknavyblue-40: oklch(0.7194 0.0335 261.71);
  --color-nicknavyblue-60: oklch(0.5677 0.0537 262.9);
  --color-nicknavyblue-80: oklch(0.4114 0.078 262.11);
  --color-nicknavyblue-100: oklch(0.2509 0.1033 260.18);

  /* Brand — yellow ramp */
  --color-nickyellow-60: oklch(0.9226 0.141 97.61);
  --color-nickyellow-80: oklch(0.9006 0.1682 96.33);
  --color-nickyellow-100: oklch(0.883 0.179861 94.332);

  /* Brand — grey ramp */
  --color-nickgrey-5: oklch(0.9843 0.0011 197.14);
  --color-nickgrey-100: oklch(0.6837 0.0154 238.12);

  /* Spacing — 8px scale */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;

  /* Container */
  --page-width: 1200px;        /* base var; the body page-width-* class overrides it */
  --narrow-page-width: 75rem;  /* 1200px — the store's settings.page_width = "narrow" */
}

/* =====================================================================
 * 2. BASE SHIM — the ONLY rules this markup needs out of Horizon's
 * assets/base.css. Extracted, not rewritten; each is annotated with its
 * source line. `--icon-size-*` and `--font-paragraph--*` come from
 * Horizon's generated theme-styles-variables and are pinned here to the
 * values measured on the live render (1440 viewport).
 * ===================================================================== */
:root {
  --icon-size-sm: 1.25rem;   /* measured: theme-styles-variables */
  --icon-size-xs: 0.85rem;
  --icon-size-2xs: 0.6rem;
  --icon-stroke-width: 1.5px;
  --font-paragraph--family: "Titillium Web", sans-serif;
  --font-paragraph--style: normal;
  --font-paragraph--size: 0.875rem;      /* 14px */
  --font-paragraph--line-height: 1.6;    /* -> 22.4px; the logo box depends on it */
  --font-paragraph--weight: 400;
  --font-paragraph--case: none;

  /* Heading metrics — the navbar renders an <h3> (column header) and an <h4>
     (items panel title). mouldshop-header.css overrides their size/weight, but
     NOT their line-height, so these two must be present or both headers grow
     (h3 13.2px -> 19.2px, h4 18px -> 28.8px) and push the dropdown 18px taller. */
  --font-h3--family: "Titillium Web", sans-serif;
  --font-h3--style: normal;
  --font-h3--weight: 700;
  --font-h3--size: 2.0rem;
  --font-h3--line-height: 1.1;
  --font-h3--letter-spacing: 0em;
  --font-h3--case: none;

  --font-h4--family: "Titillium Web", sans-serif;
  --font-h4--style: normal;
  --font-h4--weight: 700;
  --font-h4--size: 1.5rem;
  --font-h4--line-height: 1;
  --font-h4--letter-spacing: 0em;
  --font-h4--case: none;
  --color-foreground: rgb(0 0 0 / 0.81);
  --color-background: rgb(255 255 255 / 1);
}

* {                                    /* base.css:1 */
  box-sizing: border-box;
}

/* LOAD-BEARING element reset. `svg { display: block }` is what makes the logo
   box exactly 50px tall. Without it the inline SVG sits on a text baseline and
   the wrapper grows by the font's descender (~6.4px), pushing the logo off
   centre in the 100px header row. */
img,                                   /* base.css:39 */
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {                                  /* base.css:48 */
  width: 100%;
  height: auto;
}

body {                                 /* base.css:5 */
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

body {                                 /* base.css:714 (body typography) */
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* LOAD-BEARING. The column header <h3> is the only child of its wrapper, so
   both of these hit it and zero the UA default heading margin. Without them the
   h3 keeps `margin: 12px 0` and every subcategory column renders 12px taller,
   which propagates to the whole dropdown. */
:first-child:is(p, h1, h2, h3, h4, h5, h6),         /* base.css:214 */
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:last-child:is(p, h1, h2, h3, h4, h5, h6),          /* base.css:220 */
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

h3 {                                   /* base.css:786 */
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color, var(--font-h3-color));
}

h4 {                                   /* base.css:808 */
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color, var(--font-h4-color));
}

/* LOAD-BEARING — do not drop. From Horizon's sections/header.liquid:415, whose
   {% stylesheet %} block Shopify concatenates into the theme-wide bundle. It
   applies to this markup because the element carries `class="header ..."`, even
   though that section is never rendered by any Mouldshop template — so it is
   invisible in the section file and easy to lose on a copy-out.
   `contain: layout style` establishes a CONTAINING BLOCK for `position: fixed`
   descendants. Two things depend on that:
     - .mega-menu-overlay  (`top: var(--mouldshop-header-total)`) is positioned
       relative to the HEADER, not the viewport. Remove this and the overlay
       renders 44px too high (the utility-bar height).
     - .mouldshop-search.is-modal-open .mouldshop-search__form uses `top: 0`
       instead of live's `top: 44px` for exactly this reason — see the comment
       at mouldshop-navbar.css's mobile-search block. */
.header {                              /* sections/header.liquid:415 */
  --header-padding: var(--padding-sm);
  --font-paragraph--line-height: 1;
  --header-content-transition-timing: 0s;

  display: block;
  contain: layout style;
  background: transparent;

  a,
  .button,
  .button-secondary,
  .header-actions__action {
    /* reset style from base.css */
    transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
  }
}

.visually-hidden:not(:focus, :active) { /* base.css:507 */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.list-unstyled {                       /* base.css:589 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.svg-wrapper {                         /* base.css:658 */
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper > svg {                   /* base.css:678 */
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.button-unstyled {                     /* base.css:1381 */
  display: block;
  padding: 0;
  background-color: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {               /* base.css:1395 */
  background-color: inherit;
}

/* Page width & margin variables — base.css:325-365, VERBATIM. The <body> class
   selects which one applies; this store ships settings.page_width = "narrow",
   so `<body class="page-width-narrow">` is what the theme renders and what
   index.html carries. Resolves to max-width 1232px (<750) / 1280px (>=750) —
   which the ladder below then overrides at >=1200. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* =====================================================================
 * 3. `.page-width` LADDER — assets/mouldshop-tokens.css:426-483, VERBATIM.
 * Dawn responsive ladder (DEC-014): 1200 base / 1100 @>=1200 / 1280 @>=1400.
 * The utility-bar grid and the header logo/nav row both ride this.
 * ===================================================================== */
.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  /* Live's rule is `padding: 0 1.5rem`, but live resolves rem against Dawn's
     62.5%/10px base -> 15px. Copying the rem verbatim onto Horizon's 16px base
     rendered a 24px gutter (1.6x too wide) on every .page-width surface at
     <=749. Ported to px to preserve the true size, per the same rule the hero
     and card CSS already follow. */
  padding: 0 15px;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0;
  }
}

/* Tablet band 750–1199: the viewport is narrower than the 1200 max-width, so the
   centring gutter hasn't kicked in yet, and .page-width's desktop padding is 0 —
   content would run edge-to-edge. Add a 50px side gutter so content aligns with
   the header logo (which carries a 50px left gutter in this same band). Live is
   flush here (its own .page-width is padding:0 at ≥750); this is a Remi-directed
   tablet-gutter add — tracked as a divergence. The header keeps its own gutter
   (logo padding / flush icons); the utility bar is right-aligned so its own
   padding-right:25px still wins. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .page-width {
    padding-left: 50px;
    padding-right: 50px;
  }

  .mouldshop-header.page-width {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 749px) {
  .mobile-no-side-padding.page-width,
  .mobile-no-side-padding .page-width {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 1200px) {
  .page-width,
  .page-width-desktop {
    max-width: 1100px;
  }
}

@media screen and (min-width: 1400px) {
  .page-width,
  .page-width-desktop {
    max-width: 1280px;
  }
}

/* =====================================================================
 * 4. assets/mouldshop-header.css — VERBATIM, whole file.
 * Utility bar + header shell + sticky + action cluster + responsive
 * + mega-menu (dropdown, columns, right rail, mobile slide, overlay)
 * + inline header search.
 * ===================================================================== */
/*
 * mouldshop-header.css — global chrome (M3). Packet 1: utility bar + header shell.
 * Ported from the live store; all colours reference mouldshop-tokens.css.
 * NOTE: reference used a 10px rem base (Dawn 62.5%); Horizon uses a 16px base,
 * so reference rem values are ported here as px to preserve true sizes.
 * Two off-grid brand constants are named below.
 * Mega-menu dropdown / mobile drawer (packet 2) and footer (packet 3) not here.
 */

:root {
  --mouldshop-action-size: 100px;       /* square icon-button module (off 8px grid, intentional) */
  --mouldshop-utility-bar-height: 44px; /* utility bar height (off 8px grid, intentional) */
}

/* ============================ Utility bar ============================ */
.mouldshop-utility-bar {
  background: var(--color-nicknavyblue-100);
  color: var(--color-nickgrey-5);
  font-size: var(--font-size-12);
  line-height: var(--line-height-base);
  height: var(--mouldshop-utility-bar-height);
}

/* The ladder (DEC-014: 1100 @>=1200 / 1280 @>=1400) is carried HERE, on the
   inner logo/icons row — never on the <header> element. The mega-menu dropdown
   is absolutely positioned and is a SIBLING of .header__nav, so it stays
   full-bleed while this row rides the ladder. This matches live Dawn: at a 1492
   viewport Dawn insets the logo to ~106px ((1492-1280)/2) and runs the panel
   0->1492. Putting `page-width` on <header> instead clamped the panel — see
   2d8b6ad. `padding: 0` below is safe: `.page-width` padding is already 0 at
   >=750, and the <1200 logo gutters come from `.header__heading-link`. */
.mouldshop-header .header__menu {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Dawn: utility bar carries 25px right padding on tablet-and-down. */
@media screen and (max-width: 1199px) {
  .mouldshop-utility-bar__grid {
    padding-right: 25px;
  }
}

/* Dawn: logo (heading-link) left padding — 15px tablet/down, 50px on the 750-1199 band. */
@media screen and (max-width: 1199px) {
  .mouldshop-header .header__heading-link {
    padding-left: 15px;
  }
}

@media screen and (min-width: 750px) and (max-width: 1199px) {
  .mouldshop-header .header__heading-link {
    padding-left: 50px;
  }
}

.mouldshop-utility-bar__grid {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mouldshop-utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-16);
  height: 100%;
  align-items: center;
  padding: 0 var(--spacing-8);
}

.mouldshop-utility-bar__item,
.mouldshop-utility-bar__item a {
  color: inherit;
  text-decoration: none;
}

.mouldshop-utility-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mouldshop-utility-bar__email-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.mouldshop-utility-bar__item--hours {
  color: var(--color-nickyellow-100);
}

.mouldshop-utility-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.mouldshop-utility-bar .svg-wrapper {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-nicknavyblue-60);
}

.mouldshop-utility-bar__icon .svg-wrapper {
  color: var(--color-white);
}

.mouldshop-utility-bar__email-link .svg-wrapper {
  color: var(--color-nicknavyblue-60);
}

.mouldshop-utility-bar__icon[data-favorites-trigger] .svg-wrapper {
  color: var(--color-nickyellow-100);
}

.mouldshop-utility-bar__icon[data-favorites-trigger]:hover .svg-wrapper,
.mouldshop-utility-bar__icon[data-favorites-trigger]:focus .svg-wrapper,
.mouldshop-utility-bar__icon[data-favorites-trigger]:focus-visible .svg-wrapper {
  color: var(--color-white);
}

.mouldshop-utility-bar__item a:hover,
.mouldshop-utility-bar__item a:focus {
  text-decoration: underline;
}

/* ============================ Header bar ============================ */
.fill-nicknavyblue {
  fill: var(--color-nicknavyblue-100);
}

.mouldshop-header-wrapper {
  position: relative;
  z-index: 260;
  background: var(--color-nickyellow-100);
}

/* Inner keeps only the sticky box-shadow; stickiness lives on the SECTION wrapper. */
.mouldshop-header-wrapper--sticky {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Sticky header — Dawn model (replicated, not simplified).
   The header is NOT sticky while scrolling down — it scrolls away with the page.
   It becomes sticky only on scroll-up (reveal). Flatten #header-group with
   display:contents so that when sticky IS applied, the section wrapper's
   containing block is <body> (Horizon's #header-group would otherwise confine it).
   <mouldshop-sticky-header> adds/removes these classes. */
#header-group {
  display: contents;
}

.section-header.mouldshop-header-sticky {
  position: sticky;
  top: 0;
  z-index: 260;
}

/* Matches live exactly: instant hide (top: -height), animated reveal (top 0.15s ease-out). */
.section-header.mouldshop-header-hidden {
  top: calc(-1 * var(--mouldshop-header-height, 200px));
}

.section-header.mouldshop-header-animate {
  transition: top 0.15s ease-out;
}

.mouldshop-header {
  display: flex;
  width: 100%;
  min-height: var(--mouldshop-action-size);
  background: transparent;
}

.mouldshop-header .header__nav {
  display: flex;
  align-items: center;
  width: 100%;
}

.mouldshop-header .header__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mouldshop-header .header__heading-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-nicknavyblue-100);
  text-decoration: none;
}

.mouldshop-header .header__heading-logo-wrapper {
  display: flex;
  align-items: center;
}

.mouldshop-logo__mobile {
  display: none;
}

/* ===== Right action cluster: search · menu · cart (flush right) ===== */
.mouldshop-header .header__icons,
.mouldshop-header-actions {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  gap: 0;
}

.mouldshop-search__toggle,
.mouldshop-menu-btn,
.mouldshop-cart-btn {
  width: var(--mouldshop-action-size);
  height: var(--mouldshop-action-size);
  min-width: var(--mouldshop-action-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-nicknavyblue-100);
  transition: background 0.2s ease, color 0.2s ease;
}

.mouldshop-search__toggle {
  background: transparent;
}

.mouldshop-menu-btn {
  background: var(--color-nickyellow-60);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-20);
}

.mouldshop-cart-btn {
  position: relative;
  background: var(--color-white);
}

.mouldshop-search__toggle:hover,
.mouldshop-menu-btn:hover,
.mouldshop-menu-btn.is-active,
.mouldshop-menu-btn[aria-expanded='true'],
.mouldshop-cart-btn:hover {
  background: var(--color-nicknavyblue-60);
  color: var(--color-white);
}

.mouldshop-search__toggle svg,
.mouldshop-menu-btn svg,
.mouldshop-cart-btn svg {
  width: var(--spacing-32);
  height: var(--spacing-32);
  display: block;
}

.mouldshop-search__toggle .svg-wrapper,
.mouldshop-cart-btn .svg-wrapper {
  width: var(--spacing-32);
  height: var(--spacing-32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cart count bubble */
#cart-icon-bubble .cart-count-bubble {
  position: absolute;
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-nickyellow-100);
  color: var(--color-nicknavyblue-100);
  height: 25px;
  width: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 13.5px;
}

/* ============================ Responsive ============================ */
/* Hide opening hours on narrow viewports (matches live) */
@media screen and (max-width: 989px) {
  .mouldshop-utility-bar__item--hours {
    display: none;
  }
}

/* Mobile (Dawn): utility bar keeps a 15px gutter; header goes full-bleed.
   Signet replaces wordmark; email text hidden. */
@media screen and (max-width: 749px) {
  .mouldshop-utility-bar__grid {
    padding: 0 15px;
  }

  .mouldshop-header .header__menu {
    padding: 0;
  }

  /* Header goes full-bleed on mobile — strip the `.page-width` <=749 gutter
     (matches live `.mouldshop-header.header.page-width { padding: 0 }`). */
  .mouldshop-header.page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .mouldshop-logo__desktop {
    display: none;
  }

  .mouldshop-logo__mobile {
    display: inline-flex;
  }

  .mouldshop-utility-bar__email-text {
    display: none;
  }

  .mouldshop-utility-bar__email-link .svg-wrapper {
    color: var(--color-white);
  }
}

/* ====================================================================
   Mega-menu (packet 2) — dropdown + mobile slide. Tokenized port.
   ==================================================================== */
:root {
  --mouldshop-header-total: calc(var(--mouldshop-utility-bar-height) + var(--mouldshop-action-size)); /* 144px */
  --mouldshop-mega-border: color-mix(in oklab, var(--color-nicknavyblue-60) 50%, transparent);
}

.mouldshop-mega-menu {
  display: block;
  position: relative;
  width: 100%;
}

/* Dropdown shell + reveal transition */
#megaMenu .mega-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-nicknavyblue-100);
  border-bottom: 1px solid var(--color-nicknavyblue-60);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
}

#megaMenu .mega-menu-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#megaMenu .mega-menu__container {
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

#megaMenu .mega-menu__columns {
  display: flex;
  min-height: 380px;
}

/* Level-2 / level-3 subcategory columns */
#megaMenu .mega-menu__subcategories {
  width: 256px;
  background: color-mix(in oklab, var(--color-nicknavyblue-80) 50%, transparent);
  border-right: 1px solid var(--mouldshop-mega-border);
  padding: var(--spacing-24) 0;
}

#megaMenu .mega-menu__subcategories-header {
  padding: 0 var(--spacing-24);
  margin-bottom: var(--spacing-16);
}

#megaMenu .mega-menu__subcategories .category-title,
#megaMenu .mega-menu__subcategories .subcategory-title {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-nickgrey-100);
}

#megaMenu .subcategories-list,
#megaMenu .subcategories-list-level3 {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: grid;
  gap: 4px;
}

#megaMenu .subcategory-btn {
  width: 100%;
  min-height: var(--mouldshop-utility-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--spacing-16);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-nicknavyblue-20);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
}

#megaMenu .subcategory-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#megaMenu .subcategory-btn:hover {
  background: var(--mouldshop-mega-border);
  color: var(--color-white);
}

#megaMenu .subcategory-btn.is-active {
  background: color-mix(in oklab, var(--color-nickyellow-100) 10%, transparent);
  color: var(--color-nickyellow-100);
}

#megaMenu .subcategory-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

#megaMenu .subcategory-btn.is-active .subcategory-chevron {
  transform: translateX(4px);
}

#megaMenu .mega-menu__subcategories--level3.is-hidden {
  display: none;
}

/* Items panel */
#megaMenu .mega-menu__items {
  flex: 1;
  padding: var(--spacing-24) var(--spacing-32);
}

#megaMenu .mega-menu__items-header {
  margin-bottom: var(--spacing-24);
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--mouldshop-mega-border);
}

#megaMenu .mega-menu__items-title {
  color: var(--color-white);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

#megaMenu .mega-menu__items-subtitle {
  color: var(--color-nickgrey-100);
  font-size: 14px;
  margin: 4px 0 0;
}

#megaMenu .mega-menu__items-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16) var(--spacing-32);
}

@media screen and (min-width: 990px) {
  #megaMenu .mega-menu__items-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#megaMenu .item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-8) 0;
  color: var(--color-nicknavyblue-20);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease;
}

#megaMenu .item-link.active,
#megaMenu .mega-menu__subcategories--level3 .item-link,
#megaMenu .mega-menu__main-menu .item-link {
  opacity: 1;
  transform: none;
}

#megaMenu .mega-menu__subcategories--level3 .item-link {
  width: 100%;
  min-height: var(--mouldshop-utility-bar-height);
  padding: 12px var(--spacing-16);
}

#megaMenu .item-link:hover {
  color: var(--color-nickyellow-100);
}

#megaMenu .mega-menu__item-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-nicknavyblue-60);
  transition: background 0.2s ease;
  flex: 0 0 auto;
}

#megaMenu .item-link:hover .mega-menu__item-dot,
#megaMenu .mega-menu__mobile-link:hover .mega-menu__item-dot {
  background: var(--color-nickyellow-100);
}

#megaMenu .mega-menu__viewall {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--mouldshop-mega-border);
}

#megaMenu .mega-menu__viewall-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-nickyellow-100);
  text-decoration: none;
  transition: color 0.2s ease;
}

#megaMenu .mega-menu__viewall-link:hover {
  color: var(--color-nickyellow-80);
}

#megaMenu .mega-menu__viewall-icon {
  width: 16px;
  height: 16px;
}

/* Right rail (pages menu) */
#megaMenu .mega-menu__featured {
  width: 320px;
  background: var(--color-nicknavyblue-80);
  border-left: 1px solid var(--mouldshop-mega-border);
  padding: var(--spacing-24);
}

#megaMenu .mega-menu__featured-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#megaMenu .mega-menu__featured-label {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-nickyellow-100);
  margin-bottom: 12px;
}

#megaMenu .mega-menu__main-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

#megaMenu .mega-menu__main-menu .item-link {
  width: 100%;
  padding: 2px 0;
}

#megaMenu .mega-menu__main-footer {
  margin-top: auto;
  padding: 12px var(--spacing-16) 0;
}

#megaMenu .mega-menu__main-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  text-decoration: none;
}

#megaMenu .mega-menu__main-linkedin svg {
  width: 48px;
  height: 48px;
  display: block;
}

/* Items reveal transition */
#megaMenu .subcategory-content {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

#megaMenu .subcategory-content.active {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile slide panels */
#megaMenu .mega-menu__mobile {
  display: none;
}

#megaMenu .mega-menu__mobile-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--mouldshop-mega-border);
  color: var(--color-white);
}

#megaMenu .mega-menu__mobile-back {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  color: var(--color-nickyellow-100);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-16) 20px;
  cursor: pointer;
}

#megaMenu .mega-menu__mobile-back-label {
  color: var(--color-nickyellow-100);
}

#megaMenu .mega-menu__mobile-title {
  margin-left: auto;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-nickgrey-100);
}

#megaMenu .mega-menu__mobile-panels {
  display: flex;
  width: 100%;
  transition: transform 0.35s ease;
}

#megaMenu .mega-menu__mobile-panel {
  width: 100%;
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
}

#megaMenu .mega-menu__mobile-list {
  list-style: none;
  margin: 0;
  padding: 12px var(--spacing-16) 20px;
  display: grid;
  gap: 6px;
}

#megaMenu .mega-menu__mobile-button {
  width: 100%;
  min-height: var(--mouldshop-utility-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--spacing-16);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-nicknavyblue-20);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
}

#megaMenu .mega-menu__mobile-button:hover {
  background: var(--mouldshop-mega-border);
  color: var(--color-white);
}

#megaMenu .mega-menu__mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px var(--spacing-16);
  color: var(--color-nicknavyblue-20);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

#megaMenu .mega-menu__mobile-link:hover {
  color: var(--color-nickyellow-100);
}

#megaMenu .mega-menu__mobile-chevron {
  width: 16px;
  height: 16px;
}

/* Overlay scrim */
#megaMenu .mega-menu-overlay {
  position: fixed;
  top: var(--mouldshop-header-total);
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--mouldshop-header-total));
  z-index: 290;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
  background-color: rgba(0, 0, 0, 0.4);
}

#megaMenu .mega-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile: columns -> full-screen slide */
@media screen and (max-width: 989px) {
  #megaMenu .mega-menu-dropdown,
  #megaMenu .mega-menu__container {
    height: calc(100vh - var(--mouldshop-header-total));
  }

  #megaMenu .mega-menu__columns {
    display: none;
  }

  #megaMenu .mega-menu__mobile {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--mouldshop-header-total));
    height: calc(100vh - var(--mouldshop-header-total));
    overflow-x: hidden;
  }

  #megaMenu .mega-menu__mobile-panels {
    flex: 1;
    height: 100%;
  }
}

/* ── Inline header search (TASK-0012 v2) — ported from live mouldshop-search,
   native predictive engine. All selectors scoped under .mouldshop-search* —
   additive only, no page-wide selectors. ───────────────────────────────────── */
.mouldshop-search {
  position: relative;
  z-index: 96;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-nickyellow-100); /* search sits on yellow, like live */
}

.mouldshop-search__form {
  display: flex;
  align-items: center;
  position: relative;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(15px);
  transition: width 0.6s cubic-bezier(0.791, 0.005, 0.134, 0.999),
    opacity 0.6s cubic-bezier(0.791, 0.005, 0.134, 0.999),
    transform 0.6s cubic-bezier(0.791, 0.005, 0.134, 0.999);
  overflow: visible;
}

.mouldshop-search.is-open .mouldshop-search__form {
  position: relative;
  z-index: 96;
  width: 450px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Specificity (0,2,0) deliberately beats base.css `input:not([type=checkbox],[type=radio])`
   (0,1,1) which otherwise forces a white field background + input border. */
.mouldshop-search .mouldshop-search__input {
  width: 100%;
  height: 40px;
  border: 0;
  border-bottom: 1px solid var(--color-white, #fff); /* white underline on yellow (live) */
  background: transparent;
  color: var(--color-nicknavyblue-100);
  /* Live: 1.6rem @ Dawn's 62.5%/10px base = 16px. Ported to px — as rem here it
     resolves against Horizon's 16px base (1.4rem rendered 22.4px, ~40% oversized). */
  font-size: 16px;
  outline: none;
  box-shadow: none;
  padding-right: 0;
  margin-right: 15px;
}

.mouldshop-search .mouldshop-search__input::placeholder {
  color: var(--color-nicknavyblue-100);
  opacity: 1;
}

.mouldshop-search .mouldshop-search__input:focus,
.mouldshop-search .mouldshop-search__input:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* Search backdrop — ported from live (mouldshop-header.css:675). The markup
   renders `.mouldshop-search__overlay` and mouldshop-search.js binds a click
   handler to it, but the CSS was never ported: without `position: fixed` the div
   stayed in flow as a flex child of `.mouldshop-search`, and the scrim never
   rendered. top:144px = the 44px utility bar + the 100px header. Live hides it
   outright in the mobile modal state. */
.mouldshop-search__overlay {
  display: none;
  position: fixed;
  top: 144px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 95;
}

body.mouldshop-drawer-open .mouldshop-search.is-open .mouldshop-search__overlay {
  display: block;
}

.mouldshop-search.is-modal-open .mouldshop-search__overlay {
  display: none;
}

.mouldshop-search__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100%;
  border: 0;
  background: var(--color-nickyellow-100);
  color: var(--color-nicknavyblue-100);
  cursor: pointer;
  flex-shrink: 0;
}

/* Results LIST (ported 1:1 from live) — injected by mouldshop-search.js into
   #algolia-results-drawer (Universal Drawer). Small image + title + price rows. */
.algolia-results__list {
  list-style: none;
  margin: 0;
  padding: 0.8rem 0;
}

.algolia-result {
  border-bottom: 1px solid var(--color-nicknavyblue-40, rgba(11, 29, 58, 0.4));
  padding: 0 10px;
}

.algolia-result:last-child {
  border-bottom: 0;
}

.algolia-result__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--color-nicknavyblue-100);
  transition: transform 0.2s ease;
}

.algolia-result__link:hover {
  transform: scale(1.02);
}

.algolia-result__image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 0;
  flex: 0 0 auto;
}

.algolia-result__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.algolia-result__title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.algolia-result__price {
  font-size: 1.2rem;
  color: var(--color-nicknavyblue-60);
}

.algolia-results__empty {
  padding: 1rem;
  font-size: 1.3rem;
  color: var(--color-nicknavyblue-60);
}

@media screen and (max-width: 989px) {
  .mouldshop-search__form {
    display: none;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mouldshop-search.is-modal-open .mouldshop-search__form {
    display: flex;
    align-items: center;
    position: fixed;
    /* ROOT CAUSE (confirmed via CDP ancestor walk 2026-07-18): `.mouldshop-header`
       carries `contain: layout style`, and `contain: layout` establishes a
       containing block for `position: fixed` descendants. So this form is fixed
       relative to the HEADER, not the viewport. The header sits at y=44 (below the
       44px utility bar), so `top: 0` puts the bar flush under the utility bar —
       exactly where live's `top: 44px` (viewport-relative) lands it. Live's 44px
       would double-count here. `top: 0` is also MORE robust than live: because the
       form tracks the header, on sticky-reveal it follows the header to y=0 instead
       of being stranded 44px down. Smoked at top (form=header=44) and sticky
       (form=header=0), both aligned. Supersedes the "cause unknown" QUESTIONS flag. */
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 1301;
    /* Live paints the modal bar WHITE (mouldshop-header.css:621) — not yellow.
       The close button is itself a 100px yellow block, so a yellow bar swallowed
       it and rendered a yellow slab with a bare X instead of live's white bar +
       yellow close. */
    background: var(--color-white);
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    max-height: calc(100vh - 44px);
    overflow: auto;
  }

  /* Live drops the input underline in the modal (mouldshop-header.css:668).
     Placed after the base rule at equal specificity, so no !important needed. */
  .mouldshop-search .mouldshop-search__input {
    border-bottom: none;
    width: 100%;
  }

  .mouldshop-search.is-modal-open .mouldshop-search__input {
    height: 100%;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .mouldshop-search.is-modal-open .mouldshop-search__close {
    display: inline-flex;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }

  .mouldshop-search.is-modal-open .mouldshop-search__close svg {
    width: 32px;
    height: 32px;
    display: block;
  }
}

/* =====================================================================
 * 5. assets/mouldshop-universal-drawer.css — VERBATIM, whole file.
 * ===================================================================== */
.mouldshop-universal-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.mouldshop-universal-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.mouldshop-universal-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  /* True-size port: live's 50rem / 3rem render at its 10px rem base (= 500 / 30px).
     Ours is a 16px base, so verbatim rem = 1.6x (800px) and the search drawer no
     longer matches live's — or the cart drawer's — 500px right panel. Ported as px. */
  width: 500px;
  max-width: calc(100vw - 30px);
  /* Full height to match the cart drawer (Remi: drawers must be identical).
     Divergence from live, where search sits below the header (top:168). */
  height: 100dvh;
  background: var(--color-white);
  transform: translateY(24px);
  opacity: 0;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
  display: flex;
  flex-direction: column;
}

.mouldshop-universal-drawer.is-open {
  pointer-events: auto;
}

.mouldshop-universal-drawer.is-open .mouldshop-universal-drawer__overlay {
  opacity: 1;
}

.mouldshop-universal-drawer.is-open .mouldshop-universal-drawer__panel {
  transform: translateY(0);
  opacity: 1;
}

.mouldshop-universal-drawer__content {
  flex: 1;
  overflow: auto;
  /* rem-base port: live's 2rem @10px = 20px; verbatim rem = 32px on our 16px base. */
  padding: 20px;
}

.mouldshop-universal-drawer__section {
  display: none;
}

.mouldshop-universal-drawer__section.is-active {
  display: block;
}

.mouldshop-universal-drawer__search-results .algolia-results {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  transform: none;
  box-shadow: none;
  z-index: 1;
}

.mouldshop-universal-drawer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mouldshop-universal-drawer__menu > li + li {
  margin-top: 12px;
}

.mouldshop-universal-drawer__menu a {
  color: var(--color-nicknavyblue-100);
  text-decoration: none;
}

.mouldshop-universal-drawer__menu ul {
  list-style: none;
  padding: 6px 0 2px 12px;
  margin: 0;
}

.mouldshop-universal-drawer__products .drawer-products__section + .drawer-products__section {
  margin-top: 16px;
}

.mouldshop-universal-drawer__products h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-nicknavyblue-100);
}

.mouldshop-universal-drawer__products ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mouldshop-universal-drawer__products li + li {
  margin-top: 6px;
}

/* Disable Dawn standalone cart drawer outside collection pages; collection uses it directly. */
body:not(.template-collection):not(.mouldshop-collection-context) > cart-drawer.drawer {
  display: none !important;
}

/* Collection: standalone cart drawer should fade-up instead of side-slide. */
body.mouldshop-collection-context > cart-drawer.drawer .drawer__inner {
  transform: translateY(24px);
  opacity: 0;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
}

body.mouldshop-collection-context > cart-drawer.drawer.active .drawer__inner {
  transform: translateY(0);
  opacity: 1;
}

body.mouldshop-drawer-open {
  overflow: hidden;
}

@media screen and (max-width: 989px) {
  .mouldshop-universal-drawer__panel {
    width: 100vw;
    max-width: 100vw;
    top: 0;
    height: 100dvh;
  }
}