/** Shopify CDN: Minification failed

Line 780:20 Expected ")" to end URL token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:clair-couture (INDEX:11) */
.cc{
  --paper:#F6F2EA;--paper-2:#EFE9DD;--ink:#1A1714;--ink-soft:#5A5248;--line:#DAD2C4;
  --accent:#C99A3E;          /* a single whisper of gold, used almost never */
  --serif:'Crimson Text','Cormorant Garamond',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  background:var(--paper);color:var(--ink);
  font-feature-settings:"liga" 1;
}
/* shared type */
.cc__eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.68rem;color:var(--ink-soft);margin:0 0 1rem;}
.cc__eyebrow--light{color:rgba(246,242,234,.86);}
.cc__eyebrow--c{text-align:center;}
.cc__h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.01em;margin:0;}
.cc__h2--xl{font-size:clamp(2.2rem,4.4vw,3.6rem);}
.cc__h2--light{color:#fff;}
.cc__h2--c{text-align:center;}
.cc__lede{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.6;color:var(--ink-soft);margin:1.4rem 0 2rem;max-width:42ch;}
/* flat underline link — replaces every pill button */
.cc__link{display:inline-block;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:.45rem;border-bottom:1px solid var(--ink);transition:opacity .4s var(--ease),letter-spacing .4s var(--ease);}
.cc__link:hover{opacity:.55;letter-spacing:.26em;}
.cc__link--light{color:#fff;border-bottom-color:rgba(255,255,255,.8);}
/* section shells — generous air */
.cc__section{max-width:1280px;margin:0 auto;padding:6.5rem 2rem;}
.cc__section--rule{border-top:1px solid var(--line);}
.cc__sechead{display:flex;flex-direction:column;gap:.2rem;margin-bottom:3rem;}
.cc__sechead .cc__link{align-self:flex-start;margin-top:1.4rem;border:0;padding:0;}
.cc__sechead .cc__link:hover{opacity:.55;}
.cc__sechead--c{text-align:center;align-items:center;}
/* hero */
.cc__hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--paper-2);}
.cc__hero-media{position:absolute;inset:0;background-size:cover;background-position:var(--focal,50% 50%);transform:scale(1.04);animation:ccKen 18s var(--ease) forwards;}
@keyframes ccKen{to{transform:scale(1)}}
.cc__hero-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,12,.5),rgba(20,16,12,.08) 52%,transparent);}
.cc__hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;padding:0 2rem 5rem;color:#fff;animation:ccFade 1.1s var(--ease) both;}
.cc__hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.015em;margin:.4rem 0 1rem;max-width:16ch;color:#fff;}
.cc__hero-sub{max-width:42ch;font-size:1.05rem;line-height:1.6;opacity:.94;margin-bottom:1.8rem;}
@keyframes ccFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cc__hero-media{animation:none;transform:none}.cc__hero-inner{animation:none}}
/* trust — hairline, quiet */
.cc__trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 3rem;padding:1.4rem 2rem;}
.cc__trust span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
/* product grid — no cards, image + hairline */
.cc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 1.6rem;}
@media(min-width:760px){.cc__grid{grid-template-columns:repeat(4,1fr);}}
.cc__prod{text-decoration:none;color:var(--ink);display:block;}
/* ── BANNER GEOMETRY ─────────────────────────────────────────────────────────
   Same split as clair-home and as the live theme: the mid-page band adapts to
   its artwork, the hero is a fixed "small" banner height with a cover crop so
   the opening screen does not change size with the image. See clair-home.liquid
   for the full note.
   ────────────────────────────────────────────────────────────────────────── */
.cc__hero{min-height:28rem;}
@media screen and (min-width:750px){ .cc__hero{min-height:42rem;} }
.cc__look{aspect-ratio:var(--band-ar,1.57);}
@media(max-width:599px){ .cc__look{min-height:280px;} }
.cc__prod-img{aspect-ratio:1;background:var(--paper-2);overflow:hidden;margin-bottom:1rem;}
.cc__prod-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.cc__prod:hover .cc__prod-img img{transform:scale(1.05);}
.cc__prod-t{font-family:var(--serif);font-size:1.15rem;margin:0 0 .15rem;}
.cc__prod-p{font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);margin:0;}
/* weights — hairline tiles, flat */
.cc__weights{display:grid;grid-template-columns:repeat(2,1fr);max-width:1100px;margin:0 auto;border-left:1px solid var(--line);border-top:1px solid var(--line);}
@media(min-width:620px){.cc__weights{grid-template-columns:repeat(4,1fr);}}
@media(min-width:920px){.cc__weights{grid-template-columns:repeat(7,1fr);}}
.cc__wtile{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);padding:2rem .5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s var(--ease);}
.cc__wtile:hover{background:var(--paper-2);}
.cc__wtile-n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;}
/* editorial split — asymmetric */
.cc__editorial{max-width:1280px;margin:0 auto;padding:6.5rem 2rem;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;}
@media(min-width:880px){.cc__editorial{grid-template-columns:1.15fr .85fr;gap:5rem;}.cc__editorial--rev .cc__editorial-media{order:2;}}
.cc__editorial-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
/* the atelier story image keeps its own proportions — it is a banner, not a portrait */
.cc__editorial-media--natural img{aspect-ratio:auto;height:auto;object-fit:fill;}
.cc__editorial-body{max-width:46ch;}
/* lookbook full-bleed */
.cc__look{position:relative;display:flex;align-items:flex-end;background-size:cover;background-position:center;}
.cc__look-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,12,.5),transparent 60%);}
.cc__look-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;padding:0 2rem 5rem;color:#fff;}
.cc__look-sub{max-width:42ch;font-size:1.05rem;line-height:1.6;opacity:.94;margin:.4rem 0 1.8rem;}
/* dégradé — flat, real skein gradient strip, no candy CSS gradient as a button */
.cc__fade{max-width:1280px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr;gap:0;text-decoration:none;color:var(--ink);}
@media(min-width:760px){.cc__fade{grid-template-columns:1fr 1fr;align-items:stretch;}}
.cc__fade-body{padding:5rem 0;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);}
.cc__fade-strip{min-height:240px;background:linear-gradient(110deg,#8E2230,#D34B5D 28%,#F77A97 52%,#FFD957 78%,#B4C24E);}
@media(min-width:760px){.cc__fade-body{border-top:0;padding-right:4rem;}}
/* proof — serif on cream, hairline, no slab */
.cc__proof{max-width:860px;margin:0 auto;padding:6.5rem 2rem;text-align:center;border-top:1px solid var(--line);}
.cc__proof-q{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.4;letter-spacing:-.01em;margin:0 0 1.6rem;}
.cc__proof-meta{display:flex;flex-direction:column;gap:.4rem;align-items:center;}
.cc__proof-stars{color:var(--accent);letter-spacing:.18em;font-size:.8rem;}
.cc__proof-by{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
/* journal — editorial, no cards */
.cc__journal{display:grid;grid-template-columns:1fr;gap:3rem 2rem;}
@media(min-width:760px){.cc__journal{grid-template-columns:repeat(3,1fr);}}
.cc__art{text-decoration:none;color:var(--ink);display:block;}
.cc__art-img{aspect-ratio:3/2;background:var(--paper-2);overflow:hidden;margin-bottom:1.2rem;}
.cc__art-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.cc__art:hover .cc__art-img img{transform:scale(1.04);}
.cc__art-date{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem;}
.cc__art-t{font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.2;margin:0 0 .5rem;}
.cc__art-x{font-size:.9rem;line-height:1.6;color:var(--ink-soft);margin:0 0 1rem;}
.cc__art-read{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:.3rem;transition:opacity .4s var(--ease);}
.cc__art:hover .cc__art-read{opacity:.55;}
/* newsletter — quiet centered */
.cc__news{max-width:620px;margin:0 auto;padding:6.5rem 2rem;text-align:center;border-top:1px solid var(--line);}
.cc__news-perk{font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--ink-soft);margin:1rem 0 2rem;}
.cc__news-form{display:flex;gap:0;max-width:440px;margin:0 auto;border-bottom:1px solid var(--ink);}
.cc__news-input{flex:1;padding:.9em .2em;border:0;background:transparent;color:var(--ink);font:inherit;}
.cc__news-input:focus{outline:none;}
.cc__news-input::placeholder{color:var(--ink-soft);opacity:.6;}
.cc__news-btn{border:0;background:transparent;color:var(--ink);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:0 .4rem;}
.cc__news-btn:hover{opacity:.55;}
.cc__news-ok{font-family:var(--serif);font-size:1.2rem;color:var(--ink);}
/* END_SECTION:clair-couture */

/* START_SECTION:clair-crosssell (INDEX:12) */
.ccx{padding:.5rem 0 2rem;}
.ccx__wrap{max-width:1100px;margin:0 auto;padding:0 1.2rem;}
.ccx__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ccx__needle{font-size:.95rem;color:var(--ink,#1A1714);margin:0 0 1.8rem;letter-spacing:.01em;}
.ccx__needle strong{font-weight:600;}
.ccx__needle a{color:inherit;text-underline-offset:3px;}
.ccx__row{margin-top:1rem;}
.ccx__h{font-family:'Crimson Text',Georgia,serif;font-size:1.3rem;font-weight:600;margin:0 0 1.1rem;color:var(--ink,#1A1714);}
.ccx__grid{display:flex;flex-wrap:wrap;gap:1.4rem;}
.ccx__card{flex:0 0 130px;display:flex;flex-direction:column;}
.ccx__imglink{text-decoration:none;color:inherit;}
.ccx__img{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--paper,#F6F2EA);}
.ccx__img img{width:100%;height:100%;object-fit:cover;display:block;}
.ccx__t{display:block;font-size:.82rem;line-height:1.3;margin:.45rem 0 .2rem;color:#4a4540;}
.ccx__buy{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;}
.ccx__p{font-size:.82rem;font-weight:600;}
.ccx__add{border:1px solid rgba(26,23,20,.25);background:transparent;color:var(--ink,#1A1714);border-radius:999px;padding:.28em .8em;font:inherit;font-size:.74rem;cursor:pointer;text-decoration:none;white-space:nowrap;}
.ccx__add:hover{background:var(--ink,#1A1714);color:#fff;}
.ccx__add.is-added{background:#41633a;border-color:#41633a;color:#fff;}
@media(max-width:600px){.ccx__card{flex:0 0 calc(33.333% - 1rem);}}
/* END_SECTION:clair-crosssell */

/* START_SECTION:clair-footer (INDEX:13) */
/* Palette unchanged: deep warm ink ground, cream type, one gold accent. */
.clf{--bg:#1A1714;--ink:#F6F2EA;--muted:#A79E90;--line:rgba(246,242,234,.14);--gold:#E9C65C;
  background:var(--bg);color:var(--ink);padding:4.5rem 0 2.25rem;}
.clf__wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column;}

/* ---- Newsletter: the anchor of the footer. Drops are announced by email,
   so this is the highest-value control on the page. ---- */
.clf__news{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:1.75rem 4rem;align-items:end;}
.clf__news-copy{max-width:40ch;}
.clf__news-h{font-family:'Crimson Text','Cormorant',Georgia,serif;font-size:clamp(1.7rem,3vw,2.35rem);
  font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5rem;color:var(--ink);text-wrap:balance;}
.clf__news-sub{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0;max-width:46ch;}
.clf__news-form{width:100%;}
.clf__news-field{display:flex;gap:.5rem;align-items:stretch;}
.clf__news-field input{flex:1 1 auto;min-width:0;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.75rem .1rem;font-size:1rem;
  transition:border-color .2s ease;}
.clf__news-field input::placeholder{color:#6f675d;}
.clf__news-field input:hover{border-bottom-color:rgba(246,242,234,.34);}
.clf__news-field input:focus{outline:none;border-bottom-color:var(--gold);}
.clf__news-field input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.clf__news-btn{flex:0 0 auto;background:transparent;color:var(--gold);border:1px solid var(--gold);
  border-radius:0;padding:.75rem 1.5rem;font-family:'Jost',ui-sans-serif,system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;}
.clf__news-btn:hover{background:var(--gold);color:#1A1714;}
.clf__news-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.clf__news-ok{color:var(--gold);font-size:1rem;margin:0;}
.clf__news-err{display:block;color:#f0a5a5;font-size:.8rem;margin-top:.45rem;}

/* ---- Hairline, not a dashed novelty ---- */
.clf__rule{border:0;height:1px;background:var(--line);margin:3.25rem 0 3rem;width:100%;}

/* ---- Columns ---- */
.clf__cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2.5rem 2rem;}
.clf__logo{max-width:150px;height:auto;}
.clf__logo--text{font-family:'Crimson Text',Georgia,serif;font-size:1.45rem;letter-spacing:.01em;}
.clf__blurb{font-size:.88rem;line-height:1.65;color:var(--muted);margin:1rem 0 .75rem;max-width:34ch;}
.clf__addr{font-size:.78rem;letter-spacing:.05em;color:var(--muted);margin:0;}

/* Heading reads above the links, which it did not before: the links were set
   larger than the headings that label them. */
.clf__h{font-family:'Jost',ui-sans-serif,system-ui,sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1.1rem;color:var(--ink);opacity:.72;}
.clf__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem;}
.clf__col a{color:var(--muted);text-decoration:none;font-size:.95rem;line-height:1.35;
  background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:color .2s ease,background-size .25s ease;}
.clf__col a:hover{color:var(--ink);background-size:100% 1px;}
.clf__col a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;color:var(--ink);}

/* ---- Bottom bar ---- */
.clf__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  margin-top:3.25rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.76rem;letter-spacing:.04em;color:var(--muted);}
.clf__social{color:var(--muted);}

@media(max-width:900px){
  .clf__news{grid-template-columns:1fr;gap:1.5rem;align-items:start;}
  .clf__cols{grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;}
  .clf__brand{grid-column:1 / -1;}
}
@media(max-width:520px){
  .clf{padding:3.25rem 0 2rem;}
  .clf__cols{grid-template-columns:1fr;}
  .clf__news-field{flex-wrap:wrap;}
  .clf__news-btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .clf *{transition:none !important;}
}
/* END_SECTION:clair-footer */

/* START_SECTION:clair-home (INDEX:14) */
.ch{--bg:#F6F2EA;--card:#fff;--ink:#1A1714;--yellow:#FFD957;--pink:#F77A97;--rose:#D34B5D;--shadow:0 16px 44px -20px rgba(42,38,48,.32);--serif:'Crimson Text','Cormorant Garamond',Georgia,serif;--r-card:4px;--r-media:6px;--r-pill:999px;background:var(--bg);color:var(--ink);}
.ch__title,.ch__h2,.ch__look-h,.ch__art-t{font-family:var(--serif);}
.ch__h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 1.2rem;}
.ch__h2--c{text-align:center;}
.ch__h2--light{color:#fff;}
/* Type floor for the audience (older knitters on phones): nothing read is under 12px,
   eyebrows 12px, titles at least 1.4x their eyebrow. */
.ch__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:1rem;color:var(--rose);margin:0 0 .4rem;}
.ch__eyebrow--light{color:var(--yellow);}
.ch__eyebrow--gold{color:var(--yellow);}
.ch__eyebrow--c{text-align:center;}
.ch__btn{display:inline-block;background:var(--yellow);color:var(--ink);text-decoration:none;font-weight:600;border-radius:999px;padding:.8em 1.8em;border:0;cursor:pointer;font:inherit;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1);}
.ch__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(26,23,20,.4);}
.ch__link{color:var(--ink);text-decoration:none;font-size:1.1rem;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px;}
.ch__sechead{max-width:1240px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.3rem;}
/* hero */
.ch__hero{position:relative;overflow:hidden;background-size:cover;background-position:var(--focal,50% 50%);background-color:#FCE3EC;display:flex;align-items:flex-end;}
/* Hero image by viewport. Slides other than the one showing carry no image until the
   carousel script primes them (is-primed), so a five-slide carousel costs one download
   up front instead of five. */
.ch__hero--img{background-image:linear-gradient(90deg,rgba(26,23,20,.5),rgba(26,23,20,.06) 58%),var(--hbg);}
@media(max-width:1199px){.ch__hero--img{background-image:linear-gradient(90deg,rgba(26,23,20,.5),rgba(26,23,20,.06) 58%),var(--hbg-m);}}
@media(max-width:749px){.ch__hero--img{background-image:linear-gradient(90deg,rgba(26,23,20,.5),rgba(26,23,20,.06) 58%),var(--hbg-s);}}
.ch__hero-rot .ch__hslide.ch__hero--img:not(.is-active):not(.is-primed){background-image:none;}
/* Below-the-fold bands: no image until they are near the viewport (script at the foot adds is-in). */
.js [data-lazybg]:not(.is-in){background-image:none!important;}
/* phones only: flex-end put the headline under the thumb; desktop keeps the bottom-left stage */
@media(max-width:749px){.ch__hero{align-items:center;}}
.ch__sparkle{position:absolute;inset:0;pointer-events:none;z-index:1;}
.ch__sparkle span{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.5) 30%,transparent 62%);opacity:0;transform:scale(.4);animation:chTwinkle 4s ease-in-out infinite;}
@keyframes chTwinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:.85;transform:scale(1)}}
.ch__hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:2.5rem 1.5rem 3rem;color:#fff;animation:chFadeUp .9s ease both;}
.ch__title{font-size:clamp(2.25rem,7vw,3.4rem);line-height:1.04;margin:.3rem 0 .6rem;max-width:18ch;color:#fff;}
.ch__sub{max-width:46ch;opacity:.95;margin-bottom:1.2rem;}
@keyframes chFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ch__sparkle span{animation:none;opacity:.6;transform:scale(1)}.ch__hero-inner{animation:none}}
.ch__hero-rot{position:relative;}
.ch__hero-rot .ch__hslide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;}
.ch__hero-rot .ch__hslide.is-active{opacity:1;pointer-events:auto;z-index:1;}
.ch__hdots{position:absolute;z-index:3;left:0;right:0;bottom:1rem;display:flex;gap:.5rem;justify-content:center;}
.ch__hdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;}
.ch__hdot.is-active{background:#fff;}
/* trust */
.ch__trust{background:var(--ink);color:#fff;}
.ch__trust-row{max-width:1200px;margin:0 auto;padding:.9rem 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:center;}
.ch__trust-i{font-size:1.15rem;letter-spacing:.06em;opacity:.92;}
/* weight band */
.ch__wb{background-image:linear-gradient(180deg,rgba(246,242,234,.72) 0%,rgba(246,242,234,.38) 45%,rgba(246,242,234,.22) 100%),var(--wbg);background-size:cover;background-position:center bottom;padding:3rem 0;}
@media(max-width:749px){.ch__wb{background-image:linear-gradient(180deg,rgba(246,242,234,.72) 0%,rgba(246,242,234,.38) 45%,rgba(246,242,234,.22) 100%),var(--wbg-s);}}
.ch__wb-inner{max-width:1100px;margin:0 auto;padding:0 1.5rem;}
.ch__wtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;}
/* 7 tiles in 2 columns leaves one orphan. 3 columns would give ~99px of label width at 390px,
   and the Japanese gloss (Fingering（中細）) needs ~115px, so the last tile spans the row instead. */
@media(max-width:599px){.ch__wtiles>.ch__wtile:last-child{grid-column:1 / -1;}}
@media(min-width:600px){.ch__wtiles{grid-template-columns:repeat(4,1fr);}}
@media(min-width:900px){.ch__wtiles{grid-template-columns:repeat(7,1fr);}}
.ch__wtile{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.86);border-radius:12px;padding:1rem .5rem;box-shadow:var(--shadow);transition:transform .15s;}
.ch__wtile:hover{transform:translateY(-3px);}
.ch__wtile-n{font-size:1.1rem;}
/* featured + journal grids */
.ch__feat,.ch__journal{max-width:1240px;margin:3rem auto;padding:0 1.5rem;}
.ch__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;max-width:1240px;margin:0 auto;padding:0 1.5rem;}
@media(min-width:700px){.ch__grid{grid-template-columns:repeat(4,1fr);}}
.ch__grid--3{grid-template-columns:1fr;padding:0;}
@media(min-width:700px){.ch__grid--3{grid-template-columns:repeat(3,1fr);}}
.ch__card,.ch__art{text-decoration:none;color:var(--ink);background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s;display:block;}
.ch__card:hover,.ch__art:hover{transform:translateY(-3px);}
.ch__card-img,.ch__art-img{aspect-ratio:1;background:var(--bg);}
.ch__art-img{aspect-ratio:3/2;}
.ch__card-img img,.ch__art-img img{width:100%;height:100%;object-fit:cover;}
.ch__card-t{margin:.7rem .85rem .1rem;font-size:1.1rem;}
.ch__card-p{margin:0 .85rem .85rem;font-weight:600;}
.ch__art-date{display:block;margin:.7rem .9rem 0;font-size:1rem;text-transform:uppercase;letter-spacing:.1em;opacity:.55;}
.ch__art-t{margin:.2rem .9rem .3rem;font-size:1.4rem;}
.ch__art-x{margin:0 .9rem 1rem;font-size:.88rem;opacity:.78;}
/* dye-to-order feature */
.ch__feature{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr;gap:0;align-items:center;}
@media(min-width:820px){.ch__feature{grid-template-columns:1fr 1fr;}}
/* ── BANNER GEOMETRY ─────────────────────────────────────────────────────────
   Two different treatments, because the LIVE theme uses two.

   MID-PAGE BANDS take the artwork's own ratio and crop NOTHING. The live
   homepage sets `image_height: adapt` on those placements, which resolves to
   `height: auto`. Aimée's banners are authored 2000x1274 (1.57:1) and are seen
   whole. Clair used to size them in vh, which threw away ~39% of the height on
   a laptop and ~52% of the width on a phone. Each band now inherits its own
   image's ratio through an inline `--band-ar` set in the markup.

   THE HERO DOES NOT. The live homepage's first banner is `image_height: small`,
   a FIXED height with a cover crop — 28rem on a phone, 42rem from 750px up
   (section-image-banner.css:55-97 in the live theme). That is the right call
   and Clair now copies it: the hero is a stage for the headline and the first
   thing above the fold, so its height must not swing with whatever artwork is
   loaded. On natural ratio a 1.57:1 hero rendered ~917px on a 1440px laptop
   against the live site's 672px — a third taller, pushing everything below it
   off the first screen.

   ARTWORK SPEC — keep supplying 2000 x 1274 (1.57:1) exactly as today. The
   bands show it whole; the hero crops top and bottom to 42rem, so keep the
   subject away from the extreme top and bottom edges of a hero image.
   ────────────────────────────────────────────────────────────────────────── */
/* width pinned: with only aspect-ratio + the 260px floor below, the box took its width from its height
   (1.57 × 260 = 408px) and the homepage scrolled sideways on phones (found live, 2026-09-15) */
.ch__look,.ch__knitlab{aspect-ratio:var(--band-ar,1.57);width:100%;max-width:100%;box-sizing:border-box;}
/* a floor only so overlaid text stays legible on very narrow phones */
@media(max-width:599px){
  .ch__look,.ch__knitlab{min-height:260px;}
}
/* WHERE THE CROP IS ANCHORED. The hero is a fixed height with a cover crop,
   so something is always cut. It used to be anchored `center top`, which keeps
   the top of the artwork and throws away the bottom — that is why the Bon Bon
   banner showed only the tops of the socks.

   Each band now takes the image's OWN focal point, set by dragging the target
   on the image in the theme editor, and falls back to dead centre. Aimée can
   therefore fix any badly-cropped banner herself without touching CSS. */
/* hero — Dawn's "small" banner geometry, matched exactly */
.ch__hero,.ch__hero-rot{min-height:28rem;}
@media screen and (min-width:750px){
  .ch__hero,.ch__hero-rot{min-height:42rem;}
}
.ch__feature-media img{width:100%;height:auto;display:block;}
.ch__feature-body{padding:2.6rem 1.8rem;max-width:520px;}
.ch__feature-text{opacity:.86;margin-bottom:1.4rem;}
/* lookbook */
.ch__look{background-image:linear-gradient(rgba(26,23,20,.28),rgba(26,23,20,.5)),var(--bbg);background-size:cover;background-position:var(--focal,50% 50%);display:flex;align-items:flex-end;}
.ch__knitlab{background-image:linear-gradient(rgba(26,23,20,.32),rgba(26,23,20,.55)),var(--bbg);}
.ch__look,.ch__knitlab{background-color:#2A2420;}
@media(max-width:1199px){.ch__look{background-image:linear-gradient(rgba(26,23,20,.28),rgba(26,23,20,.5)),var(--bbg-m);}.ch__knitlab{background-image:linear-gradient(rgba(26,23,20,.32),rgba(26,23,20,.55)),var(--bbg-m);}}
@media(max-width:749px){.ch__look{background-image:linear-gradient(rgba(26,23,20,.28),rgba(26,23,20,.5)),var(--bbg-s);}.ch__knitlab{background-image:linear-gradient(rgba(26,23,20,.32),rgba(26,23,20,.55)),var(--bbg-s);}}
.ch__look-inner{max-width:1200px;margin:0 auto;width:100%;padding:2.5rem 1.5rem 3rem;color:#fff;}
.ch__look-h{font-size:clamp(1.8rem,4vw,3rem);margin:.2rem 0 .5rem;color:#fff;}
.ch__knitlab{position:relative;display:flex;align-items:flex-end;background-size:cover;background-position:var(--focal,50% 50%);text-decoration:none;color:#fff;}
.ch__kl-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:2.5rem 1.5rem 3rem;}
.ch__kl-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);z-index:2;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;font-size:1.5rem;padding-left:5px;}
.ch__look-sub{max-width:44ch;opacity:.94;margin-bottom:1.2rem;}
/* story */
.ch__story{max-width:1200px;margin:3rem auto;padding:0 1.5rem;display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;}
@media(min-width:820px){.ch__story{grid-template-columns:1fr 1fr;}}
.ch__story-img img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow);display:block;}
.ch__story-text{max-width:48ch;}
/* newsletter */
.ch__news{background:var(--ink);padding:3.5rem 1.5rem;}
.ch__news-card{position:relative;max-width:560px;margin:0 auto;background:#221f1b;border:1px solid rgba(246,242,234,.15);border-radius:140px 140px 18px 18px;padding:3rem 2rem 2.4rem;text-align:center;}
.ch__news-finial{position:absolute;top:-9px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--yellow);}
.ch__news-perk{color:rgba(246,242,234,.8);font-size:1.1rem;margin:.6rem 0 1.3rem;}
.ch__news-form{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.ch__news-input{flex:1;min-width:200px;padding:.8em 1em;border-radius:999px;border:1px solid rgba(246,242,234,.3);background:rgba(246,242,234,.06);color:#fff;font:inherit;}
.ch__news-input::placeholder{color:rgba(246,242,234,.5);}
.ch__news-ok{color:var(--yellow);}
/* couture polish patch */
.ch__wtile,.ch__card,.ch__art{border-radius:var(--r-media);}
.ch__news-card::before{content:"";position:absolute;inset:6px 6px auto 6px;height:140px;border:1px solid rgba(201,154,62,.55);border-bottom:0;border-radius:134px 134px 0 0;pointer-events:none;}
/* END_SECTION:clair-home */

/* START_SECTION:clair-topbar (INDEX:16) */
.ctb{background-color:#3a3127;background-image:linear-gradient(rgba(20,18,16,.62),rgba(20,18,16,.62)),var(--ctb-bg);background-size:cover;background-position:center;color:#fff;}
@media(max-width:749px){.ctb{background-image:linear-gradient(rgba(20,18,16,.62),rgba(20,18,16,.62)),var(--ctb-bg-s);}}
.ctb__inner{max-width:1200px;margin:0 auto;padding:.85rem 1.25rem;display:flex;gap:.7rem 1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.ctb__msgs{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;flex:1;justify-content:center;}
.ctb__msg{font-family:'Jost',ui-sans-serif,system-ui,sans-serif;font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;}
.ctb__msg--2{opacity:.8;}
.ctb__msg--promo{color:var(--clair-yellow,#FFD957);font-weight:500;}
.ctb__ticker{overflow:hidden;flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.ctb__track{display:flex;width:max-content;animation:ctb-scroll var(--ctb-speed,34s) linear infinite;}
.ctb__run{display:flex;align-items:center;gap:.9rem;padding-right:.9rem;white-space:nowrap;}
.ctb__ticker:hover .ctb__track,.ctb__ticker:focus-within .ctb__track{animation-play-state:paused;}
@keyframes ctb-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.ctb__track{animation:none;}.ctb__ticker{-webkit-mask-image:none;mask-image:none;justify-content:center;}}
/* rotate: messages cross-fade in place. Replaces the marquee as the default —
   a moving banner draws the eye away from the page and is hard to read. */
.ctb__rot{position:relative;flex:1;min-width:0;justify-content:center;min-height:1.6em;}
.ctb__rot-item{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .55s ease;white-space:nowrap;pointer-events:none;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;}
.ctb__rot-item.is-active{opacity:1;pointer-events:auto;}
/* holding the pointer or keyboard focus on the bar stops the cycle, so a
   message can be finished rather than chased */
.ctb__rot.is-paused .ctb__rot-item{transition:opacity .2s ease;}
@media(prefers-reduced-motion:reduce){.ctb__rot-item{transition:none;}}
.ctb__sep{color:var(--clair-yellow,#FFD957);font-size:1.2rem;}
.ctb__loc{position:relative;display:inline-flex;align-items:center;flex:none;opacity:.82;transition:opacity .15s,border-color .15s,background .15s;}
.ctb__loc:hover{opacity:1;}
.ctb__loc::after{content:"\25BE";color:#fff;font-size:.9rem;pointer-events:none;margin-left:-1.4em;}
/* 13px type and a 44px tap target: the older iPhone audience cannot hit an 8px
   control, and the language switcher is the one thing a lost shopper must find. */
.ctb__loc select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:#fff;font-family:'Jost',ui-sans-serif,system-ui,sans-serif;font-size:1.1rem;letter-spacing:.05em;cursor:pointer;min-height:44px;padding:.1em 1.5em .1em .3em;max-width:62vw;}
/* The language control is the one a shopper in the wrong language has to find,
   so it gets a real edge and full-strength type. The country control stays
   quieter — it is already set correctly for almost everyone. */
.ctb__loc--lang{opacity:1;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.08em .1em .08em .45em;background:rgba(255,255,255,.08);}
.ctb__loc--lang:hover{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.16);}
.ctb__loc--lang select{font-size:1.1rem;font-weight:500;padding-right:1.6em;}
.ctb__loc--lang::after{font-size:.9rem;}
.ctb__loc--lang:focus-within{outline:2px solid #fff;outline-offset:2px;}
.ctb__loc select option{color:#1A1714;background:#fff;text-transform:none;letter-spacing:0;}
/* iOS zooms the page on focus of any control under 16px, selects included */
@media(max-width:749px){.ctb__loc select,.ctb__loc--lang select{font-size:16px;}}
/* phones: the message takes its own line and the two selects share the next one,
   centred, at full size — the row fits at 390px without shrinking the type */
@media(max-width:640px){.ctb__inner{justify-content:center;padding:.5rem 1rem;row-gap:.2rem;}.ctb__msgs{flex:1 1 100%;}}
.ctb__sugg{background:#1A1714;color:#fff;border-top:1px solid rgba(255,255,255,.14);}
.ctb__sugg[hidden]{display:none !important;}
.ctb__sugg-in{max-width:1200px;margin:0 auto;padding:.55rem 1.25rem;display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap;}
.ctb__sugg-txt{font-family:'Jost',ui-sans-serif,system-ui,sans-serif;font-size:.78rem;letter-spacing:.02em;}
.ctb__sugg-go{font-family:'Jost',ui-sans-serif,system-ui,sans-serif;font-size:.75rem;font-weight:500;letter-spacing:.04em;color:#1A1714;background:#fff;border:0;border-radius:999px;padding:.32em 1.05em;cursor:pointer;}
.ctb__sugg-go:hover{background:#F0EBE4;}
.ctb__sugg-x{background:transparent;border:0;color:#fff;opacity:.6;font-size:.8rem;line-height:1;cursor:pointer;padding:.3em;}
.ctb__sugg-x:hover{opacity:1;}
.ctb__sugg-go:focus-visible,.ctb__sugg-x:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:600px){.ctb__sugg-in{padding:.5rem .9rem;gap:.5rem;}.ctb__sugg-txt{font-size:.72rem;}}
/* END_SECTION:clair-topbar */

/* START_SECTION:fade-builder (INDEX:23) */
.fade{--bg:#F6F2EA;--card:#fff;--ink:#1A1714;--yellow:#FFD957;--pink:#F77A97;--rose:#D34B5D;--shadow:0 16px 44px -20px rgba(42,38,48,.32);background:var(--bg);color:var(--ink);padding:2.5rem 0 4rem;}
.fade__wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem;}
.fade__head{text-align:center;margin-bottom:1.6rem;}
.fade__eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--rose);margin:0 0 .3rem;}
.fade__title{font-size:2.4rem;line-height:1.05;margin:0 0 .5rem;}
.fade__sub{max-width:54ch;margin:0 auto;opacity:.8;}
.fade__strip{display:flex;height:140px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:1.4rem;}
.fade__seg{flex:1;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.6rem;transition:box-shadow .15s;}
.fade__seg span{background:rgba(255,255,255,.88);color:var(--ink);width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;font-size:.78rem;box-shadow:0 2px 6px rgba(42,38,48,.25);}
.fade__seg.is-active{box-shadow:inset 0 0 0 3px var(--ink);}
.fade__cols{display:grid;gap:1.4rem;grid-template-columns:1fr;}
@media(min-width:820px){.fade__cols{grid-template-columns:1.4fr .9fr;align-items:start;}}
.fade__panel{background:var(--card);border-radius:16px;padding:1.3rem;box-shadow:var(--shadow);}
.fade__label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin:1rem 0 .5rem;}
.fade__label:first-child{margin-top:0;}
.fade__bases,.fade__counts{display:flex;flex-wrap:wrap;gap:.5rem;}
.fade__base,.fade__count{border:1px solid rgba(26,23,20,.15);background:var(--card);border-radius:999px;padding:.5em 1.1em;cursor:pointer;font:inherit;}
.fade__base.is-on,.fade__count.is-on{background:var(--ink);color:#fff;border-color:var(--ink);}
.fade__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.2rem,1fr));gap:.5rem;max-height:300px;overflow:auto;margin-top:.5rem;}
.fade__dot{aspect-ratio:1;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(26,23,20,.15);cursor:pointer;}
.fade__dot:hover{box-shadow:0 0 0 2px var(--rose);}
.fade__dot.is-on{box-shadow:0 0 0 2px var(--ink);}
.fade__sum{background:var(--card);border-radius:16px;padding:1.3rem;box-shadow:var(--shadow);}
.fade__sum h3{margin:0 0 .8rem;}
.fade__list{list-style:none;padding:0;margin:0 0 1rem;font-size:.92rem;}
.fade__list li{padding:.25rem 0;border-bottom:1px solid rgba(26,23,20,.08);display:flex;align-items:center;}
.fade__chip{display:inline-block;width:1em;height:1em;border-radius:50%;margin-right:.55em;border:1px solid rgba(26,23,20,.15);}
.fade__line{display:flex;justify-content:space-between;font-size:.92rem;margin:.3rem 0;}
.fade__line--save{color:var(--rose);}
.fade__total{display:flex;justify-content:space-between;font-size:1.15rem;font-weight:600;margin:.6rem 0 1rem;border-top:2px solid var(--ink);padding-top:.6rem;}
.fade__add{width:100%;background:var(--yellow);color:var(--ink);border:0;border-radius:999px;padding:1em;font:inherit;font-weight:600;cursor:pointer;}
.fade__add:hover{transform:translateY(-1px);}
.fade__note{font-size:.8rem;opacity:.65;margin:.7rem 0 0;text-align:center;}
/* END_SECTION:fade-builder */

/* START_SECTION:main-cart-clair (INDEX:37) */
.cb{--bg:#F6F2EA;--card:#fff;--ink:#1A1714;--yellow:#FFD957;--pink:#F77A97;--rose:#D34B5D;--shadow:0 14px 40px -18px rgba(42,38,48,.3);background:var(--bg);color:var(--ink);padding:2.5rem 0 4rem;min-height:50vh;}
.cb__wrap{max-width:880px;margin:0 auto;padding:0 1.25rem;}
.cb__title{font-size:2rem;margin:0 0 1.4rem;}
.cb__dto{margin:0 0 1rem;padding:.7rem .9rem;border:1px solid rgba(192,64,90,.35);
  border-radius:10px;background:rgba(192,64,90,.06);font-size:13px;line-height:1.5;}
.cb__dto strong{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:#C0405A;}
.cb__dtotag{display:inline-block;margin-left:.5em;padding:.1em .5em;border-radius:999px;
  background:rgba(192,64,90,.12);color:#C0405A;font-size:10px;letter-spacing:.07em;text-transform:uppercase;}
.cb__empty{opacity:.7;margin-bottom:1rem;}
.cb__btn{display:inline-block;background:var(--yellow);color:var(--ink);text-decoration:none;font-weight:600;border-radius:999px;padding:.8em 1.8em;}
.cb__ship{background:var(--card);border-radius:14px;padding:1rem 1.2rem;box-shadow:var(--shadow);margin-bottom:1.4rem;}
.cb__ship-msg{margin:0 0 .5rem;font-size:.92rem;}
.cb__bar{height:8px;background:var(--bg);border-radius:999px;overflow:hidden;}
.cb__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));}
.cb__item{display:flex;gap:1rem;background:var(--card);border-radius:14px;padding:1rem;box-shadow:var(--shadow);margin-bottom:.9rem;}
.cb__img{flex:0 0 auto;line-height:0;}
.cb__img img{width:90px;height:90px;object-fit:cover;border-radius:10px;}
.cb__info{flex:1;display:flex;flex-direction:column;gap:.2rem;}
.cb__name{text-decoration:none;color:var(--ink);font-weight:600;}
.cb__variant{margin:0;font-size:.85rem;opacity:.6;}
.cb__price{margin:.2rem 0;font-weight:600;}
.cb__qtyrow{display:flex;align-items:center;gap:1rem;margin-top:auto;flex-wrap:wrap;}
/* stepper: same look as .clair__stepper on the product page, sized for thumbs (44px) */
.cb__stepper{display:inline-flex;align-items:center;border:1px solid rgba(26,23,20,.2);border-radius:999px;overflow:hidden;background:var(--card);flex:0 0 auto;}
.cb__step{width:44px;height:44px;padding:0;border:0;background:transparent;font:inherit;font-size:20px;line-height:1;cursor:pointer;color:var(--ink);}
.cb__step:hover,.cb__step:focus-visible{background:rgba(26,23,20,.06);}
.cb__step:active{background:rgba(26,23,20,.12);}
.cb__qty{width:3.2em;height:44px;padding:0;text-align:center;border:0;border-left:1px solid rgba(26,23,20,.12);border-right:1px solid rgba(26,23,20,.12);border-radius:0;background:transparent;font:inherit;font-size:16px;-moz-appearance:textfield;}
.cb__qty::-webkit-outer-spin-button,.cb__qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cb__remove{display:inline-flex;align-items:center;min-height:44px;padding:0 .4em;font-size:13px;color:var(--rose);text-decoration:underline;}
/* with JS the stepper submits for you; the Update button stays in the DOM as the no-JS fallback */
.cb__form--js .cb__update{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.cb__form--busy .cb__item{opacity:.55;pointer-events:none;}
.cb__foot{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start;margin-top:1.2rem;}
.cb__update{background:none;border:1px solid rgba(26,23,20,.25);border-radius:999px;padding:.6em 1.4em;font:inherit;cursor:pointer;}
.cb__totals{flex:1;min-width:240px;background:var(--card);border-radius:14px;padding:1.2rem;box-shadow:var(--shadow);}
.cb__sub{display:flex;justify-content:space-between;font-size:1.15rem;}
.cb__sub strong{font-weight:600;}
.cb__note{font-size:13px;line-height:1.5;opacity:.75;margin:.5rem 0 0;}
.cb__romaji{margin-top:1rem;padding:.85rem 1rem;border-radius:10px;background:rgba(192,64,90,.07);
  border:1px solid rgba(192,64,90,.18);line-height:1.7;}
.cb__romaji p{margin:0;}
.cb__romaji-lead{font-size:.92rem;}
.cb__romaji-why{font-size:.8rem;opacity:.75;margin-top:.15rem !important;}
.cb__romaji-eg{font-size:.76rem;opacity:.62;margin-top:.45rem !important;font-variant-numeric:tabular-nums;
  word-break:break-word;}
.cb__checkout{width:100%;background:var(--yellow);color:var(--ink);border:0;border-radius:999px;padding:1em;font:inherit;font-weight:600;cursor:pointer;margin-top:1rem;}
.cb__checkout:hover{transform:translateY(-1px);}
.cb__checkout[disabled]{opacity:.45;cursor:not-allowed;transform:none;}
.cb__uk-min{color:var(--clair-rose,#D34B5D);font-weight:600;font-size:14px;line-height:1.5;text-align:left;margin:.6rem 0 0;}
/* express checkout styling is .clair-express in assets/clair.css, shared with the drawer */
@media(max-width:600px){.cb__title{font-size:1.6rem;}.cb__foot{flex-direction:column;}}
.cb__stickybar{display:none;}
@media(max-width:749px){
  .cb__stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(246,242,234,.97);
    backdrop-filter:blur(8px);box-shadow:0 -1px 0 rgba(26,23,20,.12),0 -8px 24px -12px rgba(26,23,20,.25);}
  .cb__stickybar[hidden]{display:none;}
  .cb__stickybar-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
  .cb__stickybar-lbl{font-size:13px;opacity:.75;}
  .cb__stickybar-sum{font-size:16px;}
  .cb__stickybar-btn{flex:0 0 auto;min-height:48px;padding:0 20px;background:var(--yellow);color:var(--ink);border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
  html.has-cb-stickybar body{padding-bottom:84px;}
}
/* END_SECTION:main-cart-clair */

/* START_SECTION:main-collection-clair (INDEX:41) */
.cc{--bg:#F6F2EA;--card:#fff;--ink:#1A1714;--yellow:#FFD957;--pink:#F77A97;--rose:#D34B5D;--shadow:0 14px 40px -18px rgba(42,38,48,.3);background:var(--bg);color:var(--ink);padding:2rem 0 4rem;}
.cc__wrap{max-width:1240px;margin:0 auto;padding:0 1.25rem;}
.cc__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;opacity:.55;margin:0;}
.cc__title{font-size:2.6rem;line-height:1.1;margin:.2rem 0 .5rem;}
.cc__desc{max-width:60ch;opacity:.85;margin-bottom:1.2rem;font-size:.95rem;}
.cc__head hr{display:none;}
.cc__weights{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 1.4rem;}
.cc__weights-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin-right:.2rem;}
.cc__weight{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid rgba(26,23,20,.12);border-radius:999px;padding:.45em 1em;font-size:.88rem;box-shadow:var(--shadow);}
.cc__weight.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.cc__weight span{opacity:.5;font-size:.85em;}
.cc__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.cc__filters{display:flex;flex-wrap:wrap;gap:.5rem;}
.cc__facet{position:relative;}
.cc__facet>summary{cursor:pointer;list-style:none;background:var(--card);border:1px solid rgba(26,23,20,.12);border-radius:999px;padding:.5em 1.1em;font-size:.88rem;}
.cc__facet>summary::-webkit-details-marker{display:none;}
.cc__facet[open]>summary{background:var(--ink);color:#fff;}
.cc__facet-body{position:absolute;z-index:20;top:calc(100% + .3rem);left:0;background:var(--card);border:1px solid rgba(26,23,20,.12);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;min-width:210px;max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:.15rem;}
.cc__opt{display:flex;justify-content:space-between;gap:1rem;text-decoration:none;color:var(--ink);padding:.45em .65em;border-radius:9px;font-size:.9rem;}
.cc__opt:hover{background:var(--bg);}
.cc__opt.is-active{background:var(--ink);color:#fff;}
.cc__opt span{opacity:.5;}
.cc__sw{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;margin-right:.5em;vertical-align:-2px;border:1px solid rgba(26,23,20,.18);opacity:1;}
.cc__tools{display:flex;align-items:center;gap:1rem;}
.cc__count{font-size:.85rem;opacity:.6;}
.cc__sort select{font:inherit;padding:.4em;border-radius:9px;border:1px solid rgba(26,23,20,.2);background:var(--card);margin-left:.4em;}
.cc__active{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.2rem;}
.cc__pill{text-decoration:none;background:var(--pink);color:#fff;border-radius:999px;padding:.3em .85em;font-size:.82rem;}
.cc__clear{color:var(--rose);font-size:.82rem;}
.cc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
@media(min-width:700px){.cc__grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.cc__grid{grid-template-columns:repeat(4,1fr);}}
.cc__card{text-decoration:none;color:var(--ink);background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .15s;}
.cc__card:hover{transform:translateY(-3px);}
.cc__grid .cc__card.is-out{order:1;}
.cc__grid .cc__card.is-out .cc__card-img{opacity:.72;}
.cc__card-img{aspect-ratio:1/1;background:var(--bg);position:relative;}
.cc__soldout{position:absolute;top:.55rem;left:.55rem;z-index:2;background:rgba(26,23,20,.8);color:#fff;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;padding:.32em .65em;border-radius:999px;}
.cc__card-img img{width:100%;height:100%;object-fit:cover;}
.cc__card-title{margin:.8rem .9rem .15rem;font-size:.95rem;line-height:1.2;}
.cc__card-price{margin:0 .9rem;font-weight:600;}
.cc__card-sw{margin:.25rem .9rem .9rem;font-size:.78rem;opacity:.55;}
.cc__pager{margin-top:2rem;text-align:center;}
.cc__empty{padding:3rem 0;text-align:center;opacity:.7;}
.cc__seo{max-width:70ch;margin:2.6rem auto 0;font-size:.92rem;line-height:1.7;opacity:.82;}
.cc__seo h2{font-size:1.2rem;margin:0 0 .5rem;}
@media(max-width:640px){.cc{padding:1rem 0 3rem;}.cc__title{font-size:1.9rem;}.cc__grid{gap:.8rem;}}
/* ---- Phone filter drawer. Desktop (>=750px) only hides the two phone controls. ---- */
.cc__mf>summary{list-style:none;}
.cc__mf>summary::-webkit-details-marker{display:none;}
@media(min-width:750px){.cc__mf>summary,.cc__mf-done{display:none;}}
@media(max-width:749px){
  .cc__bar{flex-direction:column;align-items:stretch;gap:.6rem;}
  .cc__mf{width:100%;}
  .cc__mf>summary{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.5em 1em;background:var(--ink);color:#fff;border-radius:8px;font-size:1.15rem;letter-spacing:.04em;cursor:pointer;}
  .cc__mf>summary::after{content:"\25BE";font-size:.9em;}
  .cc__mf[open]>summary::after{content:"\25B4";}
  .cc__mf>summary:focus-visible{outline:2px solid var(--rose);outline-offset:2px;}
  .cc__filters{flex-direction:column;gap:.4rem;margin-top:.6rem;}
  .cc__facet{position:static;}
  .cc__facet>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:.5em 1em;border-radius:8px;font-size:1.15rem;}
  .cc__facet>summary::after{content:"\25BE";opacity:.6;}
  .cc__facet[open]>summary{border-radius:8px 8px 0 0;}
  .cc__facet[open]>summary::after{content:"\25B4";opacity:1;}
  .cc__facet>summary:focus-visible{outline:2px solid var(--rose);outline-offset:2px;}
  .cc__facet-body{position:static;box-shadow:none;border-radius:0 0 8px 8px;border-top:0;max-height:none;min-width:0;padding:.4rem;}
  .cc__opt{min-height:44px;align-items:center;font-size:1.15rem;padding:.4em .8em;}
  .cc__mf-done{display:block;width:100%;min-height:44px;margin-top:.6rem;background:var(--yellow);color:var(--ink);border:0;border-radius:8px;font:inherit;font-size:1.15rem;font-weight:600;cursor:pointer;}
  .cc__mf-done:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  .cc__tools{width:100%;justify-content:space-between;}
  .cc__count{font-size:1.1rem;}
  .cc__sort select{min-height:44px;font-size:16px;}
}
/* END_SECTION:main-collection-clair */

/* START_SECTION:main-product-clair (INDEX:49) */
.clair{--bg:#F6F2EA;--card:#fff;--ink:#1A1714;--yellow:#FFD957;--pink:#F77A97;--rose:#D34B5D;--shadow:0 18px 50px -20px rgba(42,38,48,.35);background:var(--bg);color:var(--ink);padding:2rem 0 4rem;}
.clair__crumbs{max-width:1200px;margin:0 auto .9rem;padding:0 1.25rem;font-size:13px;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;color:var(--ink);}
.clair__crumbs a{color:inherit;text-decoration:none;opacity:.65;}
.clair__crumbs a:hover{opacity:1;text-decoration:underline;}
.clair__crumbs span[aria-hidden]{opacity:.4;}
.clair__crumbs span[aria-current]{opacity:.85;}
.clair__wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem;display:grid;gap:2.5rem;grid-template-columns:1fr;}
/* Two columns from tablet up (750–899 used to be one column at desktop sizes); the buy card spans both rows
   on the right, the gallery and then the specs/description stack on the left. */
@media(min-width:750px){
  .clair__wrap{grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
  .clair__media{grid-column:1;grid-row:1;}
  .clair__info{grid-column:2;grid-row:1/3;}
  .clair__below{grid-column:1;grid-row:2;}
}
@media(min-width:900px){.clair__wrap{grid-template-columns:1.1fr .9fr;gap:2.5rem;}}
.clair__card--below .clair__yl{margin-top:0;}
.clair__card--below .clair__desc:first-child{margin-top:0;}
.clair__stage{position:relative;background:var(--card);border-radius:18px;overflow:hidden;cursor:crosshair;aspect-ratio:1/1;box-shadow:var(--shadow);}
.clair__hero{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;transform-origin:center;}
.clair__stage.is-zooming .clair__hero{transform:scale(2.3);transform-origin:var(--zx,50%) var(--zy,50%);transition:transform .05s linear;}
.clair__viewtoggle{display:flex;gap:.5rem;margin:.9rem 0;}
.clair__vt{flex:1;border:1px solid rgba(26,23,20,.15);background:var(--card);border-radius:999px;padding:.6em 1em;cursor:pointer;font:inherit;}
.clair__vt.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.clair__thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;}
.clair__thumb{border:0;padding:0;background:none;cursor:pointer;border-radius:10px;overflow:hidden;line-height:0;}
.clair__thumb img{width:64px;height:64px;object-fit:cover;}
.clair__card{background:var(--card);border-radius:18px;padding:1.8rem;box-shadow:var(--shadow);}
.clair__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;opacity:.75;margin:0 0 .4rem;}
.clair__title{font-size:2rem;line-height:1.08;margin:0 0 .8rem;}
.clair__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;}
.clair__price-now{font-size:1.5rem;font-weight:600;}
.clair__price-was{opacity:.5;}
.clair__tax{opacity:.8;font-size:13px;flex-basis:100%;}
.clair__label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.8;margin:0 0 .5rem;}
/* Measured off the Claude Design comp (Kumo Desktop) rather than eyeballed:
   5 tile columns in the buy box, 12px column gap, 18px row gap; names 17px
   Cormorant — Crimson Text here, the face this theme actually ships. The comp's
   desktop tile is ~68px, barely wider than the 44px dot it replaces: the names
   do the work, not the size. px throughout, because this theme's root font is
   13px and every rem silently rendered 19% small. */
.clair__dots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 12px;margin:0 0 14px;align-items:start;}
@media(min-width:750px){.clair__dots{grid-template-columns:repeat(4,1fr);}}
@media(min-width:900px){.clair__dots{grid-template-columns:repeat(5,1fr);}}
.clair__specline{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.72;margin:0 0 6px;}
.clair__selected [data-selected-name]{font:inherit;}
.clair__dtonotes{margin:0 0 .9rem;}
.clair__dtonotes .clair__dtonote:first-child{margin-top:0;}
.clair__dtonote--final{font-weight:600;margin-top:.35rem !important;}
.clair__dtonote{margin:.5rem 0 0;font-size:14px;line-height:1.5;color:var(--ink-2,#6B6259);}
.clair__dtonote strong{color:var(--rose,#C0405A);letter-spacing:.06em;text-transform:uppercase;font-size:12px;}
.clair__dtonote--over{color:var(--rose,#C0405A);}
.clair__stockpill{display:inline-block;margin-left:.6em;font-family:var(--sans,inherit);font-size:12px;
  letter-spacing:.11em;text-transform:uppercase;border:1px solid rgba(26,23,20,.28);border-radius:999px;
  padding:.34em .7em;vertical-align:middle;opacity:.75;font-weight:400;}
.clair__stockpill[data-dto]{background:rgba(192,64,90,.12);color:#C0405A;opacity:1;}
.clair__selected{font-family:'Crimson Text',Georgia,serif;font-size:22px;font-weight:600;color:var(--ink,#1A1714);margin:0 0 1.4rem;}
.clair__dot{display:block;width:auto;height:auto;padding:0;border:0;background:none;
  text-align:left;cursor:pointer;font:inherit;}
.clair__dot[hidden]{display:none !important;}
.clair__dots.is-gated .clair__dot{display:none !important;}
/* This wrapper shipped with no rule at all — the same silent failure as
   .clair__ff. Sticky only appeared to work because .clair__add carries its own
   pre-existing rule. */
/* Phones: a bar fixed to the bottom of the screen whenever the real button is off-screen,
   above OR below. The old position:sticky was scoped to the card, so it scrolled away with it. */
.clair__stickybar{display:none;}
@media(max-width:749px){
  .clair__stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(246,242,234,.97);
    backdrop-filter:blur(8px);box-shadow:0 -1px 0 rgba(26,23,20,.12),0 -8px 24px -12px rgba(26,23,20,.25);}
  .clair__stickybar[hidden]{display:none;}
  /* while the bar shows, the page needs room under it or the footer's last row is covered */
  html.has-stickybar body{padding-bottom:84px;}
  .clair__stickybar-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
  .clair__stickybar-name{font-family:'Crimson Text',Georgia,serif;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .clair__stickybar-price{font-size:14px;opacity:.85;}
  .clair__stickybar-btn{flex:0 0 auto;min-height:48px;padding:0 20px;background:var(--yellow);color:var(--ink);border:0;border-radius:999px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
}
/* The panel is a child of the grid, so it has to span every column — without
   grid-column it sits in track 1 and wraps one word per line. */
/* A cream card on the yellow in-stock wash: the prompt reads as its own object instead of a
   box drawn on the wash (Matthew, 2026-09-14: "not conflicting but still stands out"). */
.clair__ff{grid-column:1/-1;text-align:center;padding:26px 16px;border:1px solid rgba(26,23,20,.22);
  background:#FCFBF8;border-radius:10px;box-shadow:0 1px 3px rgba(26,23,20,.08);}
.clair__ff p{margin:0 0 4px;font-family:'Crimson Text',Georgia,serif;font-size:19px;line-height:1.25;}
.clair__ff small{display:block;opacity:.7;font-size:14px;margin-bottom:14px;line-height:1.4;}
.clair__ff button{font:inherit;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:0;padding:2px 4px;cursor:pointer;color:inherit;
  text-decoration:underline;text-underline-offset:4px;}
.clair__tile{display:block;width:100%;aspect-ratio:1;border-radius:8px;background-size:cover;
  background-position:center;box-shadow:0 0 0 1px rgba(26,23,20,.14);transition:box-shadow .16s;}
/* Every tile reserves two lines for its name and clamps there, so a long name (Aimée's Flashy
   Lipstick) never pushes its row down against one-line neighbours. */
.clair__nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;font-family:'Crimson Text',Georgia,serif;font-size:17px;line-height:1.2;
  margin-top:7px;min-height:2.4em;color:#1A1714;overflow-wrap:break-word;}
/* 15 of Kumo's 129 colourways have no photograph and fall back to the dye
   data. Sat beside 112 photographs they read as broken rather than as a
   swatch, so they get an inset hairline that says "colour sample". */
.clair__tile[style*="linear-gradient"]:not([data-tile]){box-shadow:0 0 0 1px rgba(26,23,20,.14),inset 0 0 0 1px rgba(252,251,248,.55);}
/* Two framings so every tile lands at the same scale. The studio four-skein shots on white are
   the 1600px batch (114 of 117 measured on Merino Singles, 2026-09-14; no other size class is):
   they get a 1.4x zoom just above centre, which drops the white margins and the printed label.
   Tight crops and lifestyle shots stay at 1x, since zooming those made them read larger.
   CSS only — the photos themselves are untouched. Every tile gets the same hairline. */
/* !important because every tile carries an inline `background:` shorthand for its colour chip, and a
   shorthand also sets size and position (auto, 0 0) inline. Without it a loaded photo sat at natural
   size from its top-left corner: Cotton Lino showed marble with the skein in one corner (Aza, 2026-10-08).
   The :not() keeps this from outranking the studio framing below. */
.clair__tile[data-tile].is-loaded:not(.clair__tile--studio){background-size:cover !important;background-position:center !important;}
.clair__tile--studio.is-loaded{background-size:140% !important;background-position:center 42% !important;}
.clair__tile{box-shadow:0 0 0 1px rgba(26,23,20,.18);}
.clair__dot:hover .clair__tile{box-shadow:0 0 0 1px rgba(26,23,20,.4);}
/* Visual haptics: a tile presses in under the finger and springs back, so a tap is felt on
   phones that give the web no vibration (iPhone). Off in lite mode. */
.clair__dot .clair__tile{transition:transform .12s ease,box-shadow .15s;}
.clair__dot:active .clair__tile{transform:scale(.94);}
.clair__dot.is-sel .clair__tile{animation:clairPop .22s ease;}
@keyframes clairPop{0%{transform:scale(.94);}60%{transform:scale(1.04);}100%{transform:none;}}
.lba-lite .clair__dot .clair__tile{transition:none;animation:none;}
.clair__dot.is-sel .clair__tile{box-shadow:0 0 0 3px #FCFBF8,0 0 0 5px #1A1714;}
.clair__dot:focus-visible .clair__tile{outline:2px solid var(--rose);outline-offset:3px;}

.clair__count{opacity:.5;font-weight:400;}
/* [hidden] is only display:none in the UA sheet, so ANY explicit display in
   this stylesheet silently beats it. .clair__more sets display:block, so the
   "Show all N colours" button rendered 90px tall while carrying the hidden
   attribute — and clicking it removed .is-collapsed from a grid that had never
   been collapsed, because the family-first gate returns before collapse() runs.
   Nothing happened, and nothing looked wrong in the markup.

   This is the third time the pattern has bitten this section (70 swatch tiles
   stayed painted the same way). 29 rules here set an explicit display, so any
   of them toggled via .hidden would do it again. One rule closes the class. */
.clair [hidden]{display:none !important;}
.clair__more{display:block;width:100%;font:inherit;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;background:none;border:1px solid #1A1714;border-radius:0;
  padding:14px 10px;cursor:pointer;color:#1A1714;text-decoration:none;margin:2px 0 4px;}
.clair__more:hover{background:#1A1714;color:#FCFBF8;}
.clair__dots.is-collapsed .clair__dot--extra{display:none;}
.clair__dots--tail{margin-top:0;}
/* The comp reads "SOLD OUT · 59" with a quiet Show on the right, not a pill
   button. It is a section heading with an affordance, not a call to action. */
/* The toggle is a plain button, as wide as the column, so it cannot be missed — and nothing more. */
.clair__oostoggle{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;
  font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  background:transparent;border:1.5px solid #1A1714;border-radius:8px;padding:.85em 1em;
  cursor:pointer;color:#1A1714;margin:6px 0 12px;transition:background .15s,color .15s;}
.clair__oostoggle::after{content:"";width:.55em;height:.55em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;}
.clair__oostoggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg);}
.clair__oostoggle:hover,.clair__oostoggle:focus-visible{background:#1A1714;color:#FCFBF8;outline:none;}
.clair__dots--oos{margin-top:.1rem;}
/* a labelled rule, so the sold-out block reads as a separate shelf rather
   than more of the same grid */
/* The divider Matthew asked for: a brioche swatch, DYE TO ORDER COLOURS, a brioche swatch. The
   photo-real band from the swatch masters (design archive, see design/README.md), cropped to a strip either side of the words. */
.clair__oosrule{display:flex;align-items:center;gap:14px;margin:.2rem 0 .7rem;padding:0;background:none;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1A1714;opacity:1;white-space:nowrap;}
.clair__oosrule::before,.clair__oosrule::after{content:"";flex:1;height:34px;border-radius:6px;
  background:url({{ 'band-brioche.webp' | asset_url }}) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(26,23,20,.12);}
@media(max-width:749px){.clair__oosrule{font-size:12px;gap:10px;}.clair__oosrule::before,.clair__oosrule::after{height:26px;}}
/* The dye-to-order group sits on a faint rose wash with a hairline, so what is on the shelf (cream)
   and what will be dyed for you (rose) read as two things at a glance. Nothing louder than that. */
.clair__oosgroup{margin:0 0 .8rem;padding:12px 14px 6px;border-radius:12px;background:rgba(247,122,151,.07);box-shadow:inset 0 0 0 1px rgba(211,75,93,.16);}
/* …and the in-stock grid sits on a faint yellow wash: the two brand colours doing the two jobs. */
[data-clair-tabs] ~ .clair__dots[data-tab-panel="stock"]{padding:12px 14px 6px;border-radius:12px;background:rgba(255,217,87,.10);box-shadow:inset 0 0 0 1px rgba(200,160,20,.16);margin-bottom:.8rem;}
.lba-lite .clair__ff{backdrop-filter:none;-webkit-backdrop-filter:none;}
.lba-lite [data-tab-panel]{animation:none;}
.lba-lite .clair__tab,.lba-lite .clair__oostoggle,.lba-lite .clair__tile{transition:none;}
@media (prefers-reduced-motion:reduce){[data-tab-panel]{animation:none;}}
.clair__tabs{display:flex;border-bottom:1.5px solid rgba(26,23,20,.15);margin:0 0 14px;}
.clair__tab{font:inherit;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1.5px;padding:.6em 1em;cursor:pointer;color:#6B6259;transition:color .15s,border-color .15s;}
.clair__tab span{font-weight:400;opacity:.65;margin-left:.3em;}
.clair__tab:hover{color:#1A1714;}
.clair__tab.is-on{color:#1A1714;border-bottom-color:#1A1714;}
.clair__tab.is-on[data-tab="dto"]{border-bottom-color:var(--rose,#C0405A);}
.clair__tab:focus-visible{outline:2px solid var(--rose,#C0405A);outline-offset:2px;}
/* with tabs, the bottom button is redundant; the panel keeps its header bar */
[data-clair-tabs] ~ .clair__oostoggle{display:none;}
.is-inline .clair__oosgroup{margin-top:.6rem;}
/* the tab label is the group header while the tabs show; in one-grid mode (desktop) the tabs are
   hidden and the brioche divider comes back to say where dye-to-order starts */
[data-clair-tabs]:not([hidden]) ~ .clair__oosgroup .clair__oosrule{display:none;}
/* one-grid mode: while the in-stock grid is gated behind "choose a colour family", the dye-to-order
   grid waits too — otherwise the page opened on 60 dye-to-order tiles and no in-stock ones */
.is-inline .clair__dots.is-gated ~ .clair__oosgroup{display:none;}
[data-tab-panel]{animation:clairTabIn .28s ease;}
@keyframes clairTabIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.clair__ooshelp{font-size:14px;line-height:1.5;opacity:.9;margin:0 0 .9rem;}  /* was .78rem at 65%: the dye-to-order offer was the smallest text on the page */
/* filter chips: one tight wrapping row, deliberately quiet — this sits
   immediately above the buy button and must not compete with it */
.clair__fams{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;}
.clair__famsep{width:1px;align-self:stretch;margin:.15rem .35rem;background:rgba(26,23,20,.16);}
.clair__fam{display:inline-flex;align-items:center;gap:.45em;font:inherit;font-size:14px;
  letter-spacing:.06em;line-height:1;height:32px;padding:0 14px;border:1px solid #D9D1C2;
  border-radius:999px;background:none;color:#1A1714;cursor:pointer;white-space:nowrap;}
.clair__fam:hover{border-color:rgba(26,23,20,.45);}
.clair__fam.is-sel{background:#1A1714;color:#FCFBF8;border-color:#1A1714;}

.clair__fam span{opacity:.55;font-variant-numeric:tabular-nums;}
.clair__fam.is-sel span{opacity:.65;}
.clair__dot--hid{display:none !important;}
.clair__dot--nomatch{display:none !important;}
.clair__find{display:block;margin:0 0 10px;}
.clair__find-in{width:100%;min-height:44px;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid rgba(26,23,20,.28);border-radius:10px;padding:.5em .9em;-webkit-appearance:none;appearance:none;}
.clair__find-in:focus{outline:2px solid var(--ink);outline-offset:1px;}
.clair__find-none{margin:0 0 10px;font-size:14px;color:var(--rose,#C0405A);}
.clair__bases{margin:0 0 1.4rem;}
.clair__basechips{display:flex;flex-wrap:wrap;gap:.5rem;}
.clair__base{border:1px solid rgba(26,23,20,.2);background:var(--card);border-radius:8px;padding:.6em 1em;min-height:44px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s;}
.clair__base:hover{border-color:var(--ink);}
.clair__base.is-sel{background:var(--ink);color:#fff;border-color:var(--ink);}
.clair__base.is-out{opacity:.4;text-decoration:line-through;cursor:not-allowed;}
.clair__calc{background:var(--bg);border-radius:14px;padding:1.1rem;margin-bottom:1.2rem;}
.clair__field{display:block;font-size:14px;}
.clair__calc select{font:inherit;padding:.5em;border-radius:8px;border:1px solid rgba(26,23,20,.2);width:100%;margin-top:.3rem;}
.clair__ins{display:flex;align-items:center;gap:.5rem;margin:.8rem 0;font-size:14px;}
.clair__calc-result{font-weight:600;font-size:1.05rem;margin:.4rem 0;}
.clair__dyelot{font-size:14px;opacity:.9;margin:.4rem 0 0;}
.clair__calcnote{font-size:14px;opacity:.85;margin:.15rem 0 .6rem;font-style:italic;line-height:1.45;}
.clair__add{width:100%;min-height:48px;background:var(--yellow);color:var(--ink);border:0;border-radius:999px;padding:.9em 1em;font:inherit;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:1.2rem;transition:transform .1s;}
.clair__add:hover{transform:translateY(-1px);}
.clair__add:disabled{background:#ddd;cursor:not-allowed;}
.clair__qtybar{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.clair__stepper{display:inline-flex;align-items:center;border:1px solid rgba(26,23,20,.2);border-radius:999px;overflow:hidden;flex:0 0 auto;}
.clair__step{width:44px;height:44px;border:0;background:transparent;font:inherit;font-size:20px;line-height:1;cursor:pointer;color:var(--ink,#1A1714);}
.clair__step:hover{background:rgba(26,23,20,.06);}
.clair__qty{width:3.2em;height:44px;text-align:center;border:0;border-left:1px solid rgba(26,23,20,.12);border-right:1px solid rgba(26,23,20,.12);background:transparent;font:inherit;font-size:16px;-moz-appearance:textfield;}
.clair__qty::-webkit-outer-spin-button,.clair__qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.clair__qtyhint{margin:0;font-size:14px;color:#41633a;font-style:italic;}
@media(max-width:640px){
.clair{padding:1rem 0 3rem;}
.clair__card{padding:1.2rem;}
.clair__title{font-size:1.55rem;}
/* was .clair__dot{width:2.75rem;height:2.75rem} — a leftover from the round-dot
   design that clamped the tile BUTTON to 44x44 on mobile while the tile plus its
   name need ~110px. Every row overflowed its own box onto the row beneath:
   names truncated, tiles overlapping. The comp could not catch it (static phone
   frame) and neither could I, because I only ever looked at desktop. */
.clair__thumb img{width:56px;height:56px;}
}
.clair__yl{background:var(--bg);border:1px solid rgba(26,23,20,.1);border-radius:14px;padding:1.1rem 1.2rem;margin-top:.4rem;}
.clair__yl-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.8rem;margin-bottom:.5rem;border-bottom:1px solid rgba(26,23,20,.1);}
.clair__yl-weight{display:block;font-weight:600;font-size:1.05rem;}
.clair__yl-sub{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.7;}
.clair__yl-grid{margin:0;}
.clair__yl-row{display:grid;grid-template-columns:7rem 1fr;gap:.3rem .8rem;padding:.45rem 0;font-size:14px;border-bottom:1px solid rgba(26,23,20,.06);}
.clair__yl-row:last-child{border-bottom:0;}
.clair__yl-row dt{opacity:.7;margin:0;}
.clair__yl-row dd{margin:0;}
/* Secondary figures: the JA thickness gloss （合太）, the US size, the 号 courtesy.
   All three sit beside a primary value and must not compete with it. */
.lba-wn__gloss{font-weight:400;opacity:.6;margin-left:.1em;}
.lba-nd__us,.lba-nd__go{opacity:.6;}
/* Japanese sets denser than Latin and has no spaces to break on, so it needs a
   taller line and explicit kinsoku, or it wraps at arbitrary characters and
   strands punctuation at the start of a line. The 7rem label column is also
   tight for labels like 標準ゲージ. */
html[lang^="ja"] .clair__yl-row{grid-template-columns:8.5rem 1fr;line-height:1.7;}
html[lang^="ja"] .clair__yl,html[lang^="ja"] .clair__desc{line-height:1.7;line-break:strict;overflow-wrap:break-word;}
.clair__desc{margin-top:1.2rem;font-size:1.05rem;line-height:1.65;}
/* Descriptions were pasted from the old site with their own inline styling: right-aligned paragraphs,
   bordered boxes, 9px base links in five colours. Neutralise the paste so every description reads in
   Clair's type; the merchant keeps editing them in the admin as before. */
.clair__desc [style]{font-size:inherit !important;font-family:inherit !important;text-align:left !important;border:0 !important;padding:0 !important;color:inherit !important;line-height:inherit !important;}
.clair__desc p,.clair__desc div{margin:0 0 .9em;}
.clair__desc a{color:var(--rose,#D34B5D);text-decoration:underline;font-weight:600;}
.clair__desc table{width:100%;border-collapse:collapse;font-size:.95em;}
.clair__desc td,.clair__desc th{padding:.35em .5em;border-bottom:1px solid rgba(26,23,20,.1);vertical-align:top;}
.clair__desc img{max-width:100%;height:auto;}
.clair__desc span[style*="color"]{color:inherit !important;}
/* Sold-out was opacity .4 PLUS a 65%-black diagonal slash — two penalties on
   a swatch that already sits inside a group headed "Sold out — for now", so
   the slash said nothing the heading had not. Lighter now: the colour stays
   readable, because the point of the group is that these lead to a restock
   alert, not that they are crossed off. */
/* Sold out comes in two kinds. A colour that can be dyed to order is a real offer, so its photo
   stays full colour and the line under the name says so. Only a colour nobody can supply — a
   mill-dyed shade the mill is out of (lba.mill_dyed, inventory_policy deny) — is faded. */
.clair__dot.is-out{opacity:.5;}
.clair__dot.is-out[data-offer="true"]{opacity:1;}
.clair__sub{display:block;font-size:12px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;color:var(--ink-2,#6B6259);}
/* Dye-to-order tiles carry no marker: the shelf heading says what they are, and the photo stays clean. */
.clair__exoverlay{position:absolute;left:0;right:0;top:0;z-index:1;margin:0;background:rgba(26,23,20,.72);color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:.55em .8em;}
.clair__exoverlay[hidden]{display:none;}
/* z-index 1, not 3. It only has to sit above the hero <img>, which sets none.
   At 3 it also beat the header's search field — the theme's own chrome tops out
   around 4 — so opening search left "SHOWN ON MERINO ARAN" floating over it.
   Moving the bar to the top of the photo (so it stops covering the colourway
   name printed low in the shot) is what made the collision visible. */
.clair__appblocks{margin:0 0 1.1rem;}
/* Never restocked (Petits Prix, one of a kind, Éphémère): the Notify Me! app injects its own button
   into the buy box (.nm-portal) and a floating one; neither may offer a restock alert here. The
   root's data-norestock follows the selected variant. */
.clair[data-norestock="true"] .nm-portal,
.clair[data-norestock="true"] .restock-alerts-notify-button{display:none !important;}
html:has(.clair[data-norestock="true"]) .restock-alerts-float-button{display:none !important;}
.clair__notify{background:var(--paper,#F6F2EA);border:1px solid rgba(26,23,20,.12);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.2rem;}
.clair__notify-lead{font-size:14px;margin:0 0 .6rem;font-weight:600;}
.clair__notify-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.clair__notify-email{flex:1;min-width:160px;padding:.7em .9em;border:1px solid rgba(26,23,20,.2);border-radius:999px;font:inherit;background:#fff;}
.clair__notify-btn{background:var(--ink,#1A1714);color:#fff;border:0;border-radius:999px;padding:.7em 1.3em;font:inherit;cursor:pointer;}
.clair__notify-ok{color:var(--rose,#D34B5D);margin:0;font-weight:600;}
.cc-recs{background:var(--paper,#F6F2EA);color:var(--ink,#1A1714);}
.cc-recs__wrap{max-width:1240px;margin:0 auto;padding:2.5rem 1.25rem;}
.cc-recs__h{font-family:'Crimson Text',Georgia,serif;font-size:1.5rem;margin:0 0 1.2rem;}
.cc-recs__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
.cc-recs__card--cat .cc-recs__p{font-weight:400;opacity:.75;}
@media(min-width:760px){.cc-recs__grid{grid-template-columns:repeat(4,1fr);}}
.cc-recs__card{text-decoration:none;color:inherit;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px -18px rgba(42,38,48,.3);transition:transform .15s;display:block;}
.cc-recs__card:hover{transform:translateY(-3px);}
.cc-recs__img{aspect-ratio:1;background:var(--paper,#F6F2EA);}
.cc-recs__img img{width:100%;height:100%;object-fit:cover;}
.cc-recs__t{margin:.7rem .85rem .1rem;font-size:.92rem;line-height:1.2;}
.cc-recs__p{margin:0 .85rem .85rem;font-weight:600;}
/* ---------- CJK type layer (per-language, system fonts: zero network load, GDPR-safe) ----------
   Han unification: each language gets its own script-preferred fonts (a CN font for JP text
   renders "foreign" to natives). Headings use a Mincho/Song serif to keep clair's editorial
   feel; body uses a clean Gothic. CJK needs NO letter-spacing and NO italics (both break Han
   glyphs) and a looser line-height. For guaranteed brand-consistent serif across all devices,
   self-host Noto Serif CJK later (self-hosted, NOT the Google CDN, to stay GDPR-clean). */
.clair:lang(ja),.clair:lang(ko),.clair:lang(zh),.clair:lang(zh-CN),.clair:lang(zh-Hans),.clair:lang(zh-TW),.clair:lang(zh-Hant){line-height:1.8;}
.clair:lang(ja) .clair__eyebrow,.clair:lang(ja) .clair__label,.clair:lang(ko) .clair__eyebrow,.clair:lang(ko) .clair__label,.clair:lang(zh) .clair__eyebrow,.clair:lang(zh) .clair__label,.clair:lang(zh-CN) .clair__eyebrow,.clair:lang(zh-CN) .clair__label,.clair:lang(zh-TW) .clair__eyebrow,.clair:lang(zh-TW) .clair__label{letter-spacing:0;}
.clair:lang(ja) em,.clair:lang(ja) i,.clair:lang(ko) em,.clair:lang(ko) i,.clair:lang(zh) em,.clair:lang(zh) i,.clair:lang(zh-CN) em,.clair:lang(zh-TW) em{font-style:normal;}
/* Japanese */
.clair:lang(ja){font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans CJK JP",Meiryo,sans-serif;}
.clair:lang(ja) .clair__title{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"MS Mincho","Noto Serif CJK JP",serif;}
/* Korean */
.clair:lang(ko){font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Nanum Gothic",sans-serif;}
.clair:lang(ko) .clair__title{font-family:"Noto Serif CJK KR","Nanum Myeongjo","Batang","Apple SD Gothic Neo",serif;}
/* Simplified Chinese */
.clair:lang(zh),.clair:lang(zh-CN),.clair:lang(zh-Hans){font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;}
.clair:lang(zh) .clair__title,.clair:lang(zh-CN) .clair__title,.clair:lang(zh-Hans) .clair__title{font-family:"Songti SC",STSong,SimSun,"Noto Serif CJK SC",serif;}
/* Traditional Chinese */
.clair:lang(zh-TW),.clair:lang(zh-Hant){font-family:"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC",sans-serif;}
.clair:lang(zh-TW) .clair__title,.clair:lang(zh-Hant) .clair__title{font-family:"Songti TC",PMingLiU,"Noto Serif CJK TC",serif;}
/* END_SECTION:main-product-clair */

/* START_SECTION:main-search-clair (INDEX:53) */
.cc{--bg:#F6F2EA;--card:#fff;--ink:#1A1714;--yellow:#FFD957;--pink:#F77A97;--rose:#D34B5D;--shadow:0 14px 40px -18px rgba(42,38,48,.3);background:var(--bg);color:var(--ink);padding:2.5rem 0 4rem;min-height:60vh;}
.cc__wrap{max-width:1240px;margin:0 auto;padding:0 1.25rem;}
.cc__head--search{text-align:center;margin-bottom:1.6rem;}
.cc__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;opacity:.55;margin:0;}
.cc__title{font-size:2.2rem;margin:.2rem 0 1rem;}
.cc__searchform{display:flex;gap:.5rem;max-width:560px;margin:0 auto;}
.cc__acwrap{position:relative;flex:1;}
.cc__searchin{width:100%;padding:.8em 1em;border:1px solid rgba(26,23,20,.2);border-radius:999px;font:inherit;background:var(--card);}
.cc__searchbtn{background:var(--yellow);color:var(--ink);border:0;border-radius:999px;padding:.8em 1.6em;font:inherit;font-weight:600;cursor:pointer;}
.cc__ac{position:absolute;top:calc(100% + .4rem);left:0;right:0;background:var(--card);border:1px solid rgba(26,23,20,.12);border-radius:14px;box-shadow:var(--shadow);z-index:30;max-height:400px;overflow-y:auto;text-align:left;}
.cc__sg{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;text-decoration:none;color:var(--ink);font-size:.9rem;border-bottom:1px solid rgba(26,23,20,.06);}
.cc__sg:last-child{border-bottom:0;}
.cc__sg:hover{background:var(--bg);}
.cc__sg img,.cc__sg-ph{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--bg);flex:none;}
.cc__sg-t{flex:1;}
.cc__sg--q{font-weight:600;}
.cc__sg--col{color:var(--rose);font-weight:600;}
/* The filter bar (.cc__bar, .cc__mf, .cc__filters, .cc__facet, .cc__opt, .cc__tools, .cc__sort, .cc__count,
   .cc__active, .cc__pill) is styled ONLY by sections/main-collection-clair.liquid. Section stylesheets share one
   bundle and this one loads after the collection's, so the copies that used to sit here overrode its phone
   accordion on collection pages too. Do not re-add them. */
.cc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
@media(min-width:700px){.cc__grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.cc__grid{grid-template-columns:repeat(4,1fr);}}
.cc__card{text-decoration:none;color:var(--ink);background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .15s;}
.cc__card:hover{transform:translateY(-3px);}
.cc__card-img{aspect-ratio:1/1;background:var(--bg);}
.cc__card-img img{width:100%;height:100%;object-fit:cover;}
.cc__card-title{margin:.8rem .9rem .15rem;font-size:.95rem;line-height:1.2;}
.cc__card-price{margin:0 .9rem .9rem;font-weight:600;}
.cc__empty{padding:3rem 0;text-align:center;opacity:.7;}
.cc__assist-row{text-align:center;margin:-.4rem 0 1.4rem;}
.cc__assist-row:empty{display:none;}
.cc__assist{color:var(--rose);font-weight:600;text-decoration:underline;text-underline-offset:.2em;}
.cc__pager{margin-top:2rem;text-align:center;}
/* END_SECTION:main-search-clair */