/* YUAMI store. USUL-style: black on white, big photographs, almost no colour.
   The only colour on the page comes from the plants in the photos. */
:root {
  --ink: #1A1A1A;
  --paper: #FFFFFF;
  --cream: #F7F5F0;          /* the tube paper */
  --stone: #EDEBE7;          /* photo seamless, second ground */
  --mute: #6E6B66;
  --line: rgba(26, 26, 26, .14);

  --display: "Cormorant Garamond", "Times New Roman", serif;   /* wordmark, scent names */
  --kanji: "Shippori Mincho", serif;
  --ui: "Jost", system-ui, sans-serif;                         /* everything else */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;
  --bar-h: 32px;
  --head-h: 64px;
}
@media (min-width: 768px) { :root { --gutter: 32px; --head-h: 76px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--ui); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wrap { padding-inline: var(--gutter); max-width: 1600px; margin-inline: auto; }

/* labels: one family, .18em */
.t-label { font: 500 12px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.t-h2 { font: 700 clamp(28px, 4.4vw, 52px)/1 var(--ui); letter-spacing: -.01em; text-transform: uppercase; margin: 0; text-box: trim-both cap alphabetic; }

/* ---------- announcement bar ---------- */
.announce { position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 60; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.announce p { margin: 0; font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; margin-right: -.18em; }

/* ---------- header ---------- */
.head { position: fixed; top: var(--bar-h); inset-inline: 0; height: var(--head-h); z-index: 50; color: var(--paper);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding-inline: var(--gutter);
  transition: background .3s, color .3s, border-color .3s; border-bottom: 1px solid transparent; }
@media (min-width: 1024px) { .head { column-gap: 48px; } }
.head.solid, body.inner .head { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
.nav { display: none; gap: 28px; }
.nav a, .icons a, .icons button { transition: translate .2s, text-shadow .2s; }
.nav a:hover, .icons a:hover, .icons button:hover { translate: 0 -2px; text-shadow: 0 0 6px rgba(26, 26, 26, .14), 0 0 14px rgba(26, 26, 26, .08); }   /* lift + a light glow; the full-ink glow read as a dark smudge on white */
@media (min-width: 900px) { .nav { display: flex; } .burger { display: none; } }
.burger svg, .icons svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.mark { font: 500 26px/1 var(--display); letter-spacing: .38em; margin-right: -.38em; transition: translate .2s; }
.mark:hover { translate: 0 -2px; }
@media (min-width: 768px) { .mark { font-size: 32px; } }
.icons { display: flex; gap: 18px; justify-content: flex-end; align-items: center; }
.icons .count { font: 500 11px/1 var(--ui); margin-left: 2px; vertical-align: 6px; }
.icons .hide-sm { display: none; }
@media (min-width: 640px) { .icons .hide-sm { display: inline-flex; } }
.menu { position: fixed; top: calc(var(--bar-h) + var(--head-h)); inset-inline: 0; background: var(--paper); color: var(--ink); z-index: 49; padding: var(--s5) var(--gutter); border-bottom: 1px solid var(--line); display: grid; gap: var(--s4); }

/* ---------- hero: slow cross-fade between stills ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #2b2724; color: var(--paper); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.slide.on img { animation: drift 9s ease-out forwards; }
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 128px; z-index: 1; background: linear-gradient(rgba(0,0,0,.35), transparent); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: 1; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.hero-copy { position: absolute; inset: auto 0 0 0; z-index: 2; text-align: center; padding: 0 var(--gutter) clamp(40px, 9svh, 96px); }
.eyebrow { font: 500 12px/1.5 var(--ui); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 var(--s4); }
.eyebrow span { margin-right: -.18em; }
.eyebrow .dot { margin-inline: .7em; }
.hero h1 { margin: 0 0 var(--s5); font: 500 clamp(40px, 7.4vw, 104px)/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.dots { position: absolute; z-index: 2; right: var(--gutter); bottom: 24px; display: flex; gap: 8px; }
.dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); }
.dots button.on { background: var(--paper); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 36px; font: 500 12px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); transition: translate .2s, box-shadow .2s; }
.btn span { margin-right: -.18em; }
.btn:hover { translate: 0 -3px; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.btn:active { scale: .98; }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.wide { width: 100%; }

/* ---------- marquee ---------- */
.marquee { height: 67px; overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--paper); }
@media (min-width: 768px) { .marquee { height: 100px; } }
.track { display: flex; width: max-content; animation: slide var(--dur, 264s) linear infinite reverse; }
.marquee.paused .track { animation-play-state: paused; }
.run { display: flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; font: 700 clamp(16px, 1.9vw, 24px)/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; margin-inline: auto; } }
/* separator: a tablet with bubbles fizzing off it */
.fizz { position: relative; width: 22px; height: 22px; flex: none; }
.fizz i { position: absolute; left: 3px; bottom: 2px; width: 16px; height: 9px; border: 1.6px solid var(--ink); border-radius: 50%; }
.fizz b { position: absolute; bottom: 9px; width: 4px; height: 4px; border: 1.3px solid var(--ink); border-radius: 50%; opacity: 0; animation: bubble 2.4s ease-in infinite; }
.fizz b:nth-child(2) { left: 5px; animation-delay: 0s; }
.fizz b:nth-child(3) { left: 11px; animation-delay: .8s; width: 3px; height: 3px; }
.fizz b:nth-child(4) { left: 15px; animation-delay: 1.6s; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

/* ---------- sections ---------- */
.section { padding: var(--s6) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); margin-bottom: var(--s6); }
.ground-stone { background: var(--stone); }
.ground-cream { background: var(--cream); }

/* product grid, USUL tiles: photo swaps to the real plant on hover */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s3); }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); } }
.card { display: block; }
.card .ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: transparent; }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .1s; }   /* USUL: 0.1s swap, no zoom */
.card .ph .alt { opacity: 0; }
.card:hover .ph .alt, .card:focus-visible .ph .alt { opacity: 1; }
.card:hover .ph img:not(.alt):not(.bug), .card:focus-visible .ph img:not(.alt):not(.bug) { opacity: 0; }
/* USUL ladybug move: the bug sits on its own layer and never moves while the tube swaps to the plant */
.card .ph .bug { z-index: 1; pointer-events: none; }
.card .kj { position: absolute; top: 14px; right: 14px; z-index: 1; font: 500 13px/1.1 var(--kanji); writing-mode: vertical-rl; letter-spacing: .15em; color: var(--ink); }
.card .meta { padding-top: var(--s3); display: grid; gap: 4px; }
.card .name { font: 500 18px/1.2 var(--ui); letter-spacing: .02em; margin: 0; }
.card .notes { color: var(--mute); font-size: 13px; line-height: 1.45; }
.card .price { font-size: 14px; }
.quick { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(26,26,26,.55); color: var(--paper); display: grid; place-items: center; transition: translate .2s, background .2s; }
.quick:hover { translate: 0 -2px; background: var(--ink); }
.quick svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ritual */
.ritual { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .ritual { grid-template-columns: 5fr 7fr; gap: var(--s8); } }
.ritual .ph { width: min(300px, 70%); margin-inline: auto; }
.ritual .ph img { width: 100%; height: auto; display: block; }
.steps { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); padding: var(--s4) 0; }
.steps li + li { border-top: 1px solid var(--line); }
.steps .n { font: 500 28px/1 var(--display); }
.steps h3 { margin: 0 0 6px; font: 500 18px/1.2 var(--ui); letter-spacing: .02em; }
.steps p { margin: 0; color: var(--mute); }

/* story */
.story { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .story { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--s8); } }
.story .word { font: 500 clamp(56px, 9vw, 128px)/1 var(--kanji); letter-spacing: .08em; }
.story .romaji { font: 500 15px/1 var(--display); letter-spacing: .4em; text-transform: uppercase; margin-top: var(--s4); }
.story p { font-size: 17px; line-height: 1.65; margin: 0 0 var(--s4); max-width: 58ch; }

/* the six */
.six { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .six { grid-template-columns: 7fr 5fr; gap: var(--s8); } }
.six .ph { overflow: hidden; }
.six .ph img { transition: scale .3s; }
.six .ph:hover img { scale: 1.045; }
.six .price { font-size: 18px; margin: var(--s4) 0 var(--s5); }

/* newsletter: a compact row closing the Rituals section */
.news { display: grid; gap: var(--s4); align-items: center; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .news { grid-template-columns: 7fr 5fr; gap: var(--s8); } }
.news-t { margin: 0 0 4px; font: 500 18px/1.2 var(--ui); letter-spacing: .02em; }
.news p { margin: 0; color: var(--mute); font-size: 14px; }
.news-form { display: flex; height: 44px; max-width: 420px; width: 100%; }
.news-form input { flex: 1; min-width: 0; border: 1px solid var(--ink); border-right: 0; background: var(--paper); padding: 0 14px; font: 400 14px var(--ui); color: var(--ink); border-radius: 0; outline: none; }
.news-form input::placeholder { color: var(--mute); }
.news-form button { flex: none; width: 76px; background: var(--ink); color: var(--paper); font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; transition: opacity .2s; }
.news-form button:hover { opacity: .85; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding: 40px 0 20px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
@media (min-width: 900px) { .foot-cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot .brand { grid-column: 1 / -1; display: flex; flex-direction: column; }
@media (min-width: 900px) { .foot .brand { grid-column: auto; } }
.foot .brand p { margin: var(--s3) 0 0; max-width: 34ch; opacity: .74; font-size: 14px; }
.foot h4 { margin: 0 0 var(--s3); font: 500 13px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot li a { font-size: 15px; opacity: .74; transition: opacity .2s; }
.foot li a:hover { opacity: 1; }
.foot .rule { height: 1px; background: rgba(255,255,255,.15); margin: var(--s6) 0 var(--s3); }
.foot .bar { display: flex; justify-content: space-between; gap: var(--s4); font-size: 12px; opacity: .62; flex-wrap: wrap; }
.closing { background: var(--ink); color: var(--paper); padding: var(--s7) 0 var(--s7); display: grid; justify-items: center; gap: var(--s3); overflow: hidden; }
.closing .big { font: 500 clamp(64px, 14vw, 180px)/.9 var(--display); letter-spacing: .3em; margin-right: -.3em; display: flex; }
.closing .big span { display: inline-block; translate: 0 60%; opacity: 0; transition: translate .9s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.closing.in .big span { translate: 0 0; opacity: 1; }
.closing .kj { font: 500 18px/1 var(--kanji); letter-spacing: .5em; margin-right: -.5em; opacity: .7; }

/* ---------- product page ---------- */
body.inner main { padding-top: calc(var(--bar-h) + var(--head-h)); }
.pdp { display: grid; gap: var(--s6); padding-block: var(--s5) var(--s6); }
@media (min-width: 1000px) { .pdp { grid-template-columns: 7fr 5fr; gap: var(--s8); align-items: start; } }
.gallery { display: grid; gap: var(--s3); }
.gallery .main { aspect-ratio: 4 / 5; overflow: hidden; background: transparent; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); }
.thumbs button { aspect-ratio: 4 / 5; overflow: hidden; outline: 1px solid transparent; outline-offset: -1px; }
.thumbs button.on { outline-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; transition: scale .3s; }
.thumbs button:hover img { scale: 1.045; }
.buy { position: sticky; top: calc(var(--bar-h) + var(--head-h) + 24px); display: grid; gap: var(--s4); }
.buy .kj { font: 500 34px/1 var(--kanji); letter-spacing: .1em; }
.buy h1 { margin: 0; font: 500 clamp(40px, 5vw, 64px)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.buy .notes { color: var(--mute); }
.buy .mood { font-size: 17px; margin: 0; }
.buy .price { font-size: 20px; }
.qty-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); }
.qty { display: flex; align-items: center; border: 1px solid var(--ink); height: 48px; }
.qty button { width: 40px; height: 100%; font-size: 18px; }
.qty span { min-width: 28px; text-align: center; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: var(--s4) 0; font: 500 12px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 16px; letter-spacing: 0; }
.acc details[open] summary::after { content: "−"; }
.acc p { margin: 0 0 var(--s4); color: var(--mute); }
.added { font-size: 13px; color: var(--mute); min-height: 1.4em; }

/* screenshot helpers (only active with ?shot in the URL) */
.shot .hero { height: 900px; min-height: 0; }
.shot.hover .card .ph .alt { opacity: 1; }
.shot.hover .card .ph img:not(.alt):not(.bug) { opacity: 0; }
@media (max-width: 639px) { .section-head > span.t-label { display: none; } }

/* light hero (high-key white studio photo, USUL): ink type, no dark scrims */
.hero.light { background: #FFFFFF; color: var(--ink); }
.hero.light::before, .hero.light::after { display: none; }
.hero.light .slide img { object-position: 50% 50%; }
.hero.light .hero-copy { inset: auto auto 0 0; text-align: left; max-width: 640px; padding: 0 var(--gutter) clamp(40px, 10svh, 112px) clamp(16px, 4vw, 64px); }
.hero.light .btn { background: var(--ink); color: var(--paper); }
body.light-hero .head:not(.solid) { color: var(--ink); }
@media (max-aspect-ratio: 4/5) {
  .hero.light .hero-copy { inset: calc(var(--bar-h) + var(--head-h) + 16px) 0 auto 0; text-align: center; max-width: none; padding: 0 var(--gutter); }
}
.hero.light h1 { font-size: clamp(36px, 5vw, 76px); }
@media (min-aspect-ratio: 4/5) { .hero.light .hero-copy { max-width: 520px; } }

/* marquee on the floor of the hero: no band, no hairline, just words over the photo */
.marquee.on-floor { position: absolute; inset: auto 0 0 0; z-index: 2; background: transparent; border: 0; height: 67px; }
@media (min-width: 768px) { .marquee.on-floor { height: 100px; } }
.hero.light .hero-copy { padding-bottom: calc(100px + clamp(16px, 4svh, 48px)); }
@media (max-aspect-ratio: 4/5) { .hero.light .hero-copy { padding-bottom: 0; } }

/* white footer (Jacob, 2026-10-24): no hairline, tighter, Instagram above the copyright */
.foot { background: var(--paper); color: var(--ink); padding: 32px 0 12px; border-top: 0; }
.foot-cols { gap: var(--s5) var(--s5); }
.foot .brand p { margin-top: var(--s2); }
.foot h4 { margin-bottom: var(--s2); }
.foot .bar { opacity: 1; color: var(--mute); margin-top: var(--s5); align-items: flex-end; }
.foot .bar-left { display: grid; gap: var(--s2); justify-items: start; }
.foot .ig { color: var(--ink); display: inline-flex; transition: translate .2s; }
.foot .ig:hover { translate: 0 -2px; }
.foot .ig svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.closing { background: var(--paper); color: var(--ink); padding: 0 0 var(--s6); gap: var(--s2); }   /* tight under the footer bar */
/* the section above the footer can't share its white ground */
/* headline: exactly two lines at every width, each line kept whole and sized to fit */
.hero h1 .ln { display: block; white-space: nowrap; }
.hero.light h1 { font-size: clamp(30px, min(5vw, 9.5vw), 76px); }
@media (max-width: 639px) { .hero.light h1 { font-size: min(11vw, 52px); } }
.hero.light .eyebrow { white-space: nowrap; }
@media (min-aspect-ratio: 4/5) { .hero.light .hero-copy { max-width: 600px; } }
@media (max-width: 420px) { .hero.light .eyebrow { font-size: 10.5px; letter-spacing: .14em; } }
.run .mq-kj { font-family: var(--kanji); font-weight: 800; letter-spacing: .08em; margin-left: .35em; }

/* benefits + pricing (2026-10-24) */
.filters { display: flex; gap: 20px; }
.filters button { color: var(--mute); letter-spacing: .18em; transition: translate .2s, color .2s; }
.filters button:hover { translate: 0 -2px; color: var(--ink); }
.filters button.on { color: var(--ink); }
.card .notes .fx { font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.card .price .per, .six .was, .buy .per { color: var(--mute); }
.sets { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.sets li { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) 0; }
.sets li + li { border-top: 1px solid var(--line); }
.set-name { font: 500 18px/1.2 var(--ui); letter-spacing: .02em; }
.sets .notes { color: var(--mute); font-size: 13px; margin-top: 4px; }
.set-buy { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; }
.set-buy .price { font-size: 17px; }
.set-buy .was { text-decoration: line-through; font-size: 13px; color: var(--mute); }
.btn.small { height: 40px; padding: 0 22px; }
.buy .promise { font: 500 clamp(22px, 2.2vw, 28px)/1.25 var(--display); margin: 0; }
.facts { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto auto 1fr; }
.facts > div { padding: 12px 18px 12px 0; }
.facts > div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.facts dt { font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 14px; }
.plans { display: grid; gap: 8px; }
.plan { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: border-color .2s; }
.plan.on { border-color: var(--ink); }
.plan input { accent-color: var(--ink); margin: 0; }
.plan-name { flex: 1; font-size: 15px; }
.plan-name small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.plan-price { font-size: 16px; white-space: nowrap; }
.plan-price s { color: var(--mute); font-size: 13px; margin-left: 4px; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .facts > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }

/* ---------- bag drawer ---------- */
.bag-scrim { position: fixed; inset: 0; background: rgba(26,26,26,.28); z-index: 80; }
.bag { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--paper); z-index: 90; display: flex; flex-direction: column;
  translate: 100% 0; transition: translate .35s cubic-bezier(.2,.7,.2,1); }
.bag.open { translate: 0 0; }
body.bag-open { overflow: hidden; }
.bag-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.bag-head h2 { margin: 0; font: 500 13px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.bag-x svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.bag-ship { margin: 0; padding: 12px 24px; font-size: 13px; color: var(--mute); background: var(--paper); border-bottom: 1px solid var(--line); }
.bag-ship:empty { display: none; }
.bag-body { flex: 1; overflow-y: auto; padding: 0 24px; }
.bag-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 20px 0; }
.bag-line + .bag-line { border-top: 1px solid var(--line); }
.bag-ph { width: 72px; aspect-ratio: 4 / 5; }
.bag-ph img { width: 100%; height: 100%; object-fit: contain; }
.bag-ph.wide img { object-fit: contain; }
.bag-name { font: 500 15px/1.3 var(--ui); }
.bag-name .kj { font: 500 13px/1 var(--kanji); color: var(--mute); margin-left: 4px; }
.bag-sub { font-size: 12px; color: var(--mute); margin: 3px 0 10px; }
.bag-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qty.sm { height: 34px; }
.qty.sm button { width: 30px; font-size: 15px; }
.bag-link { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; display: inline-block; }
.bag-row .bag-link { margin-top: 0; }
.bag-link.mute, .bag-up .mute { color: var(--mute); }
.bag-price { font-size: 15px; text-align: right; white-space: nowrap; }
.bag-price s { display: block; color: var(--mute); font-size: 12px; }
.bag-up { margin: 4px 0 20px; padding: 16px; background: var(--paper); border: 1px solid var(--line); }
.bag-up-t { font: 500 12px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.bag-up p { margin: 0 0 12px; font-size: 14px; }
.bag-foot { padding: 16px 24px 24px; border-top: 1px solid var(--line); }
.bag-foot:empty { display: none; }
.bag-sum { margin: 0 0 10px; }
.bag-sum div { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.bag-sum dt { color: var(--mute); } .bag-sum dd { margin: 0; }
.bag-sum .total { font-size: 16px; padding-top: 8px; } .bag-sum .total dt { color: var(--ink); }
.bag-saved { margin: 0 0 12px; font-size: 13px; }
.bag-note { margin: 10px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.bag-empty { padding: 48px 0; text-align: center; display: grid; gap: 16px; justify-items: center; }
.bag-empty p { margin: 0; color: var(--mute); }
.band { position: relative; height: min(78svh, 56vw); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band-line { position: absolute; left: var(--gutter); bottom: clamp(20px, 5vw, 56px); margin: 0; color: var(--paper); font: 500 clamp(26px, 3.4vw, 48px)/1.05 var(--display); text-shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 24px rgba(0,0,0,.25); }
@media (max-width: 639px) { .band { height: 70svh; } .band img { object-position: 62% 50%; } }

/* buy box: quiet conversion details (2026-10-24) */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.checks li { position: relative; padding-left: 22px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 1.4px solid var(--ink); border-bottom: 1.4px solid var(--ink); transform: rotate(-45deg); }
.sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.size { position: relative; display: grid; gap: 2px; border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: border-color .2s; }
.size.on { border-color: var(--ink); }
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size-t { font-size: 15px; }
.size-s { font-size: 12px; color: var(--mute); }
.size-p { font-size: 15px; margin-top: 6px; }
.size-p s { color: var(--mute); font-size: 12px; margin-left: 4px; }
.size-flag { position: absolute; top: -9px; right: 12px; background: var(--ink); color: var(--paper); font: 500 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; padding: 4px 8px; }
.trust-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--mute); }
.trust-row li { display: flex; align-items: center; gap: 6px; }
.trust-row svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pay-row { display: flex; gap: 6px; flex-wrap: nowrap; }
.pay-row img { height: 20px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity .2s, translate .2s; }
.pay-row img:hover { opacity: 1; translate: 0 -2px; }

/* quiet savings, gift with purchase, where it grows, gift wrap (2026-10-24) */
.save { color: var(--mute); font-size: 12px; margin-left: 6px; }
.set-buy .save { margin-left: 0; }
.gift-line { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.gift-line svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
/* all white site-wide (2026-10-24): no cream or stone grounds anywhere */
.grows { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .grows { grid-template-columns: 5fr 7fr; gap: var(--s8); } }
.grows .ph { aspect-ratio: 4 / 5; max-width: 460px; width: 100%; margin-inline: auto; }
.grows .ph img { width: 100%; height: 100%; object-fit: contain; }
.grows-where { margin: 18px 0 10px; font: 500 clamp(26px, 2.8vw, 36px)/1.1 var(--display); }
.grows-line { margin: 0 0 var(--s5); max-width: 46ch; font-size: 16px; }
.spec { margin: 0; max-width: 520px; }
.spec > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; }
.spec > div + div { border-top: 1px solid var(--line); }
.spec dt { font: 500 11px/1.6 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.spec dd { margin: 0; font-size: 15px; }
.bag-incl { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.bag-incl li { display: flex; justify-content: space-between; gap: 12px; }
.bag-incl .mute { color: var(--mute); }
.bag-gift { border-top: 1px solid var(--line); padding: 14px 0 4px; margin-bottom: 12px; }
.bag-gift label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.bag-gift input[type=checkbox] { accent-color: var(--ink); margin: 3px 0 0; }
.bag-gift small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.bag-gift textarea { width: 100%; margin-top: 10px; min-height: 64px; resize: vertical; border: 1px solid var(--line); padding: 10px 12px; font: 400 14px/1.45 var(--ui); color: var(--ink); background: var(--paper); border-radius: 0; }
.bag-gift textarea:focus { outline: none; border-color: var(--ink); }

/* say "shower tablets" early (2026-10-24) */
.hero.light h1 { margin-bottom: var(--s3); }
.hero-sub { margin: 0 0 var(--s5); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; }
.buy .kind { margin: -6px 0 0; font: 500 12px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

/* homepage rhythm on the all-white page (2026-10-24): the gaps above and between
   How it works, the story and Rituals are 20% bigger (64px -> 77px); Rituals sits closer to the footer */
#ritual { padding-block: 60px; }   /* gaps now 92px (was 77) */
#six { padding-top: 60px; padding-bottom: 16px; }
/* product page rhythm on white: same 77px gaps as the homepage */
#grows { padding-block: 60px; }
#more-scents { padding-top: 32px; padding-bottom: 16px; }
/* product pages get the same hairline above the footer that the homepage has (above the newsletter row) */
body.inner .foot { padding-top: 0; }
body.inner .foot .wrap { border-top: 1px solid var(--line); padding-top: 32px; }
/* optical centre: the Y and I sit 0.023em left of true centre (measured 8px at 180px), nudge back */
.closing .big { position: relative; left: .023em; }
/* footer blocks spread start / centre / end (Jacob's rule): brand block flush to the left gutter,
   Help flush to the right gutter, equal space between, text left-aligned inside each block */
@media (min-width: 900px) {
  .foot-cols { display: flex; justify-content: space-between; gap: var(--s5); }
  .foot-cols > div { flex: none; }
  .foot .brand { max-width: 34ch; }
}
.foot { padding-top: 24px; }
body.inner .foot .wrap { padding-top: 24px; }
.closing { padding-bottom: var(--s4); }
/* the blurb is set in fixed lines so its box is exactly as wide as its text: the gaps between all four blocks come out equal */
@media (min-width: 900px) { .foot .brand { max-width: none; } .foot .brand .blurb { white-space: nowrap; max-width: none; } }
/* closing wordmark another touch closer to the footer bar; email box a touch shorter */
.foot { padding-bottom: 2px; }
.news-form { max-width: 360px; }
.acc .fine { color: var(--mute); font-size: 13px; margin-top: 0; }

/* buy box "How it works": two looping line drawings (2026-10-24) */
.demo { margin-top: 4px; }
.demo-t { margin: 0 0 10px; font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo figure { margin: 0; }
.demo-svg { display: block; width: 100%; aspect-ratio: 2 / 1; background: var(--paper); }   /* no box: drawings sit on the page like the products do */
.demo-svg path, .demo-svg ellipse { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.demo-svg .fill { fill: var(--paper); stroke: none; }
.demo-svg .y { stroke-width: 1.1; opacity: .55; }
.demo-svg .floor { stroke: var(--mute); stroke-width: 1; }
.demo figcaption { margin-top: 6px; font-size: 13px; line-height: 1.35; display: flex; gap: 8px; align-items: baseline; }
.demo figcaption b { font: 500 20px/1 var(--display); font-variant-numeric: lining-nums; font-feature-settings: "lnum"; }
/* 1: the tablet drops in, settles, rests, fades, repeats */
  .drop .tab { animation: tab-drop 4.2s cubic-bezier(.5,0,.75,0) infinite; }
@keyframes tab-drop {
  0% { transform: translateY(-64px); opacity: 0; }
  8% { opacity: 1; }
  34% { transform: translateY(0); animation-timing-function: ease-out; }
  41% { transform: translateY(-5px); animation-timing-function: ease-in; }
  48% { transform: translateY(0); }
  86% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
/* 2: water falls from the shower head, steam rises from the tablet */
.steam .rain path { animation: rain 1.6s linear infinite; opacity: 0; }
.steam .rain path:nth-child(2) { animation-delay: .53s; }
.steam .rain path:nth-child(3) { animation-delay: 1.07s; }
@keyframes rain { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-22px, 36px); opacity: 0; } }
.steam .wisps path { stroke-dasharray: 52; stroke-dashoffset: 52; animation: wisp 3.6s ease-out infinite; }
.steam .wisps path:nth-child(2) { animation-delay: .6s; }
.steam .wisps path:nth-child(3) { animation-delay: 1.2s; }
@keyframes wisp { 0% { stroke-dashoffset: 52; opacity: 0; transform: translateY(4px); } 15% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .drop .tab, .steam .rain path, .steam .wisps path { animation: none; opacity: 1; stroke-dashoffset: 0; }
}
.demo-svg .floor { stroke: var(--line); }
.demo-svg .rain path { stroke: var(--mute); }
.demo-svg { overflow: hidden; }

/* two-tube offer: second-tube chips (buy box and bag), collection note (2026-10-24) */
.second { display: grid; gap: 8px; }
.second[hidden] { display: none; }
.second-t { margin: 0; font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); padding: 8px 12px; font-size: 13px; transition: border-color .2s; }
.chip .kj { font: 500 12px/1 var(--kanji); color: var(--mute); }
.chip:hover { border-color: var(--mute); }
.chip.on { border-color: var(--ink); }
.bag-min { margin: 16px 0 4px; padding: 16px; border: 1px solid var(--ink); }
.bag-min p { margin: 0 0 12px; font-size: 14px; }
#checkout[disabled] { opacity: .45; cursor: not-allowed; }
.collect-note { margin: calc(var(--s4) * -1) 0 var(--s5); font-size: 14px; color: var(--mute); }

/* ---------- buy box v3 (2026-10-24): luxury, not e-com. No check marks, icons, flags, strikethroughs or steppers ---------- */
.facts.jp { grid-template-columns: auto auto 1fr; }
.facts.jp dd { display: grid; gap: 4px; }
.facts.jp .fk { font: 500 22px/1.15 var(--kanji); letter-spacing: .06em; color: var(--ink);
  opacity: 0; translate: 0 8px; animation: kanji-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.facts.jp div:nth-child(2) .fk { animation-delay: .15s; }
.facts.jp div:nth-child(3) .fk { animation-delay: .3s; }
@keyframes kanji-in { to { opacity: 1; translate: 0 0; } }
.proofs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.proofs li, .gift-line { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; }
.pk { font: 500 15px/1 var(--kanji); color: var(--mute); }
.gift-line { margin: 0; font-size: 13px; }
.gift-line svg { display: none; }
.subt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 2px 0; }
.subt[hidden] { display: none; }
.subt input { appearance: none; flex: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid var(--ink); display: grid; place-items: center; cursor: pointer; }
.subt input:checked::after { content: ""; width: 8px; height: 8px; background: var(--ink); }
.subt span { font-size: 14px; }
.subt small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.fine-line { margin: -6px 0 0; font-size: 12px; color: var(--mute); }
#add { width: 100%; }
@media (prefers-reduced-motion: reduce) { .facts.jp .fk { animation: none; opacity: 1; translate: 0 0; } }
@media (max-width: 480px) { .facts.jp { grid-template-columns: 1fr 1fr; } .facts.jp div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }

/* facts v4: flip cards (rotateX, top to bottom), Japanese first; promise held to one line */
.buy .promise { white-space: nowrap; font-size: clamp(20px, 2vw, 28px); }
@media (max-width: 480px) { .buy .promise { white-space: normal; font-size: 21px; } }
.facts.jp { display: grid; grid-template-columns: 1fr 1fr 1.6fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts.jp > .fc + .fc { border-left: 1px solid var(--line); }
.fc { perspective: 700px; cursor: pointer; outline: none; }
.fc-in { display: grid; transition: transform .55s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; height: 100%; }
.fc-f, .fc-b { grid-area: 1 / 1; padding: 12px 16px 12px 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); display: grid; align-content: start; gap: 4px; }
.fc + .fc .fc-f, .fc + .fc .fc-b { padding-left: 16px; }
.fc-b { transform: rotateX(180deg); }
@media (hover: hover) { .fc:hover .fc-in { transform: rotateX(180deg); } }
.fc.flip .fc-in, .fc.hint .fc-in { transform: rotateX(180deg); }
.fc:focus-visible .fc-f, .fc:focus-visible .fc-b { box-shadow: inset 0 -1px 0 var(--ink); }
.fc p { margin: 0; }
.fc .ft { font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.fc .fk { font: 500 22px/1.15 var(--kanji); letter-spacing: .06em; opacity: 0; translate: 0 8px; animation: kanji-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.fc:nth-child(2) .fk { animation-delay: .15s; } .fc:nth-child(3) .fk { animation-delay: .3s; }
.fc .fr { font: italic 500 22px/1.15 var(--display); }
.fc .fe { font-size: 14px; }
.fc-b .fe { color: var(--mute); font-size: 13px; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .fc-in { transition: none; } .fc .fk { animation: none; opacity: 1; translate: 0 0; } }
@media (max-width: 480px) { .facts.jp { grid-template-columns: 1fr 1fr; } .facts.jp > .fc:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } .fc:nth-child(3) .fc-f, .fc:nth-child(3) .fc-b { padding-left: 0; } }
.demo figcaption b { font: 500 20px/1 var(--display); font-feature-settings: "lnum"; }
.facts.jp > .fc { padding: 0; }
@media (max-width: 480px) { .facts.jp > .fc + .fc { border-top: 0; } .facts.jp > .fc:nth-child(2) { border-left: 1px solid var(--line); } }

/* product page v5 (2026-10-24): thumbs inside the photo frame, Where it grows under the photos, one Questions tab */
.gallery .main { position: relative; }
.gallery .main .thumbs { position: absolute; top: 16px; left: 16px; display: grid; grid-template-columns: 1fr; gap: 8px; width: 56px; z-index: 1; }
.gallery .main .thumbs button { aspect-ratio: 4 / 5; background: var(--paper); outline: 1px solid var(--line); outline-offset: 0; }
.gallery .main .thumbs button.on { outline-color: var(--ink); }
@media (max-width: 639px) {
  .gallery .main .thumbs { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; grid-template-columns: repeat(6, 1fr); gap: 6px; }
}
#grows.grows { display: grid; grid-template-columns: 2fr 3fr; gap: var(--s6); align-items: center; padding: var(--s7) 0 var(--s4); border-top: 1px solid var(--line); margin-top: var(--s5); }
#grows .ph { aspect-ratio: 4 / 5; max-width: none; margin: 0; }
.grows-t { margin: 0; font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
#grows .grows-where { margin: 10px 0 8px; }
#grows .grows-line { font-size: 15px; margin-bottom: var(--s4); }
#grows .spec > div { grid-template-columns: 110px 1fr; padding: 10px 0; }
@media (max-width: 639px) { #grows.grows { grid-template-columns: 1fr 1.4fr; gap: var(--s4); } }
.qa h4 { margin: 0 0 4px; font: 500 14px/1.3 var(--ui); }
.qa p + h4 { margin-top: 14px; }
.qa p { margin-top: 0; }
#more-scents { padding-top: 60px; }
/* Where it grows v2: bigger, and the left column ends level with the buy box (2026-10-24) */
@media (min-width: 1000px) {
  .pdp { align-items: stretch; }
  .gallery { display: flex; flex-direction: column; }
  #grows.grows { flex: 1; align-content: center; }
}
#grows.grows { grid-template-columns: 1fr 1fr; gap: var(--s7); padding: var(--s7) 0 0; margin-top: var(--s4); }
#grows .ph { aspect-ratio: 3 / 4; }
#grows .grows-t { font-size: 12px; }
#grows .grows-where { margin: 14px 0 12px; font: 500 clamp(32px, 3vw, 44px)/1.05 var(--display); }
#grows .grows-line { font-size: 17px; line-height: 1.55; margin-bottom: var(--s5); max-width: 34ch; }
#grows .spec > div { grid-template-columns: 120px 1fr; padding: 14px 0; }
#grows .spec dt { font-size: 11px; }
#grows .spec dd { font-size: 16px; }
.buy { align-content: start; }
#grows .ph { aspect-ratio: 4 / 5; }
#grows.grows { padding-top: var(--s6); }
@media (min-width: 1000px) { #grows.grows { align-content: end; align-items: end; } }
@media (min-width: 1000px) { #grows.grows { flex: none; margin-top: auto; } .gallery .main { margin-bottom: var(--s5); } }
/* homepage: a touch more air around How it works, the story and Rituals (gaps 92px -> 102px) */
#ritual { padding-block: 70px; }
#six { padding-top: 70px; }

/* water drops under the footer hairline: clear glass beads, seen by their rim, a highlight and a soft shadow */
.drips { position: absolute; left: 0; right: 0; top: -1px; height: 0; pointer-events: none; z-index: 2; }
.drips i { position: absolute; top: 2px; width: calc(10px * var(--s, 1)); height: calc(10px * var(--s, 1)); margin-left: calc(-5px * var(--s, 1));
  transform-origin: 50% 0; opacity: 0; animation: drip 4s linear forwards; }
/* the bead: a square with three round corners, turned so the point hangs from the line */
.drips i::before { content: ""; position: absolute; inset: 0; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background:
    radial-gradient(circle at 62% 62%, rgba(255,255,255,1) 0 18%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.95) 0 34%, rgba(186,198,206,.8) 60%, rgba(84,100,110,.9) 85%, rgba(48,60,68,.95) 100%);
  box-shadow: 1px 1px 2px rgba(26,26,26,.18); }
@keyframes drip {
  0%   { transform: translateY(0) scale(.15, .1); opacity: 0; }
  8%   { opacity: .95; }
  52%  { transform: translateY(0) scale(1, 1); }
  60%  { transform: translateY(1px) scale(.94, 1.14); animation-timing-function: cubic-bezier(.55,0,.9,.4); }
  100% { transform: translateY(var(--fall, 150px)) scale(.82, 1.25); opacity: 0; }
}
.drips.at-bottom { top: auto; bottom: 0; }
.sizes { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .sizes { grid-template-columns: 1fr 1fr; } .sizes .size:nth-child(3) { grid-column: 1 / -1; } }

/* ---------- build your set (2026-10-24) ---------- */
.builder { display: grid; gap: 10px; }
.b-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.b-t { margin: 0; font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.b-count { margin: 0; font-size: 13px; color: var(--mute); }
.slots { display: flex; flex-wrap: wrap; gap: 6px; min-height: 104px; padding: 10px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slot { position: relative; width: 62px; display: grid; justify-items: center; gap: 4px; }
.slot img { height: 76px; width: auto; }
.slot span { font-size: 11px; line-height: 1.2; text-align: center; }
.slot button { position: absolute; top: -4px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); font-size: 12px; line-height: 1; color: var(--mute); }
.slot button:hover { color: var(--ink); border-color: var(--ink); }
.adds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.add { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border: 1px solid var(--line); transition: border-color .2s, translate .2s; }
.add:hover { border-color: var(--ink); translate: 0 -2px; }
.add:disabled { opacity: .4; pointer-events: none; }
.add img { height: 54px; width: auto; }
.add span { font-size: 11px; line-height: 1.2; }
.add b { position: absolute; top: 4px; right: 6px; font: 400 14px/1 var(--ui); color: var(--mute); }
.bundles { margin: 0; font-size: 12px; color: var(--mute); text-align: right; }
.bundles button { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
@media (max-width: 480px) { .adds { grid-template-columns: repeat(3, 1fr); } }
/* bag: every tube in the order is shown */
.bag-line { grid-template-columns: 96px 1fr auto; }
.bag-tubes { display: flex; align-items: flex-end; height: 76px; }
.bag-tubes img { height: 70px; width: auto; }
.bag-tubes img + img { margin-left: -14px; }
.bag-tubes[data-n="4"] img + img, .bag-tubes[data-n="5"] img + img, .bag-tubes[data-n="6"] img + img { margin-left: -20px; }
.bag-tubes em { font-style: normal; font-size: 12px; color: var(--mute); margin-left: 4px; }
.bag .adds { gap: 4px; } .bag .add img { height: 44px; } .bag .add span { font-size: 10px; }
/* bag tubes: a touch of space between them, never stacked (stacked read as one tube) */
.bag-line { grid-template-columns: minmax(72px, auto) 1fr auto; }
.bag-tubes { gap: 5px; }
.bag-tubes img + img, .bag-tubes[data-n="4"] img + img, .bag-tubes[data-n="5"] img + img, .bag-tubes[data-n="6"] img + img { margin-left: 0; }
.bag-tubes[data-n="4"] img, .bag-tubes[data-n="5"] img, .bag-tubes[data-n="6"] img { height: 54px; }
.bag-line { grid-template-columns: 104px 1fr auto; }
.bag-tubes { width: 104px; height: auto; flex-wrap: wrap; align-content: flex-start; row-gap: 6px; }

/* ---------- buy box v6: 1 how many, 2 which scents (2026-10-24) ---------- */
.step { display: grid; gap: 10px; }
.sizes { grid-template-columns: repeat(3, 1fr); }
.size { align-content: start; }
.size-p .save { display: block; margin: 2px 0 0; }
.size-b { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; color: var(--ink); }
.size:first-child .size-b { color: var(--mute); }
.slots { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 8px; min-height: 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slots[data-n="2"] { --cols: 3; } .slots[data-n="3"] { --cols: 3; } .slots[data-n="6"] { --cols: 6; }
.slot { width: auto; display: grid; justify-items: center; gap: 6px; }
.slot img { height: 80px; width: auto; }
.slot select { width: 100%; font: 400 12px var(--ui); color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 6px 18px 6px 6px; border-radius: 0; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%; background-size: 4px 4px; background-repeat: no-repeat; text-align: center; }
.slot select:hover, .slot select:focus { border-color: var(--ink); outline: none; }
.slots[data-n="6"] .slot img { height: 64px; }
.slots[data-n="6"] .slot select { font-size: 11px; padding-right: 14px; }
.bundles button.on { text-decoration: none; color: var(--mute); }
.b-name { margin: 0; font-size: 13px; }
@media (max-width: 480px) { .slots[data-n="6"] { --cols: 3; } .size-b { font-size: 11px; } }

/* ============ PHONES ONLY (2026-10-24, Jacob: "mobile only") ============ */
.mo, .a-tick, .size-b .sep { display: none; }
@media (max-width: 639px) {
  /* announcement: one slow scrolling line instead of two cramped ones */
  .announce .a-static { display: none; }
  .a-tick { display: block; width: 100%; overflow: hidden; }
  .a-track { display: flex; width: max-content; animation: a-slide 26s linear infinite; }
  .a-track span { font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; padding-right: 56px; white-space: nowrap; }
  @keyframes a-slide { to { transform: translateX(-50%); } }

  /* hero: eyebrow, headline and button only, moved down into the open white below the bucket */
  .hero-sub { display: none; }
  .hero.light .hero-copy { inset: auto 0 auto 0; top: 47svh; }
  .hero.light .eyebrow, .hero.light h1 { text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 22px rgba(255,255,255,.9); }
  .hero.light h1 { margin-bottom: var(--s5); }

  /* marquee words ~11% bigger */
  .run { font-size: 17.8px; }

  /* product cards: one-line notes and price, ~30% less air around the tube */
  .dk { display: none; }
  .mo { display: inline; }
  .grid { row-gap: 22px; }
  .card .ph { aspect-ratio: 4 / 4.55; }
  .card .meta { padding-top: 6px; }

  /* the 湯浴み story is desktop only; Rituals move up */
  #story { display: none; }
  #six { padding-top: 36px; }

  /* rituals: compact rows, price over its note, button beside */
  .sets li { gap: 12px; padding: 14px 0; }
  .sets .set-name { font-size: 16px; }
  .set-buy { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
  .set-buy .price { grid-column: 1; grid-row: 1; justify-self: end; font-size: 16px; }
  .set-buy .save { grid-column: 1; grid-row: 2; justify-self: end; font-size: 11px; }
  .set-buy .btn { grid-column: 2; grid-row: 1 / 3; }

  /* product page: photo, then the buy box, then Where it grows */
  .pdp > .gallery { display: contents; }
  .pdp .gallery .main { order: 1; }
  .pdp .buy { order: 2; position: static; }
  .pdp #grows { order: 3; }
  #grows.grows { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s6); margin-top: 0; }
  #grows .ph { width: 200px; justify-self: center; }
  #grows .spec > div { grid-template-columns: 110px 1fr; }
  #grows .grows-line { max-width: none; }

  /* how many tubes: three clear rows instead of 2 + 1 cards */
  .sizes { grid-template-columns: 1fr; gap: 8px; }
  .sizes .size:nth-child(3) { grid-column: auto; }
  .size { grid-template-columns: 1fr auto; grid-template-areas: "t p" "s v" "b b"; column-gap: 12px; padding: 12px 14px; }
  .size-t { grid-area: t; } .size-s { grid-area: s; }
  .size-p { grid-area: p; margin: 0; text-align: right; }
  .size-p .save { display: none; }
  .size-b { grid-area: b; margin-top: 6px; padding-top: 6px; }
  .size-b br { display: none; }
  .size-b .sep { display: inline; }
}
@media (max-width: 639px) {
  .card .notes { font-size: 12px; }
  .card .notes .fx { font-size: 10px; letter-spacing: .14em; }
}

/* ============ PHONES ONLY, pass 2 (2026-10-24) ============ */
.swipe-wrap, .sticky-add { display: none; }
@media (max-width: 639px) {
  /* hero copy nudged 2px right; marquee words +10% (17.8 -> 19.6px); top banner +27% (11 -> 14px) */
  .hero.light .hero-copy { translate: 2px 0; }
  .run { font-size: 19.6px; }
  .a-track span { font-size: 14px; }

  /* rituals: ~38% less air between the bottles, the heading and the rows */
  .six { gap: 20px; }
  .sets { margin-top: 10px; }
  .sets li { padding: 9px 0; }

  /* product page: swipe gallery with dots, tight under the header */
  .pdp { padding-top: 0; gap: var(--s4); }
  .pdp .gallery .main { display: none; }
  .swipe-wrap { display: block; order: 1; margin-inline: calc(var(--gutter) * -1); }
  .swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; scroll-snap-align: center; }
  .sdots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 0; }
  .sdots button { width: 6px; height: 6px; border-radius: 50%; background: var(--line); padding: 0; }
  .sdots button.on { background: var(--ink); }

  /* buy box: name, promise, then straight into the choice and the button; the details come after */
  .buy > * { order: 0; }
  .buy .step, .buy .subt, .buy #add, .buy .gift-line, .buy .fine-line { order: 1; }
  .buy .proofs, .buy .facts { order: 2; }
  .buy .demo, .buy .acc, .buy .added { order: 3; }
  .buy .kj { font-size: 26px; }
  .buy h1 { font-size: 40px; }

  /* the add button follows you down the page while the real one is off screen */
  .sticky-add { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
  .sticky-add[hidden] { display: none; }
  body.inner { padding-bottom: 76px; }
}
@media (max-width: 639px) {
  .size { grid-template-columns: auto 1fr auto; grid-template-areas: "t s p" "b b b"; align-items: baseline; padding: 11px 14px; }
  .size-s { padding-left: 8px; }
  .size-b { margin-top: 4px; padding-top: 0; border-top: 0; color: var(--mute); }
  .size.on .size-b { color: var(--ink); }
}
@media (max-width: 639px) {
  .set-buy { grid-template-columns: auto auto auto; row-gap: 0; column-gap: 10px; }
  .set-buy .save { grid-column: 1; grid-row: 1; font-size: 11px; }
  .set-buy .price { grid-column: 2; grid-row: 1; }
  .set-buy .btn { grid-column: 3; grid-row: 1; }
  .sets .notes { margin-top: 2px; }
}
/* phones: the banner is one short static line, no scrolling */
.a-short { display: none; }
@media (max-width: 639px) {
  .a-tick { display: none !important; }
  .announce .a-short { display: block; margin: 0; font: 500 13px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; margin-right: -.14em; white-space: nowrap; }
}
@media (max-width: 639px) { #ritual { padding-top: 37px; } }   /* phones: gap from the last product to the tablet 132px -> 99px (-25%) */
/* phones, 2026-10-24 (measured): Breathe -> six-tube photo 129 -> ~64px, photo -> RITUALS 32 -> ~16px,
   The Six -> hairline made to mirror hairline -> "Letters from the onsen" (~37px each); hero marquee words +10% again */
@media (max-width: 639px) {
  #ritual { padding-bottom: 21px; }
  #six { padding-top: 20px; }
  .six { gap: 4px; }
  .news { margin-top: 16px; }
  .run { font-size: 21.6px; }
}
/* phones: the hero just loads (no slow zoom-in); water drops ~7% more noticeable, everything else about them unchanged */
@media (max-width: 639px) {
  .slide img, .slide.on img { animation: none; transform: none; }
  .drips i::before { filter: contrast(1.07) saturate(1.07); }
}
@media (max-width: 639px) { .run { gap: 35px; padding-right: 35px; } }   /* phones: words and fizz tablets ~12% closer (40 -> 35px; gap and end padding stay equal so the loop seam is invisible) */
/* phones (2026-10-25): one clean line under the button; the facts as a tidy three-row list (no flip on phones) */
@media (max-width: 639px) {
  .buy .fine-line { display: none; }
  .buy .gift-line { display: block; text-align: center; font-size: 13px; color: var(--mute); }
  .buy .gift-line .pk { display: none; }
  .facts.jp { grid-template-columns: 1fr; }
  .facts.jp > .fc + .fc, .facts.jp > .fc:nth-child(2), .facts.jp > .fc:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); grid-column: auto; }
  .facts.jp .fc-in { transform: none !important; }
  .facts.jp .fc-b { display: none; }
  .facts.jp .fc .fc-f { grid-template-columns: 76px auto 1fr; align-items: baseline; column-gap: 12px; padding: 10px 0; }
  .facts.jp .fc .ft { margin: 0; }
  .facts.jp .fc .fk { font-size: 18px; }
  .facts.jp .fc .fe { font-size: 14px; }
}
/* 2026-10-25: "Best value" tag on 6 tubes (phones; desktop hides it until Jacob says otherwise) */
.size-flag-m { display: none; }
@media (max-width: 639px) {
  .size { position: relative; }
  .size-flag-m { display: block; position: absolute; top: -9px; right: 12px; }
  /* Where it grows: no hairline above, only Aroma and Lasts (the rest is already in the buy box) */
  #grows.grows { border-top: 0; }
  #grows .spec .dk-row { display: none; }
}
/* phones (2026-10-25, measured): last tab line -> yuzu plant 73 -> ~55px (-25%); Where it grows -> More scents 92 -> ~56px;
   homepage How it works tablet ~18% smaller (250 -> 205px wide) and tucked up with less air */
@media (max-width: 639px) {
  #grows.grows { padding-top: 14px; }
  #more-scents { padding-top: 24px; }
  .ritual .ph { width: min(300px, 57%); }
  #ritual { padding-top: 24px; }
  .ritual { gap: 18px; }
}

/* ---------- text pages: story, shipping, returns, contact, privacy, terms (2026-10-25) ---------- */
.doc { max-width: 720px; padding-block: 48px 72px; }
.doc-kj { margin: 0 0 6px; font: 500 22px/1 var(--kanji); letter-spacing: .1em; color: var(--mute); }
.doc h1 { margin: 0 0 12px; font: 500 clamp(40px, 6vw, 64px)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.doc-lede { font: 500 clamp(20px, 2.2vw, 26px)/1.3 var(--display); margin: 0 0 28px; }
.doc h2 { margin: 36px 0 10px; font: 500 12px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.doc p { font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.doc .btn { text-decoration: none; }
.doc-big { font: 500 clamp(24px, 3vw, 32px)/1.2 var(--display) !important; }
.doc-cta { margin-top: 28px !important; }
.story-hero { height: min(62svh, 46vw); overflow: hidden; }
.story-hero img { width: 100%; height: 100%; object-fit: cover; }
.doc-scents { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
.doc-scents a { display: grid; gap: 2px; text-decoration: none; }
.doc-scents img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.doc-scents .kj { font: 500 13px/1 var(--kanji); color: var(--mute); margin-top: 4px; }
.doc-scents b { font: 500 16px/1.3 var(--ui); }
.doc-scents em { font-style: normal; font-size: 13px; }
.doc-scents span:last-child { font-size: 13px; color: var(--mute); }
@media (max-width: 639px) { .doc { padding-block: 32px 48px; } .doc-scents { grid-template-columns: repeat(2, 1fr); } .story-hero { height: 46svh; } }

/* pre-order line: honest, quiet, right above the button (all screens) */
.buy .preorder { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 13px; color: var(--mute); }
.buy .preorder .pk { font: 500 12px/1 var(--kanji); color: var(--ink); letter-spacing: .08em; }
@media (max-width: 639px) { .buy .preorder { order: 1; } }
.bag-pre { margin: 0 0 10px; font-size: 12px; color: var(--mute); text-align: center; }

.news-side { display: grid; gap: 8px; }
.news-fine { margin: 0; font-size: 12px; color: var(--mute); }
.news-fine a { text-decoration: underline; text-underline-offset: 3px; }
/* founder note on the Story page */
.founder { margin: 28px 0 8px; padding: 0 0 0 20px; border-left: 1px solid var(--ink); }
.founder p { font: 500 clamp(22px, 2.4vw, 28px)/1.35 var(--display) !important; margin: 0 0 10px !important; }
.founder cite { font: 500 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--mute); }
/* phones (2026-10-25): compact footer. Short blurb; Shop, Yuami, Help in one row (Shop flush left, Help flush right);
   Instagram, copyright and Privacy · Terms on one line, pulled up */
.blurb-m { display: none; }
@media (max-width: 639px) {
  .foot .brand .blurb { display: none; }
  .foot .brand .blurb-m { display: block; margin: 8px 0 0; font-size: 14px; color: var(--mute); }
  .foot-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 12px; }
  .foot-cols > .brand { flex: 0 0 100%; }
  .foot-cols > div:not(.brand) { flex: none; }
  .foot h4 { font-size: 11px; margin-bottom: 8px; }
  .foot li a { font-size: 14px; }
  .foot ul { gap: 2px; }
  .foot .bar { margin-top: 20px; align-items: center; flex-wrap: nowrap; }
  .foot .bar-left { display: flex; align-items: center; gap: 10px; }
  .foot .ig svg { width: 18px; height: 18px; }
}
@media (max-width: 639px) { .foot .brand .blurb-m { max-width: none; white-space: nowrap; } }
/* water drops ~4% more noticeable everywhere (2026-10-25); phones stay ~7% stronger than desktop as before */
.drips i::before { filter: contrast(1.04) saturate(1.04); }
@media (max-width: 639px) { .drips i::before { filter: contrast(1.11) saturate(1.11); } }
/* newsletter (2026-10-25): a small gap between the box and Join, box a touch shorter, Join lifts like every other CTA */
.news-form { max-width: 340px; gap: 8px; }
.news-form input { border-right: 1px solid var(--ink); }
.news-form button { transition: translate .2s, box-shadow .2s; }
.news-form button:hover { opacity: 1; translate: 0 -3px; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.news-form button:active { scale: .98; }

/* product page mood band (2026-10-25) */
.pdp-band { margin-top: 24px; height: min(56vw, 560px); overflow: hidden; }
.pdp-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 639px) { .pdp-band { height: 52vw; margin-top: 8px; } }
/* phones (2026-10-26): the facts under the button compress to one line (Feeling + Best for; the scent notes
   already appear as Aroma in Where it grows); Where it grows shows Aroma only; More scents moves up */
@media (max-width: 639px) {
  .facts.jp { grid-template-columns: 1fr 1fr; }
  .facts.jp > .fc:nth-child(3) { display: none; }
  .facts.jp > .fc:nth-child(2) { border-top: 0; border-left: 1px solid var(--line); }
  .facts.jp > .fc:nth-child(2) .fc-f { padding-left: 14px; }
  .facts.jp .fc .fc-f { grid-template-columns: auto auto 1fr; column-gap: 8px; padding: 9px 0; }
  .facts.jp .fc .ft { font-size: 10px; }
  .facts.jp .fc .fk { font-size: 16px; }
  .facts.jp .fc .fe { font-size: 13px; }
  #grows .spec .lasts-row { display: none; }
  #more-scents { padding-top: 8px; }
  #grows.grows { padding-bottom: 0; }
}
/* 2026-10-26: phones show 4 "More scents" (fills the 2-column grid) and no spec rows under Where it grows; desktop keeps 3 */
@media (min-width: 640px) { #more .card:nth-child(4) { display: none; } }
@media (max-width: 639px) { #grows .spec { display: none; } #grows .grows-line { margin-bottom: 0; } }

/* phones: no hairlines above or below the scent pickers (Jacob, 2026-10-26) */
@media (max-width: 639px) {
  .slots { border-top: 0; border-bottom: 0; padding: 4px 0; }
}

/* ---------- buy box, simplified (2026-10-26, Jacob: "as dead simple as possible") ---------- */
.subt small:empty { display: none; }

/* price per shower under each tube price: value said quietly, beside the price (Jacob 2026-10-27) */
.size-p .per { display: block; margin-top: 3px; font: 400 11px/1.2 var(--ui); letter-spacing: .02em; color: var(--mute); text-align: right; }
.size.on .size-p .per { color: var(--ink); }

/* morning or evening, said quietly on every scent card (Jacob 2026-10-27) */
.card .tod { margin: 0; font: 500 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

/* guarantee under the add button: quiet, same build as the pre-order line (Jacob 2026-10-27) */
.buy .guarantee { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.5; color: var(--ink); }
.buy .guarantee .pk { font: 500 12px/1 var(--kanji); color: var(--ink); letter-spacing: .08em; }
@media (max-width: 639px) { .buy .guarantee { order: 1; } }

/* gallery video (a looping, silent clip in place of a still) */
.gallery .main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .main video[hidden], .gallery .main img[hidden] { display: none; }
@media (max-width: 639px) { .swipe video { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; scroll-snap-align: center; } }