@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500&family=Pinyon+Script&family=Cormorant:ital,wght@1,400;1,500&display=swap');

/* ============================================================
   Atelier Février — Redesign (matches live atelierfevrier.com)
   Type:   Neue Haas Grotesk (Helvetica Neue fallback)
   Canvas: near-black ink / warm paper, coral accent #FF6B5F
   ============================================================ */

:root {
  /* GeneralPublic identity tokens (260521/260522) */
  --ink:        #1a1a1a;          /* --text : soft black      */
  --ink-soft:   #232323;
  --paper:      #f1f1f1;          /* --bg : light grey        */
  --paper-deep: #e7e7e7;
  --white:      #ffffff;
  --line:       #dcdcdc;          /* hairline grey            */
  --line-dark:  rgba(255,255,255,.18);
  --grey:       #b4b4b4;
  --grey-mid:   #7d7d7d;
  --coral:      #1a1a1a;          /* accent retired — neutral ink (no red) */

  /* Rank = embedded brand serif (assets/css/fonts.css); Helvetica Neue for running body */
  --serif: 'RankTrial', 'Times New Roman', Georgia, serif;
  --sans:  "Helvetica Neue", "neue-haas-grotesk-text", Helvetica, Arial, sans-serif;

  --maxw: 1480px;
  --gut:  clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--coral); color: #fff; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; }
.display {
  font-weight: 300;
  font-size: clamp(2.4rem, 6.2vw, 5.6rem);
  letter-spacing: -.02em;
  line-height: .98;
}
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-weight: 300; letter-spacing: -.015em; }
.h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; }
.lead { font-size: clamp(.98rem, 1.5vw, 1.22rem); line-height: 1.55; font-weight: 300; }
.eyebrow {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--grey-mid); font-weight: 500;
}
.eyebrow .num { color: var(--coral); }
em, .it { font-style: italic; }
p + p { margin-top: 1.1em; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 11vw, 168px); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
/* '.ink' retired to light — no black backgrounds anywhere */
.ink    { background: var(--paper); color: var(--ink); }
.ink h1, .ink h2, .ink h3 { color: var(--ink); }
.paper  { background: var(--paper); color: var(--ink); }
.white  { background: var(--white); color: var(--ink); }
.center { text-align: center; }
.muted  { color: var(--grey-mid); }
.ink .muted { color: var(--grey-mid); }
.ink .split__body p, .ink .offer__item p, .ink .step p, .ink .stat .l { color: var(--grey-mid); }
.ink .offer__item, .ink .step { border-color: var(--line); }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 34px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut);
  color: #fff; mix-blend-mode: difference;
  transition: padding .4s var(--ease);
}
.site-header.solid { padding-block: 16px; }
.brand { display: flex; flex-direction: column; align-items: center; line-height: .92; letter-spacing: .02em; }
.brand b { font-family: var(--serif); font-weight: 400; font-size: 1rem; text-transform: uppercase; letter-spacing: .16em; }
/* bilingual corner: two cities, always one French + one Devanagari, alternating */
.brand-sub { display: flex; align-items: baseline; justify-content: center; gap: .42em; margin-top: 6px; }
.bs-city { font-size: .58rem; letter-spacing: .42em; text-transform: uppercase; opacity: .82;
  white-space: nowrap; transition: opacity .5s var(--ease); }
.bs-city.is-ne { font-family: 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Devanagari Sangam MN', sans-serif;
  font-size: .74rem; letter-spacing: .12em; text-transform: none; }
.bs-city.fading { opacity: 0; }
.bs-dot { font-size: .56rem; opacity: .5; }
@media (prefers-reduced-motion: reduce){ .bs-city { transition: opacity .25s ease; } }

.nav-desk { display: flex; gap: 34px; align-items: center; }
.nav-desk a { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; position: relative; padding-block: 4px; }
.nav-desk a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width .4s var(--ease);
}
.nav-desk a:hover::after, .nav-desk a.active::after { width: 100%; }
.nav-desk a.active { color: var(--coral); }

.menu-btn { display: none; align-items: center; gap: 9px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.menu-btn .plus { display: inline-block; width: 13px; height: 13px; position: relative; }
.menu-btn .plus::before, .menu-btn .plus::after { content:""; position:absolute; background: currentColor; transition: transform .4s var(--ease); }
.menu-btn .plus::before { top: 6px; left: 0; width: 13px; height: 1px; }
.menu-btn .plus::after  { left: 6px; top: 0; width: 1px; height: 13px; }
body.menu-open .menu-btn .plus::after { transform: rotate(90deg); }

/* overlay nav */
.nav-overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gut);
  transform: translateY(-100%); transition: transform .6s var(--ease); visibility: hidden;
}
body.menu-open .nav-overlay { transform: none; visibility: visible; }
.nav-overlay ul { display: flex; flex-direction: column; gap: 6px; }
.nav-overlay a {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 9vw, 3.6rem);
  letter-spacing: -.02em; display: inline-block; transition: color .3s, padding-left .4s var(--ease);
}
.nav-overlay li { overflow: hidden; }
.nav-overlay a:hover { color: var(--coral); padding-left: 18px; }
.nav-overlay .meta { margin-top: 8vh; display: flex; gap: 40px; flex-wrap: wrap; font-size: .8rem; letter-spacing: .04em; color: var(--grey); }
.nav-overlay .meta a { font-family: var(--sans); font-size: .8rem; letter-spacing: .04em; }
.nav-overlay .meta a:hover { color: var(--ink); padding-left: 0; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.62) 100%); }
.hero__inner { position: relative; z-index: 2; padding: 0 var(--gut) clamp(48px, 8vw, 96px); width: 100%; }
.hero__inner .display { max-width: 16ch; }
.hero__sub { margin-top: 26px; max-width: 46ch; font-weight: 300; font-size: clamp(1rem,1.5vw,1.25rem); color: rgba(255,255,255,.86); }
.hero__row { margin-top: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.scroll-cue { position: absolute; right: var(--gut); bottom: clamp(48px,8vw,96px); z-index:2;
  writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* page hero (interior pages) */
.phero { padding-top: clamp(140px, 20vh, 220px); padding-bottom: clamp(40px,6vw,80px); }
.phero .display { max-width: 18ch; }
.phero .lead { margin-top: 26px; max-width: 56ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 16px 30px; border: 1px solid currentColor; border-radius: 100px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; position: relative;
}
.btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.ink .btn:hover, .hero .btn:hover { background: #fff; color: var(--ink); }
.btn--coral { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn--coral:hover { background: transparent; color: var(--coral); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.link-arrow .ar { transition: transform .4s var(--ease); }
.link-arrow:hover { color: var(--coral); }
.link-arrow:hover .ar { transform: translateX(8px); }
.link-u { border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .3s; }
.link-u:hover { color: var(--coral); }

/* ============================================================
   EDITORIAL SPLIT
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 84px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__media.tall img { aspect-ratio: 3/4; }
.split__body .h2 { margin-bottom: 22px; }
.split__body p { color: var(--grey-mid); max-width: 52ch; }
.ink .split__body p { color: var(--grey); }
.split__body .btn, .split__body .link-arrow { margin-top: 34px; }

/* figure caption */
.figrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px,2vw,28px); }
.fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.fig figcaption { margin-top: 14px; font-size: .82rem; color: var(--grey-mid); letter-spacing: .02em; }

/* ============================================================
   COLLECTION GRID
   ============================================================ */
.collection-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px,5vw,64px); flex-wrap: wrap; }
.grid-rugs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px) clamp(20px,2.5vw,40px); }
.grid-rugs.cols-2 { grid-template-columns: repeat(2, 1fr); }
.rug { display: block; }
.rug__media { position: relative; overflow: hidden; background: var(--white); aspect-ratio: 1/1; }
.rug__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.rug:hover .rug__media img { transform: scale(1.045); }
.rug__tag { position: absolute; top: 16px; left: 16px; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 6px 11px; border-radius: 100px; }
.rug__tag.avail { background: var(--coral); }
.rug__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rug__name { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; transition: color .3s; }
.rug:hover .rug__name { color: var(--coral); }
.rug__spec { font-size: .82rem; color: var(--grey-mid); text-align: right; line-height: 1.4; }
.rug__price { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-mid); }

/* chapters */
.chapter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(34px,4vw,56px); }
.chip { font-size: .78rem; letter-spacing: .08em; padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px; transition: all .3s; cursor: pointer; }
.chip.is-on, .chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   QUOTE / MARQUEE
   ============================================================ */
.quote { text-align: center; max-width: 24ch; margin-inline: auto; }
.quote q { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,4.4vw,3.4rem); line-height: 1.12; letter-spacing: -.015em; quotes: none; }
.quote .cite { margin-top: 30px; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-mid); }

.marquee { overflow: hidden; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding-block: 26px; }
.marquee__track { display: flex; gap: 60px; white-space: nowrap; width: max-content; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem,3vw,2.4rem); color: var(--grey); }
.marquee span .dot { color: var(--coral); margin-left: 60px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   STATS / STEPS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat .n { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem,5vw,4rem); line-height: 1; }
.stat .l { margin-top: 14px; font-size: .82rem; color: var(--grey-mid); letter-spacing: .02em; max-width: 22ch; }
.ink .stat .l { color: var(--grey); }
.stat .n .u { color: var(--coral); }

.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(24px,3vw,44px); }
.step { border-top: 1px solid var(--line); padding-top: 24px; }
.step .si { font-size: .8rem; letter-spacing: .2em; color: var(--grey-mid); }
.step h4 { font-size: 1.25rem; margin: 16px 0 12px; font-weight: 400; }
.step p { font-size: .92rem; color: var(--grey-mid); line-height: 1.5; }

/* ============================================================
   FORMS
   ============================================================ */
.form { display: grid; gap: 26px; max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-mid); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1.05rem; background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: 12px 2px; color: inherit; border-radius: 0;
}
.ink .field input, .ink .field textarea, .ink .field select { border-color: var(--line); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--coral); }
.field textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form-note { font-size: .9rem; color: var(--grey-mid); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); }
.contact-info dl { display: grid; gap: 28px; }
.contact-info dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 6px; }
.contact-info dd { font-size: 1.15rem; }
.contact-info dd a:hover { color: var(--coral); }

/* newsletter inline */
.nl { display: flex; gap: 0; max-width: 460px; border-bottom: 1px solid currentColor; }
.nl input { flex: 1; background: transparent; border: none; font: inherit; padding: 12px 0; color: inherit; }
.nl input:focus { outline: none; }
.nl button { padding: 12px 6px; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.nl button:hover { color: var(--coral); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(64px,8vw,110px) 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
.footer-brand b { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,5vw,3.4rem); letter-spacing: -.02em; display: block; }
.footer-brand p { margin-top: 18px; color: var(--grey); max-width: 32ch; font-size: .95rem; }
.fcol h5 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 20px; }
.fcol a { display: block; padding: 7px 0; font-size: .96rem; color: var(--ink); transition: color .3s, padding-left .3s; }
.fcol a:hover { color: var(--coral); padding-left: 6px; }
.footer-bottom { margin-top: clamp(48px,6vw,84px); padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .8rem; color: var(--grey-mid); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .grid-rugs { grid-template-columns: repeat(2, 1fr); }
  .stats, .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px){
  .nav-desk { display: none; }
  .menu-btn { display: inline-flex; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  .form-row { grid-template-columns: 1fr; }
}
/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product { display: grid; grid-template-columns: 1.7fr .72fr; gap: clamp(26px,3.5vw,56px); align-items: start; }
.product__media { position: sticky; top: 96px; display: grid; gap: 16px; }
.product__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--paper); transition: opacity .4s var(--ease); }
.product__media .thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.product__media .thumbs img { aspect-ratio: 1/1; }
.product__info { font-size: .9rem; }
.product__info .pname { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,3.2vw,2.5rem); letter-spacing: -.02em; line-height: 1; margin: 12px 0 14px; }
.product__info .pdesc { color: var(--grey-mid); max-width: 46ch; font-size: .88rem; line-height: 1.65; }
.product__info .pprice { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-mid); margin: 18px 0; }
.spec { margin: 30px 0; }
.spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.spec-row dt { color: var(--grey-mid); letter-spacing: .02em; }
.spec-row dd { text-align: right; }
.downloads { margin: 30px 0; }
.downloads h5, .swatches h5 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 6px; }
.dl-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dl-row .dl-name { font-size: 1rem; }
.dl-row .dl-meta { font-size: .76rem; color: var(--grey-mid); letter-spacing: .08em; text-transform: uppercase; }
.dl-row a.link-arrow:hover { color: var(--coral); }
.swatches { margin: 30px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); }
.pactions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.pbreadcrumb { font-size: .78rem; letter-spacing: .04em; color: var(--grey-mid); }
.pbreadcrumb a:hover { color: var(--coral); }

/* ============================================================
   MATERIALS GUIDE
   ============================================================ */
.matiere { display: grid; gap: clamp(56px,8vw,120px); }
.matiere__row { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px,5vw,80px); align-items: center; }
.matiere__row:nth-child(even) .matiere__media { order: 2; }
.matiere__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.matiere__body .mname { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,3.5vw,2.8rem); letter-spacing: -.015em; margin-bottom: 8px; }
.matiere__body .mfr { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin-bottom: 20px; }
.matiere__body p { color: var(--grey-mid); max-width: 50ch; }
.mspec { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 26px; }
.mspec div { font-size: .9rem; }
.mspec dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 4px; }

/* ============================================================
   TRADE / PROJECTS
   ============================================================ */
.offer { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,48px); }
.offer__item { border-top: 1px solid var(--line); padding-top: 26px; }
.ink .offer__item { border-color: var(--line); }
.offer__item h4 { font-size: 1.3rem; font-weight: 400; margin-bottom: 12px; }
.offer__item p { font-size: .95rem; color: var(--grey-mid); line-height: 1.5; }
.ink .offer__item p { color: var(--grey-mid); }
.sectors { display: flex; flex-wrap: wrap; gap: 10px; }
.sector { font-size: .82rem; letter-spacing: .06em; padding: 12px 22px; border: 1px solid var(--line); border-radius: 100px; }
.ink .sector { border-color: var(--line); }

/* ============================================================
   FILTER BAR (collection)
   ============================================================ */
.filter-bar { display: flex; gap: clamp(18px,2.4vw,40px); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: clamp(28px,4vw,52px); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.filter-field { display: flex; flex-direction: column; gap: 8px; }
.filter-field label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-mid); }
.filter-field select { font: inherit; font-size: .95rem; border: none; border-bottom: 1px solid var(--ink);
  background: transparent; padding: 6px 26px 6px 2px; border-radius: 0; cursor: pointer; color: inherit;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' fill='none' stroke='%230c0c0c' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; }
.filter-field select:focus { outline: none; border-color: var(--coral); }
.filter-meta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.filter-count { font-size: .85rem; color: var(--grey-mid); letter-spacing: .02em; }
.filter-clear { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-mid);
  border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.filter-clear:hover { color: var(--coral); border-color: var(--coral); }
.no-results { padding: 60px 0; text-align: center; color: var(--grey-mid); }

/* availability tag variant */
.rug__tag.order { background: rgba(255,255,255,.9); color: var(--ink); border: 1px solid var(--line); }

/* ============================================================
   ADD-TO-ENQUIRY (selection)
   ============================================================ */
.rug__media { } /* positioned already */
.rug__add { position: absolute; bottom: 14px; right: 14px; z-index: 4; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s, color .3s; }
.rug:hover .rug__add, .rug__add:focus-visible { opacity: 1; transform: none; }
.rug__add.in { background: var(--coral); color: #fff; border-color: var(--coral); opacity: 1; transform: none; }
@media (hover: none){ .rug__add { opacity: 1; transform: none; } }

.btn.add-enquiry.in { background: var(--coral); border-color: var(--coral); color: #fff; }

/* selection bar */
.sel-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 86; background: var(--white); color: var(--ink); border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .5s var(--ease); }
.sel-bar.show { transform: none; }
.sel-bar__in { max-width: var(--maxw); margin-inline: auto; padding: 18px var(--gut);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sel-bar__count { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; }
.sel-bar__count b { color: var(--coral); font-weight: 400; }
.sel-bar__names { font-size: .85rem; color: var(--grey); flex: 1; min-width: 120px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-bar__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.sel-bar__clear { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.sel-bar__clear:hover { color: var(--ink); }

/* selection on contact page */
.sel-list { display: grid; gap: 0; margin: 8px 0 18px; }
.sel-item { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.sel-item img { width: 46px; height: 46px; object-fit: cover; }
.sel-item .si-l { display: flex; align-items: center; gap: 14px; }
.sel-item button { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-mid); }
.sel-item button:hover { color: var(--coral); }

/* ============================================================
   SEARCH (overlay)
   ============================================================ */
.search-field { position: relative; margin-bottom: 6vh; max-width: 560px; }
.search-field input { width: 100%; font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem,4vw,2rem);
  background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink); padding: 12px 0; }
.search-field input::placeholder { color: var(--grey-mid); }
.search-field input:focus { outline: none; border-color: var(--coral); }
.search-results { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; max-height: 38vh; overflow: auto; }
.search-results a { font-family: var(--sans); font-size: 1rem; letter-spacing: .02em; padding: 9px 0; color: var(--grey); }
.search-results a:hover { color: var(--ink); padding-left: 8px; }
.search-results a span { color: var(--grey-mid); font-size: .82rem; margin-left: 12px; }
.search-empty { color: var(--grey-mid); font-size: .9rem; padding: 10px 0; }

@media (max-width: 880px){
  .product { grid-template-columns: 1fr; gap: 32px; }
  .product__media { position: static; }
  .matiere__row { grid-template-columns: 1fr; gap: 24px; }
  .matiere__row:nth-child(even) .matiere__media { order: 0; }
  .offer { grid-template-columns: 1fr; }
  .filter-bar { gap: 18px 24px; }
  .filter-meta { width: 100%; margin-left: 0; justify-content: space-between; }
}

@media (max-width: 600px){
  body { font-size: 16px; }
  .grid-rugs, .grid-rugs.cols-2 { grid-template-columns: 1fr; }
  .figrow { grid-template-columns: 1fr; }
  .stats, .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero__media::after { background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.7)); }
}

/* ============================================================
   LANDING — La Poésie des Sols (rug-shaped poem)
   ============================================================ */
.poesie { background: var(--paper); padding: clamp(120px,15vh,180px) 0 clamp(64px,9vw,120px); position: relative; overflow: hidden; }
.poesie__wrap { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(32px,5vw,80px); align-items: center; }
.poesie__intro .eyebrow { color: var(--coral); }
.poesie__intro .display { margin: 22px 0 0; }
.poesie__lead { margin-top: 26px; max-width: 40ch; color: var(--grey-mid); font-size: clamp(.86rem,1vw,.98rem); font-weight: 400; line-height: 1.55; }
.poesie__row { margin-top: 38px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }

/* layered stage — big rug in front, its poem cast behind like a shadow */
.poesie__stage { position: relative; width: 100%; aspect-ratio: 999/1100; }
.poesie__rugimg {
  position: absolute; z-index: 2; right: 0; top: 0;
  width: 84%; aspect-ratio: 999/1100; object-fit: contain;
  -webkit-mask: url('../img/masks/la-ville.png') center/contain no-repeat;
          mask: url('../img/masks/la-ville.png') center/contain no-repeat;
  filter: drop-shadow(-10px 14px 20px rgba(26,26,26,.18));
}
/* the poem cut to the rug's exact silhouette, offset behind to the lower-left (its shadow) */
.poesie__poem {
  position: absolute; z-index: 1; left: 0; top: 11%;
  width: 84%; aspect-ratio: 999/1100;
  background: var(--ink); color: #efe9dd;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 17% 14%;
  -webkit-mask: url('../img/masks/la-ville.png') center/contain no-repeat;
          mask: url('../img/masks/la-ville.png') center/contain no-repeat;
}
.poesie__verse {
  font-family: 'Pinyon Script', 'Parisienne', cursive;
  font-size: clamp(.62rem, .95vw, .92rem);
  line-height: 1.5; letter-spacing: .01em;
}
.poesie__verse .big { display:block; font-size: 1.25em; margin-bottom: .3em; }
.poesie__sign { margin-top: 12px; font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,236,224,.55); }
.poesie__foot { margin-top: clamp(40px,6vw,80px); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; border-top: 1px solid var(--line); padding-top: 26px; }
.poesie__foot p { max-width: 52ch; color: var(--grey-mid); font-style: italic; font-family: 'Cormorant', serif; font-size: clamp(1.05rem,1.6vw,1.5rem); }

@media (max-width: 980px){
  .poesie__wrap { grid-template-columns: 1fr; gap: 36px; }
  .poesie__stage { max-width: 460px; margin-left: 0; }
}

/* ============================================================
   PRODUCT — Archives (past executions / colourways)
   ============================================================ */
.archives { margin: 30px 0; }
.archives h5 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 14px; }
.arch-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.arch-sw { width: 48px; height: 48px; border-radius: 4px; background-size: cover; background-position: center;
  border: 1px solid var(--line); cursor: pointer; opacity: .68; outline: 1.5px solid transparent; outline-offset: 2px;
  transition: opacity .3s var(--ease), outline-color .25s; }
.arch-sw:hover { opacity: 1; }
.arch-sw.is-on { opacity: 1; outline-color: var(--coral); }
.arch-caption { font-size: .86rem; color: var(--grey-mid); line-height: 1.55; max-width: 48ch; }
.arch-caption b { color: var(--ink); font-weight: 500; }
.arch-caption .sep { color: var(--line); margin: 0 7px; }

/* ============================================================
   PRE-HOME GATE — private client vs interior designer (trade)
   ============================================================ */
body.gate-open { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 200; background: var(--paper);
  display: flex; align-items: center; justify-content: center; padding: var(--gut);
  opacity: 1; transition: opacity .7s var(--ease);
}
.gate[hidden] { display: none; }
.gate.is-closing { opacity: 0; pointer-events: none; }
.gate__inner { max-width: 920px; width: 100%; text-align: center; }
.gate__q { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem,3.4vw,3rem);
  line-height: 1.1; letter-spacing: -.01em; margin: 20px 0 clamp(36px,5vw,60px); }
.gate__choices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,28px); }
.gate__choice {
  text-align: left; border: 1px solid var(--line); background: transparent; cursor: pointer;
  padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; gap: 10px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; border-radius: 2px;
}
.gate__choice:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink); }
.gate__choice span { font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.6rem); text-transform: uppercase; letter-spacing: .08em; }
.gate__choice small { font-size: .82rem; color: var(--grey-mid); line-height: 1.45; max-width: 30ch; }
.gate__choice:hover small { color: var(--grey-mid); }
.gate__skip { margin-top: 30px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-mid); cursor: pointer; }
.gate__skip:hover { color: var(--ink); }

/* audience-conditional content */
.trade-only { display: none; }
body.audience-trade .trade-only { display: revert; }
body.audience-trade .private-only { display: none; }

/* audience switcher (injected) */
.aud-switch { position: fixed; bottom: 16px; left: var(--gut); z-index: 60; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grey-mid); background: rgba(241,241,241,.8);
  backdrop-filter: blur(8px); padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px; }
.aud-switch b { color: var(--ink); font-weight: 500; }
.aud-switch button { font: inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); cursor: pointer; margin-left: 8px; }
.aud-switch button:hover { text-decoration: underline; }

/* trade banner on homepage */
.trade-bar { background: var(--paper-deep); color: var(--ink); text-align: center; padding: 13px 20px; border-block: 1px solid var(--line);
  font-size: .76rem; letter-spacing: .08em; }
.trade-bar a { text-decoration: underline; text-underline-offset: 3px; }
.trade-bar a:hover { color: var(--coral); }

@media (max-width: 620px){ .gate__choices { grid-template-columns: 1fr; } }

/* ============================================================
   IMMERSIVE GRID — hover a rug → it floods full-bleed behind,
   others fade, text flips white on dark rugs (GeneralPublic vision)
   ============================================================ */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.big-bg {
  position: absolute; top: 50%; left: 50%; width: 162vw; height: 184vh;
  object-fit: cover; opacity: 0; transform: translate(-50%,-50%);
  transition: opacity .8s cubic-bezier(.4,0,.2,1) .12s; will-change: opacity;
}
.big-bg.is-active { opacity: 1; }

.section--immersive { position: relative; z-index: 2; background: transparent; }

.grid-immersive { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2.2vw; row-gap: 3.4vw; position: relative; }
@media (min-width: 1280px){ .grid-immersive { grid-template-columns: repeat(5, 1fr); } }

.grid-immersive .rug { transition: opacity .6s cubic-bezier(.4,0,.2,1); }
.grid-immersive .rug__media {
  aspect-ratio: 5 / 6; background: var(--paper); isolation: isolate;
  display: flex; align-items: center; justify-content: center; overflow: visible;
  transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
.grid-immersive .rug__media img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: filter .8s cubic-bezier(.4,0,.2,1) .12s, opacity .8s cubic-bezier(.4,0,.2,1) .12s, transform .8s var(--ease);
}
.grid-immersive .rug:hover .rug__media img { transform: none; }     /* override base scale */
.grid-immersive .rug__meta { border: 0; margin-top: 12px; padding: 0; display: block; }
.grid-immersive .rug__name { font-size: .92rem; }
.grid-immersive .rug__spec { font-size: .72rem; text-align: left; margin-top: 2px; }
.grid-immersive .rug__price { display: none; }

/* hover state: others fade out, hovered image desaturates over the flood */
.grid-immersive.has-hover .rug:not(.is-hovered) { opacity: 0; }
.grid-immersive.has-hover .rug.is-hovered { z-index: 5; }
.grid-immersive.has-hover .rug.is-hovered .rug__media img { filter: grayscale(1); opacity: .5; mix-blend-mode: normal; }

/* dark-bg mode — flip UI text white when a dark rug floods */
body.dark-bg-active .filter-bar,
body.dark-bg-active .filter-field label,
body.dark-bg-active .filter-field select,
body.dark-bg-active .filter-count,
body.dark-bg-active .grid-immersive .rug.is-hovered .rug__meta,
body.dark-bg-active .collection-head,
body.dark-bg-active .phero { color: #fff; transition: color .8s cubic-bezier(.4,0,.2,1) .12s; }
body.dark-bg-active .filter-clear { color: rgba(255,255,255,.7); }

@media (max-width: 900px){ .grid-immersive { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .grid-immersive { grid-template-columns: repeat(2,1fr); } .big-bg { display:none; } }

/* ============================================================
   PRODUCT — customisation note (SEO) + split funnels (DtC / Trade)
   ============================================================ */
.custom-note { margin: 34px 0 6px; padding-top: 26px; border-top: 1px solid var(--line); }
.custom-note__h { font-family: var(--serif); font-size: 1.18rem; font-weight: 400; margin-bottom: 10px; }
.custom-note p { font-size: .92rem; color: var(--grey-mid); line-height: 1.62; max-width: 54ch; }

.funnel { margin-top: 30px; }
.funnel__tag { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 12px; }
.funnel__lead { font-size: 1rem; line-height: 1.55; max-width: 48ch; margin-bottom: 22px; }
.funnel .pactions { margin-top: 0; }
.funnel .add-enquiry { margin-top: 18px; }

/* trade enquiry form bits (contact page) */
.filefield { border: 1px dashed var(--line); border-radius: 3px; padding: 18px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .3s; cursor: pointer; }
.filefield:hover { border-color: var(--grey-mid); }
.filefield input[type=file] { font-size: .9rem; }
.filefield .hint { font-size: .78rem; color: var(--grey-mid); }
.form .field input[type=file] { border: 0; padding: 6px 0; }
.form-note2 { font-size: .78rem; color: var(--grey-mid); margin-top: -8px; }

/* radio row (private connect options) */
.radio-row { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 4px; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; }
.radio input { accent-color: var(--ink); }

/* ---- choice cards — DtC connect-method selector ---- */
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.choice-card { position: relative; border: 1px solid var(--line); border-radius: 4px; padding: 20px 18px; cursor: pointer; transition: border-color .18s, background .18s, color .18s; user-select: none; }
.choice-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.choice-card__title { display: block; font-family: 'RankTrial', Georgia, serif; font-size: .95rem; letter-spacing: .03em; margin-bottom: 6px; }
.choice-card__desc { display: block; font-size: .76rem; color: var(--grey-mid); line-height: 1.5; }
.choice-card:hover { border-color: var(--grey-mid); }
.choice-card:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--white); }
.choice-card:has(input:checked) .choice-card__desc { color: rgba(241,241,241,.48); }
@media (max-width: 600px) { .choice-cards { grid-template-columns: 1fr; } }

/* ---- contact page hero: split text + rug image ---- */
.phero-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,80px); align-items: center; }
.phero-media { display: flex; align-items: center; justify-content: flex-end; }
.phero-rug { width: 100%; max-height: 480px; object-fit: contain; object-position: center; }
@media (max-width: 680px) { .phero-split { grid-template-columns: 1fr; } .phero-media { justify-content: flex-start; order: -1; } .phero-rug { max-height: 220px; } }

/* ════════════════════════════════════════════════
   ENQUIRE WIZARD  (/enquire.html) — one question at a time
   ════════════════════════════════════════════════ */
.enquire-body { background: var(--paper); }
.enquire-body .aud-switch { display: none; }
.wizard-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: clamp(120px,16vh,200px) 24px clamp(60px,10vh,120px); }
.wizard { width: 100%; max-width: 660px; }

/* chrome */
.wz-chrome { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; min-height: 20px; }
.wz-back { background: none; border: 0; cursor: pointer; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-mid); padding: 0; transition: color .2s; flex: 0 0 auto; }
.wz-back:hover { color: var(--ink); }
.wz-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.wz-bar__fill { display: block; height: 100%; width: 0; background: var(--ink); transition: width .55s var(--ease); }
.wz-count { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-mid); flex: 0 0 auto; min-width: 34px; text-align: right; }

/* viewport + steps */
.wz-viewport { position: relative; }
.wstep { display: none; }
.wstep.is-active { display: block; animation: wzIn .5s var(--ease) both; }
@keyframes wzIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wz-k { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 16px; }
.wz-q { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem,4.2vw,2.9rem); line-height: 1.06; letter-spacing: -.01em; }
.wz-sub { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: var(--grey-mid); max-width: 48ch; }
.wstep .field { margin-top: 26px; }
.wstep .form-row { margin-top: 26px; }
.wstep .form-row .field { margin-top: 0; }
.wz-area { min-height: 150px; }

/* choice cards (big, calm) */
.wz-choices { display: grid; gap: 14px; margin-top: 36px; }
.wz-choice { position: relative; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 30px 30px 30px 32px; cursor: pointer; transition: border-color .22s, transform .22s, box-shadow .22s; }
.wz-choice:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(26,26,26,.07); }
.wz-choice__t { display: block; font-family: var(--serif); font-size: 1.5rem; letter-spacing: .01em; line-height: 1.1; margin-bottom: 10px; padding-right: 30px; }
.wz-choice__d { display: block; font-size: .9rem; line-height: 1.58; color: var(--grey-mid); max-width: 46ch; }
.wz-choice__arrow { position: absolute; top: 30px; right: 30px; font-size: 1.1rem; color: var(--ink); transition: transform .25s var(--ease); }
.wz-choice:hover .wz-choice__arrow { transform: translateX(6px); }

.wz-actions { margin-top: 34px; display: flex; align-items: center; gap: 18px; }
.wz-escape { margin-top: 30px; font-size: .9rem; color: var(--grey-mid); }
.wz-escape a { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.wz-escape a:hover { border-color: var(--ink); }
.opt { text-transform: none; letter-spacing: 0; color: var(--grey-mid); font-size: .82em; }

/* slot picker */
.slot-days { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-day { border: 1px solid var(--line); border-radius: 5px; background: var(--white); cursor: pointer; padding: 12px 14px;
  text-align: center; min-width: 74px; transition: border-color .18s, background .18s, color .18s; }
.slot-day:hover { border-color: var(--grey-mid); }
.slot-day.is-sel { background: var(--ink); color: var(--white); border-color: var(--ink); }
.slot-day .sd-dow { display: block; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.slot-day .sd-num { display: block; font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; }
.slot-day .sd-mon { display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.slot-times { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-hint { color: var(--grey-mid); font-size: .9rem; }
.slot { border: 1px solid var(--line); border-radius: 5px; background: var(--white); cursor: pointer; padding: 10px 18px;
  font-size: .9rem; transition: border-color .18s, background .18s, color .18s; }
.slot:hover { border-color: var(--grey-mid); }
.slot.is-sel { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* sample chips (designer strike-offs, multi-select) */
.samples-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sample-chip { position: relative; border: 1px solid var(--line); border-radius: 6px; background: var(--white); cursor: pointer;
  padding: 12px; text-align: left; transition: border-color .18s, transform .18s; }
.sample-chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.sample-chip.is-sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sample-chip.is-out { opacity: .45; cursor: not-allowed; }
.sample-chip.is-out:hover { border-color: var(--line); transform: none; }
.swatch { display: block; width: 100%; aspect-ratio: 3/2; border-radius: 3px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,.06); }
.sample-chip .sc-name { display: block; font-size: .82rem; color: var(--ink); }
.sample-chip .sc-stock { display: block; font-size: .68rem; color: var(--grey-mid); margin-top: 2px; }
.sample-chip.is-out .sc-stock { color: var(--coral); }
.sample-chip__tick { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--white);
  font-size: .7rem; line-height: 18px; text-align: center; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s; }
.sample-chip.is-sel .sample-chip__tick { opacity: 1; transform: scale(1); }
@media (max-width: 640px) { .samples-grid { grid-template-columns: 1fr 1fr; } }

/* quick-select chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.chip { border: 1px solid var(--line); border-radius: 100px; background: var(--white); cursor: pointer;
  padding: 9px 17px; font-size: .85rem; color: var(--ink); transition: border-color .16s, background .16s, color .16s; }
.chip:hover { border-color: var(--grey-mid); }
.chip.is-sel { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* skip + send-now (light secondary actions) */
.wz-skip { background: none; border: 0; cursor: pointer; color: var(--grey-mid); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.wz-skip:hover { color: var(--ink); }
.wz-sendnow { display: inline-block; margin-top: 20px; background: none; border: 0; cursor: pointer;
  color: var(--grey-mid); font-size: .88rem; border-bottom: 1px solid var(--line); padding: 0 0 1px; transition: color .2s, border-color .2s; }
.wz-sendnow:hover { color: var(--ink); border-color: var(--ink); }

/* gentle validation */
input.field-bad, textarea.field-bad { border-color: #b56b50; }

/* confirmations */
.wz-done__lead { margin-top: 18px; font-size: 1.05rem; line-height: 1.6; color: var(--grey-mid); max-width: 46ch; }

/* ---- v14 · smoother enquire wizard ---- */
.wz-modes { display: flex; gap: 8px; margin: 2px 0 20px; }
.wz-mode { flex: 1; padding: 13px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-mid); cursor: pointer; transition: all .25s var(--ease); }
.wz-mode:hover { border-color: var(--ink); color: var(--ink); }
.wz-mode.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.wz-modepane { animation: wzIn .4s var(--ease) both; }
.wz-opt { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.wz-opt-h { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.wz-opt-h .opt { color: var(--grey-mid); text-transform: none; letter-spacing: .02em; }

/* ---- v18 · variation carousel below the main product image ---- */
.media-caro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; justify-content: safe center; }
.media-caro::-webkit-scrollbar { display: none; }
.media-caro__th { flex: 0 0 auto; width: clamp(72px, 8vw, 104px); border: 1px solid var(--line); border-radius: 4px; padding: 0; overflow: hidden; opacity: .65; transition: opacity .3s var(--ease), border-color .3s var(--ease); }
.media-caro__th img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.media-caro__th:hover { opacity: 1; }
.media-caro__th.is-on { opacity: 1; border-color: var(--ink); }
.product__media > img { max-height: min(76vh, 860px); }

/* ---- v22 · single-check sample request ---- */
.wz-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .95rem; padding: 4px 0 14px; }
.wz-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); cursor: pointer; display: grid; place-content: center; transition: all .2s var(--ease); flex: 0 0 auto; }
.wz-check input:hover { border-color: var(--ink); }
.wz-check input:checked { background: var(--ink); border-color: var(--ink); }
.wz-check input:checked::before { content: "✓"; color: var(--white); font-size: .72rem; line-height: 1; }