/* SOYO design system. Warm, calm, grown-up: rice pages, sand grounds that match the packshot backdrop, warm near-black
   ink, generous space and very big photographs. One accent, a clay rose, kept for the active state (the selected size,
   the pressed filter, the current menu link), the breeze line and a few small marks. The motif is the breeze: a soft,
   slightly irregular curve, in the wordmark (the tail of the y), under one word of a few headings, before eyebrows and
   between sections.
   Readability first, for buyers who are often over 55: body text 17 px on phones and 18 px from 1100 px, line height
   1.6, every text color AA on its ground (muted #665D54 is 5.4:1 on rice), controls at least 48 px, visible focus, no
   tiny gray text, reduced motion respected.
   Latin: Newsreader (display) and Inter Tight (text and interface), self-hosted, SIL OFL. Japanese pages download no web
   font: system Mincho for headings, system Gothic for text. No third-party request. Japanese pages get their own layer
   at the end. */

/* ---------- fonts (latin + latin-ext, variable) */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens */
:root{
  --rice:#F7F3EE; --sand:#EFE9E1; --sand-2:#E8E0D5; --sand-3:#E0D6C9; --white:#FFFFFF;
  --ink:#221D19; --ink-2:#4A423B; --muted:#665D54; --line:#E3DAD0; --line-2:#D3C8BB; --ctl:#8C8175;
  --cocoa:#2B2420; --cocoa-2:#3A312B; --cocoa-ink:#F3EDE6; --cocoa-muted:#CDBFB0; --cocoa-line:rgba(243,237,230,.16);
  --clay:#9C503C; --clay-light:#E39A84; --clay-soft:#F5E6E0;
  --sans-en:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif-en:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
  --serif-ja:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:var(--sans-en); --display:var(--serif-en);
  --gut:16px; --sec:72px; --hdr:64px; --r:12px; --r-sm:8px; --ease:cubic-bezier(.2,.7,.2,1); --slow:cubic-bezier(.16,1,.3,1);
  --shadow:0 24px 60px -32px rgba(43,36,32,.35);
}
@media (min-width:760px){ :root{ --gut:32px; --sec:104px; --hdr:72px; } }
@media (min-width:1100px){ :root{ --gut:56px; --sec:136px; --hdr:80px; } }

/* ---------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 24px); background:var(--rice); overflow-x:clip; }
html.lock{ overflow:hidden; }
body{ margin:0; background:var(--rice); color:var(--ink); font:400 17px/1.6 var(--sans); letter-spacing:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip; }
@media (min-width:1100px){ body{ font-size:18px; } }
img{ display:block; max-width:100%; height:auto; }
svg{ flex:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,fieldset{ margin:0; }
ul,ol{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--cocoa); color:var(--rice); }
[hidden]{ display:none !important; }
.num{ font-variant-numeric:tabular-nums lining-nums; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color:var(--muted); }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--cocoa); color:var(--rice); padding:14px 20px; border-radius:var(--r-sm); font-weight:500; }
.skip:focus{ left:8px; }
.wrap{ width:100%; max-width:calc(1320px + var(--gut)*2); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:calc(880px + var(--gut)*2); }

/* ---------- type */
.h1,.h2,.buy__name,.pinfo__lead,.legal h1,.legal h2,.final__t{ font-family:var(--display); color:inherit; text-wrap:balance; font-optical-sizing:auto; }
.h1{ font-weight:400; font-size:clamp(40px,5.2vw,78px); line-height:1.06; letter-spacing:-.018em; }
.h2{ font-weight:400; font-size:clamp(32px,3.5vw,52px); line-height:1.1; letter-spacing:-.014em; }
.h3{ font:500 clamp(20px,1.5vw,22px)/1.3 var(--sans); letter-spacing:-.008em; }
.h4{ font:600 18px/1.4 var(--sans); letter-spacing:-.004em; }
.lede{ font-size:18px; line-height:1.6; color:var(--ink-2); max-width:46ch; text-wrap:pretty; }
.lede p+p{ margin-top:12px; }
@media (min-width:1100px){ .lede{ font-size:19px; } }
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font:500 14px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.eyebrow__m{ width:30px; height:8px; }
.eyebrow__n{ font:400 16px/1 var(--serif-en); letter-spacing:0; color:var(--clay); }
.label{ font:600 14px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.fine{ font-size:17px; line-height:1.6; color:var(--ink-2); }
:is(.lede,.fine,.legal,.acc__b,.co__terms,.specs,.split__b,.promise__b,.about,.notice,.bcard__b,.step__b,.buy__tag,.pinfo,.cmp__note,.chart__note,.note,.fitbox,.gtk,.sizes__note,.buy__note,.advice,.szd__bd) a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); transition:text-decoration-color .2s,color .2s; }
:is(.lede,.fine,.legal,.acc__b,.co__terms,.specs,.split__b,.promise__b,.about,.notice,.bcard__b,.step__b,.buy__tag,.pinfo,.cmp__note,.chart__note,.note,.fitbox,.gtk,.sizes__note,.buy__note,.advice,.szd__bd) a:hover{ color:var(--clay); text-decoration-color:currentColor; }
.tlink{ display:inline-flex; align-items:center; gap:10px; min-height:48px; font-weight:500; font-size:17px; color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); transition:color .2s,text-decoration-color .2s; }
.tlink svg{ transition:transform .4s var(--ease); }
.tlink:hover{ color:var(--clay); text-decoration-color:currentColor; }
.tlink:hover svg{ transform:translateX(4px); }
.tlink--center{ display:flex; justify-content:center; width:100%; }

/* ---------- the motif: the breeze */
.bz path,.eyebrow__m path,.nav__mark path,.ftr__mark path,.final__mark path,.nf__mark path,.ph__mark path,.bzw__l path{ fill:none; stroke:var(--clay); stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.bzw{ position:relative; display:inline-block; white-space:nowrap; }
.bzw__l{ position:absolute; left:-1%; right:-1%; bottom:-.16em; width:102%; height:.3em; overflow:visible; pointer-events:none; }
.bzw__l path{ stroke-width:2.2; }
.h1 .bzw__l path{ stroke-width:2.6; }
.wm{ display:block; width:auto; height:34px; overflow:visible; }

/* ---------- color dots and swatches */
.dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(34,29,25,.2); flex:none; }
.dot--lg{ width:16px; height:16px; }
.swatches{ display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; }
.swatch{ position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; }
.swatch::before{ content:""; width:24px; height:24px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(34,29,25,.2); transition:box-shadow .25s; }
.swatch:hover::before{ box-shadow:inset 0 0 0 1px rgba(34,29,25,.2),0 0 0 3px var(--rice),0 0 0 4.5px var(--ink); }
.swatches--lg .swatch::before{ width:28px; height:28px; }
@media (max-width:420px){ .final__cta .swatches{ gap:0; } }

/* ---------- buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; padding:0 28px; border-radius:999px; background:var(--cocoa); color:var(--rice); border:1.5px solid var(--cocoa); font:500 17px/1.2 var(--sans); letter-spacing:.005em; text-align:center; cursor:pointer; transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease); }
.btn:hover{ background:var(--ink); border-color:var(--ink); }
.btn:active{ transform:scale(.985); }
.btn svg{ transition:transform .4s var(--ease); }
.btn:hover svg:last-child:not(:first-child){ transform:translateX(3px); }
.btn--lg{ min-height:60px; padding:0 32px; font-size:17.5px; }
.btn--sm{ min-height:44px; padding:0 18px; font-size:16px; gap:6px; }
.btn--full{ width:100%; }
.btn--grow{ flex:1; min-width:0; }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--ctl); }
.btn--line:hover{ background:transparent; border-color:var(--ink); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn[disabled]:hover{ background:var(--cocoa); border-color:var(--cocoa); }
.btn__sep{ width:1px; height:18px; background:currentColor; opacity:.35; }
.iconbtn{ width:48px; height:48px; display:inline-grid; place-items:center; border-radius:50%; transition:background .25s,opacity .25s; }
.iconbtn:hover{ background:rgba(34,29,25,.06); }

/* ---------- header */
.hdr{ position:sticky; top:0; z-index:40; background:rgba(247,243,238,.9); -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; }
.hdr.is-scrolled,.navon .hdr{ border-bottom-color:var(--line); }
/* a backdrop filter makes the header the containing block of the fixed menu: drop it while the menu is open */
.navon .hdr{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--rice); }
.hdr__in{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px; height:var(--hdr); }
.hdr__burger{ margin-left:-12px; justify-self:start; }
.hdr__burger .i-close,.navon .hdr__burger .i-menu{ display:none; }
.navon .hdr__burger .i-close{ display:block; }
.logo{ justify-self:start; display:inline-flex; align-items:center; color:var(--ink); min-height:48px; padding-top:9px; }
.hdr .logo .wm{ height:31px; }
.lang--hdr{ white-space:nowrap; }
.hdr__end{ justify-self:end; display:flex; align-items:center; gap:2px; margin-right:-6px; }
@media (min-width:1100px){
  .hdr__in{ grid-template-columns:auto 1fr auto; gap:56px; }
  .hdr__burger{ display:none; }
  .logo{ justify-self:start; }
  .hdr .logo .wm{ height:38px; }
  .nav{ justify-self:center; }
  .nav__main{ display:flex; gap:40px; }
  .nav__main a{ position:relative; display:inline-flex; align-items:center; min-height:48px; font-size:17px; font-weight:500; color:var(--ink-2); transition:color .25s; }
  .nav__main a::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; border-radius:2px; background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--slow); }
  .nav__main a:hover,.nav__main a[aria-current]{ color:var(--ink); }
  .nav__main a:hover::after,.nav__main a[aria-current]::after{ transform:scaleX(1); }
  .nav__x{ display:none; }
  .hdr__end{ gap:16px; margin-right:0; }
}

/* ---------- language switch (header, menu, footer) and the language hint */
.lang{ display:inline-flex; align-items:center; gap:0; font:500 15px/1 var(--sans-en); letter-spacing:.04em; color:var(--muted); }
.lang span{ opacity:.6; padding:0 1px; }
.lang a{ display:inline-flex; align-items:center; min-height:48px; padding:0 6px; transition:color .2s; }
.lang a[lang="ja"]{ font-family:var(--sans-ja); letter-spacing:.04em; }
.lang a:hover,.lang a[aria-current]{ color:var(--ink); }
.lang a[aria-current]{ text-decoration:underline; text-decoration-color:var(--clay); text-decoration-thickness:2px; text-underline-offset:6px; }
.lang--menu{ margin-top:24px; font-size:17px; }
.lang--ftr{ margin-top:14px; font-size:16px; color:var(--cocoa-muted); }
.lang--ftr a[aria-current],.lang--ftr a:hover{ color:var(--cocoa-ink); }
@media (max-width:379px){ .lang--hdr{ display:none; } }
.hint{ background:var(--cocoa); color:var(--cocoa-ink); font-size:16px; }
.hint__in{ display:flex; align-items:center; gap:12px; min-height:56px; padding-block:6px; }
.hint__in > svg{ flex:none; opacity:.8; }
.hint p{ flex:1; line-height:1.5; }
.hint a{ color:#fff; text-decoration:underline; text-underline-offset:4px; margin-left:6px; white-space:nowrap; }
.hint .iconbtn{ color:var(--cocoa-ink); }
.hint .iconbtn:hover{ background:rgba(243,237,230,.1); }
.hint :focus-visible{ outline-color:var(--clay-light); }
.cartbtn{ position:relative; display:inline-flex; align-items:center; gap:8px; min-height:48px; min-width:48px; justify-content:center; padding:0 4px; font-size:17px; font-weight:500; }
.cartbtn__t{ display:none; }
.cartbtn__n{ position:absolute; top:4px; right:-2px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--cocoa); color:var(--rice); font-size:13px; font-weight:600; display:inline-grid; place-items:center; line-height:1; }
.cartbtn.bump .cartbtn__n{ animation:bump .6s var(--ease); background:var(--clay); }
@keyframes bump{ 40%{ transform:scale(1.3); } }
@media (min-width:1100px){
  .cartbtn{ padding:0 2px; }
  .cartbtn__ic{ display:none; }
  .cartbtn__t{ display:inline; }
  .cartbtn__n{ position:static; }
}
@media (max-width:1099px){
  .nav{ position:fixed; left:0; right:0; top:var(--navtop,var(--hdr)); bottom:0; z-index:39; background:var(--rice); padding:8px var(--gut) 56px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .3s,transform .3s var(--ease),visibility 0s linear .3s; }
  .navon .nav{ opacity:1; visibility:visible; transform:none; transition:opacity .3s,transform .3s var(--ease); }
  .nav__main a{ display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:12px 0; font:400 32px/1.15 var(--display); letter-spacing:-.012em; border-bottom:1px solid var(--line); }
  .nav__main a[aria-current]{ color:var(--ink); }
  .nav__main a[aria-current]::after{ content:""; width:28px; height:8px; background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M2 9.6C15.5 4.6 28 3.5 42 7.1C57 11 68.5 13.1 84.5 9.4C97.5 6.4 108.5 5.6 118 7.9' fill='none' stroke='%239C503C' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .nav__x{ margin-top:28px; display:grid; gap:4px; }
  .nav__sub a{ display:flex; align-items:center; min-height:48px; font-size:18px; color:var(--ink); }
  .nav__lbl{ font:600 14px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:20px; }
  .nav__tag{ display:flex; align-items:center; gap:14px; margin-top:32px; padding-top:22px; border-top:1px solid var(--line); font:italic 400 21px/1.35 var(--serif-en); color:var(--ink-2); }
  .nav__mark{ width:48px; height:auto; }
}

/* ---------- sections */
.sec{ padding-block:var(--sec); }
.sec--tight{ padding-block:calc(var(--sec) * .62); }
.sec--flush{ padding-top:0; }
.sec--sand{ background:var(--sand); }
.sec--white{ background:var(--white); }
.sec--rule{ border-top:1px solid var(--line); }
.sec__head{ display:grid; gap:18px; margin-bottom:40px; }
.sec__head .h2{ max-width:16ch; }
.sec__side{ display:grid; gap:12px; justify-items:start; }
@media (min-width:900px){
  .sec__head{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:end; gap:64px; margin-bottom:56px; }
  .sec__head--stack{ grid-template-columns:1fr; gap:16px; margin-bottom:28px; }
}
.note{ display:flex; gap:12px; align-items:flex-start; margin-top:56px; padding-top:22px; border-top:1px solid var(--line); font-size:16px; color:var(--ink-2); }
.note svg{ margin-top:2px; color:var(--ink); }
.note--sand{ border-top-color:var(--line-2); }

/* ---------- placeholders while the photographs are made: calm sand with the family name, never a broken image */
.ph{ display:block; width:100%; height:100%; background:var(--sand); }
.ph__in{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; text-align:center; }
.ph__sw{ width:44px; height:44px; border-radius:50%; background:var(--t,#D8BFA2); box-shadow:inset 0 0 0 1px rgba(34,29,25,.16),0 0 0 6px rgba(255,255,255,.45); }
.ph__f{ font:400 19px/1.25 var(--display); color:var(--ink-2); max-width:16ch; }
.ph__c{ font-size:14px; color:var(--muted); letter-spacing:.04em; }
.ph--p{ position:relative; background:radial-gradient(80% 70% at 50% 45%,#F4EFE8 0%,var(--sand) 72%); }
.ph--r2{ background:radial-gradient(80% 70% at 50% 45%,#F3EDE5 0%,var(--sand-2) 75%); }
.ph--r3{ background:var(--sand-2); }
.ph--r4{ background:radial-gradient(80% 70% at 50% 40%,#F1EBE3 0%,var(--sand-3) 80%); }
.ph--life{ position:relative; background:radial-gradient(70% 70% at 50% 40%,#F3EEE7 0%,var(--sand-2) 74%); }
.ph__mark{ width:min(28%,150px); height:auto; }
.ph__mark path{ stroke-width:2; }
:is(.gal__thumbs,.ci__img,.co__it,.dpair) .ph__in{ gap:0; padding:4px; }
:is(.gal__thumbs,.ci__img,.co__it,.dpair) :is(.ph__f,.ph__c){ display:none; }
:is(.gal__thumbs,.ci__img,.co__it,.dpair) .ph__sw{ width:40%; height:auto; aspect-ratio:1; box-shadow:inset 0 0 0 1px rgba(34,29,25,.16); }

/* media boxes: fixed ratio, the image or the placeholder fills them */
.card__media,.lead__media,.built__m,.step__media,.split__media,.gal__slide,.ci__img,.gal__thumbs button,.about__media,.banner,.rcard__media{ position:relative; display:block; overflow:hidden; background:var(--sand); isolation:isolate; }
:is(.card__media,.lead__media,.built__m,.step__media,.split__media,.gal__slide,.ci__img,.gal__thumbs button,.hero__media,.about__media,.banner,.rcard__media) :is(img,.ph){ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- hero */
.hero{ position:relative; overflow:hidden; }
.hero__media{ position:relative; height:min(118vw,68svh); background:var(--sand); }
.hero__img{ object-position:50% 30%; }
.hero__in{ position:relative; z-index:1; padding-block:28px 44px; }
.hero__txt{ display:grid; gap:18px; justify-items:start; }
.hero__txt .eyebrow{ margin-bottom:0; }
.hero__h1{ max-width:12ch; font-size:clamp(42px,6vw,82px); }
.hero__sub{ max-width:38ch; font-size:18px; line-height:1.6; color:var(--ink-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.hero__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-top:4px; font-size:16px; color:var(--ink-2); }
.hero__meta .num{ font-size:22px; font-weight:500; color:var(--ink); }
@media (max-width:899px){
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 100%; }
}
@media (min-width:900px){
  .hero{ display:flex; align-items:center; min-height:min(calc(100svh - var(--hdr)),880px); }
  .hero__media{ position:absolute; top:0; right:0; bottom:0; width:56vw; height:auto; border-bottom-left-radius:40px; }
  .hero__img{ object-position:55% 40%; }
  .hero__in{ padding-block:72px 88px; }
  .hero__txt{ gap:24px; max-width:min(560px,38vw); }
  .hero__sub{ font-size:19px; }
}
@media (min-width:1400px){ .hero__txt{ max-width:600px; } }

/* the three facts under the hero */
.facts-sec{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--rice); }
.facts{ display:grid; }
.facts li{ display:flex; align-items:center; gap:16px; min-height:64px; padding:12px 0; font-size:17px; font-weight:500; color:var(--ink); }
.facts li + li{ border-top:1px solid var(--line); }
.facts svg{ color:var(--clay); }
@media (min-width:760px){
  .facts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .facts li{ justify-content:center; padding:26px 16px; }
  .facts li + li{ border-top:0; border-left:1px solid var(--line); }
}

/* ---------- wide pictures */
.banner{ aspect-ratio:4/3; border-radius:var(--r); margin-bottom:40px; }
.banner--sand{ background:var(--sand-2); }
@media (min-width:760px){ .banner{ aspect-ratio:16/8; margin-bottom:56px; } }

/* ---------- product cards and grids */
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 12px; }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:52px 20px; } }
@media (min-width:1100px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:60px 24px; } }
.grid--pairs.grid--n1{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--pairs.grid--n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){ .grid--pairs{ max-width:1020px; } .grid--pairs.grid--n3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .grid--pairs.grid--n2{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; } .grid--pairs.grid--n3{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; } }
.card{ position:relative; min-width:0; }
.card__media{ aspect-ratio:4/5; border-radius:var(--r); }
.card__media img,.card__media .ph{ transition:opacity .7s var(--ease),transform 1.6s var(--slow); }
.card__alt{ opacity:0; }
@media (hover:hover){
  .card:hover .card__alt{ opacity:1; }
  .card:hover .card__img{ transform:scale(1.02); }
}
.card__body{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:4px 12px; padding:16px 2px 0; }
.card__name{ display:grid; gap:6px; min-width:0; font:500 17px/1.3 var(--sans); }
.card__fam{ text-wrap:balance; }
.card__color{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:400; color:var(--ink-2); }
.card__price{ font-size:17px; font-weight:500; padding-top:0; }
.card__body:hover .card__fam{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--clay); }
@media (max-width:420px){ .card__body{ grid-template-columns:1fr; } }

/* the family tile that opens each group of the shop: the category picture over a sand caption */
.lead{ position:relative; display:flex; flex-direction:column; min-width:0; border-radius:var(--r); overflow:hidden; isolation:isolate; background:var(--sand); color:var(--ink); }
.lead__media{ flex:none; aspect-ratio:16/10; background:var(--sand-2); }
.lead__media img{ object-position:50% 20%; }
.lead__txt{ display:grid; gap:8px; align-content:start; padding:20px 20px 24px; }
.lead__n{ font-size:15px; color:var(--ink-2); letter-spacing:.02em; }
.lead__t{ font:400 30px/1.1 var(--display); letter-spacing:-.012em; }
.lead__b{ font-size:17px; line-height:1.55; color:var(--ink-2); max-width:40ch; }
.lead__p{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px; }
.lead__p .num{ font-size:19px; font-weight:500; }
.grid--shop .lead{ grid-column:1 / -1; }
@media (min-width:760px){ .grid--shop .lead{ grid-column:auto; } }
@media (min-width:760px) and (max-width:1099px){
  .grid--shop .lead--t2x1,.grid--shop .lead--t2x2{ grid-column:span 2; }
  .grid--shop .lead--t2x2{ grid-row:span 2; }
  .grid--shop .lead--t3x1{ grid-column:1 / -1; }
}
@media (min-width:1100px){
  .grid--shop .lead--d2x1,.grid--shop .lead--d2x2{ grid-column:span 2; }
  .grid--shop .lead--d2x2{ grid-row:span 2; }
  .grid--shop .lead--d4x1{ grid-column:1 / -1; }
}
/* a wide family tile one row high reads side by side: the picture left, the caption right */
@media (min-width:760px) and (max-width:1099px){ .grid--shop :is(.lead--t2x1,.lead--t3x1){ flex-direction:row; } .grid--shop :is(.lead--t2x1,.lead--t3x1) .lead__media{ flex:1 1 55%; } .grid--shop :is(.lead--t2x1,.lead--t3x1) .lead__txt{ flex:0 0 45%; align-content:end; padding:24px; } .grid--shop :is(.lead--t2x1,.lead--t3x1) .lead__b{ display:block; } }
@media (min-width:1100px){ .grid--shop :is(.lead--d2x1,.lead--d4x1){ flex-direction:row; } .grid--shop :is(.lead--d2x1,.lead--d4x1) .lead__media{ flex:1 1 55%; } .grid--shop :is(.lead--d2x1,.lead--d4x1) .lead__txt{ flex:0 0 45%; align-content:end; padding:28px; } .grid--shop .lead--d2x2 .lead__txt{ padding:28px 30px 32px; } .grid--shop .lead--d2x2 .lead__t{ font-size:38px; } .grid--shop .lead--d2x2 .lead__b{ font-size:17px; } }
@media (min-width:760px){
  .lead__media{ flex:1 1 auto; aspect-ratio:auto; min-height:180px; }
  .lead__txt{ padding:18px 20px 22px; }
  .lead__t{ font-size:27px; }
  .lead__b{ display:none; }
}
@media (min-width:1100px){ .lead__b{ display:block; font-size:17px; } }

/* ---------- home: what is inside */
.built{ display:grid; gap:20px; }
.built__m{ aspect-ratio:4/5; border-radius:var(--r); background:var(--sand-2); }
.bcards{ display:grid; gap:12px; }
.bcard{ display:grid; align-content:start; gap:8px; padding:26px 24px 28px; background:var(--white); border-radius:var(--r); }
.bcard__n{ font:400 22px/1 var(--serif-en); color:var(--clay); margin-bottom:6px; }
.bcard__b{ font-size:17px; line-height:1.6; color:var(--ink-2); }
@media (min-width:760px){ .bcards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (min-width:1000px){ .built{ grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:20px; align-items:stretch; } .built__m{ aspect-ratio:auto; min-height:100%; } .bcard{ padding:32px 30px 34px; } }

/* ---------- split blocks */
.split{ display:grid; gap:36px; }
.split__media{ aspect-ratio:4/5; border-radius:var(--r); }
.split__txt{ display:grid; justify-items:start; gap:20px; max-width:560px; }
.split__txt .h2{ max-width:14ch; }
.split__txt .eyebrow{ margin-bottom:0; }
.split__b p{ color:var(--ink-2); font-size:18px; line-height:1.65; max-width:44ch; }
.split__b p+p{ margin-top:12px; }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,7vw,120px); align-items:center; }
  .split--rev .split__media{ order:2; }
  .split--top{ align-items:start; }
}
.vat{ display:inline-flex; align-items:center; font-size:16px; font-weight:500; color:var(--ink-2); padding:5px 12px; border-radius:999px; background:var(--sand); white-space:nowrap; }
.sec--sand .vat,.lead .vat{ background:var(--rice); }

/* ---------- steps */
.steps{ display:grid; gap:44px; }
.step{ display:grid; align-content:start; gap:20px; }
.step__media{ aspect-ratio:5/4; border-radius:var(--r); }
.step__media img{ transition:transform 1.8s var(--slow); object-position:50% 35%; }
.step:hover .step__media img{ transform:scale(1.02); }
.step__txt{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px 12px; padding-top:18px; border-top:1px solid var(--line); }
.step__n{ grid-row:span 2; font:400 24px/1.1 var(--serif-en); color:var(--clay); }
.step__b{ font-size:17px; line-height:1.6; color:var(--ink-2); }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; } .step__media{ aspect-ratio:4/5; } }

/* ---------- compare: plain facts */
.cmp{ border-top:2px solid var(--ink); }
.cmp__t{ font-size:17px; }
.cmp__t thead th{ padding:20px 18px 18px; text-align:left; vertical-align:bottom; font:600 15px/1.35 var(--sans); color:var(--ink-2); }
.cmp__t thead th.is-us{ color:var(--ink); font-size:17px; }
.cmp__t tbody th{ width:24%; padding:20px 18px 20px 0; text-align:left; vertical-align:top; font-weight:500; font-size:16px; color:var(--ink); }
.cmp__t td{ padding:20px 18px; vertical-align:top; color:var(--ink-2); line-height:1.5; }
.cmp__t td.is-us{ color:var(--ink); font-weight:600; }
.cmp__t tbody tr{ border-top:1px solid var(--line); }
.cmp__t .is-us{ position:relative; width:26%; background:var(--white); }
.cmp__t thead .is-us{ border-radius:var(--r) var(--r) 0 0; }
.cmp__t thead .is-us::before{ content:""; position:absolute; left:18px; right:18px; top:-2px; height:3px; border-radius:3px; background:var(--clay); }
.cmp__note{ margin-top:22px; max-width:80ch; }
@media (max-width:759px){
  .cmp{ border-top:0; }
  .cmp__t,.cmp__t tbody,.cmp__t tr,.cmp__t th,.cmp__t td{ display:block; width:auto; }
  .cmp__t thead{ display:none; }
  .cmp__t tbody tr{ border-top:2px solid var(--ink); padding:16px 0 18px; }
  .cmp__t tbody tr + tr{ border-top:1px solid var(--line-2); }
  .cmp__t tbody th{ width:auto; padding:0 0 10px; font:600 14px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
  .cmp__t td{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:9px 0; font-size:16px; }
  .cmp__t td::before{ content:attr(data-h); color:var(--ink-2); font-size:15px; font-weight:400; }
  .cmp__t td.is-us{ width:auto; padding:12px 14px; margin:2px -14px; border-radius:var(--r-sm); }
  .cmp__t td.is-us::before{ color:var(--ink); font-weight:600; }
}

/* ---------- the range */
.range{ display:grid; gap:20px; }
.rcard{ display:grid; grid-template-rows:auto 1fr; border-radius:var(--r); overflow:hidden; background:var(--rice); transition:transform .5s var(--slow),box-shadow .5s var(--slow); }
.rcard:hover{ box-shadow:var(--shadow); }
.rcard__media{ aspect-ratio:4/3; background:var(--sand-2); }
.rcard__media img{ transition:transform 1.8s var(--slow); object-position:50% 25%; }
.rcard:hover .rcard__media img{ transform:scale(1.03); }
.rcard__txt{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 26px; }
.rcard__t{ font:400 28px/1.12 var(--display); letter-spacing:-.012em; }
.rcard__b{ font-size:17px; line-height:1.55; color:var(--ink-2); }
.rcard__m{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:16px; color:var(--ink-2); }
.rcard__m .num{ font-size:19px; font-weight:500; color:var(--ink); }
.rcard__sw{ display:flex; flex-wrap:wrap; gap:6px; }
.rcard__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px; font-weight:500; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); }
.rcard:hover .rcard__cta{ color:var(--clay); }
.rcard__cta svg{ transition:transform .4s var(--ease); }
.rcard:hover .rcard__cta svg{ transform:translateX(4px); }
@media (min-width:760px){ .range{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .rcard__media{ aspect-ratio:4/5; } }
.range--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rcard--sm .rcard__txt{ padding:16px 16px 20px; gap:6px; }
.rcard--sm .rcard__t{ font-size:22px; }
.rcard--sm .rcard__media{ aspect-ratio:4/5; }
@media (min-width:1000px){ .range--4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } }

/* ---------- promises */
.promises{ display:grid; grid-template-columns:1fr; gap:30px; }
.promises li{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:16px; row-gap:6px; align-content:start; }
.promise__ic{ grid-row:span 2; color:var(--clay); padding-top:2px; }
.promise__b{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:36ch; }
@media (min-width:760px){ .promises{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 32px; } }
@media (min-width:1100px){
  .promises{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px; }
  .promises li{ grid-template-columns:1fr; row-gap:10px; }
  .promise__ic{ grid-row:auto; margin-bottom:6px; }
}

/* ---------- FAQ */
.faq{ display:grid; gap:36px; }
.faq__head .h2{ max-width:12ch; }
.faq__head .lede{ margin-top:18px; font-size:17px; }
@media (min-width:900px){ .faq{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:96px; align-items:start; } .faq__head{ position:sticky; top:calc(var(--hdr) + 40px); } }
.acc{ border-top:2px solid var(--ink); }
.acc__i{ border-bottom:1px solid var(--line); }
.acc__i summary{ list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; min-height:48px; padding:22px 0; cursor:pointer; font:500 19px/1.4 var(--sans); transition:color .2s; }
.acc__i summary::-webkit-details-marker{ display:none; }
.acc__i summary:hover{ color:var(--clay); }
.acc__i summary i{ position:relative; flex:none; width:24px; height:24px; margin-top:2px; border-radius:50%; }
.acc__i summary i::before,.acc__i summary i::after{ content:""; position:absolute; left:4px; right:4px; top:50%; height:2px; margin-top:-1px; border-radius:2px; background:currentColor; transition:transform .4s var(--ease); }
.acc__i summary i::after{ transform:rotate(90deg); }
.acc__i[open] summary i::after{ transform:rotate(0); }
.acc__b{ padding:0 0 26px; color:var(--ink-2); max-width:62ch; font-size:17px; line-height:1.65; }
.acc__b p+p{ margin-top:12px; }

/* ---------- final call */
.final{ padding-block:calc(var(--sec) * 1.05); text-align:center; background:var(--sand); }
.final__in{ display:grid; justify-items:center; gap:24px; }
.final__mark{ width:140px; height:auto; }
.final__mark path{ stroke-width:2; }
.final__t{ max-width:15ch; }
.final .lede{ max-width:44ch; }
.final__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 24px; margin-top:6px; }

/* ---------- footer: the one cocoa ground */
.ftr{ background:var(--cocoa); color:var(--cocoa-ink); padding-top:72px; }
.ftr :focus-visible{ outline-color:var(--clay-light); }
.ftr__top{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 20px; }
.ftr__brand,.ftr__col:last-child{ grid-column:1 / -1; }
.logo--ftr{ justify-self:start; color:var(--cocoa-ink); display:inline-flex; flex-direction:column; align-items:flex-start; gap:12px; padding-top:0; }
.logo--ftr .wm{ height:48px; }
.logo__kana{ font:400 14px/1 var(--sans-ja); letter-spacing:.24em; color:var(--cocoa-muted); }
.ftr__tag{ margin-top:28px; font:italic 400 26px/1.3 var(--serif-en); color:var(--cocoa-ink); max-width:22ch; }
.ftr__meaning{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--cocoa-muted); max-width:42ch; }
.ftr__mail{ margin-top:22px; }
.ftr__mail a{ display:inline-flex; gap:10px; align-items:center; min-height:48px; font-size:16px; color:var(--cocoa-ink); overflow-wrap:anywhere; }
.ftr__mail a:hover span{ text-decoration:underline; text-underline-offset:4px; }
.ftr__col h2{ font:600 14px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa-muted); margin-bottom:12px; }
.ftr__col{ min-width:0; }
.ftr__col a{ display:inline-flex; align-items:center; min-height:44px; font-size:16px; color:var(--cocoa-ink); transition:color .2s; overflow-wrap:anywhere; }
.ftr__col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:var(--clay-light); }
@media (min-width:760px){ .ftr__top{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ftr__col:last-child{ grid-column:auto; } }
@media (min-width:1100px){ .ftr__top{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:56px; } .ftr__brand{ grid-column:auto; } }
.ftr__mid{ margin-top:56px; padding:22px 0; border-top:1px solid var(--cocoa-line); }
.ftr__mark{ display:block; width:120px; height:16px; }
.ftr__mark path{ stroke:var(--clay-light); stroke-width:1.6; }
.ftr__bot{ display:grid; gap:18px; padding:8px 0 calc(40px + env(safe-area-inset-bottom)); font-size:17px; line-height:1.6; color:var(--cocoa-muted); }
.ftr__bot p+p{ margin-top:2px; }
.ftr__end p,.ftr__co p{ text-wrap:balance; }
@media (min-width:900px){ .ftr__bot{ grid-template-columns:1fr 1fr; gap:48px; } .ftr__end{ text-align:right; } }
.has-stickybar .ftr__bot{ padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
@media (min-width:1024px){ .has-stickybar .ftr__bot{ padding-bottom:40px; } }

/* ---------- page heads */
.pagehead{ padding:40px 0 32px; }
.pagehead__in{ display:grid; gap:18px; }
.pagehead .eyebrow{ margin-bottom:14px; }
.pagehead--sm{ padding-bottom:20px; }
.pagehead--sm .lede{ margin-top:14px; }
@media (min-width:900px){ .pagehead{ padding:80px 0 56px; } .pagehead__in{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:end; gap:64px; } .pagehead--sm{ padding-bottom:32px; } }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:12px 0; font-size:15px; color:var(--ink-2); }
.crumb a{ display:inline-flex; align-items:center; min-height:44px; }
.crumb span[aria-hidden]{ color:var(--ctl); }
.crumb a:hover{ color:var(--clay); text-decoration:underline; text-underline-offset:4px; }
.crumb [aria-current]{ color:var(--ink); }
@media (max-width:759px){
  .crumb{ flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding:4px 0; }
  .crumb::-webkit-scrollbar{ display:none; }
  .crumb [aria-current],.crumb span[aria-hidden]:nth-last-child(2){ display:none; }
}

/* ---------- shop */
.shopbar{ position:sticky; top:var(--hdr); z-index:15; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-inline:calc(var(--gut) * -1); padding:10px var(--gut); background:rgba(247,243,238,.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.chips[data-chips]{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:-4px; padding:4px; }
.chips[data-chips]::-webkit-scrollbar{ display:none; }
.fchip{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:1.5px solid var(--ctl); border-radius:999px; font-size:17px; font-weight:500; white-space:nowrap; transition:background .25s,border-color .25s,color .25s; }
.fchip .num{ font-size:15px; color:var(--muted); }
.fchip:hover{ border-color:var(--ink); }
.fchip[aria-pressed="true"]{ background:var(--clay-soft); border-color:var(--clay); color:var(--ink); }
.fchip[aria-pressed="true"] .num{ color:var(--clay); }
.shopbar__n{ display:none; font-size:16px; color:var(--ink-2); white-space:nowrap; }
@media (min-width:900px){ .shopbar__n{ display:block; } }
.shopintro{ margin:24px 0 0; min-height:1px; }
.shopintro__i{ font:400 clamp(21px,1.9vw,26px)/1.4 var(--display); color:var(--ink-2); max-width:46ch; }
.fgroups{ display:grid; gap:64px; margin-top:32px; }
@media (min-width:900px){ .fgroups{ gap:96px; margin-top:48px; } }
.fgroup{ scroll-margin-top:calc(var(--hdr) + 90px); }
.fgroup.in-filter{ animation:fadein .55s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px); } }

/* ---------- product page */
.pdp{ display:grid; gap:28px; padding-bottom:64px; }
.gal{ position:relative; min-width:0; margin-inline:calc(var(--gut) * -1); }
.gal__main{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.gal__main::-webkit-scrollbar{ display:none; }
.gal__slide{ flex:0 0 100%; aspect-ratio:4/5; scroll-snap-align:start; }
.gal__count{ position:absolute; right:calc(var(--gut) + 6px); top:14px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.92); font-size:14px; font-weight:500; }
.gal__thumbs{ display:flex; gap:8px; padding:10px var(--gut) 0; }
.gal__thumbs button{ width:72px; aspect-ratio:4/5; border-radius:var(--r-sm); opacity:1; transition:opacity .25s,box-shadow .25s; }
.gal__thumbs button.on{ opacity:1; box-shadow:0 0 0 2px var(--rice),0 0 0 4px var(--ink); }
.gal__thumbs button:hover{ opacity:1; }
@media (max-width:759px){
  .gal__thumbs{ justify-content:center; gap:4px; padding:10px var(--gut) 0; }
  .gal__thumbs button{ width:44px; height:44px; aspect-ratio:auto; display:grid; place-items:center; background:none; opacity:1; box-shadow:none; overflow:visible; }
  .gal__thumbs button.on{ box-shadow:none; }
  .gal__thumbs button :is(img,.ph){ display:none; }
  .gal__thumbs button::after{ content:""; width:16px; height:3px; border-radius:3px; background:var(--line-2); transition:background .25s,width .35s var(--ease); }
  .gal__thumbs button.on::after{ width:28px; background:var(--ink); }
  .gal__count{ display:none; }
}
.buy{ min-width:0; }
.buy__fam{ font:600 14px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.buy__fam a{ display:inline-flex; align-items:center; min-height:44px; }
.buy__fam a:hover{ color:var(--clay); }
.buy__h1{ display:grid; gap:2px; margin-top:4px; }
.buy__name{ font-weight:400; font-size:clamp(36px,3.4vw,52px); line-height:1.05; letter-spacing:-.016em; }
.buy__color{ font:italic 400 clamp(26px,2.4vw,36px)/1.15 var(--serif-en); color:var(--ink-2); }
.buy__price{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:20px; }
.buy__price .num{ font-size:28px; font-weight:500; letter-spacing:-.01em; }
.buy__tag{ margin-top:16px; font-size:18px; line-height:1.6; color:var(--ink-2); max-width:44ch; }
.colrow{ display:grid; gap:8px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.colrow__l{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.colrow__l b{ font-weight:600; font-size:18px; }
.colrow__n{ font-size:16px; color:var(--muted); }
.colrow__d{ display:flex; flex-wrap:wrap; gap:2px; margin-left:-6px; }
.sw{ position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; }
.sw__c{ width:32px; height:32px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(34,29,25,.2); transition:box-shadow .25s; }
.sw:hover .sw__c{ box-shadow:inset 0 0 0 1px rgba(34,29,25,.2),0 0 0 3px var(--rice),0 0 0 4.5px var(--ctl); }
.sw.is-on .sw__c{ box-shadow:inset 0 0 0 1px rgba(34,29,25,.2),0 0 0 3px var(--rice),0 0 0 5px var(--ink); }
.sizes{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.sizes__hd{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; margin-bottom:10px; }
.sizes__l{ display:flex; align-items:baseline; gap:12px; }
.sizes__l b{ font-weight:600; font-size:18px; }
.sizes__guide{ display:inline-flex; align-items:center; gap:8px; min-height:48px; font-size:17px; font-weight:500; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); }
.sizes__guide:hover{ color:var(--clay); }
.sizes__b{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; }
.sz{ min-height:54px; padding:0 8px; border:1.5px solid var(--ctl); border-radius:var(--r-sm); background:var(--white); font-size:18px; font-weight:500; transition:border-color .2s,background .2s,box-shadow .2s; }
.sz:hover{ border-color:var(--ink); }
.sz[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:#fff; box-shadow:none; font-weight:600; }
.sz:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.sizes:focus{ outline:none; }
.sizes:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; border-radius:var(--r-sm); }
.sizes__msg{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:var(--r-sm); background:var(--clay-soft); color:var(--ink); font-size:17px; font-weight:500; }
.sizes__msg svg{ color:var(--clay); margin-top:2px; flex:none; }
.sizes.is-err .sizes__b{ animation:nudge .45s var(--ease); }
@keyframes nudge{ 25%{ transform:translateX(-5px); } 60%{ transform:translateX(4px); } }
.sizes__note{ margin-top:10px; font-size:16px; color:var(--ink-2); }
.buyrow{ display:flex; gap:10px; margin-top:24px; }
.qty{ display:inline-flex; align-items:center; height:60px; border:1.5px solid var(--ctl); border-radius:999px; flex:none; padding:0 4px; background:var(--white); }
.qty button{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; transition:background .2s; }
.qty button:hover{ background:rgba(34,29,25,.06); }
.qty button[disabled]{ opacity:.3; }
.qty input{ width:30px; padding:0; border:0; background:transparent; text-align:center; font-size:18px; font-weight:600; }
.qty input:focus{ outline:none; }
.qty--sm{ height:48px; padding:0 2px; }
.qty--sm button{ width:42px; height:42px; }
.qty--sm input{ width:26px; font-size:17px; }
@media (max-width:519px){ .buyrow .btn{ padding:0 18px; gap:10px; white-space:nowrap; } .buyrow .qty button{ width:42px; height:42px; } .buyrow .qty input{ width:26px; } }
.buy__note{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:16px; color:var(--ink-2); }
.buy__note svg{ margin-top:2px; flex:none; color:var(--ink); }
.buy__note--pol{ margin-top:18px; }
.eta{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding:18px 20px; background:var(--sand); border-radius:var(--r); font-size:17px; }
.eta svg{ margin-top:1px; color:var(--ink); }
.eta b{ font-weight:600; }
.eta small{ display:block; margin-top:4px; font-size:17px; line-height:1.55; color:var(--ink-2); }
.trust{ display:grid; gap:16px; margin-top:22px; }
.trust li{ display:flex; gap:14px; align-items:center; font-size:16px; }
.trust svg{ color:var(--clay); }
.trust b{ display:block; font-weight:600; font-size:16px; }
.trust span{ color:var(--ink-2); font-size:17px; line-height:1.5; }
@media (min-width:560px){ .trust{ grid-template-columns:repeat(3,minmax(0,1fr)); } .trust li{ display:grid; gap:8px; align-items:start; align-content:start; } }
.glance{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.ticks{ display:grid; gap:10px; margin-top:12px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; font-size:17px; line-height:1.5; }
.ticks__m{ margin-top:2px; color:var(--clay); }
@media (min-width:1024px){
  .pdp{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(48px,6vw,104px); align-items:start; padding-bottom:96px; }
  .gal{ margin:0; position:sticky; top:calc(var(--hdr) + 16px); }
  .gal__slide{ border-radius:var(--r); }
  .gal__main{ border-radius:var(--r); }
  .gal__count{ right:16px; top:16px; }
  .gal__thumbs{ padding:14px 0 0; gap:10px; }
  .gal__thumbs button{ width:84px; }
  .buy__in{ padding-top:8px; max-width:580px; }
}
.pinfo-sec{ border-top:1px solid var(--line); }
.pinfo{ display:grid; gap:32px; }
.pinfo__l p:not(.pinfo__lead):not(.eyebrow){ font-size:18px; line-height:1.7; color:var(--ink-2); max-width:58ch; margin-top:16px; }
.pinfo__lead{ font-weight:400; font-size:clamp(26px,2.4vw,36px); line-height:1.3; letter-spacing:-.01em; color:var(--ink); max-width:24ch; text-wrap:pretty; }
.pinfo__lead--long{ font-size:clamp(22px,1.7vw,26px); line-height:1.45; max-width:34ch; }
.pinfo__r{ display:grid; gap:16px; align-content:start; }
.fitbox,.gtk{ padding:26px 24px 24px; background:var(--white); border-radius:var(--r); }
:is(.fitbox,.gtk,.dcard) .h4{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
:is(.fitbox,.gtk,.dcard) .h4 svg{ color:var(--clay); }
.dots{ display:grid; gap:8px; }
.dots li{ position:relative; padding-left:22px; font-size:17px; line-height:1.55; color:var(--ink-2); }
.dots li::before{ content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--clay); opacity:.85; }
.fitbox__ret{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:16px; line-height:1.55; color:var(--ink-2); }
.fitbox .tlink{ margin-top:6px; }
@media (min-width:900px){ .pinfo{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(48px,7vw,112px); align-items:start; } }
.dgrid{ display:grid; gap:16px; }
.dcard{ padding:26px 24px 26px; background:var(--white); border-radius:var(--r); min-width:0; }
.box__l{ display:grid; gap:10px; }
.box__l li{ display:flex; gap:12px; align-items:flex-start; font-size:17px; line-height:1.5; }
.box__l svg{ margin-top:2px; color:var(--clay); }
@media (min-width:900px){ .dgrid{ grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.9fr); gap:20px; align-items:start; } }
.specs{ border-top:1px solid var(--ink); }
.specs th,.specs td{ padding:14px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:16px; line-height:1.5; }
.specs th{ width:36%; padding-right:16px; font-weight:500; color:var(--ink); }
.specs td{ color:var(--ink-2); }
.specs__note{ margin-top:14px; }
.specs--co th{ width:30%; }
.howl{ display:grid; gap:4px; counter-reset:howl; }
.howl li{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:17px; line-height:1.55; color:var(--ink-2); }
.howl li:last-child{ border-bottom:0; }
.howl__n{ font:400 19px/1 var(--serif-en); color:var(--clay); }
ol.howl:not(:has(.howl__n)) li{ grid-template-columns:1fr; counter-increment:howl; padding-left:36px; position:relative; }
ol.howl:not(:has(.howl__n)) li::before{ content:counter(howl); position:absolute; left:0; top:10px; font:400 19px/1.4 var(--serif-en); color:var(--clay); }
.howl--big li{ font-size:18px; padding:14px 0; }
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -12px 30px -20px rgba(43,36,32,.3); transform:translateY(110%); transition:transform .45s var(--ease); }
.stickybar.on{ transform:none; }
.stickybar__t{ min-width:0; }
.stickybar__t b{ display:block; font:600 16px/1.3 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stickybar__t span{ font-size:15px; color:var(--ink-2); }
.stickybar .btn{ min-height:52px; padding:0 22px; flex:none; }
@media (min-width:1024px){ .stickybar{ display:none; } }

/* ---------- size charts: the dialog on product pages and the size guide page */
.szt{ overflow-x:auto; margin:4px 0 0; border-radius:var(--r-sm); }
.szt__u{ margin-top:4px; font-size:15px; font-weight:500; color:var(--ink-2); }
.szt__usi{ display:none; }
.szt__hint{ display:none; font-size:15px; font-weight:500; color:var(--ink-2); }
.szt.is-fade{ -webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent); }
@media (max-width:599px){ .szt__t{ font-size:16px; } .chart{ padding:22px 16px 18px; } .szd__bd{ padding:18px 16px 24px; } }
.szt__t{ font-size:17px; min-width:300px; }
.szt__t caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.szt__t th,.szt__t td{ padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.szt__t thead th{ font:600 15px/1.35 var(--sans); color:var(--ink-2); border-bottom:2px solid var(--ink); vertical-align:bottom; white-space:normal; }
.szt__t tbody th{ font-weight:600; color:var(--ink); }
.szt__t td{ color:var(--ink-2); }
.szt__t tbody tr:nth-child(even) :is(th,td){ background:rgba(239,233,225,.6); }
.szt__t :is(th,td):first-child{ padding-left:14px; }
.szd{ width:min(760px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:18px; background:var(--rice); color:var(--ink); box-shadow:0 40px 100px -30px rgba(34,29,25,.5); overflow:auto; }
.szd::backdrop{ background:rgba(34,29,25,.5); }
.szd__hd{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 12px 24px; background:var(--rice); border-bottom:1px solid var(--line); }
.szd__t{ font:400 26px/1.2 var(--display); letter-spacing:-.01em; }
.szd__bd{ display:grid; gap:18px; padding:20px 24px 28px; }
.szd__unit{ font-size:16px; color:var(--ink-2); }
.szd__adv,.advice{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-sm); background:var(--sand); font-size:17px; font-weight:500; line-height:1.5; }
.szd__adv svg,.advice svg{ color:var(--clay); flex:none; margin-top:1px; }
.szd .h4{ margin-top:4px; }
.charts{ display:grid; gap:16px; }
.chart{ padding:24px 20px 20px; background:var(--white); border-radius:var(--r); min-width:0; scroll-margin-top:calc(var(--hdr) + 24px); }
.chart__hd{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:10px 16px; margin-bottom:12px; }
.chart__m{ margin-top:4px; font-size:16px; color:var(--ink-2); }
.chart__sw{ display:flex; flex-wrap:wrap; gap:6px; padding-top:6px; }
.chart__note{ margin-top:14px; font-size:16px; line-height:1.55; color:var(--ink-2); }
.chart .tlink{ margin-top:4px; }
@media (min-width:900px){ .charts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .chart{ padding:30px 28px 24px; } }

/* pairs well with: a single suggestion gets a wide row */
.pairone{ display:grid; gap:24px; }
.pairone__media{ display:block; position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:var(--r); max-width:420px; width:100%; background:var(--sand); }
.pairone__media :is(img,.ph){ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pairone__txt{ display:grid; justify-items:start; gap:16px; align-content:center; max-width:480px; }
.pairone__name a{ display:grid; gap:6px; font:400 clamp(30px,2.6vw,40px)/1.1 var(--display); letter-spacing:-.012em; }
.pairone__name a:hover > span:first-child{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:var(--clay); }
.pairone__color{ display:inline-flex; align-items:center; gap:10px; font:italic 400 24px/1.2 var(--serif-en); color:var(--ink-2); }
.pairone__tag{ font-size:18px; line-height:1.6; color:var(--ink-2); }
.pairone__price{ display:flex; align-items:center; gap:12px; }
.pairone__price .num{ font-size:22px; font-weight:500; }
@media (min-width:760px){ .pairone{ grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center; } }
.pairone__name a:lang(ja){ font:400 clamp(24px,2vw,30px)/1.45 var(--serif-ja); letter-spacing:.05em; }
.pairone__color:lang(ja){ font:400 18px/1.5 var(--sans-ja); font-style:normal; letter-spacing:.06em; }

/* ---------- about */
.pagehead--about{ padding-bottom:0; }
.about__head{ display:grid; gap:22px; max-width:900px; padding-bottom:44px; }
.about__head .h1{ max-width:14ch; }
.about__media{ aspect-ratio:16/9; border-radius:var(--r); }
@media (max-width:759px){ .about__media{ aspect-ratio:4/3.6; } }
.about{ display:grid; gap:40px; padding-top:var(--sec); }
.about__s{ display:grid; gap:12px; align-content:start; padding-top:22px; border-top:2px solid var(--ink); }
.about__s .about__n{ font:400 22px/1 var(--serif-en); color:var(--clay); }
.about__s p{ font-size:18px; line-height:1.7; color:var(--ink-2); max-width:54ch; }
.about__s p+p{ margin-top:12px; }
@media (min-width:900px){ .about{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px; } }
.co__link{ margin-top:20px; }

/* ---------- cart, drawer, checkout */
.lines{ border-top:1px solid var(--line); }
.ci{ display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.ci__img{ display:block; aspect-ratio:4/5; border-radius:var(--r-sm); }
.ci__name{ display:inline-block; font:600 17px/1.3 var(--sans); }
.ci__name:hover{ color:var(--clay); text-decoration:underline; text-underline-offset:4px; }
.ci__meta{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:6px; font-size:16px; color:var(--ink-2); }
.ci__lbl{ display:inline-flex; gap:8px; align-items:center; min-width:0; }
.ci__lt{ min-width:0; }
.ci__sz{ padding:2px 10px; border-radius:999px; background:var(--sand); color:var(--ink); font-weight:600; font-size:15px; }
.ci__u{ white-space:nowrap; }
.ci__ctl{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; margin-top:12px; }
.ci__rm{ min-height:44px; font-size:16px; color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(34,29,25,.35); }
.ci__rm:hover{ color:var(--clay); }
.ci__tot{ font-size:17px; font-weight:600; }
.tots{ display:grid; gap:10px; padding:16px 0 18px; }
.tot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:17px; }
.tot dt{ color:var(--ink-2); }
.tot--big{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line); font-size:19px; font-weight:600; }
.tot--big dt{ color:var(--ink); }
.tot small{ display:block; margin-top:2px; font-weight:400; font-size:15px; color:var(--ink-2); }
.tot--big dd{ white-space:nowrap; }
.drawer{ position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none; transition:visibility 0s linear .45s; }
.drawer.on{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.drawer__bg{ position:absolute; inset:0; background:rgba(34,29,25,.4); opacity:0; transition:opacity .4s; }
.drawer.on .drawer__bg{ opacity:1; }
.drawer__pan{ position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; width:min(460px,100%); background:var(--rice); transform:translateX(100%); transition:transform .5s var(--slow); outline:none; box-shadow:-30px 0 80px -30px rgba(34,29,25,.35); }
.drawer.on .drawer__pan{ transform:none; }
.drawer__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 24px; border-bottom:1px solid var(--line); }
.drawer__t{ font:400 26px/1.2 var(--display); letter-spacing:-.01em; }
.drawer__t .num{ font:400 16px var(--sans); letter-spacing:0; color:var(--ink-2); margin-left:6px; }
.drawer__bd{ flex:1; overflow-y:auto; padding:0 24px; }
.drawer__bd .lines{ border-top:0; }
.dpair{ padding:22px 0 18px; }
.dpair__t{ margin-bottom:6px; }
.dpair__i{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.dpair__mid{ display:grid; gap:4px; min-width:0; }
.dpair .ci__meta{ margin:0; }
.drawer__ft{ padding:6px 24px calc(20px + env(safe-area-inset-bottom)); background:var(--white); border-top:1px solid var(--line); }
.drawer__ft .tlink{ margin-top:4px; }
.drawer__ft .summary__eta{ margin:-6px 0 14px; }
.empty{ display:grid; justify-items:start; gap:12px; padding:36px 0; }
.empty__t{ font:400 30px/1.15 var(--display); letter-spacing:-.012em; }
.empty p:not(.empty__t){ color:var(--ink-2); max-width:40ch; }
.empty .btn{ margin-top:8px; }
.cartpage{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; padding-bottom:104px; }
.summary{ display:grid; gap:14px; align-content:start; padding:26px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); }
.summary__t{ font:400 26px/1.2 var(--display); letter-spacing:-.01em; }
.summary .tots{ padding:4px 0 6px; }
.summary__eta,.age{ display:flex; gap:10px; align-items:flex-start; font-size:16px; color:var(--ink-2); }
.summary__eta svg,.age svg{ margin-top:2px; flex:none; color:var(--ink); }
.summary__eta b{ color:var(--ink); font-weight:600; }
.age{ color:var(--ink); }
.cartpage.is-empty .summary{ display:none; }
.mini-trust{ display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.mini-trust li{ display:flex; gap:10px; align-items:center; font-size:16px; color:var(--ink-2); }
.mini-trust svg{ color:var(--clay); }
@media (min-width:1024px){ .cartpage{ grid-template-columns:minmax(0,1fr) 420px; gap:80px; align-items:start; } .summary{ position:sticky; top:calc(var(--hdr) + 24px); } }
/* phones: every condition of the order sits above the total and the order button (特定商取引法 第12条の6) */
.cartpage--co{ grid-template-areas:"a" "b" "s"; }
.cartpage--co .co--a{ grid-area:a; } .cartpage--co .summary{ grid-area:s; } .cartpage--co .co--b{ grid-area:b; }
@media (min-width:1024px){ .cartpage--co{ grid-template-areas:"a s" "b s"; row-gap:64px; } .cartpage--co .summary{ align-self:start; } }
.co__h{ font:400 28px/1.2 var(--display); letter-spacing:-.01em; margin-bottom:16px; }
.co__scroll{ overflow-x:auto; }
.co__items{ width:100%; border-top:2px solid var(--ink); font-size:17px; }
.co__items th{ padding:12px 0; border-bottom:1px solid var(--line); text-align:left; font:600 14px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.co__items td{ padding:14px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.co__items :is(td,th).num{ text-align:right; padding-left:14px; white-space:nowrap; }
.co__it{ display:flex; gap:12px; align-items:center; }
.co__it .ci__img{ width:52px; flex:none; }
.co__it b{ display:block; font:600 17px/1.3 var(--sans); overflow-wrap:anywhere; }
.co__meta{ display:inline-block; margin-top:4px; padding:2px 10px; border-radius:999px; background:var(--sand); font-size:15px; font-weight:600; }
.co__tots .tots{ margin-top:4px; }
.co__unit{ display:none; }
/* phones: the unit price and the quantity go under the item name, the line total stays on the right */
@media (max-width:599px){
  .co__items :is(th,td):nth-child(2),.co__items :is(th,td):nth-child(3){ display:none; }
  .co__unit{ display:block; margin-top:6px; font-size:16px; color:var(--ink-2); }
}
@media (min-width:1024px){ .co__tots{ display:none; } }
.co__terms{ border-top:2px solid var(--ink); }
.co__row{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); }
.co__row dt{ font-weight:600; font-size:17px; }
.co__row dd{ font-size:16px; line-height:1.62; color:var(--ink-2); }
.co__eta b{ color:var(--ink); font-weight:600; }
@media (min-width:760px){ .co__row{ grid-template-columns:200px minmax(0,1fr); gap:24px; } }
.notice{ display:flex; gap:12px; align-items:flex-start; padding:18px; border-radius:var(--r-sm); background:var(--clay-soft); font-size:16px; line-height:1.55; color:var(--ink); }
.notice svg{ color:var(--clay); margin-top:1px; flex:none; }
.notice__t{ font-weight:600; margin-bottom:4px; }
.toast{ position:fixed; left:50%; bottom:24px; z-index:70; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px); padding:16px 22px; border-radius:var(--r); background:var(--cocoa); color:var(--rice); font-size:16px; font-weight:500; box-shadow:0 18px 40px -14px rgba(34,29,25,.5); opacity:0; transform:translate(-50%,16px); transition:opacity .35s,transform .35s var(--ease); pointer-events:none; }
.toast.on{ opacity:1; transform:translate(-50%,0); }
.toast.is-quiet{ display:none; }
.has-stickybar .toast{ bottom:96px; }

/* ---------- legal pages */
.legalwrap{ display:grid; gap:28px; padding-block:24px 104px; }
.legalside{ display:grid; gap:24px; align-content:start; min-width:0; }
.legalnav ul{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:10px calc(var(--gut) * -1) 0; padding:2px var(--gut); }
.legalnav ul::-webkit-scrollbar{ display:none; }
.legalnav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1.5px solid var(--ctl); border-radius:999px; font-size:16px; white-space:nowrap; color:var(--ink-2); }
.legalnav a[aria-current]{ background:var(--clay-soft); border-color:var(--clay); color:var(--ink); }
.toc{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 0; }
.toc summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:44px; }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{ content:"+"; font-size:20px; line-height:1; color:var(--ink-2); }
.toc[open] summary::after{ content:"\2212"; }
.toc ol{ margin-top:6px; counter-reset:toc; }
.toc li{ counter-increment:toc; }
.toc a{ display:grid; grid-template-columns:32px 1fr; padding:7px 0; font-size:16px; line-height:1.45; color:var(--ink-2); }
.toc a::before{ content:counter(toc,decimal-leading-zero); font:400 15px/1.45 var(--serif-en); color:var(--clay); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--clay); }
.legal .toc{ margin:24px 0 8px; }
.legal .toc ol{ margin:6px 0 0; padding:0; list-style:none; }
.legal .toc li{ margin:0; font-size:inherit; line-height:inherit; }
.legal .toc a{ text-decoration:none; }
.toc--m{ display:block; }
.toc--d{ display:none; }
@media (min-width:1024px){ .toc--m{ display:none; } .toc--d{ display:block; } }
.legal{ min-width:0; max-width:74ch; }
.legal h1{ font-weight:400; font-size:clamp(38px,4.2vw,58px); line-height:1.08; letter-spacing:-.016em; }
.legal__upd{ margin:16px 0 28px; font-size:16px; color:var(--ink-2); }
.legal h2{ margin:52px 0 14px; padding-top:22px; border-top:1px solid var(--line); font-weight:400; font-size:clamp(25px,2vw,31px); line-height:1.2; letter-spacing:-.01em; scroll-margin-top:calc(var(--hdr) + 24px); }
.legal h3{ margin:28px 0 8px; font:600 18px/1.4 var(--sans); }
.legal p,.legal li{ font-size:17px; line-height:1.7; color:var(--ink-2); }
.legal strong{ color:var(--ink); font-weight:600; }
.legal p+p{ margin-top:12px; }
.legal ul,.legal ol{ margin:12px 0; padding-left:24px; }
.legal ul{ list-style:disc; }
.legal ol{ list-style:decimal; }
.legal li+li{ margin-top:6px; }
.legal li::marker{ color:var(--clay); }
.tblwrap{ overflow-x:auto; margin:20px 0; }
.legal table{ border-top:2px solid var(--ink); font-size:16px; }
.legal th,.legal td{ padding:13px 16px 13px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.55; }
.legal th{ width:34%; font-weight:600; color:var(--ink); }
.legal td{ color:var(--ink-2); }
/* phones: a two-column key/value table (th + one td per row) reads better stacked, label above value */
@media (max-width:599px){
  .legal table:not(:has(td + td)),.legal table:not(:has(td + td)) :is(tbody,tr,th,td){ display:block; width:auto; }
  .legal table:not(:has(td + td)) th{ padding:14px 0 4px; border-bottom:0; font-size:16px; }
  .legal table:not(:has(td + td)) td{ padding:0 0 14px; }
}
@media (min-width:1024px){
  .legalwrap{ grid-template-columns:270px minmax(0,1fr); gap:96px; padding-top:72px; }
  .legalside{ position:sticky; top:calc(var(--hdr) + 32px); max-height:calc(100vh - var(--hdr) - 64px); overflow-y:auto; }
  .legalnav ul{ display:grid; gap:0; overflow:visible; margin:10px 0 0; padding:0; }
  .legalnav a{ display:flex; min-height:44px; padding:6px 0; border:0; border-radius:0; font-size:16px; white-space:normal; }
  .legalnav a[aria-current]{ background:none; color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--clay); text-decoration-thickness:2px; text-underline-offset:6px; }
  .legalnav a:hover{ color:var(--clay); }
}

/* ---------- 404 */
.nf__in{ display:grid; gap:56px; padding-block:40px 120px; }
.nf__b{ display:grid; justify-items:start; gap:20px; }
.nf__b + .nf__b{ padding-top:48px; border-top:1px solid var(--line); }
.nf__b + .nf__b .h1{ font-size:clamp(30px,3.2vw,46px); }
.nf__media{ display:none; }
@media (min-width:900px){
  .nf__wrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:96px; align-items:center; }
  .nf__in{ padding-block:40px; }
  .nf__media{ display:flex; align-items:center; justify-content:center; }
  .nf__mark{ width:min(360px,28vw); height:auto; }
  .nf__mark path{ stroke-width:2.4; }
}
.nf .h1{ max-width:13ch; }
.nf__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* ---------- motion */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 1s var(--ease),transform 1s var(--slow); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media print{ .hdr,.ftr,.drawer,.stickybar,.toast,.hint{ display:none !important; } }

/* ---------- Japanese pages
   Headings in the system Mincho (Hiragino Mincho / Yu Mincho), text in the system Gothic, no web font. Body 1.9 line
   height, .04em tracking, no italic on Japanese, phrase-aware line breaks where the browser supports them, proportional
   kana (palt) on headings. A Japanese line carries about twice the meaning of an English one: display sizes come down a
   little and "ch" measures become em, the body stays at 17 px or more. */
:lang(ja){ --display:var(--serif-ja); --sans:var(--sans-ja); }
:lang(en){ --display:var(--serif-en); --sans:var(--sans-en); }
html:lang(ja) body{ line-height:1.9; letter-spacing:.04em; font-size:17px; line-break:strict; overflow-wrap:break-word; word-break:normal; }
@media (min-width:1100px){ html:lang(ja) body{ font-size:17.5px; } }
:is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,.buy__h1,.buy__tag,.lede,.lede p,.hero__sub,.hero__meta,.buy__promise,.card__name,.lead__t,.lead__b,.rcard__t,.rcard__b,.btn,.fchip,.tlink,.nav__main a,.nav__sub a,.label,.eyebrow,.facts li,.acc__i summary,.legalnav a,.toc a,.ftr__col a,.ci__name,.co__it b,.stickybar__t b,.trust b,.shopintro__i,.co__row dt,.bcard__b,.step__b,.promise__b,.tot dt,.pinfo__lead,.cmp__t td,.cmp__t th,.sizes__msg,.szd__t,.chart__note,.dots li):lang(ja){ word-break:auto-phrase; }
.jw{ display:inline-block; max-width:100%; }
.nw{ white-space:nowrap; }
html:lang(ja) [lang="en"]{ letter-spacing:0; word-break:normal; line-break:auto; }
.nf__b[lang="en"]{ line-height:1.6; }
:is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,.buy__h1,.card__name,.lead__t,.rcard__t,.ci__name,.drawer__t,.summary__t,.co__h,.empty__t,.acc__i summary,.co__it b,.stickybar__t b,.nav__main a,.szd__t,.pinfo__lead,.legal h1,.legal h2):lang(ja){ font-feature-settings:"palt"; }
.h1:lang(ja){ font-weight:400; font-size:clamp(31px,4vw,58px); line-height:1.45; letter-spacing:.04em; }
.h2:lang(ja){ font-weight:400; font-size:clamp(25px,2.7vw,40px); line-height:1.5; letter-spacing:.05em; }
.h3:lang(ja){ font-weight:600; font-size:clamp(18px,1.4vw,20px); line-height:1.6; letter-spacing:.05em; }
.h4:lang(ja){ font-weight:600; font-size:17.5px; line-height:1.6; letter-spacing:.05em; }
.hero__h1:lang(ja){ font-size:clamp(33px,4.5vw,64px); max-width:11em; }
.buy__name:lang(ja){ font:400 clamp(24px,2.4vw,36px)/1.45 var(--serif-ja); letter-spacing:.03em; }
@media (min-width:760px){ .buy__name:lang(ja){ letter-spacing:.05em; } }
.buy__color:lang(ja){ font:400 clamp(19px,1.6vw,23px)/1.6 var(--serif-ja); font-style:normal; letter-spacing:.08em; }
.legal h1:lang(ja){ font-weight:400; font-size:clamp(27px,3vw,40px); line-height:1.45; letter-spacing:.05em; }
.legal h2:lang(ja){ font-weight:600; font-size:clamp(19px,1.6vw,23px); line-height:1.55; letter-spacing:.05em; }
.legal h3:lang(ja){ font-weight:600; letter-spacing:.04em; }
.legal :is(p,li):lang(ja){ font-size:17px; line-height:1.95; }
.legal :is(th,td):lang(ja){ line-height:1.8; }
.legal ul:lang(ja){ padding-left:1.4em; }
:is(.lead__t,.rcard__t):lang(ja){ font:400 23px/1.45 var(--serif-ja); letter-spacing:.06em; }
.rcard--sm .rcard__t:lang(ja){ font-size:19px; }
:is(.drawer__t,.summary__t,.co__h,.szd__t):lang(ja){ font:400 22px/1.45 var(--serif-ja); letter-spacing:.06em; }
.empty__t:lang(ja){ font:400 24px/1.5 var(--serif-ja); letter-spacing:.06em; }
.pinfo__lead:lang(ja){ font:400 clamp(21px,1.9vw,27px)/1.8 var(--serif-ja); letter-spacing:.05em; max-width:22em; }
.pinfo__lead--long:lang(ja){ font-size:clamp(19px,1.5vw,22px); line-height:1.9; max-width:26em; }
.shopintro__i:lang(ja){ font:400 clamp(18px,1.4vw,20px)/1.9 var(--serif-ja); letter-spacing:.05em; max-width:34em; }
.nav__tag:lang(ja){ font:400 18px/1.7 var(--serif-ja); font-style:normal; letter-spacing:.06em; }
.ph__f:lang(ja){ font-size:16px; letter-spacing:.06em; }
/* measures in em once a line is Japanese */
.hero__sub:lang(ja){ max-width:28em; font-size:17px; line-height:2; }
@media (min-width:900px){ .hero__sub:lang(ja){ font-size:18px; } }
.sec__head .h2:lang(ja){ max-width:15em; }
.split__txt .h2:lang(ja){ max-width:12em; }
.faq__head .h2:lang(ja),.nf .h1:lang(ja){ max-width:12em; }
.final__t:lang(ja){ max-width:16em; font-size:clamp(29px,3.6vw,50px); }
.lede:lang(ja){ max-width:32em; font-size:17px; line-height:2; }
@media (min-width:1100px){ .lede:lang(ja){ font-size:17.5px; } }
:is(.split__b p,.pinfo__l p,.about__s p):lang(ja){ font-size:17px; line-height:2.05; max-width:34em; }
:is(.bcard__b,.step__b,.promise__b,.acc__b,.co__row dd,.notice,.eta small,.lead__b,.buy__tag,.cmp__t td,.dots li,.howl li,.chart__note,.fitbox__ret,.sizes__note):lang(ja){ line-height:1.9; }
/* no italic on Japanese: the serif stays upright */
:is(.buy__color,.ftr__tag,.nav__tag):lang(ja){ font-style:normal; }
.ftr__tag:lang(ja){ font:400 23px/1.6 var(--serif-ja); letter-spacing:.08em; max-width:20em; }
/* names and labels */
.card__name:lang(ja){ font-size:16.5px; line-height:1.55; letter-spacing:.04em; }
/* a long katakana name cannot break: the price drops under it instead of overlapping it */
.card__body:lang(ja){ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:4px 14px; }
.card__body:lang(ja) .card__name{ flex:1 1 auto; }
@media (max-width:759px){ .card__body:lang(ja) .card__name{ flex-basis:100%; } }
:is(.ci__name,.co__it b):lang(ja){ font-size:16.5px; line-height:1.5; letter-spacing:.04em; }
.acc__i summary:lang(ja){ font-size:18px; line-height:1.7; letter-spacing:.04em; }
.stickybar__t b:lang(ja){ font-size:15.5px; letter-spacing:.04em; }
:is(.eyebrow,.label,.ftr__col h2,.co__items th,.nav__lbl,.buy__fam,.cmp__t tbody th):lang(ja){ letter-spacing:.12em; }
:is(.btn,.fchip,.tlink,.cartbtn,.facts li,.sz,.sizes__guide):lang(ja){ letter-spacing:.05em; }
.btn:lang(ja){ font-size:16.5px; }
.btn--lg:lang(ja){ font-size:17px; }
.nav__main a:lang(ja){ letter-spacing:.06em; }
@media (max-width:1099px){ .nav__main a:lang(ja){ font:400 26px/1.5 var(--serif-ja); letter-spacing:.06em; } }
@media (min-width:760px){ .co__row:lang(ja){ grid-template-columns:170px minmax(0,1fr); } }
.cmp__t thead th:lang(ja){ letter-spacing:.06em; }
.num:lang(ja){ letter-spacing:0; }
.vat:lang(ja){ letter-spacing:.06em; }
.tot--big:lang(ja){ font-size:18px; }
.szt__t:lang(ja){ letter-spacing:.02em; }
.szt__t thead th:lang(ja){ white-space:nowrap; }
@media (max-width:599px){ .szt__t:lang(ja){ font-size:15px; letter-spacing:0; } .szt__t:lang(ja) :is(th,td){ padding:11px 6px; } .szt__t:lang(ja) :is(th,td):first-child{ padding-left:8px; } }

/* ---------- review fixes (2026-10-15) */
/* 33. the family promise under the product name */
.buy__promise{ margin-top:14px; font-size:19px; line-height:1.5; font-weight:500; color:var(--ink); max-width:40ch; }
.buy__promise:lang(ja){ font-size:17px; line-height:1.8; letter-spacing:.04em; }
/* 56. Japanese hero line: the price inside the line, each 込み token in one piece */
.hero__meta .nw{ white-space:nowrap; }
/* 58. the size in the sticky bar */
.stickybar__t .stickybar__sz{ display:block; font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; }
.stickybar__t .num{ display:block; white-space:nowrap; }
@media (max-width:479px){ .stickybar__t b{ display:none; } }
/* 48. home colors: four cards and a link on phones */
.colors__all{ display:none; }
@media (max-width:599px){
  .grid--colors .card:nth-child(n+5){ display:none; }
  .colors__all{ display:flex; justify-content:center; width:100%; margin-top:28px; }
  /* 49. the eight folded tanks stay in frame */
  #colors .banner{ aspect-ratio:2400/1350; }
  /* 43. the first screen reaches the button and the price */
  .hero__media{ height:min(46vh,370px); }
  .hero__img{ object-position:50% 25%; }
  .hero__in{ padding-block:20px 40px; }
  .hero__txt{ gap:14px; }
  .hero__more{ display:none; }
  /* 42. every filter chip visible, no sideways scroll */
  .chips[data-chips]{ flex-wrap:wrap; row-gap:8px; overflow:visible; }
  .fchip{ padding:0 14px; }
  .fchip .num{ display:none; }
}
/* 53. a filtered shop view keeps the family tile short */
.fgroups.is-filtered .lead__b{ display:none; }
/* 57. English checkout on phones and tablets: the order summary right after the items, the terms below */
@media (max-width:1023px){ html[lang="en"] .cartpage--co{ grid-template-areas:"a" "s" "b"; } }
/* 45. footer legal lines at body size on large screens */
@media (min-width:1100px){ .ftr__bot,.fine,.eta small,.trust span,.lead__b{ font-size:18px; } }
/* 35. size tables on phones (after the base table rules so they win): four columns, figures never cut */
@media (max-width:599px){
  .szt .szt__t{ min-width:0; width:100%; font-size:16px; }
  .szt .szt__t :is(th,td){ padding:12px 6px; letter-spacing:0; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
  .szt .szt__t :is(th,td):first-child{ padding-left:10px; }
  .szt .szt__t .szt__us{ display:none; }
  .szt__usi{ display:block; margin-top:2px; font-size:14px; font-weight:400; color:var(--ink-2); }
  .szt__hint.on{ display:block; }
}
@media (max-width:599px){
  .szd{ width:calc(100% - 16px); }
  .szd__bd{ padding:18px 12px 24px; }
  .szt .szt__t:lang(ja){ font-size:15px; }
  .szt .szt__t:lang(ja) :is(th,td){ padding:12px 5px; font-feature-settings:"palt"; }
  .szt .szt__t:lang(ja) :is(th,td):first-child{ padding-left:8px; }
}
@media (max-width:374px){ .szt .szt__t:lang(ja){ font-size:14px; } .szt .szt__t:lang(ja) :is(th,td){ padding:12px 4px; } }