/* ══════════════════════════════════════════════════════════════
   MNR — Spirit Oracle Mandalas
   ══════════════════════════════════════════════════════════════ */

:root{
  /* one sans serif throughout — Cabin, as on mothernaturesremedy.com.
     --serif is kept as the display role so existing rules need no rename. */
  --sans: "Cabin", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: var(--sans);
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --rule: 1px;
}

/* the Mother Nature's Remedy palette, sampled off mothernaturesremedy.com */
body[data-theme="mnr"]{
  --bg:#f4f2e9;  --bg-2:#ebe8da;
  --fg:#2c2528;  --fg-2:#5d5559;  --fg-3:#8f878b;
  --leaf:#89c21e; --leaf-deep:#5c8018; --moss:#5f7d2b;
  --line: rgba(44,37,40,.14);
  --panel:#ffffff;
  --fabric:#f2ede1;  --fabric-2:#e0d8c5;
  --grain-blend: multiply; --grain-opacity:.22;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--fg);
  background:var(--bg);
  font-size:16px; line-height:1.55; overflow-x:hidden;
  transition:color .9s var(--ease);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }

/* ── background stack ─────────────────────────────────────── */
/* `isolation` keeps the multiply blending inside this box; without it the
   blended canvas washes out everything painted above it. */
#bg{ position:fixed; inset:0; z-index:0; isolation:isolate; pointer-events:none; }
#veil{
  position:absolute; inset:0; background:var(--bg);
  transition:background .9s var(--ease);
}
#flow{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.6s var(--ease);
  mix-blend-mode:multiply;   /* the field prints onto the page colour */
}
#flow.on{ opacity:1; }
#grain{
  position:absolute; inset:0;
  opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}
/* isolated as well, so a blend used inside the content (the printed
   mockups) can never reach back through to the field behind it */
main, .foot, #nav{ position:relative; z-index:3; isolation:isolate; }

/* ── cursor ───────────────────────────────────────────────── */
#cursor{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; opacity:0;
  transition:opacity .3s;
}
#cursor span{
  display:block; width:100%; height:100%; border-radius:50%;
  border:1px solid var(--fg); transition:transform .35s var(--ease), background .35s;
}
#cursor.ready{ opacity:1; }
#cursor.hot span{ transform:scale(1.75); background:color-mix(in srgb, var(--fg) 12%, transparent); }
#cursor.drag span{ transform:scale(2.1); }
@media (hover:hover) and (pointer:fine){
  body, a, button{ cursor:none; }
}
@media (hover:none){ #cursor{ display:none; } }

/* ── preloader ────────────────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:grid; place-content:center; gap:1.6rem; justify-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#boot.done{ opacity:0; visibility:hidden; }
.boot-mark{ display:flex; gap:.35em; font-family:var(--serif); font-size:clamp(3rem,11vw,7rem); line-height:1; }
.boot-mark span{ opacity:0; transform:translateY(.35em); animation:bootIn .9s var(--ease) forwards; }
.boot-mark span:nth-child(2){ animation-delay:.12s; }
.boot-mark span:nth-child(3){ animation-delay:.24s; }
@keyframes bootIn{ to{ opacity:1; transform:none; } }
.boot-bar{ width:min(220px,40vw); height:1px; background:var(--line); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--fg); transition:width .3s linear; }
.boot-count{ font-size:.7rem; letter-spacing:.3em; color:var(--fg-3); font-variant-numeric:tabular-nums; }

/* ── nav ──────────────────────────────────────────────────── */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  transition:transform .5s var(--ease), background .6s, backdrop-filter .6s;
}
#nav.hidden{ transform:translateY(-105%); }
#nav.stuck{ background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(14px) saturate(1.2); }
.nav-mark{ font-family:var(--serif); font-size:1.5rem; letter-spacing:.06em; }
.nav-links{ display:flex; gap:2rem; }
.nav-links a, .nav-bag{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  background:none; border:0; padding:0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-bag em{ font-style:normal; font-variant-numeric:tabular-nums; }
@media (max-width:720px){ .nav-links{ display:none; } }

/* ── shared section furniture ─────────────────────────────── */
section{ padding:clamp(5rem,13vh,10rem) var(--pad); position:relative; }
.sec-head{ margin-bottom:clamp(2.5rem,6vw,5rem); }
.sec-head h2{
  font-family:var(--serif); font-weight:600; line-height:1;
  font-size:clamp(2.2rem,6vw,4.6rem); letter-spacing:-.02em;
}
.sec-head p{ margin-top:1rem; color:var(--fg-2); font-size:.9rem; max-width:34ch; }
.eyebrow{
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--fg-2);
}

/* reveal-on-scroll — only hides once JS confirms it can reveal again */
.js-reveal .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js-reveal .reveal.in{ opacity:1; transform:none; }
.sec-head .reveal:nth-child(2){ transition-delay:.1s; }

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(6rem,14vh,9rem); padding-bottom:3rem;
}
/* the field runs full-bleed behind the hero, so the paper is drawn back up
   under the copy and released towards the right, where nothing is set */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(103deg,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 82%, transparent) 34%,
    color-mix(in srgb, var(--bg) 34%, transparent) 62%,
    transparent 82%);
}
.hero-inner, .hero-meta{ position:relative; z-index:1; }
.hero-inner{ max-width:min(1100px, 100%); }
.hero .eyebrow, .hero-meta{ color:color-mix(in srgb, var(--fg) 74%, transparent); }
.wordmark{
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(5rem, 24vw, 20rem); letter-spacing:-.03em; color:var(--leaf-deep);
  display:flex; margin:.04em 0 .1em; user-select:none;
}
/* the clip box is widened so overhanging serifs survive whichever
   face the visitor's system resolves from the stack */
.wordmark .letter{ overflow:hidden; display:block; padding:0 .04em; margin:0 -.02em; }
.wordmark .letter i{
  display:block; font-style:normal; transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
.wordmark .letter:nth-child(2) i{ transition-delay:.09s; }
.wordmark .letter:nth-child(3) i{ transition-delay:.18s; }
body.lit .wordmark .letter i{ transform:none; }
.hero-line{
  font-family:var(--serif); font-size:clamp(1.05rem,2.1vw,1.7rem);
  line-height:1.4; max-width:34ch; color:var(--fg);
}
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2.2rem; transition-delay:.15s; }
.hero-meta{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:auto; padding-top:3rem; gap:1rem;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--fg-2);
}
.rotator{ display:inline-block; transition:opacity .45s, transform .45s var(--ease); }
.rotator.swap{ opacity:0; transform:translateY(-.5em); }
.scrollcue{ display:flex; align-items:center; gap:.7rem; }
.scrollcue i{
  display:block; width:38px; height:1px; background:var(--fg-3); position:relative; overflow:hidden;
}
.scrollcue i::after{
  content:""; position:absolute; inset:0; background:var(--fg);
  animation:cue 2.4s var(--ease-io) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* buttons */
.btn{
  display:inline-block; padding:.95rem 1.7rem; border:var(--rule) solid var(--leaf-deep);
  background:var(--leaf); color:#fff; border-radius:999px; font-weight:600;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn span{ position:relative; z-index:2; transition:color .5s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--leaf-deep); z-index:1;
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:none; }
.btn:hover span{ color:#fff; }
.btn.ghost{ background:transparent; color:var(--leaf-deep); border-color:var(--leaf-deep); }
.btn.ghost:hover span{ color:#fff; }

/* ── ticker ───────────────────────────────────────────────── */
.ticker{
  position:relative; z-index:3; overflow:hidden; padding:1.1rem 0;
  border-top:var(--rule) solid var(--line); border-bottom:var(--rule) solid var(--line);
  background:color-mix(in srgb, var(--bg) 55%, transparent);
}
.ticker-track{
  display:flex; gap:2.2rem; align-items:center; width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--serif); font-size:clamp(1.1rem,2.6vw,2rem); white-space:nowrap;
}
.ticker-track b{ font-size:.5em; color:var(--fg-3); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── collection ───────────────────────────────────────────── */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(2.5rem,4vw,4rem) clamp(1rem,2.2vw,2rem);
}
.card{ position:relative; }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); } }
.card-fig{
  position:relative; overflow:hidden; background:var(--panel); border:0; padding:0;
  aspect-ratio:1; display:grid; place-items:center;
  transition:background .6s var(--ease);
}
.card-fig svg, .card-fig .mock{ width:94%; transition:transform 1s var(--ease); }
.card-fig svg{ height:88%; overflow:visible; }
.card:hover .card-fig svg,
.card:hover .card-fig .mock{ transform:scale(1.04); }

/* ── photographed mockup ──────────────────────────────────── */
/* the print multiplies onto the garment so the fabric's own folds and
   shadows read through the ink */
.mock{ position:relative; aspect-ratio:1; isolation:isolate; }
.mock-body{ width:100%; height:100%; object-fit:contain; }
/* Multiply drops the artwork's paper on its own — anything white leaves the
   cloth untouched, so there is no white box behind the print. brightness()
   lifts the scan's near-white to true white so no faint square edge survives,
   without meaningfully touching the pigment. */
.mock-print{
  position:absolute; transform:translate(-50%,-50%);
  mix-blend-mode:multiply; opacity:.94; pointer-events:none;
  filter:brightness(1.07);
}
/* the colourway, painted through a mask of the garment itself so the
   photo's folds and shadows survive the tint */
.mock-tint{
  position:absolute; inset:0; pointer-events:none;
  background:var(--tee,#fff); mix-blend-mode:multiply;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:background .45s var(--ease);
}
.card-tag{
  position:absolute; left:0; bottom:0; padding:.5rem .8rem;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  background:var(--fg); color:var(--bg);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.card:hover .card-tag{ transform:none; }
.card-meta{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  margin-top:1rem; padding-top:.8rem; border-top:var(--rule) solid var(--line);
}
.card-name{ font-family:var(--serif); font-size:clamp(1.1rem,1.9vw,1.6rem); line-height:1.1; }
.card-sub{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-top:.3rem; }
.card-price{ font-size:.8rem; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── harmony ──────────────────────────────────────────────── */
/* photographed on the garment rather than composited, and given the room
   of a feature: it is a line of its own, not an item in the mandala grid */
.feature{
  display:grid; gap:clamp(2rem,5vw,5rem); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:860px){ .feature{ grid-template-columns:1fr; gap:2rem; } }
.feature-fig{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--panel); overflow:hidden;
}
.feature-copy h2{
  font-family:var(--serif); font-weight:400; line-height:.95;
  font-size:clamp(2.4rem,6vw,4.4rem); letter-spacing:-.015em; margin:.6rem 0 1.1rem;
}
.feature-blurb{ font-size:1rem; line-height:1.6; color:var(--fg-2); max-width:44ch; }
.feature-meta{
  margin-top:1.2rem; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-2);
}
.feature-colours{ display:flex; gap:1.1rem; flex-wrap:wrap; margin:1.5rem 0 1.8rem; }
.feature-colours .fc{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
}
.feature-colours i{
  width:34px; height:34px; border-radius:50%; display:block;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(21,20,26,.22);
}
.feature-buy{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.harmony-shot{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  transition:transform 1s var(--ease);
}
.feature-fig:hover .harmony-shot{ transform:scale(1.04); }
.feature-fig:hover .card-tag{ transform:none; }
.sheet-fig{ position:relative; }
.sheet-fig .harmony-shot{ width:100%; height:100%; object-fit:cover; }
.fig-note{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem 1rem;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; text-align:center;
}
.fig-note[hidden]{ display:none; }

/* ── the cloth ────────────────────────────────────────────── */
.cloth-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.75rem,1.6vw,1.5rem);
}
@media (max-width:760px){ .cloth-grid{ grid-template-columns:repeat(2,1fr); } }
.cloth-item{ margin:0; }
.cloth-item img{
  width:100%; aspect-ratio:1; object-fit:cover; background:var(--panel);
  transition:transform 1s var(--ease);
}
.cloth-item:hover img{ transform:scale(1.03); }
.cloth-item figcaption{
  margin-top:.85rem; padding-top:.7rem; border-top:var(--rule) solid var(--line);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-2);
}

/* ── archive ──────────────────────────────────────────────── */
.archive-readout{
  display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem;
  border-bottom:var(--rule) solid var(--line); padding-bottom:1rem; min-height:3.2rem;
}
.ro-num{ font-size:.7rem; letter-spacing:.2em; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.ro-name{ font-family:var(--serif); font-size:clamp(1.2rem,3.4vw,2.4rem); line-height:1; }
.coins{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:clamp(2px,.5vw,6px);
}
.coin{
  position:relative; aspect-ratio:1; background:#f6f2e9; border:0; padding:0;
  overflow:hidden; opacity:.82; transition:opacity .4s, transform .5s var(--ease), filter .4s;
}
.coin img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.coin:hover, .coin:focus-visible{ opacity:1; transform:scale(1.12); z-index:2; outline:none; }
.coin::after{
  content:attr(data-n); position:absolute; top:4px; left:5px;
  font-size:.5rem; letter-spacing:.1em; color:#8d8778; opacity:0; transition:opacity .3s;
}
.coin:hover::after{ opacity:1; }

/* ── ethos ────────────────────────────────────────────────── */
.ethos{ display:block; }
.ethos-lede{
  font-family:var(--serif); font-size:clamp(1.25rem,2.6vw,2rem); line-height:1.35;
  max-width:34ch; margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.ethos-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(2rem,5vw,4rem); }
.ethos-col h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.3rem);
  margin-bottom:.8rem; padding-bottom:.8rem; border-bottom:var(--rule) solid var(--line);
}
.ethos-col p{ color:var(--fg-2); font-size:.92rem; max-width:34ch; }
.ethos-col:nth-child(2){ transition-delay:.1s; }
.ethos-col:nth-child(3){ transition-delay:.2s; }

/* ── signup ───────────────────────────────────────────────── */
.signup{ text-align:center; }
.signup h2{
  font-family:var(--serif); font-weight:400; line-height:1.05;
  font-size:clamp(1.9rem,5.5vw,4rem); max-width:16ch; margin-inline:auto;
}
.signup-actions{ transition-delay:.08s; }
.signup-form{
  display:flex; gap:0; max-width:440px; margin:2.5rem auto 0;
  border-bottom:var(--rule) solid var(--fg); transition-delay:.1s;
}
.signup-form input{
  flex:1; background:none; border:0; padding:.9rem .2rem; outline:none;
  font-size:.95rem;
}
.signup-form input::placeholder{ color:var(--fg-3); }
.signup-form button{
  background:none; border:0; padding:.9rem 0 .9rem 1.2rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
}
.signup-note{ margin-top:1rem; font-size:.78rem; color:var(--fg-2); min-height:1.4em; }

/* ── footer ───────────────────────────────────────────────── */
.foot{
  padding:clamp(3rem,7vw,6rem) var(--pad) 2rem;
  border-top:var(--rule) solid var(--line);
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) auto;
}
.foot-mark{ font-family:var(--serif); font-size:clamp(3rem,12vw,9rem); line-height:.8; letter-spacing:-.02em; }
.foot-cols{ display:flex; gap:clamp(1.5rem,4vw,4rem); }
.foot-cols div{ display:flex; flex-direction:column; gap:.45rem; }
.foot-cols h4{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3);
  font-weight:400; margin-bottom:.35rem;
}
.foot-cols a{ font-size:.82rem; opacity:.8; transition:opacity .3s; }
.foot-cols a:hover{ opacity:1; }
.foot-legal{
  grid-column:1 / -1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding-top:1.5rem; border-top:var(--rule) solid var(--line);
  font-size:.68rem; color:var(--fg-3);
}
@media (max-width:640px){ .foot{ grid-template-columns:1fr; } }

/* ── product sheet ────────────────────────────────────────── */
.sheet{
  position:fixed; inset:0; z-index:70; background:var(--bg);
  overflow-y:auto; padding:clamp(3.5rem,8vw,5rem) var(--pad);
  opacity:0; visibility:hidden; transform:translateY(2%);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.sheet.open{ opacity:1; visibility:visible; transform:none; }
.sheet-close{
  position:fixed; top:1.4rem; right:var(--pad); z-index:2;
  background:none; border:0; font-size:1.1rem; padding:.4rem;
}
.sheet-body{
  display:grid; gap:clamp(2rem,6vw,5rem); align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); max-width:1300px; margin-inline:auto;
}
@media (max-width:820px){ .sheet-body{ grid-template-columns:1fr; } }
.sheet-fig{ background:var(--panel); aspect-ratio:1; display:grid; place-items:center; }
.sheet-fig svg{ width:84%; height:84%; overflow:visible; }
.sheet-fig .mock{ width:92%; }
.sheet-num{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--fg-3); }
.sheet-title{
  font-family:var(--serif); font-weight:400; line-height:.95;
  font-size:clamp(2.2rem,6vw,4.4rem); margin:.5rem 0 .2rem; letter-spacing:-.015em;
}
.sheet-garment{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); }
.sheet-msg{ margin:1.8rem 0; color:var(--fg-2); font-size:.95rem; max-width:44ch; }
.sheet-affirm{
  font-family:var(--serif); font-size:clamp(1.05rem,2.2vw,1.5rem); line-height:1.35;
  padding:1.2rem 0 1.2rem 1.4rem; border-left:2px solid var(--fg); max-width:38ch;
}
.sheet-swatches{ display:flex; gap:1rem; margin:1.6rem 0; flex-wrap:wrap; }
.sheet-swatches .sw{
  background:none; border:0; padding:0; display:flex; flex-direction:column;
  align-items:center; gap:.45rem; opacity:.72; transition:opacity .3s;
}
.sheet-swatches .sw[aria-pressed="true"]{ opacity:1; }
.sheet-swatches i{
  width:34px; height:34px; border-radius:50%; display:block;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(21,20,26,.22);
  outline:1px solid transparent; outline-offset:3px; transition:outline-color .3s;
}
.sheet-swatches .sw[aria-pressed="true"] i{ outline-color:var(--fg); }
.sheet-swatches span{ font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; }
.sizes{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1.6rem 0; }
.sizes button{
  background:none; border:var(--rule) solid var(--line); padding:.6rem 1rem;
  font-size:.68rem; letter-spacing:.16em; transition:border-color .3s, background .3s, color .3s;
}
.sizes button[aria-pressed="true"]{ border-color:var(--fg); background:var(--fg); color:var(--bg); }
.sheet-buy{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; }
.sheet-price{ font-size:1.1rem; font-variant-numeric:tabular-nums; }
.sheet-ship{ margin-top:1.1rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.sheet-spec{ margin-top:.5rem; font-size:.78rem; color:var(--fg-2); }

/* ── the artist behind a collection ───────────────────────── */
.artist-note{ max-width:62ch; }
/* with a portrait the note runs two up: words left, artist right, the words
   centred against the taller image so neither column is left hanging */
.artist-note.has-portrait{
  max-width:none;
  display:grid; gap:clamp(2rem,4vw,4rem); align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(300px, 38%, 480px);
}
.artist-words{ max-width:none; }
/* the bio runs in two narrow measures so the column fills rather than
   leaving a gutter beside the portrait */
.artist-bio{ columns:2; column-gap:clamp(1.5rem,3vw,2.75rem); }
.artist-bio p{ break-inside:avoid-column; }
@media (max-width:1180px){ .artist-bio{ columns:1; max-width:52ch; } }
/* matted like the product plates, so she does not float on the dark */
.artist-portrait{
  margin:0; background:var(--panel); padding:clamp(.5rem,1vw,.85rem);
}
.artist-portrait img{ width:100%; height:auto; display:block; }
@media (max-width:820px){
  .artist-note.has-portrait{ grid-template-columns:1fr; gap:2rem; }
  .artist-words{ max-width:none; }
  .artist-portrait{ order:-1; max-width:400px; }
}
.artist-note h3{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-3); font-weight:400; margin-bottom:1.1rem;
}
.artist-name{
  font-family:var(--serif); font-weight:400; line-height:1;
  font-size:clamp(2rem,4.4vw,3.4rem); letter-spacing:-.015em; margin-bottom:1.3rem;
}
.artist-note p + p{ margin-top:.9rem; }
.artist-bio p:first-child{ margin-top:0; }
.artist-note p:not(.artist-name){ font-size:.92rem; line-height:1.65; color:var(--fg-2); }
.artist-link{
  display:inline-block; margin-top:1.2rem; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:.25rem;
  transition:border-color .3s;
}
.artist-link:hover{ border-color:var(--fg); }

/* one line of credit on a listing — the note stays with the collection */
.sheet-credit{
  margin-top:1.4rem; padding-top:1.1rem; border-top:var(--rule) solid var(--line);
  font-size:.72rem; color:var(--fg-2);
}
.sheet-credit a{ border-bottom:1px solid var(--line); padding-bottom:.15rem; transition:border-color .3s; }
.sheet-credit a:hover{ border-color:var(--fg); }

/* ── bag / help drawer ────────────────────────────────────── */
.bag-veil{
  position:fixed; inset:0; z-index:78; background:rgba(21,20,26,.38);
  opacity:0; transition:opacity .4s var(--ease); backdrop-filter:blur(2px);
}
.bag-veil.on{ opacity:1; }
.bag{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(440px, 100%); background:var(--bg);
  border-left:var(--rule) solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .5s var(--ease);
}
.bag.open{ transform:none; }
.bag-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--bagpad, 1.75rem) 1.1rem;
  border-bottom:var(--rule) solid var(--line);
}
.bag-head h2{ font-family:var(--serif); font-weight:400; font-size:1.8rem; }
.bag-close{ background:none; border:0; font-size:1rem; padding:.4rem; }
.bag-items{ flex:1; overflow-y:auto; padding:1.25rem var(--bagpad, 1.75rem); }
.bag-empty{ color:var(--fg-2); font-size:.9rem; }
.bag-line{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:1rem;
  padding:1rem 0; border-bottom:var(--rule) solid var(--line); align-items:start;
}
.bag-line img{ width:64px; height:64px; object-fit:cover; background:var(--panel); }
.bag-line-copy h3{ font-family:var(--serif); font-weight:400; font-size:1.05rem; }
.bag-line-copy p{
  margin-top:.2rem; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3);
}
.qty{ display:flex; align-items:center; gap:.7rem; margin-top:.6rem; }
.qty button{
  background:none; border:var(--rule) solid var(--line); width:26px; height:26px;
  line-height:1; transition:border-color .3s;
}
.qty button:hover{ border-color:var(--fg); }
.qty span{ font-size:.8rem; font-variant-numeric:tabular-nums; min-width:1ch; text-align:center; }
.bag-line-end{ display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.bag-line-price{ font-size:.85rem; font-variant-numeric:tabular-nums; }
.bag-remove{
  background:none; border:0; padding:0; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); border-bottom:1px solid var(--line);
}
.bag-remove:hover{ color:var(--fg); }
.bag-foot{ padding:1.25rem var(--bagpad, 1.75rem) 1.75rem; border-top:var(--rule) solid var(--line); }
.bag-total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.bag-total span:last-child{ font-size:1.25rem; letter-spacing:0; font-variant-numeric:tabular-nums; }
.bag-ship{ margin-top:.5rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); }
.bag-foot .btn{ display:block; width:100%; text-align:center; margin-top:1.1rem; }
.bag-foot .btn.is-disabled{ opacity:.35; pointer-events:none; }
.bag-msg{ margin-top:.8rem; font-size:.78rem; color:var(--fg-2); min-height:1.2em; }
.help-panel .bag-items p + p{ margin-top:.9rem; }
.help-panel .bag-items p{ font-size:.92rem; line-height:1.65; color:var(--fg-2); }

/* ── toast ────────────────────────────────────────────────── */
.toast{
  /* 150% of its own height was not enough to clear the fold — an empty
     toast is only padding tall, so a slice of it sat on every screen */
  position:fixed; left:50%; bottom:2rem; z-index:95;
  transform:translate(-50%, calc(100% + 2rem));
  background:var(--fg); color:var(--bg); padding:.8rem 1.4rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  transition:transform .55s var(--ease);
}
.toast.show{ transform:translate(-50%,0); }

/* ── garment drawing ──────────────────────────────────────── */
.g-outline{ fill:none; stroke:rgba(30,26,20,.35); stroke-width:2.5; }
.g-seam{ fill:none; stroke:rgba(30,26,20,.22); stroke-width:1.5; stroke-dasharray:5 5; }
.g-shade{ fill:rgba(60,50,35,.07); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════════
   Mother Nature's Remedy theme + variants
   ══════════════════════════════════════════════════════════════ */

/* the announcement bar, as on mothernaturesremedy.com */
.announce{
  position:relative; z-index:4; background:var(--moss); color:#fff;
  text-align:center; font-size:.8rem; letter-spacing:.04em; padding:.55rem var(--pad);
}
.announce{ height:var(--announce); display:flex; align-items:center; justify-content:center; padding-block:0; }
:root{ --announce:2.1rem; }
#nav{ top:var(--announce); transition:top .4s var(--ease), transform .5s var(--ease), background .4s; }
#nav.stuck{ top:0; }
.nav-mark{ font-weight:700; color:var(--leaf-deep); letter-spacing:.02em; }
.nav-links a, .nav-bag{ font-weight:600; letter-spacing:.14em; }
.hero-line{ font-weight:400; }
.eyebrow{ color:var(--leaf-deep); font-weight:600; }

/* outside the mandala collection the ground is the plain MNR cream, with
   a soft leaf wash instead of the mandala field */
#veil{ transition:background .9s var(--ease), opacity .9s var(--ease); }
#veil::after{
  content:""; position:absolute; inset:0; opacity:1; transition:opacity 1.2s var(--ease);
  background:
    radial-gradient(60vmax 50vmax at 88% 8%, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 70%),
    radial-gradient(55vmax 45vmax at 6% 96%, color-mix(in srgb, var(--moss) 12%, transparent), transparent 70%);
}
body.in-mandala #veil::after{ opacity:0; }
.hero::before{ display:none; }

/* cards sit on white, like product tiles on the MNR shop */
.card-fig{ background:var(--panel); border-radius:14px; box-shadow:0 1px 0 var(--line); }
.card-name{ font-weight:600; }
.sheet-fig{ border-radius:18px; }
.sheet-title{ font-weight:600; }

/* ── blank tee + transparency ─────────────────────────────── */
.tee{ position:relative; width:94%; isolation:isolate; transition:transform 1s var(--ease); }
.tee-body{ width:100%; height:auto; transition:filter .4s var(--ease); }
.tee-print{
  position:absolute; transform:translate(-50%,-50%); height:auto;
  pointer-events:none; opacity:.97;
  /* a touch of give, so the ink reads as printed rather than pasted */
  filter:saturate(.94) contrast(.97) drop-shadow(0 .5px .5px rgba(0,0,0,.18));
}
.card:hover .card-fig .tee{ transform:scale(1.04); }
.sheet-fig .tee{ width:92%; }
.tee.pending::after{
  content:"Photo coming soon"; position:absolute; left:50%; top:46%;
  transform:translate(-50%,-50%); padding:.45rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.88); color:var(--fg); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}

/* ── print placement picker ───────────────────────────────── */
.placements{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1.6rem 0 0; }
.placements button{
  display:flex; align-items:center; gap:.55rem; background:none;
  border:var(--rule) solid var(--line); border-radius:999px; padding:.55rem 1rem .55rem .7rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  transition:border-color .3s, background .3s, color .3s;
}
.placements button[aria-pressed="true"]{ border-color:var(--leaf-deep); background:var(--leaf-deep); color:#fff; }
/* a tiny tee with the print's spot marked */
.pl-icon{ width:20px; height:20px; display:block; flex:none; }
.pl-icon path{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.pl-icon .pl-back path{ stroke-dasharray:2 1.6; }
.pl-icon circle{ fill:currentColor; }

/* ── the mandala hero: a flat-lay collage of the tees ─────── */
.mhero{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:center;
  min-height:100svh; padding-top:clamp(6rem,12vh,8rem);
}
.mhero-copy{ position:relative; z-index:2; }
.mhero-title{
  font-weight:700; line-height:.95; letter-spacing:-.03em;
  font-size:clamp(2.8rem,6.4vw,6rem); margin:.9rem 0 1.2rem; color:var(--fg);
}
.mhero-line{ font-size:clamp(1rem,1.5vw,1.2rem); color:var(--fg-2); max-width:32ch; }
.collage{
  position:relative; aspect-ratio:1.08; width:100%;
  --mx:0; --my:0;
}
.cl-item{
  position:absolute; transform:translate(-50%,-50%);
  background:none; border:0; padding:0; display:block;
}
.cl-float{
  display:block;
  transform:
    translate(calc(var(--mx) * var(--d) * -38px), calc(var(--my) * var(--d) * -30px))
    rotate(var(--r));
  transition:transform 1.1s var(--ease), filter .5s var(--ease);
  filter:drop-shadow(0 18px 22px rgba(44,37,40,.16)) drop-shadow(0 3px 4px rgba(44,37,40,.12));
}
.cl-item .tee{ width:100%; }
.cl-item:hover{ z-index:20 !important; }
.cl-item:hover .cl-float{
  transform:
    translate(calc(var(--mx) * var(--d) * -38px), calc(var(--my) * var(--d) * -30px))
    rotate(calc(var(--r) * .35)) scale(1.07);
  filter:drop-shadow(0 30px 34px rgba(44,37,40,.24)) drop-shadow(0 4px 6px rgba(44,37,40,.14));
}
.cl-tag{
  position:absolute; left:50%; bottom:2%; transform:translate(-50%,6px);
  padding:.35rem .8rem; border-radius:999px; background:#fff; color:var(--fg);
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; opacity:0; transition:opacity .35s, transform .45s var(--ease);
  box-shadow:0 4px 14px rgba(44,37,40,.12); pointer-events:none;
}
.cl-item:hover .cl-tag, .cl-item:focus-visible .cl-tag{ opacity:1; transform:translate(-50%,0); }
/* the tees settle in one after another */
.js-reveal .cl-item .cl-float{ opacity:0; }
.js-reveal .collage.in .cl-float{ opacity:1; }
.collage .cl-float{ transition:transform 1.1s var(--ease), filter .5s var(--ease), opacity .8s var(--ease);
  transition-delay:calc(var(--k) * 90ms), 0s, calc(var(--k) * 90ms); }
.collage .cl-item:hover .cl-float{ transition-delay:0s; }
@media (max-width:860px){
  .mhero{ grid-template-columns:1fr; min-height:0; }
  .collage{ order:-1; aspect-ratio:1; }
  .cl-item.wide{ display:none; }
}

/* ── the index ────────────────────────────────────────────── */
.coins{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:clamp(6px,1.2vw,14px); }
.coin{ background:none; opacity:1; overflow:visible; }
.coin img{ object-fit:contain; mix-blend-mode:normal; transition:opacity .2s; }
.coin:hover, .coin:focus-visible{ transform:none; }
.coin.lensed img{ opacity:0; }
.coin::after{ display:none; }

/* the lens: tee laid with its print over the coin, then opened */
.lens{
  position:fixed; z-index:60; pointer-events:none;
  transform-origin:var(--ox) var(--oy);
  transform:translate(var(--dx),var(--dy)) scale(var(--s0));
  transition:transform .55s var(--ease);
}
.lens.touch{ pointer-events:auto; }
.lens .tee{ width:100%; }
.lens .tee-body{ opacity:0; transition:opacity .35s var(--ease) .05s; }
.lens{ filter:drop-shadow(0 26px 30px rgba(44,37,40,0)); }
.lens.open{ transform:none; filter:drop-shadow(0 26px 30px rgba(44,37,40,.22)); transition:transform .55s var(--ease), filter .55s; }
.lens.open .tee-body{ opacity:1; }
.lens.go{ transform:scale(1.12); opacity:0; transition:transform .38s var(--ease), opacity .38s; }
.lens-tag{
  display:flex; align-items:baseline; gap:.6rem; justify-content:center;
  margin-top:.4rem; opacity:0; transform:translateY(-6px);
  transition:opacity .3s, transform .4s var(--ease);
}
.lens.open .lens-tag{ opacity:1; transform:none; transition-delay:.18s; }
.lens-tag{ background:#fff; border-radius:999px; padding:.55rem 1rem; width:max-content; margin-inline:auto;
  box-shadow:0 6px 18px rgba(44,37,40,.12); }
.lens-num{ font-size:.66rem; letter-spacing:.18em; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.lens-name{ font-weight:600; font-size:1rem; }
.lens-go{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf-deep); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .lens, .lens.open{ transition:none; } }

/* ── the MNR line ─────────────────────────────────────────── */
.mnr-grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); max-width:1100px; }
.card-fig.is-shot img{ width:100%; height:100%; object-fit:cover; }
.card-fig .tee{ filter:drop-shadow(0 10px 14px rgba(44,37,40,.12)); }

/* ── sign-off ─────────────────────────────────────────────── */
.signoff{ text-align:center; padding-block:clamp(6rem,18vh,12rem); }
.signoff-line{
  font-weight:700; text-transform:uppercase; line-height:.92; letter-spacing:-.025em;
  font-size:clamp(3rem,11vw,10rem); color:var(--leaf-deep); max-width:12ch; margin-inline:auto;
}
@media (max-width:560px){ .coins{ grid-template-columns:repeat(4,1fr); gap:8px; } }

/* ── the MNR hero: the mandala hero's layout, mirrored ────── */
.mnr-line > .mhero{ padding:0; margin-bottom:clamp(3rem,8vw,6rem); min-height:0; }
.mhero--flip{ grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); }
@media (max-width:860px){ .mhero--flip{ grid-template-columns:1fr; } }
.sheet-fig .fig-art{ width:100%; display:grid; place-items:center; }
.sheet-fig .fig-art .harmony-shot{ width:100%; }
.coin{ cursor:pointer; }

/* ── the MNR hero: a spotlight ────────────────────────────── */
.spot{
  --ink:#f4f2e9; --ink-2:rgba(244,242,233,.62);
  position:relative; overflow:hidden; isolation:isolate;
  margin:0 calc(var(--pad) * -1) clamp(3rem,8vw,6rem);
  padding:clamp(5rem,10vh,7rem) var(--pad) clamp(2rem,5vh,3rem);
  min-height:min(100svh,940px);
  display:grid; grid-template-rows:auto 1fr auto; gap:1rem;
  color:var(--ink);
  background:
    radial-gradient(42% 46% at 50% 52%, rgba(137,194,30,.20), transparent 70%),
    radial-gradient(80% 70% at 50% 60%, #2b4422 0%, #1a2614 62%, #121a0e 100%);
}
.mnr-line{ padding-top:0; }
/* the wordmark behind everything, set in outline */
.spot-word{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  z-index:-1; margin:0; pointer-events:none; user-select:none;
  font-weight:700; text-transform:uppercase; letter-spacing:-.04em; line-height:.8;
  font-size:clamp(5rem,21vw,22rem); white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.5px rgba(244,242,233,.16);
}
.spot-tag{
  position:absolute; z-index:0; font-size:.7rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-2);
}
/* the four words ring the tee itself, so they never land on it */
.spot-mid{ position:relative; justify-self:center; align-self:center; padding:2.6rem 3.4rem; }
.spot-tag.t-n{ top:.6rem; left:50%; transform:translateX(-50%); }
.spot-tag.t-s{ bottom:.6rem; left:50%; transform:translateX(-50%); }
.spot-tag.t-w{ top:50%; left:1.6rem; transform:translate(-50%,-50%) rotate(-90deg); }
.spot-tag.t-e{ top:50%; right:1.6rem; transform:translate(50%,-50%) rotate(90deg); }
.spot-head{ position:relative; z-index:2; text-align:center; }
.spot-head .eyebrow{ color:var(--leaf); }
.spot-title{
  font-weight:700; letter-spacing:-.03em; line-height:1;
  font-size:clamp(2rem,4.6vw,3.8rem); margin-top:.6rem;
}
/* the tee: two layers so a change cross-fades instead of blinking */
.spot-stage{
  position:relative; z-index:1; justify-self:center; align-self:center;
  display:block; width:min(52vw,560px); aspect-ratio:1.25; background:none; border:0; padding:0;
}
.spot-layer{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform:scale(.965) rotate(-1.5deg);
  transition:opacity .9s var(--ease), transform 1.2s var(--ease);
}
.spot-layer.on{ opacity:1; transform:none; }
.spot-layer .tee{ width:100%; filter:drop-shadow(0 40px 46px rgba(0,0,0,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.spot-stage:hover .spot-layer.on{ transform:scale(1.025); }
.spot-foot{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap;
}
.spot-ctl{ display:flex; flex-direction:column; gap:.9rem; }
.spot-places{ display:flex; gap:.5rem; flex-wrap:wrap; }
.spot-places button{
  display:flex; align-items:center; gap:.5rem; color:var(--ink);
  background:rgba(244,242,233,.06); border:1px solid rgba(244,242,233,.22);
  border-radius:999px; padding:.5rem .95rem .5rem .65rem;
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s, border-color .3s, color .3s;
}
.spot-places button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#1a2614; }
.spot-dots{ display:flex; gap:.7rem; align-items:center; }
.spot-dots button{
  width:26px; height:26px; border-radius:50%; padding:0; border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  outline:1.5px solid transparent; outline-offset:3px; transition:outline-color .3s;
}
.spot-dots button[aria-pressed="true"]{ outline-color:var(--ink); }
.spot-buy{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:flex-end; }
.spot-now{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
/* a thin bar that fills while a variant is on show */
.spot-ctl::after{
  content:""; display:block; height:2px; width:180px; border-radius:2px;
  background:linear-gradient(var(--leaf),var(--leaf)) left/var(--prog,0%) 100% no-repeat, rgba(244,242,233,.14);
}
@media (max-width:760px){
  .spot{ min-height:0; grid-template-rows:auto auto auto; }
  .spot-mid{ padding:2rem 0; width:100%; }
  .spot-stage{ width:100%; }
  .spot-tag.t-w, .spot-tag.t-e{ display:none; }
  .spot-foot{ flex-direction:column; align-items:stretch; }
  .spot-buy{ justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce){ .spot-layer{ transition:opacity .3s; transform:none; } }

/* a slight hover on the index — a lift and a turn; only a click opens the tee */
.coin img{
  transition:opacity .2s, transform .5s var(--ease), filter .5s var(--ease);
}
@media (hover:hover){
  .coin:hover img{
    transform:scale(1.08) rotate(6deg);
    filter:drop-shadow(0 8px 10px rgba(44,37,40,.18));
  }
}
.coin:focus-visible img{ transform:scale(1.08); }

/* a colour that's offered but can't be shown yet */
.sheet-swatches .sw.soon{ opacity:.38; cursor:not-allowed; }
.sheet-swatches .sw.soon i{ box-shadow:inset 0 0 0 1px rgba(21,20,26,.22); position:relative; }
.sheet-swatches .sw.soon i::after{
  content:""; position:absolute; left:50%; top:50%; width:120%; height:1.5px;
  background:rgba(21,20,26,.55); transform:translate(-50%,-50%) rotate(-45deg);
}
.sheet-soon{ margin-top:-.6rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }