/* Mystic Hollow round 3: base.css (owner: builder A)
   Tokens come from <version>/theme.css (generated from site/themes.mjs). The values here are fallbacks only.
   Never hard-code a colour outside the token block: variations re-skin the whole site by swapping tokens.
   Easing: settle (arrivals that brake hard), recede (things stepping back), draw (lines drawing out). */
:root {
  --bg: #0e0d0c; --bg-2: #171513; --bg-3: #1d1a17; --bg-deep: #090807;
  --line: rgba(232, 222, 205, .14); --line-2: rgba(232, 222, 205, .26);
  --text: #ece6dc; --text-2: #a39d93; --text-3: #7d776e;
  --accent: #e9a35b; --accent-ink: #120d09; --accent-soft: rgba(233, 163, 91, .16); --key: 233 163 91; --moss: #6f8a4a;
  --btn-bg: #ece6dc; --btn-ink: #0e0d0c; --btn-bg-hover: #fff;
  --atmos-page: none; --atmos-hero: none; --atmos-band: none; --atmos-card: none; --accent-grad: linear-gradient(90deg, var(--accent), var(--accent));
  --world-filter: none; --radius: 3px;
  --logo: var(--text); --logo-glow: transparent;   /* the MHC logo's ink (a colour or a gradient) and its glow */
  --shade: 0 0 0; --glint: 255 246 232;   /* RGB triplets: shadows and drop/specular highlights, rgb(var(--shade) / .5) */
  --plate-grade: 0;   /* 0..1: how far atmospheric plates (ledges, routine plates) are toned toward the theme's key light */
  --glass-fog: .5; --glass-tint: 1 .93 .84; --glass-key: 1 .72 .42;
  --display: 'Jost', 'Futura', sans-serif; --sans: 'Manrope', 'Helvetica Neue', sans-serif; --mono: 'Fragment Mono', ui-monospace, monospace;
  /* v16 names, so ported code keeps working */
  --stone: var(--bg); --slate: var(--bg-2); --slate-2: var(--bg-3); --hair: var(--line); --hair-2: var(--line-2);
  --bone: var(--text); --ash: var(--text-2); --amber: var(--accent);
  --settle: cubic-bezier(.16, 1, .3, 1); --recede: cubic-bezier(.4, 0, .2, 1); --draw: cubic-bezier(.65, 0, .35, 1);
  --gut: clamp(20px, 3.9vw, 56px);
  --maxw: 1440px;
  --hdr-h: 76px;
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: var(--atmos-page); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; overflow-wrap: break-word; }   /* long INCI names (Caprylic/capric/...) wrap instead of running out of their card */
html.lock, html.sx-open { overflow: hidden; }
html.lock body, html.sx-open body { padding-right: var(--sbw, 0px); }   /* no sideways jump when the scrollbar goes (core.js measures it) */
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }   /* width/height attributes give the ratio only; without this they become a fixed CSS height */
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 260ms var(--recede) both vt-out; }
  ::view-transition-new(root) { animation: 420ms var(--settle) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 300; letter-spacing: -.015em; line-height: 1.02; }
.h1 { margin: 0; font: 300 clamp(48px, 5.2vw, 84px)/1 var(--display); letter-spacing: -.02em; }
.h2 { margin: 0; font: 300 clamp(38px, 3.8vw, 58px)/1.04 var(--display); letter-spacing: -.012em; }
.h3 { margin: 0; font: 400 clamp(24px, 2vw, 30px)/1.15 var(--display); }
.lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.prose { max-width: 68ch; font-size: 17px; line-height: 1.75; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { margin: 1.8em 0 .5em; font: 400 28px/1.2 var(--display); }
.prose h3 { margin: 1.6em 0 .4em; font: 600 17px/1.3 var(--sans); letter-spacing: .02em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose a { text-decoration-color: var(--accent); text-underline-offset: 4px; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.eyebrow { margin: 0; font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--c, var(--accent)); box-shadow: 0 0 8px var(--c, var(--accent)); }
.eyebrow.plain::before { display: none; }
.price { font: 400 17px/1 var(--mono); color: var(--text); }
.size { font-size: 14px; color: var(--text-2); }
/* a set or routine total (site/parts/rituals.mjs totalLine): "The full set, $95" */
.set-total { display: inline-flex; align-items: baseline; gap: 7px; font-size: 14.5px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.set-total .price { font-size: 18px; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; z-index: 200; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 14px; }
.skip:focus { left: 8px; top: 8px; }

/* owner tags: visible placeholders for facts the owner confirms. html.hide-owner (review tool) hides them. */
.owner, .tag { display: inline-block; vertical-align: .1em; font: 400 11.5px/1 var(--mono); color: var(--text-2); border: 1px dashed color-mix(in srgb, var(--text-2) 60%, transparent); padding: 4px 6px 3px; margin: 0 .2em; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.owner::before { content: '[OWNER] '; opacity: .7; }
html.hide-owner .owner, html.hide-owner .tag { display: none; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: clamp(80px, 9vw, 130px) 0 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 20px 40px; align-items: end; padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.sec-head p { margin: 0; color: var(--text-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 22px 0 0; list-style: none; font-size: 13px; color: var(--text-2); letter-spacing: .04em; }
.crumbs li + li::before { content: '/'; margin-right: 10px; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

/* ---------- buttons, links, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 2px; font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s, transform .3s var(--settle); }
.btn-solid { background: var(--btn-bg); color: var(--btn-ink); }
.btn-solid:hover { background: var(--btn-bg-hover); }
.btn-line { border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--text); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { font-size: 15px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); transition: color .3s, text-decoration-color .3s; }
.link:hover { color: var(--text); text-decoration-color: var(--accent); }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.arrow-link::after { content: '\2192'; transition: transform .4s var(--settle); }
.arrow-link:hover::after { transform: translateX(5px); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 2px; font: 500 14px/1 var(--sans); color: var(--text); text-decoration: none; background: transparent; transition: border-color .3s, background .3s, color .3s; }
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip small { font: 400 12px/1 var(--mono); opacity: .7; }
.field { display: block; width: 100%; height: 50px; padding: 0 16px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px; color: var(--text); font-size: 16px; }
.field::placeholder { color: var(--text-3); }
.field:focus { outline: none; border-color: var(--accent); }

/* ---------- the world behind the glass (pages with page.glass; showcase pages show it only while it is open) ----------
   The plate itself is set inline on .world by layout.mjs (a url() in a custom property would resolve against this file). */
.world { position: fixed; inset: 0; z-index: 0; background-color: var(--bg-deep); background-position: 60% 50%; background-size: cover; background-repeat: no-repeat; filter: var(--world-filter); transition: filter .6s var(--recede), opacity .6s var(--recede), transform 1.2s var(--settle); }
.world::after { /* a warm haze, like a lamp low in the moss */ content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 8% 35%, rgb(var(--key) / .09), transparent 70%); pointer-events: none; }
.world--sx { opacity: 0; }
.world-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { video.motion { display: none; } }
.sx-open .world { opacity: 1; filter: var(--world-filter) blur(7px) brightness(.5); transform: scale(1.04); }
#page { position: relative; z-index: 2; transition: opacity .45s var(--recede), transform .6s var(--recede), filter .45s var(--recede); transform-origin: 50% 40vh; }
.sx-open #page { opacity: 0; transform: scale(.97); filter: blur(5px); pointer-events: none; }
.store { position: relative; background-color: var(--bg); background-image: var(--atmos-page); }   /* split: a multi-layer --atmos-page after a colour would invalidate the shorthand */

/* ---------- dew: a CSS-only layer of beaded condensation for frames and tiles off the WebGL glass ----------
   Two tileable alpha masks (shared/site/img/dew-rim, dew-hi), painted with the --shade and --glint tokens. Put an empty
   <span class="dew" aria-hidden="true"></span> inside any positioned frame; --dew-o sets its strength, --dx/--dy its offset. */
.dew { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--dew-o, .55); }
.dew::before, .dew::after { content: ''; position: absolute; inset: 0; background: rgb(var(--shade)); opacity: .62;
  -webkit-mask: url('../img/dew-rim.webp') var(--dx, 0) var(--dy, 0) / 420px 520px repeat; mask: url('../img/dew-rim.webp') var(--dx, 0) var(--dy, 0) / 420px 520px repeat; }
.dew::after { background: rgb(var(--glint)); opacity: .9; -webkit-mask-image: url('../img/dew-hi.webp'); mask-image: url('../img/dew-hi.webp'); }

/* ---------- announcement + header ---------- */
.announce { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 38px; padding: 0 var(--gut); background: var(--bg-deep); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); letter-spacing: .04em; position: relative; z-index: 31; }
.announce p { margin: 0; }
.announce p:last-child { text-align: right; }
.hdr { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--hdr-h); padding: 0 var(--gut); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); transition: height .4s var(--settle), background .4s; }
.hdr.is-tight { height: 62px; }
.hdr-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
/* the nav's own links and Shop button only (> ): the Shop menu sits inside the nav, right after its button, so Tab walks into it */
.hdr-nav > a, .hdr-nav > button, .hdr-tools a, .hdr-tools button { display: inline-flex; align-items: center; gap: 8px; height: 40px; font: 500 13.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--text); opacity: .82; transition: opacity .3s; position: relative; }
.hdr-nav > a:hover, .hdr-nav > button:hover, .hdr-tools a:hover, .hdr-tools button:hover, .hdr-nav > [aria-expanded="true"] { opacity: 1; }
.hdr-nav > [aria-current="page"] { opacity: 1; }
.hdr-nav > [aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--accent-grad); box-shadow: 0 0 8px var(--accent); }
.hdr-nav > button svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .3s var(--settle); }
.hdr-nav > [aria-expanded="true"] svg { transform: rotate(180deg); }
/* the MHC logo (shared/site/brand): one traced SVG drawn through a mask, inked per theme with --logo, lit with --logo-glow.
   The glow sits on .brand-glow around it (a filter on the masked element itself would be masked away). */
.brand { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text); }
.brand-glow { display: block; filter: drop-shadow(0 0 1px var(--logo-glow)) drop-shadow(0 0 9px var(--logo-glow)); transition: filter .5s var(--settle); }
.brand:hover .brand-glow { filter: drop-shadow(0 0 1px var(--logo-glow)) drop-shadow(0 0 15px var(--logo-glow)); }
.logo { display: block; flex: none; background: var(--logo);
  -webkit-mask: url('../brand/mhc-mark.svg') center / contain no-repeat; mask: url('../brand/mhc-mark.svg') center / contain no-repeat; }
.logo--mark { height: 40px; aspect-ratio: 854 / 335; }
.logo--lockup { width: 280px; aspect-ratio: 973 / 417; -webkit-mask-image: url('../brand/mhc-lockup.svg'); mask-image: url('../brand/mhc-lockup.svg'); }
.hdr-brand { justify-self: center; align-self: stretch; padding: 0 8px; }
.hdr-brand .logo { height: 42px; transition: height .4s var(--settle); }
.hdr.is-tight .hdr-brand .logo { height: 35px; }
.mnav-brand .logo { height: 30px; }
/* Round 5 (#2), Violet Hour: the name in Cinzel under the mark, tracked wide like the live logo's own line. The mark steps
   down a little so mark + name sit inside the same header height at every width (never a taller header on phones). */
.brand-word { display: none; }
[data-theme="v21-violet-hour"] .brand-word { display: block; margin: 5px -.2em 0 0; font: 500 11px/1 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--logo); opacity: .9; text-shadow: 0 0 12px var(--logo-glow); transition: font-size .4s var(--settle), margin .4s var(--settle); }   /* margin-right cancels the trailing tracking, so the name centres under the mark */
[data-theme="v21-violet-hour"] .hdr-brand .logo { height: 36px; }
[data-theme="v21-violet-hour"] .hdr.is-tight .hdr-brand .logo { height: 29px; }
[data-theme="v21-violet-hour"] .hdr.is-tight .hdr-brand .brand-word { margin-top: 4px; font-size: 9.5px; }
[data-theme="v21-violet-hour"] .mnav-brand .logo { height: 26px; }
[data-theme="v21-violet-hour"] .mnav-brand .brand-word { margin-top: 4px; font-size: 8.5px; }
.hdr-tools { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2vw, 30px); }
.hdr-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* the Ctrl K hint sits beside the Search button, not in it: the button's name stays "Search" (WCAG 2.5.3); a click on it searches too */
.hdr-sw { display: inline-flex; align-items: center; gap: 8px; }
.hdr-kbd { font: 400 11px/1 var(--mono); border: 1px solid var(--line-2); padding: 3px 6px; border-radius: 2px; color: var(--text-2); letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.bag-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--line-2); font: 400 13px/1 var(--mono); letter-spacing: 0; }
.bag-count.bump { animation: bump .5s var(--settle); }
@keyframes bump { 30% { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } }

/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 40px 80px rgb(var(--shade) / .45); }
.mega-in { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: 40px; padding: 34px var(--gut) 40px; max-width: var(--maxw); margin: 0 auto; }
.mega.is-in .mega-in > * { animation: mm-in .5s var(--settle) both; }
.mega.is-in .mega-in > *:nth-child(2) { animation-delay: .04s; } .mega.is-in .mega-in > *:nth-child(3) { animation-delay: .08s; } .mega.is-in .mega-in > *:nth-child(4) { animation-delay: .12s; }
@keyframes mm-in { from { opacity: 0; transform: translateY(-6px); } }
.mm-h { margin: 0 0 16px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.mm-col { display: flex; flex-direction: column; gap: 2px; }
.mm-col > a { padding: 7px 0; font-size: 15.5px; text-decoration: none; color: var(--text); opacity: .85; }
.mm-col > a:hover { opacity: 1; color: var(--accent); }
.mm-all { margin-top: 8px; font-weight: 600; }
.mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.mm-prod { display: flex; align-items: center; gap: 14px; padding: 7px 8px 7px 0; text-decoration: none; border-radius: 2px; transition: background .3s; }
.mm-prod:hover { background: rgb(var(--key) / .06); }
.mm-thumb { flex: none; display: grid; place-items: center; width: 46px; height: 56px; }
.mm-thumb img { max-height: 56px; width: auto; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(var(--shade) / .55)); }
.mm-txt { display: grid; gap: 3px; }
.mm-txt b { font: 400 17px/1.15 var(--display); }
.mm-txt small { font-size: 13px; color: var(--text-2); }
.mm-feature { position: relative; display: block; overflow: hidden; min-height: 220px; border: 1px solid var(--line); text-decoration: none; }
.mm-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: transform 1.2s var(--settle), opacity .6s; }
.mm-feature:hover .mm-feature-img { transform: scale(1.04); opacity: .85; }
.mm-feature-txt { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 20px; background: linear-gradient(0deg, rgb(var(--shade) / .75), transparent); }
.mm-feature-txt small { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.mm-feature-txt b { font: 400 24px/1.1 var(--display); }
.mm-feature-txt em { font-style: normal; font-size: 14px; color: var(--text-2); }

/* the phone menu (core.js opens it from .hdr-menu) */
.hdr-menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; color: var(--text); }
.hdr-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mnav { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(420px, 100vw); height: 100%; max-height: none; padding: 0; border: 0; border-right: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.mnav::backdrop { background: rgb(var(--shade) / .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mnav[open] { animation: mnav-in .5s var(--settle); }
@keyframes mnav-in { from { transform: translateX(-40px); opacity: 0; } }
.mnav-in:focus { outline: none; }
.mnav-in { display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 14px 22px 34px; overflow-y: auto; }
.mnav-head { display: flex; justify-content: space-between; align-items: center; height: 50px; margin-bottom: 6px; }
.mnav-x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
.mnav-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mnav-search { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 16px; color: var(--text-2); text-align: left; }
.mnav-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
/* the account (round 5, #74): in the phone menu it is a row under search; on wider screens it sits in the header tools */
.mnav-account { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 16px; text-decoration: none; color: var(--text); }
.mnav-account svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.mnav-account small { margin-left: 4px; font-size: 14px; color: var(--text-2); }
.mnav-account[aria-current] { border-color: var(--accent); }
.mnav-nav { display: grid; margin: 8px 0 14px; }
.mnav-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font: 300 30px/1.1 var(--display); text-decoration: none; }
.mnav-nav a[aria-current] { color: var(--accent); }
.mnav .mm-h { margin: 14px 0 6px; }
.mnav-prods { display: grid; }
.mnav-prods a { display: flex; align-items: center; gap: 14px; padding: 6px 0; text-decoration: none; }
.mnav-prods .mm-thumb { width: 40px; height: 48px; }
.mnav-prods .mm-thumb img { max-height: 48px; }
.mnav-needs { display: flex; flex-wrap: wrap; gap: 8px; }
.mnav-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: auto 0 0; padding-top: 22px; font-size: 15px; color: var(--text-2); }
.mnav-foot a { text-decoration: none; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 2; margin-top: clamp(90px, 10vw, 150px); padding: 70px var(--gut) 30px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.foot-brandmark { display: inline-flex; margin-left: -2px; }
.foot-brandmark .logo { width: clamp(220px, 21vw, 290px); }
.foot-line { margin: 18px 0 0; font: 300 24px/1.25 var(--display); color: var(--text); max-width: 22ch; }
.foot-place { margin: 12px 0 0; color: var(--text-2); font-size: 15px; }
.news label { display: block; margin-bottom: 8px; font: 300 26px/1.2 var(--display); }
.news-text { margin: 0 0 16px; font-size: 15px; color: var(--text-2); max-width: 46ch; }
.news .fine a { color: inherit; text-underline-offset: 3px; }
.foot-ig { display: inline-flex !important; align-items: center; gap: 10px; }
.foot-ig svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.foot-ig small { display: block; font-size: 13px; color: var(--text-2); }
.news-row { display: flex; gap: 10px; }
.news-row input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; background: transparent; border: 1px solid var(--line-2); border-radius: 2px; }
.news-row input:focus { outline: none; border-color: var(--accent); }
.news-msg { min-height: 22px; margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 46px 0; }
.foot-cols h2 { margin: 0 0 14px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.foot-cols a { display: block; padding: 6px 0; font-size: 15px; text-decoration: none; opacity: .86; }
.foot-cols a:hover { opacity: 1; color: var(--accent); }
.foot-legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.foot-legal p { margin: 0; }
.foot-links { display: flex; gap: 22px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--text); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 120; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--text); color: var(--bg); font-size: 15px; border-radius: 2px; box-shadow: 0 20px 50px rgb(var(--shade) / .5); transition: opacity .35s var(--recede), transform .5s var(--settle); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 860px) { .toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(20px); justify-content: space-between; } .toast.is-on { transform: none; } }

/* ---------- bag drawer (core.js injects it) ---------- */
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); height: 100%; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.drawer::backdrop { background: rgb(var(--shade) / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer[open] { animation: drawer-in .5s var(--settle); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer-in { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font: 300 30px/1 var(--display); }
.drawer-body { flex: 1; overflow: auto; padding: 8px 26px; }
.drawer-foot { padding: 20px 26px 26px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.bag-list { list-style: none; margin: 0; padding: 0; }
.bag-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.bag-item-img { display: grid; place-items: center; width: 74px; height: 88px; background: var(--bg-3); }
.bag-item-img img { max-height: 76px; width: auto; filter: drop-shadow(0 3px 4px rgb(var(--shade) / .55)); }
.bag-item h3 { margin: 0; font: 400 19px/1.15 var(--display); }
.bag-item h3 a { text-decoration: none; }
.bag-item p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--line-2); border-radius: 2px; }
.qty button { width: 32px; height: 32px; font-size: 17px; }
.qty button:hover { background: rgb(var(--key) / .08); }
.qty output { min-width: 28px; text-align: center; font: 400 14px/1 var(--mono); }
.bag-item-side { display: grid; justify-items: end; gap: 10px; }
.bag-remove { font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.bag-empty { padding: 40px 0; color: var(--text-2); }
.bag-sub { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 16px; }
.bag-sub b { font: 400 20px/1 var(--mono); }
.fine { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }

/* ---------- .pk: a product standing on a surface (geometry from site/parts/packs.mjs) ----------
   .pk is the real pack's own outline box (set its height; the width follows --pk-car). .pk-img is the whole cutout file,
   pushed out by its measured transparent margins, so the base of the real pack always sits on the bottom edge of .pk,
   whatever the cutout's aspect ratio or margin. .pk-shadow is the contact shadow on that edge: a tight dark core where the
   base meets the surface inside a soft, wider falloff, a touch to the right of a key light from the upper left.
   No outline and no neon halo on a cutout, ever: they read as a bad matte. */
.pk { position: relative; display: block; flex: none; aspect-ratio: var(--pk-car, .5); }
.pk-img, .pk-refl { position: absolute; z-index: 1; display: block; max-width: none; object-fit: fill;
  width: calc(100% / (1 - var(--pk-ml, 0) - var(--pk-mr, 0))); height: calc(100% / var(--pk-hc, 1));
  left: calc(-100% * var(--pk-ml, 0) / (1 - var(--pk-ml, 0) - var(--pk-mr, 0))); top: calc(-100% * var(--pk-mt, 0) / var(--pk-hc, 1)); }
/* on wet stone or glass: a faint mirror image, flipped at the base and gone within a quarter of the pack */
.pk-refl { z-index: 0; opacity: .12; pointer-events: none; filter: blur(1.2px);
  transform-origin: 50% calc((1 - var(--pk-mb, 0)) * 100%); transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(180deg, transparent calc((1 - var(--pk-mb, 0) - var(--pk-hc, 1) * .26) * 100%), #000 calc((1 - var(--pk-mb, 0)) * 100%));
  mask-image: linear-gradient(180deg, transparent calc((1 - var(--pk-mb, 0) - var(--pk-hc, 1) * .26) * 100%), #000 calc((1 - var(--pk-mb, 0)) * 100%)); }
.pk-shadow { position: absolute; z-index: 0; left: 50%; bottom: 0; width: max(136%, calc(52% / var(--pk-car, .5))); aspect-ratio: 5.2; translate: -46% 52%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--shade) / .95), rgb(var(--shade) / .62) 38%, transparent) 50% 50% / 70% 40% no-repeat,
    radial-gradient(closest-side, rgb(var(--shade) / .58), rgb(var(--shade) / .24) 55%, transparent); }
/* small thumbnails (menus, bag, search): no surface, just a soft fall of shade under the pack */
.pk-thumb { filter: drop-shadow(0 4px 5px rgb(var(--shade) / .55)); }

/* ---------- .grade: tones an atmospheric photo toward the theme's key light (never product or ingredient shots) ---------- */
.grade { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgb(var(--key) / var(--plate-grade, 0)); mix-blend-mode: color; }

/* ---------- placeholders ---------- */
.img-missing { display: block; width: 100%; height: 100%; min-height: 80px; background: repeating-linear-gradient(135deg, var(--bg-2) 0 12px, var(--bg-3) 12px 24px); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--settle), transform 1.1s var(--settle); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal]:focus-within { opacity: 1; transform: none; transition: none; }   /* round 7: keyboard focus never lands on a block still faded out (WCAG 2.4.7) */
/* round 7 (WCAG 2.4.11): while a bar is open at the bottom (the product page's add bar, the cookie banner), focus scrolls
   clear of it (C43), and the page has room below its footer so the last links can scroll above it too */
html:has(.pd-bar.is-on) { scroll-padding-bottom: 96px; }
html:has(.pd-bar.is-on) body { padding-bottom: 80px; }
html:has(.consent:not([hidden])) { scroll-padding-bottom: 320px; }
html:has(.consent:not([hidden])) body { padding-bottom: 300px; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- small screens: not art-directed, just never broken ---------- */
@media (max-width: 1279px) {
  .hdr-account .hdr-label { display: none; }   /* the person icon alone, so the nav keeps its room */
  .hdr-account { min-width: 30px; justify-content: center; }
}
@media (max-width: 1300px) {   /* a slightly tighter nav, so the brand keeps the centre until the menu takes over at 1100 */
  .hdr-nav { gap: 16px; }
  .hdr-nav > a, .hdr-nav > button { font-size: 12.5px; letter-spacing: .1em; }
}
/* Round 5: from 1100 px down the header is menu button, brand, tools (search, account, bag). The full nav, the brand with
   its name and three tools no longer fit side by side there, so the nav moves into the menu (as on phones) and the brand
   stays centred (the base 1fr auto 1fr grid) between icon-only tools. Without JS the nav runs on its own row instead. */
@media (max-width: 1100px) {
  .hdr-kbd { display: none; }
  .mega-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .mm-feature { display: none; }
  .js .hdr-menu { display: inline-flex; justify-self: start; }
  .js .hdr-nav { display: none; }
  .no-js .hdr { grid-template-columns: 1fr; height: auto; padding-top: 12px; padding-bottom: 8px; row-gap: 6px; }
  .no-js .hdr-nav { order: 3; overflow-x: auto; scrollbar-width: none; }
  .no-js .hdr-shop { display: none; }
  .hdr-tools { gap: 4px; }
  .hdr-tools a, .hdr-tools button { min-width: 44px; justify-content: center; }
  .hdr-label { display: none; }
  .mega { display: none !important; }
  .announce { grid-template-columns: 1fr; justify-items: center; padding: 8px var(--gut); text-align: center; }
  .announce p:not(.announce-mid) { display: none; }
}
@media (max-width: 860px) {
  :root { --hdr-h: 64px; }
  .js .hdr { grid-template-columns: 44px 1fr auto; }
  .hdr.is-tight { height: 58px; }
  .hdr-brand .logo { height: 32px; }
  .hdr.is-tight .hdr-brand .logo { height: 29px; }
  [data-theme="v21-violet-hour"] .hdr-brand .logo, [data-theme="v21-violet-hour"] .hdr.is-tight .hdr-brand .logo { height: 25px; }
  [data-theme="v21-violet-hour"] .hdr-brand .brand-word, [data-theme="v21-violet-hour"] .hdr.is-tight .hdr-brand .brand-word { margin-top: 4px; font-size: 8px; font-weight: 600; letter-spacing: .16em; margin-right: -.16em; }
  .hdr-account { display: none !important; }   /* phones: the account row lives in the menu (.mnav-account) */
  .mega-in { grid-template-columns: 1fr; gap: 24px; max-height: calc(100vh - 120px); overflow: auto; }
  .mm-grid { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {   /* the smallest phones: the name a little smaller, so it clears the tools */
  [data-theme="v21-violet-hour"] .hdr-brand .brand-word, [data-theme="v21-violet-hour"] .hdr.is-tight .hdr-brand .brand-word { font-size: 7px; letter-spacing: .12em; margin-right: -.12em; }
}

/* Cookie choices (round 6, consent.js). Non-modal and bottom left; theme tokens only, so every theme inks it. */
.consent { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: 16px; max-width: 540px; padding: 20px 22px;
  background: color-mix(in srgb, var(--bg-deep) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 18px 60px rgb(0 0 0 / .45); color: var(--text); }
.consent[hidden] { display: none; }
.consent-h { margin: 0 0 6px; font: 300 22px/1.2 var(--display); }
.consent-p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.consent-p a { color: var(--text); }
.consent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.consent .btn { height: 40px; padding: 0 16px; font-size: 13px; }
.consent-manage { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.consent-manage[hidden] { display: none; }
.consent-manage label { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; align-items: center; font-size: 14px; cursor: pointer; }
.consent-manage input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.consent-manage small { grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.consent-manage .btn { justify-self: start; }
.foot-links .foot-cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.foot-links .foot-cookie:hover { color: var(--text); }

/* ---------- the motion switch (core.js, c.motionBtn): a pause button in a corner of each moving picture. One press pauses
   every loop, the glass rain and the shop's rain and lights, site-wide (WCAG 2.2.2). Gone for reduced motion and without JS. */
.motion-btn { position: absolute; z-index: 9; right: var(--mb-x, 14px); bottom: var(--mb-y, 14px); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: rgb(var(--bg-rgb) / .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); cursor: pointer; transition: border-color .3s, background .3s; }
.motion-btn:hover { border-color: var(--text-2); background: rgb(var(--bg-rgb) / .8); }
.motion-btn[data-corner^="t"] { top: var(--mb-y, 14px); bottom: auto; }
.motion-btn[data-corner$="l"] { left: var(--mb-x, 14px); right: auto; }
/* full-bleed pictures line the button up with the page gutter; framed ones keep it 14 px inside their corner */
.hero > .motion-btn, .shop-plate > .motion-btn, .rt-stage > .motion-btn, .info-plate > .motion-btn { --mb-x: var(--gut); --mb-y: 22px; }
.ja-cover > .motion-btn { --mb-x: calc(var(--gut) + 14px); }
.motion-btn svg { width: 14px; height: 14px; }
.motion-btn .mb-pause { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.motion-btn .mb-play { display: none; fill: currentColor; }
.motion-off .motion-btn .mb-pause { display: none; }
.motion-off .motion-btn .mb-play { display: block; }
.no-js .motion-btn, .motion-off .ledge-fx { display: none; }
@media (prefers-reduced-motion: reduce) { .motion-btn { display: none; } }
/* the cookie banner hands focus back to the page: no ring around the whole page for that */
main[tabindex="-1"]:focus { outline: none; }