/** Shopify CDN: Minification failed

Line 375:34 Unexpected "`"
Line 375:79 Unterminated string token

**/
/*
 * diip brand layer — refinements on top of Dawn base.css.
 * Monochrome palette + one accent lives in the theme color schemes;
 * this file handles typography detail, spacing rhythm, and motion.
 */

/* Hide the native scrollbar site-wide (scrolling still works; Lenis drives it).
   Also removes the scrollbar width as a variable in the hero-logo centring. */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* A hint tighter than the browser default (normal/0), site-wide. Headings,
   buttons and the nav each set their own tracking already and aren't
   affected by this; this is specifically for reading text — paragraphs,
   descriptions, list items — that would otherwise inherit the browser's
   default spacing untouched. */
body {
  letter-spacing: -0.01em;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

/* Lenis smooth scroll (see snippets/smooth-scroll). */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

:root {
  --diip-accent: #2b3ad0;
  /* Same colour as components, for rules that tint with it at low alpha —
     rgba() can't take a hex, so a var holding one is unusable there. Keep the
     two in step; they are the same colour written twice because CSS has no way
     to derive one from the other. */
  --diip-accent-rgb: 43, 58, 208;

  /* ---- Motion --------------------------------------------------------- */
  /* One curve and three durations. Restrained on purpose, like the type
     scale: anything reaching for a fourth speed is usually miscategorised.
       fast  responses under the pointer — hover, press, pill toggle
       base  a change you should notice — fade, accordion, CTA reveal
       slow  a deliberate move — scroll reveal, panel transition
     Always pair with --diip-ease; the raw curve should not appear in rules. */
  --diip-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-fast: 0.2s;
  --motion-base: 0.4s;
  --motion-slow: 0.8s;
  /* Stagger is an offset, not a duration — it sequences a group rather than
     timing a change, so it has its own step and is used in multiples. */
  --motion-stagger: 0.08s;

  /* ---- Fixed colours --------------------------------------------------- */
  /* Deliberately outside the colour schemes: these must not flip when a
     section's scheme changes. --ink-on-media is for text over imagery (always
     light, whatever the scheme), --scrim is the wash that keeps it legible,
     and --color-star is the rating gold. */
  --ink-on-media: #ffffff;
  --scrim: rgba(0, 0, 0, 0.5);
  --color-star: #f5b301;

  /* ---- Spacing scale (strict 8px) ------------------------------------ */
  /* Pure multiples of 8 — no 4px half-step. Every margin, padding and gap must
     come from one of these steps; nothing in between. (This theme sets
     1rem = 10px, so each rem here is the px ÷ 10.)
       xs 8  ·  s 16  ·  m 24  ·  l 32  ·  xl 40  ·  2xl 48
       3xl 56  ·  4xl 64  ·  5xl 80  ·  6xl 96  ·  7xl 128 */
  --space-xs: 0.8rem;
  --space-s: 1.6rem;
  --space-m: 2.4rem;
  --space-l: 3.2rem;
  --space-xl: 4rem;
  --space-2xl: 4.8rem;
  --space-3xl: 5.6rem;
  --space-4xl: 6.4rem;
  --space-5xl: 8rem;
  --space-6xl: 9.6rem;
  --space-7xl: 12.8rem;

  /* ---- Tap target ------------------------------------------------------ */
  /* Minimum hit area for anything interactive. 48px is the first step on the
     8px scale that clears every guideline at once — WCAG 2.2 AA asks 24, WCAG
     2.1 AAA and Apple's HIG ask 44, Material asks 48 — so one value satisfies
     all three and stays on the scale (44 would not). Applies to pointer and
     touch alike: a small target is harder for everyone, not just touch users. */
  --tap-target: 4.8rem;

  /* ---- Radius scale (also 8px-based) --------------------------------- */
  --radius-none: 0;
  --radius-s: 0.8rem;
  --radius-m: 1.6rem;
  --radius-pill: 5rem;

  /* Every button is a pill. Override Dawn's --buttons-radius (capped at 40px in
     settings, which leaves tall buttons only partly rounded) so Dawn buttons and
     the custom section CTAs share one true-pill shape at any height. */
  --buttons-radius: var(--radius-pill);
  --buttons-radius-outset: var(--radius-pill);

  /* ---- Type scale ---------------------------------------------------- */
  /* Modelled on Rivian: restrained sizes, tight leading, negative tracking
     only on large type, weights 400/500/600 (not 700). Each step is a utility
     class (.t-*) that carries size + line-height + tracking + weight together,
     so type stays consistent by construction. Sizes only (for reuse) live here;
     the classes below apply the full set.
       hero 72 · display 56 · heading 44 · title 24
       lead 20 · body 16 · sm 14 · caption 12  (px caps; 1rem = 10px) */
  --text-hero: clamp(4rem, 6vw, 7.2rem);
  --text-display: clamp(3.6rem, 5vw, 5.6rem);
  --text-heading: clamp(2.8rem, 4vw, 4.4rem);
  --text-title: clamp(2rem, 2.5vw, 2.4rem);
  --text-lead: 2rem;
  --text-body: 1.6rem;
  --text-sm: 1.4rem;
  --text-caption: 1.2rem;

  /* ---- Text emphasis ------------------------------------------------- */
  /* Four levels, after Rivian (black / ~92% / ~61% / ~28%). Alpha values, used
     as rgba(var(--color-foreground), var(--ink-…)) so they compose with each
     scheme's / panel's own foreground colour. Muted is 0.74 rather than
     Rivian's 0.61 to stay AA-legible (4.5:1) on the coloured showcase panels. */
  --ink-strong: 1;
  --ink: 0.85;
  --ink-muted: 0.74;
  --ink-faint: 0.32;

  /* Hairline/border tint — one value for the 0.08–0.14 rules in use. */
  --hairline: rgba(var(--color-foreground), 0.14);

  /* Self-hosted Helvetica Now Text (see snippets/brand-fonts) with a graceful
     fallback to system Helvetica, then Arial, if the files aren't present. */
  --font-body-family: "Helvetica Now diip", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-family: "Helvetica Now diip", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-style: normal;
  --font-heading-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 700;
  --font-heading-weight: 700;
}

/* ---- Type scale utility classes -------------------------------------- */
/* Each carries the full set — size, leading, tracking, weight — so using one
   class gets all four right. After Rivian: tight leading + negative tracking on
   large type, normal below ~title, weights 400/500/600. */
/* Weights: only Regular 400 and Bold 700 exist in our Helvetica Now files, so
   the system is two weights — display type is 700, everything else 400. (500/600
   would silently fall back to 400/700; add a Medium woff2 to unlock a mid tier.) */
.t-hero {
  font-size: var(--text-hero);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.t-display {
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.t-heading {
  font-size: var(--text-heading);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.t-title {
  font-size: var(--text-title);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.t-lead {
  font-size: var(--text-lead);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
}
.t-body {
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.t-sm {
  font-size: var(--text-sm);
  line-height: 1.45;
  font-weight: 400;
}
.t-caption {
  font-size: var(--text-caption);
  line-height: 1.4;
  font-weight: 400;
}

/* ---- Typography ------------------------------------------------------ */
/* Dawn's default is a light heading weight that reads generic. Give
   headings real presence: heavier weight, tighter tracking, tighter leading. */
h1, h2, .h0, .h1, .h2,
.product__title h1,
.title,
.banner__heading {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h3, h4, .h3, .h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Small uppercase captions (line labels, eyebrows) — space them out so
   they read as considered detail rather than shrunk body text. */
.caption-with-letter-spacing,
.product__text.caption-with-letter-spacing {
  letter-spacing: 0.14em;
  font-weight: 400;
  color: rgba(var(--color-foreground), var(--ink-muted));
}

/* Slightly airier body copy. */
.rte p,
.product__description {
  line-height: 1.7;
}

/* ---- Links & focus --------------------------------------------------- */
/* The one accent, used sparingly: inline text links and focus rings. */
.rte a:not(.button),
a.link--text:hover {
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.25em;
}

*:focus-visible {
  outline: 0.2rem solid var(--diip-accent);
  outline-offset: 0.2rem;
}

/* ---- Buttons --------------------------------------------------------- */
/* Subtle, confident motion — a small lift, not a bounce. */
/* Dawn grows the button's inset ring on hover (--border-offset 0 -> 1.3px plus
   a 1px thicker shadow), which reads as the button changing size. Restate the
   resting values so hover leaves the geometry alone. Not `box-shadow: none` —
   that ring IS the outline on secondary buttons, and removing it would make
   them vanish on hover. */
.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 0;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
}

/* No hover lift. Buttons stay put and change only in colour/opacity — the
   quieter, more premium read, and it keeps them from bouncing when a row of
   them sits together. */
.button {
  transition: background-color var(--motion-fast) var(--diip-ease),
    color var(--motion-fast) var(--diip-ease),
    opacity var(--motion-fast) var(--diip-ease);
  letter-spacing: -0.01em;
  font-weight: 700;
  text-transform: none;
  /* Floor the hit area everywhere, so a button can never fall under the
     guideline because a particular section gave it tight padding. */
  min-height: var(--tap-target);
}

/* ---- Product & collection cards ------------------------------------- */
/* No hover zoom on card images. The product photography carries the card on
   its own; moving it under the pointer added motion without adding meaning. */

/* ---- Section rhythm -------------------------------------------------- */
/* Let hero and dark sections breathe a little more than Dawn's default. */
.banner--large:not(.banner--adapt) .banner__content {
  padding: var(--space-xl) 0;
}

/* ---- Oversized editorial headings ----------------------------------- */
/* Hero and big section headings get real scale — the reference brands lead
   with type, not timid centered lines. */
/* The cap, not the vw, is what governs on desktop — 9vw is clipped above a
   ~1000px viewport — so raising it is what actually changes the impression on
   a large screen. At this scale Helvetica needs tighter tracking and leading
   than at body size, or display type reads loose and airy. */
.banner__heading.h0 {
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.rich-text__heading.h1,
.title-wrapper .h1 {
  font-size: var(--text-display);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* ---- Full-bleed layout ------------------------------------------------ */
/* Dawn caps every container at --page-width and centres it. Drop the cap so
   the navbar and page content run edge to edge, leaving only a gutter so
   nothing sits flush against the browser edge.

   Sections that need a readable line length (statement, blend focus, FAQ,
   rich text) set their own inner max-width, so widening the outer container
   doesn't stretch body copy. */
:root {
  --diip-gutter: 2.4rem;
}

@media screen and (min-width: 990px) {
  :root {
    --diip-gutter: 4rem;
  }
}

.page-width,
.page-width--narrow {
  max-width: none;
  padding-left: var(--diip-gutter);
  padding-right: var(--diip-gutter);
}

/* The navbar has to sit on the same gutter as the page, or the logo doesn't
   line up with the content beneath it.

   Two selectors because two different rules have to be beaten: the header
   section's own inline `.header { padding: … 3rem }` (0-1-0), and Dawn's
   `.header:not(.drawer-menu).page-width` (0-3-0) in base.css, which sets 5rem
   above 990px and was winning — the logo sat 10px right of everything else.
   The second selector is 0-4-0 and takes it. */
.header-wrapper .header,
.header-wrapper .header:not(.drawer-menu).page-width {
  max-width: none;
  width: 100%;
  padding-left: var(--diip-gutter);
  padding-right: var(--diip-gutter);
}

/* ---- Nothing moves on hover ------------------------------------------
   Dawn ships ~25 hover rules that scale, lift or nudge things under the
   pointer. They're spread across a dozen stylesheets, so they surface one at a
   time as you happen to notice them. Neutralised here in one place.

   Deliberately surgical rather than a blanket `transform: none`, because
   several of these transforms are doing real work — see the groups below.
   The 3d-lift / vertical-lift families aren't listed: they're gated behind the
   theme's `animations_hover_elements` setting, which is "none". */

   Every selector below carries a `body` prefix. That isn't decoration: most of
   these live in component-*.css, which Shopify loads per-section AFTER this
   file, so a same-specificity override would lose on source order and silently
   do nothing. The prefix adds one element to the specificity and settles it. */

/* Icons that scale up. Purely decorative. */
body .header__icon:hover .icon,
body .modal__close-button:hover .icon,
body .share-button__fallback button:hover .svg-wrapper,
body .list-social__link:hover .icon,
body .country-filter__reset-button:hover .icon,
body .menu-drawer__account:hover account-icon > .svg-wrapper,
body .search__button:hover .icon,
body .reset__button:hover .icon,
body .slideshow__autoplay:hover .svg-wrapper,
body .quick-order-list-remove-button:hover .icon-remove,
body .animate-arrow:hover .icon-arrow path {
  transform: none;
}

/* Card image zoom. The secondary-image swap next to it is driven by opacity,
   so dropping the scale leaves the swap working. */
body .card:hover .media.media--hover-effect > img:first-child:only-child,
body .card-wrapper:hover .media.media--hover-effect > img + img {
  transform: none;
}

/* Poster buttons: the translate is centring, not decoration — keep it and drop
   only the scale, or the button jumps to the corner of its media. */
body .deferred-media__poster-button:hover,
body .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover {
  transform: translate(-50%, -50%);
}

/* Directional icons: the rotation is what points the arrow, so keep each one
   and drop only the scale. `transform: none` here would leave carets pointing
   the wrong way. */
body .slider-button--next:not([disabled]):hover .icon {
  transform: rotate(-90deg);
}
body .slider-button--prev:not([disabled]):hover .icon {
  transform: rotate(90deg);
}
body .pagination__item--next:hover .icon {
  transform: rotate(90deg);
}
body .pagination__item--prev:hover .icon {
  transform: rotate(-90deg);
}

/* Slider counter: hover only. The matching active-state rule keeps its scale,
   since that marks which slide you're on rather than reacting to the pointer. */
body .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
body .slider-counter__link--numbers:hover {
  transform: none;
}

/* Optical alignment for the last icon. Its drawn glyph sits ~12px inside a
   44px hit area, so the box edge and the visible edge aren't the same thing:
   left to itself the glyph lands 20px short of the gutter, and Dawn's own
   -1.2rem only cancels part of that, leaving it 8px shy. Pull the box out by
   the full inset so the *glyph* — the thing you actually see — lines up with
   the gutter, matching the logo on the left and the showcase seam below.
   The hit area is unchanged; only the box position moves. */
.header-wrapper .header__icons .header__icon--cart {
  /* Re-derived after the icons changed — the old -2rem was measured against
     Dawn's glyph in a 44px box and left the bag overshooting the gutter by 5px.
     -1.6 is on the scale and lands within about a pixel. Note the direction: a
     MORE negative margin pulls the icon further right, so correcting an
     overshoot means a smaller number, not a larger one. Re-measure if the icon
     or its box changes again. */
  margin-right: -1.6rem;
}

/* Font Awesome icons in the header, normalised to one optical size.

   The problem this solves: FA draws every glyph into the same 640 box but
   doesn't place them consistently inside it. The bag and the user are both
   448x512 of ink, yet the bag's centre sits at y=288 and the user's at y=320 —
   a 32-unit offset that rendered as the user icon hanging ~1.5px below the bag.
   Sizing the SVG box can't fix that, because the box isn't where the drawing
   is.

   So each FA asset carries a viewBox cropped to its own ink rather than the
   640 default (see the files themselves). Cropped, the box *is* the drawing:
   the glyph fills whichever axis is longer, centres on the other, and lands
   optically level with every other icon regardless of how FA positioned it.

   Two boxes, doing separate jobs:
     - the wrapper is the 48px tap target, sized from the same token as every
       other control, and stays 48 whatever the icon does;
     - the icon is 24px, the longest-axis extent every header glyph is held to.
   Splitting them means an icon can be resized for looks without ever eating
   into the target, which is what the old 69% was working around.

   Matched on `.icon-fa`, a marker class carried by the assets, so this can't
   catch a Dawn icon by accident — the search and menu glyphs are already sized
   correctly and are drawn to a different convention. An FA icon added to the
   header needs that class AND a cropped viewBox; with the 640 default it will
   render small and off-centre. */
body .header__icon,
body .header__icon .svg-wrapper {
  width: var(--tap-target);
  height: var(--tap-target);
}

/* Grid rather than flex so the outline and solid copies occupy the same cell
   and the box is sized by neither — stacked, not laid out side by side. */
body .header__icon .svg-wrapper {
  display: grid;
  place-items: center;
}

body .header__icon .svg-wrapper > svg.icon-fa {
  grid-area: 1 / 1;
  width: 2.4rem;
  height: 2.4rem;
}

/* Hover fills the icon in rather than moving it, which is the one thing the
   rest of the site doesn't do (see the "nothing moves on hover" sweep above —
   Dawn's scale(1.07) on .header__icon:hover .icon is cancelled there, and this
   replaces it with something that reads without shifting the layout).

   Both weights are in the DOM and only opacity changes, so the swap can't
   reflow or flash a missing asset the first time it's hovered.

   Driven by :focus-within as well as :hover so it appears for keyboard users,
   and the outline copy stays visible under a solid one that has no alpha of its
   own — the fade is between two opaque drawings, not to the background. */
/* Scoped through .header-wrapper to outrank the transparent-navbar rule below,
   which matches `.header-wrapper--glass .header__icon .icon` and would
   otherwise replace this whole shorthand — leaving the icon with a colour
   transition and no opacity one, so the swap would jump rather than fade.
   Colour and fill are restated here for the same reason: the navbar adapts its
   ink to whatever section is behind it, and dropping them would make that
   adaptation snap on this element alone. */
body .header-wrapper .header__icon .icon-fa--solid {
  opacity: 0;
  transition:
    opacity var(--motion-fast) var(--diip-ease),
    color var(--motion-base) var(--diip-ease),
    fill var(--motion-base) var(--diip-ease);
}

body .header__icon:hover .icon-fa--solid,
body .header__icon:focus-visible .icon-fa--solid,
body .header__icon:focus-within .icon-fa--solid {
  opacity: 1;
}

/* The outline is left in place under the solid rather than faded out. Crossing
   two fades leaves a dip in weight halfway through where both are partly
   transparent; holding this one steady means the solid simply arrives on top. */
body .header__icon .icon-fa--outline {
  opacity: 1;
}

/* Belt and braces against the scale coming back. The sweep above already
   cancels Dawn's .header__icon:hover .icon, and these carry `icon`, so they're
   covered — but they're also the one place where a stray transform would be
   invisible in review and obvious in use, since the two stacked copies would
   scale out of register with each other. */
body .header__icon:hover .icon-fa,
body .header__icon:focus-within .icon-fa {
  transform: none;
}

/* Same pair in the mobile drawer's account link. Its wrapper isn't a
   .header__icon, so none of the above reaches it — and without the stacking the
   two copies would lay out side by side and both be visible, which is exactly
   the sort of thing that only shows up on a phone. Sized to the drawer's own
   2rem wrapper rather than the header's 24px. */
body .menu-drawer__account .svg-wrapper {
  display: grid;
  place-items: center;
}

body .menu-drawer__account .svg-wrapper > svg.icon-fa {
  grid-area: 1 / 1;
  width: 2rem;
  height: 2rem;
}

body .menu-drawer__account .icon-fa--solid {
  opacity: 0;
  transition: opacity var(--motion-fast) var(--diip-ease);
}

body .menu-drawer__account:hover .icon-fa--solid,
body .menu-drawer__account:focus-within .icon-fa--solid {
  opacity: 1;
}

/* ---- Transparent navbar ---------------------------------------------- */
/* The bar has no background at all — fully transparent over every section. Only
   the text/logo colour changes, adapting to whatever section sits behind it
   (see snippets/header-nav-state), so it stays readable without a frost. */
.header-wrapper--glass {
  background: transparent;
  border-bottom: 0;
  border-radius: var(--diip-nav-radius);
  transition: color var(--motion-base) var(--diip-ease);
}

/* ---- Inset hero ------------------------------------------------------- */
/* The hero is a framed card rather than a full-bleed band: the page background
   shows through as a border on all four sides. */
:root {
  /* 8px everywhere, mobile included. It was 0.8 here and 1.2 on desktop; 12px
     is a 4px half-step and the scale has none, so it had to move. 8 rather than
     16 because it's the nearer of the two to what was there, and it makes the
     frame one value at every size instead of stepping up on desktop.

     The bar sits flush at the top of the page over this, not inset into it.
     There was a --diip-nav-top token here defining an offset of twice the
     inset, with a comment describing a gap that no rule ever applied — removed
     rather than wired up: at an 8px frame the bar reads fine flush, and
     offsetting it would have cost the pinned showcase panel the same height
     again, which it doesn't have to spare. */
  --diip-hero-inset: 0.8rem;
  --diip-hero-radius: 0rem;
  /* Floating navbar: how far it's pulled in from the sides. A --diip-nav-max
     sat here too, capping the bar's width — also never referenced by any rule.
     The bar spans the full viewport and aligns to the page gutter like
     everything else, so there was nothing for it to do. */
  --diip-nav-radius: 0rem;
}

@media screen and (min-width: 750px) {
  :root {
  }
}

#MainContent > .shopify-section:first-child .banner {
  /* Hero plus its frame is a little shorter than the screen, so the top of the next
     section shows below it and visitors can see there is more to scroll to. The inset
     is subtracted here and added back as margin. */
  --diip-hero-peek: 2svh;
  min-height: calc(100vh - var(--diip-hero-peek) - var(--diip-hero-inset) * 2);
  /* Phones: 100vh is the tallest the screen gets (browser bar hidden), which pushes the
     bottom of the hero, and its title, out of sight. svh is the height actually visible. */
  min-height: calc(100svh - var(--diip-hero-peek) - var(--diip-hero-inset) * 2);
  margin: var(--diip-hero-inset);
  width: auto;
  overflow: hidden;
  border-radius: var(--diip-hero-radius);
}

/* Hero composition: title bottom-left, CTA bottom-right, sitting on one
   baseline. This drives the layout from CSS rather than the section's
   "content position" setting, so that control in the theme editor no longer
   affects this first hero. */
/* Filled absolutely rather than with height:100% — the banner only carries a
   min-height, so a percentage height has nothing definite to resolve against
   and collapses to the content's own height. */
#MainContent > .shopify-section:first-child .banner__content {
  position: absolute;
  inset: 0;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  padding: var(--diip-hero-pad, var(--space-m));
}

/* Padding zeroed because it isn't ours. Dawn pads this box (40px at the
   bottom, from .content-container), and that stacked on the hero's own padding
   for 72px under the title against 40px at the sides — two paddings neither of
   which knew about the other. With it gone the hero pad is the only inset, so
   the title sits the same distance from the page edge on all four sides. */
#MainContent > .shopify-section:first-child .banner__box {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: left;
}

/* Scroll-linked fade — --hero-fade is written by snippets/hero-scroll-fade,
   running 1 at the top of the page down to 0.1 once the hero is out of view.
   Mapped to scroll position, so scrolling back up fades them in again. */
#MainContent > .shopify-section:first-child .banner__heading,
#MainContent > .shopify-section:first-child .banner__buttons {
  opacity: var(--hero-fade, 1);
  will-change: opacity;
}

/* Cap kept so the headline can never crowd the CTA beside it, but widened
   from 15ch to hold the line in one piece — it only wraps when the viewport
   genuinely can't fit it.
   min-width:0 lets it actually shrink — flex items default to min-content. */
#MainContent > .shopify-section:first-child .banner__heading {
  margin: 0;
  min-width: 0;
  max-width: 40ch;
  text-wrap: balance;
}

#MainContent > .shopify-section:first-child .banner__buttons {
  margin: 0;
  flex: 0 0 auto;
}

/* Opt out of the scroll-linked fade when reduced motion is preferred. */
@media (prefers-reduced-motion: reduce) {
  #MainContent > .shopify-section:first-child .banner__heading,
  #MainContent > .shopify-section:first-child .banner__buttons {
    opacity: 1;
  }
}

/* Derived, not chosen. The hero is inset from the page by its frame, so padding
   it by the gutter as well lands its text one frame further in than everything
   else — which is exactly what happened: the title sat at 56px against the
   navbar logo and the section headings at 40. Subtracting the inset puts the
   hero's text on the same line as the rest of the page, and keeps it there when
   the gutter changes at 990px or the frame is retuned.

   It follows that the hero's inner padding is no longer a free number. Adjust
   the gutter or the frame; this tracks them. */
:root {
  --diip-hero-pad: calc(var(--diip-gutter, 2.4rem) - var(--diip-hero-inset));
}

/* Too tight to sit side by side on a phone: stack them, still bottom-left. */
@media screen and (max-width: 749px) {
  #MainContent > .shopify-section:first-child .banner__box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
}

/* ---- Floating navbar -------------------------------------------------- */
/* Lift the header out of the document flow so the hero starts at the top of
   the page and the bar hovers over it, inset from the hero's top edge.
   `body` prefixes keep these above the header section's own inline rules and
   Dawn's .shopify-section-header-sticky positioning. */
body .section-header,
body .section-header.shopify-section-header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Full-bleed: spans the whole viewport width, flush to the top. */
  width: 100%;
  z-index: 4;
  margin-bottom: 0;
}



/* The fixed bar is out of the flow, so pages that don't lead with a hero need
   room made for it or their first section slides underneath. Applied by
   default and removed only once the floating-hero case is confirmed, so a JS
   failure leaves content clear of the bar rather than hidden behind it.

   Gated on the header actually existing — the splash homepage renders no
   header at all, and would otherwise open with an empty bar-sized gap. */
body:has(.section-header) #MainContent {
  padding-top: var(--header-height, var(--space-4xl));
}

body.has-floating-nav #MainContent {
  padding-top: 0;
}


/* Content-aware contrast: the bar takes its colour from whatever section is
   behind it, so it stays readable over both the hero and the dark sections
   further down the page. Toggled by snippets/header-nav-state. */
.header-wrapper--glass.is-over-dark,
.header-wrapper--glass.is-over-dark .header__heading-link,
.header-wrapper--glass.is-over-dark .header__menu-item,
.header-wrapper--glass.is-over-dark .header__icon,
.header-wrapper--glass.is-over-dark .header__icon .icon {
  color: rgb(244, 243, 240);
}

.header-wrapper--glass.is-over-light,
.header-wrapper--glass.is-over-light .header__heading-link,
.header-wrapper--glass.is-over-light .header__menu-item,
.header-wrapper--glass.is-over-light .header__icon,
.header-wrapper--glass.is-over-light .header__icon .icon {
  color: rgb(23, 24, 28);
}

/* Fade the swap so crossing a section boundary never flashes. Each element
   resolves its own colour, so each needs the transition; the inline wordmark
   fills via currentColor, so transition fill too. */
.header-wrapper--glass .header__heading-link,
.header-wrapper--glass .header__logo-svg,
.header-wrapper--glass .header__logo-svg svg,
.header-wrapper--glass .header__menu-item,
.header-wrapper--glass .header__icon,
.header-wrapper--glass .header__icon .icon {
  transition: color var(--motion-base) var(--diip-ease), fill var(--motion-base) var(--diip-ease);
}

/* Layout: logo left, nav centered, icons right. Dawn's middle-left packs the
   nav next to the logo; re-balance the grid so the menu is truly centered. */
@media screen and (min-width: 990px) {
  .header.header--middle-left.header--has-menu {
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--space-m);
  }
  .header--middle-left .header__heading,
  .header--middle-left .header__heading-link {
    justify-self: start;
  }
  .header--middle-left .header__inline-menu {
    justify-self: center;
  }
  .header--middle-left .header__icons {
    justify-self: end;
  }
}

/* Per-line inline wordmark (see snippets/header-logo). Inherits currentColor so
   it flips with the navbar text between the over-hero and scrolled states.
   The two marks have very different aspect ratios — Nootropic is a wide
   wordmark, Nixodine is nearly square — so they're matched on height, not
   width, to keep their optical weight consistent. */
.header__logo-svg {
  display: inline-flex;
  align-items: center;
  color: currentColor;
}

.header__logo-svg svg {
  display: block;
  height: var(--diip-logo-height, 2.4rem);
  width: auto;
  fill: currentColor;
  transition: color var(--motion-base) var(--diip-ease);
}

/* The Nixodine mark is a stacked lockup (wordmark over the line name) rather
   than a single-line wordmark, so an equal height renders it far smaller than
   the Nootropic one. Give it more height to match optically. A horizontal
   Nixodine lockup would be the better long-term fix. */
.header__logo-svg--nixodine svg {
  height: var(--diip-logo-height-nixodine, 3.8rem);
}

/* Menu type. No hover underline — the nav sits over imagery and a line
   sweeping in under the pointer read as busier than the rest of the site.
   Dawn underlines and recolours the item itself on hover, so those are
   neutralised here as well; `color: inherit` matters because the navbar is
   transparent and its colour is set per section by the content-aware script —
   a fixed hover colour would fight it over light and dark hero images. */
.header__menu-item {
  letter-spacing: 0.01em;
  font-weight: 400;
}

.header__menu-item:hover,
.header__menu-item:hover span,
.header__menu-item:hover .header__active-menu-item,
.header__submenu .header__menu-item:hover,
details[open]:hover > .header__menu-item {
  text-decoration: none;
  color: inherit;
}
.header__inline-menu .header__menu-item {
  position: relative;
}

/* ---- Hover: the others recede -----------------------------------------
   Hovering the menu fades every item except the one under the pointer, so the
   feedback is attention narrowing rather than the link decorating itself.

   Opacity rather than colour, which is the only thing that works here: the bar
   is transparent and its ink is set per section by the content-aware script,
   so a hover colour would have to be right over both a dark hero and a light
   one. Fading inherits whatever ink the bar currently has and stays correct on
   both.

   Driven from the list, not the item — the effect is the SIBLINGS changing, and
   only a parent can know the pointer is somewhere in the group. Scoped to the
   inline menu so the drawer's own list is untouched.

   Nothing moves, per the sweep above. This is the one hover on the bar, so the
   icons' fill-swap and this share a language: the thing under the pointer
   becomes the most definite, everything else gives way. */
/* ---- Hover: the others recede -----------------------------------------
   Hovering the menu fades every item except the one under the pointer, so the
   feedback is attention narrowing rather than the link decorating itself.

   Opacity rather than colour, which is the only thing that works on this bar:
   it is transparent and its ink is set per section by the content-aware script,
   so a hover colour would have to be legible over both a dark hero and a light
   one. Fading inherits whatever ink the bar currently has and stays right on
   both — the same reason the rules above force color: inherit.

   --ink-muted (0.65), not something more dramatic. The dimmed items are still
   links: 14px regular is not large text, so they owe 4.5:1, and 0.6 is the
   floor that leaves. At --ink-faint (0.32) they measured 2.05:1. A hover state
   is not exempt from contrast, so the effect is as strong as it is allowed to
   be and no stronger — subtle by constraint rather than by choice.

   Driven from the list, not the item: the effect is the SIBLINGS changing, and
   only a parent knows the pointer is somewhere in the group. Scoped to the
   inline menu so the drawer is untouched, and behind (hover: hover) so touch
   never dims anything. Nothing moves, per the sweep above. */
@media (hover: hover) {
  .header__inline-menu .list-menu--inline:hover .header__menu-item {
    opacity: var(--ink-muted);
  }

  .header__inline-menu .list-menu--inline .header__menu-item:hover,
  .header__inline-menu .list-menu--inline li:hover .header__menu-item {
    opacity: 1;
  }
}

/* Keyboard gets the same treatment. Without it, tabbing through leaves every
   item at full strength and the focused one indistinguishable from the rest
   apart from the focus ring. */
.header__inline-menu .list-menu--inline:focus-within .header__menu-item {
  opacity: var(--ink-muted);
}

.header__inline-menu .list-menu--inline .header__menu-item:focus-visible,
.header__inline-menu .list-menu--inline li:focus-within .header__menu-item {
  opacity: 1;
}

.header__inline-menu .header__menu-item {
  transition: opacity var(--motion-fast) var(--diip-ease);
}

/* ---- Hover: a rule grows under the item -------------------------------
   The fade alone is capped at 0.65 by contrast, which isn't much of a signal.
   This carries the rest of it, and costs nothing in legibility because it's a
   decoration rather than text.

   On the label span, not the link: the link is a padded flex box and its
   caret, where present, is a sibling of the label — a line across the link
   would run under the caret too and be wider than the word it belongs to.

   currentColor for the same reason the fade uses opacity: the bar is
   transparent and its ink flips per section, so the rule has to inherit
   whatever colour the bar currently has rather than commit to one. At full
   strength it's the same colour as the text it sits under, which clears the
   3:1 that a meaningful non-text indicator owes.

   Grows from the left rather than fading in — scaleX on a transform is
   compositor-driven, so it doesn't run layout, and the direction gives it a
   reading order. Absolutely positioned, so nothing in the row moves. */
.header__inline-menu .header__menu-item > span {
  position: relative;
}

.header__inline-menu .header__menu-item > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* -2px, an optical nudge rather than a spacing step — the 8px scale governs
     layout, and this is a decoration being kept off the glyphs. At bottom: 0 the
     'g' in "Ingredients" cleared the rule by 0.59px, which is not enough to
     survive rounding on a real display. */
  bottom: -0.2rem;
  /* Half a pixel, not one. On a 2x display that's a single device pixel — a
     true hairline — and on 1x it antialiases to something lighter than a full
     pixel, which is the same intent. Thinning by reducing opacity instead would
     cost contrast, and this rule is a meaningful indicator that owes 3:1. */
  height: 0.05rem;
  background-color: currentColor;
  transform: scaleX(0);
  /* Grows from the middle out. Left-origin gave the sweep a reading direction,
     which suited a line that ran the width of a padded box; centred suits one
     that sits on the word itself — it opens around the label rather than
     arriving at it, and reads the same whichever direction the pointer came
     from. */
  transform-origin: center;
  transition: transform var(--motion-fast) var(--diip-ease);
  pointer-events: none;
}

@media (hover: hover) {
  .header__inline-menu .list-menu--inline .header__menu-item:hover > span::after,
  .header__inline-menu .list-menu--inline li:hover .header__menu-item > span::after {
    transform: scaleX(1);
  }
}

.header__inline-menu .list-menu--inline .header__menu-item:focus-visible > span::after,
.header__inline-menu .list-menu--inline li:focus-within .header__menu-item > span::after {
  transform: scaleX(1);
}

/* Asked not to animate: the rule still appears, it just doesn't sweep. The
   indicator is information, the sweep is decoration — only the latter goes. */
@media (prefers-reduced-motion: reduce) {
  .header__inline-menu .header__menu-item > span::after {
    transition: none;
  }
}

/* ---- Reveal on scroll ------------------------------------------------ */
/* Gentle fade-up for section content, respecting reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-trigger.animate--fade-in {
    transition: transform var(--motion-slow) var(--diip-ease), opacity var(--motion-slow) var(--diip-ease);
  }
}

/* ---- Text fields: no focus halo -------------------------------------- */
/* Dawn rings a focused field with an outline plus a soft glow on top of its own
   border. Fields here show focus by their border alone, so the extra halo goes
   (site-wide, every text input, textarea and select). */
:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"]), textarea, select):is(:focus, :focus-visible),
.field__input:is(:focus, :focus-visible),
.select__select:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ---- Cart page: the content fills the screen --------------------------- */
/* The footer is pinned behind the page and uncovered as the page scrolls away
   (sections/footer.liquid), so it shows wherever the page itself is shorter than
   the screen. The header floats over the top of the content (it takes no space
   above it), so the content has to be a whole screen tall, not a screen less the
   header: then the footer starts exactly below the fold. */
#MainContent[data-template="cart"] {
  min-height: 100vh;
  min-height: 100svh;
}