/* ==========================================================================
   چوب روسی — Design System  v2  "Timber Exchange"
   Industrial editorial · bone paper · deep pine · sienna · hairline rules
   ==========================================================================
   @import must precede every other rule or browsers drop it, so the type
   loads first. Persian faces are self-hosted from assets/fonts.            */

@import url('../fonts/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---------- Paper & ink ---------- */
  --bone:#F5F2EA;
  --bone-2:#EDE8DC;
  --bone-3:#E3DDCC;
  --paper:#FFFFFF;
  --rule:#D7D1C0;
  --rule-2:#E7E2D4;

  --ink:#15140F;
  --graphite:#31332A;
  --slate:#565949;
  --mute:#87897A;
  --faint:#A9AB99;

  /* ---------- Forest (dark surfaces) ---------- */
  --pine-900:#15251C;
  --pine-800:#1D3227;
  --pine-700:#264334;
  --pine:#2C5740;
  --pine-100:#E0EAE1;

  /* ---------- Sienna (accent) ---------- */
  --sienna:#B4531F;
  --sienna-600:#9B4517;
  --sienna-700:#7C360F;
  --sienna-100:#F8E7DA;
  --sienna-50:#FCF4EC;

  /* ---------- Signals ---------- */
  --brass:#BE8F2E;
  --moss:#4A7C59;
  --clay:#A93B2C;
  --azure:#2E5C86;

  /* ---------- Legacy aliases (keep 20 pages of inline vars working) ---------- */
  --bark:var(--pine-800);
  --umber:var(--slate);
  --stone:var(--mute);
  --sand:var(--faint);
  --line:var(--rule);
  --line-2:var(--rule-2);
  --cream:var(--bone);
  --cream-2:var(--bone-2);
  --surface:var(--paper);
  --brand:var(--sienna);
  --brand-600:var(--sienna-600);
  --brand-700:var(--sienna-700);
  --brand-100:var(--sienna-100);
  --brand-50:var(--sienna-50);
  --honey:var(--brass);
  --moss-100:var(--pine-100);
  --clay-100:#F7E3DF;
  --info:var(--azure);
  --info-100:#E3EDF6;

  /* ---------- Geometry: sharp, engineered ---------- */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:10px; --r-2xl:14px;

  /* ---------- Elevation: layered + directional, never a soft blob ---------- */
  --sh-xs:0 1px 0 rgba(21,20,15,.045), 0 1px 2px rgba(21,20,15,.05);
  --sh-sm:0 1px 0 rgba(21,20,15,.035), 0 2px 4px -1px rgba(21,20,15,.06), 0 4px 10px -4px rgba(21,20,15,.06);
  --sh-md:0 1px 0 rgba(21,20,15,.04), 0 3px 6px -2px rgba(21,20,15,.07), 0 10px 22px -8px rgba(21,20,15,.12);
  --sh-lg:0 2px 4px -2px rgba(21,20,15,.08), 0 12px 26px -10px rgba(21,20,15,.14), 0 28px 56px -24px rgba(21,20,15,.20);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.6);
  --sh-brand:0 1px 0 rgba(0,0,0,.10), 0 3px 8px -2px rgba(180,83,31,.38);

  /* ---------- Type ----------
     IRANYekan carries UI and body copy; Dana is the display face for
     headlines and figures; Plex Mono handles codes, SKUs and Latin labels. */
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --sans:'IRANYekan','Dana',Tahoma,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Dana','IRANYekan',Tahoma,system-ui,-apple-system,sans-serif;

  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);
  background:var(--bone);color:var(--ink);
  font-size:15px;font-weight:400;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.display{font-family:var(--display)}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.42;letter-spacing:-.018em}
h1,.display{font-weight:900;letter-spacing:-.035em;line-height:1.28}
.stat-num,.price,.board-val{font-family:var(--display)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--sienna);color:#fff}
:focus-visible{outline:2px solid var(--sienna);outline-offset:2px}

/* Mono numerals / codes */
.mono,.fa-num{font-variant-numeric:tabular-nums}
.code{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;font-weight:500}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bone-2)}
::-webkit-scrollbar-thumb{background:#C6BFAC;border:3px solid var(--bone-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}

/* ==========================================================================
   Tailwind de-blob — sharpen every utility radius, kill decorative glow blobs
   (loaded after the CDN, so !important is required)
   ========================================================================== */
.rounded-3xl,.rounded-2xl{border-radius:var(--r-lg)!important}
.rounded-xl,.rounded-lg{border-radius:var(--r-md)!important}
.rounded-md,.rounded{border-radius:var(--r-sm)!important}
[class*="rounded-["]{border-radius:var(--r-xl)!important}
.blur-3xl,.blur-2xl{display:none!important}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:24px}
@media(max-width:640px){.wrap{padding-inline:16px}}
.section{padding-block:84px}
@media(max-width:768px){.section{padding-block:52px}}
@media(max-width:640px){.section{padding-block:40px}}

/* A grid child keeps min-width:auto by default, so a single wide table inside a
   column pushes the whole track — and with it the document — past the viewport.
   Letting tracks shrink is what makes the inner .overflow-x-auto actually scroll.
   Anything that must hold its size already carries flex-none or an explicit width. */
.grid>*{min-width:0}
/* Belt and braces: clip (not hidden) so position:sticky keeps working. */
html{overflow-x:clip}

.rule-t{border-top:1px solid var(--rule)}
.rule-b{border-bottom:1px solid var(--rule)}
.rule-s{border-inline-start:1px solid var(--rule)}
hr.rule{height:1px;background:var(--rule);border:0;margin:0}

/* Technical grid — replaces the gradient-glow cliché */
.blueprint{
  background-image:
    linear-gradient(var(--rule-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:30px 30px;
}
.blueprint-fade{
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 70% 0%,#000 20%,transparent 78%);
}

/* ==========================================================================
   Texture — noise + real timber
   ========================================================================== */
.grain{position:relative}
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.42;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---- Timber plate: real photographed species, shot flat for spec sheets ----
   Same markup as before (<span class="woodswatch ws-nerad">), now photographic.
   url() resolves from this stylesheet, so it works from /dashboard/ too.        */
.woodswatch{
  /* display:block is essential — these are <span>s, and width/height
     are ignored on non-replaced inline elements */
  display:block;position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;
  background-color:var(--bone-3);
  background-image:var(--w);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* a whisper of depth so plates sit on the paper instead of floating.
   Kept low so pale species (ساسنا / چهارتراش) don't wash out.            */
.woodswatch::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(255,250,240,.05) 0%,transparent 46%,rgba(30,18,6,.11) 100%);
}
/* Same species repeats many times on one page — nudge the visible region so
   two cards of the same timber never look like the identical crop.        */
.woodswatch[data-v="1"]{background-position:18% 30%}
.woodswatch[data-v="2"]{background-position:72% 22%}
.woodswatch[data-v="3"]{background-position:40% 78%}
.woodswatch[data-v="4"]{background-position:86% 62%}
.woodswatch[data-v="5"]{background-position:8% 66%}
.woodswatch[data-v="6"]{background-position:58% 45%}
.woodswatch[data-v="7"]{background-position:30% 12%}
.woodswatch[data-v="8"]{background-position:78% 88%}
.woodswatch[data-v="2"],.woodswatch[data-v="5"]{background-size:118% auto}
.woodswatch[data-v="3"],.woodswatch[data-v="6"]{background-size:132% auto}
.woodswatch[data-v="7"]{background-size:145% auto}
.woodswatch[data-v="8"]{background-size:124% auto}
/* species */
.ws-nerad {--w:url(../img/wood/nerad.jpg)}
.ws-sasna {--w:url(../img/wood/sasna.jpg)}
.ws-yolka {--w:url(../img/wood/yolka.jpg)}
.ws-thermo{--w:url(../img/wood/thermo.jpg)}
.ws-lumber{--w:url(../img/wood/lumber.jpg)}
.ws-carved{--w:url(../img/wood/carved.jpg)}

/* portrait crops for tall category panels */
.ws-tall.ws-nerad {--w:url(../img/wood/nerad-tall.jpg)}
.ws-tall.ws-sasna {--w:url(../img/wood/sasna-tall.jpg)}
.ws-tall.ws-yolka {--w:url(../img/wood/yolka-tall.jpg)}
.ws-tall.ws-thermo{--w:url(../img/wood/thermo-tall.jpg)}
.ws-tall.ws-lumber{--w:url(../img/wood/lumber-tall.jpg)}
.ws-tall.ws-carved{--w:url(../img/wood/carved-tall.jpg)}

/* scenes + studio plates */
.ws-rack {--w:url(../img/scene/rack.jpg)}
.ws-grade{--w:url(../img/scene/grade.jpg)}
.ws-hero {--w:url(../img/hero.jpg);background-position:68% center}
.ws-yard {--w:url(../img/hero-yard.jpg)}
.ws-species{--w:url(../img/species.jpg)}
.ws-strip {--w:url(../img/species-strip.jpg)}


/* studio product shots — one per category */
.ws-p-alvar {--w:url(../img/product/alvar.jpg)}
.ws-p-thermo{--w:url(../img/product/thermo.jpg)}
.ws-p-lambe {--w:url(../img/product/lambe.jpg)}
.ws-p-posts {--w:url(../img/product/posts.jpg)}
.ws-p-board {--w:url(../img/product/board.jpg)}

/* application scenes — the timber installed in real projects */
.ws-a-terrace{--w:url(../img/app/terrace.jpg)}
.ws-a-ceiling{--w:url(../img/app/ceiling.jpg)}
.ws-a-facade {--w:url(../img/app/facade.jpg)}
.ws-a-pergola{--w:url(../img/app/pergola.jpg)}

/* operations — proof the trade is real */
.ws-o-kiln   {--w:url(../img/ops/kiln.jpg)}
.ws-o-qc     {--w:url(../img/ops/qc.jpg)}
.ws-o-loading{--w:url(../img/ops/loading.jpg)}

/* studio shots are lit on a pale sweep — no darkening wash over them */
.ws-p-alvar::after,.ws-p-thermo::after,.ws-p-lambe::after,
.ws-p-posts::after,.ws-p-board::after{background:none}

/* slow drift for large decorative plates */
.ws-pan{transition:transform 1.2s cubic-bezier(.22,.8,.3,1)}
.ws-pan:hover{transform:scale(1.04)}

/* ==========================================================================
   Decorative motifs
   ========================================================================== */
/* registration / crop marks */
.ticks{position:relative}
.ticks::before,.ticks::after{
  content:'';position:absolute;width:11px;height:11px;pointer-events:none;z-index:3;
  border:1px solid var(--brass);opacity:.5;
}
.ticks::before{top:9px;right:9px;border-left:0;border-bottom:0}
.ticks::after{bottom:9px;left:9px;border-right:0;border-top:0}

/* section index number, sits in the margin */
.idx{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--faint)}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.73rem;font-weight:800;letter-spacing:.12em;color:var(--sienna);
}
.kicker::before{content:'';width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:none}

/* wax-seal style stamp */
.stamp{
  display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  border:1px solid var(--brass);color:var(--brass);text-align:center;
  font-size:.6rem;font-weight:800;line-height:1.5;letter-spacing:.06em;
  transform:rotate(-11deg);position:relative;
}
.stamp::before{content:'';position:absolute;inset:5px;border:1px dashed currentColor;border-radius:50%;opacity:.5}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.35rem;border-radius:var(--r-md);border:1px solid transparent;
  font-weight:700;font-size:.875rem;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s,box-shadow .18s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{background:var(--sienna);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--sienna-600);box-shadow:0 1px 0 rgba(0,0,0,.12),0 6px 16px -4px rgba(180,83,31,.5)}

.btn-ink{background:var(--pine-900);color:#F2EFE5;box-shadow:0 1px 0 rgba(0,0,0,.14),0 3px 8px -2px rgba(21,37,28,.4)}
.btn-ink:hover{background:var(--pine-800)}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}

.btn-soft{background:var(--sienna-100);color:var(--sienna-700)}
.btn-soft:hover{background:var(--sienna);color:#fff}

.btn-ghost{background:transparent;color:var(--slate)}
.btn-ghost:hover{background:var(--bone-2);color:var(--ink)}

.btn-white{background:var(--paper);color:var(--ink);box-shadow:var(--sh-sm);border-color:var(--rule)}
.btn-white:hover{border-color:var(--ink)}

.btn-sm{padding:.44rem .85rem;font-size:.79rem}
.btn-sm svg{width:14px;height:14px}
.btn-lg{padding:.92rem 1.9rem;font-size:.95rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

.icon-btn{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;color:var(--slate);cursor:pointer;
  transition:.16s;position:relative;
}
.icon-btn:hover{background:var(--bone-2);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}

/* ==========================================================================
   Badges / chips
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border-radius:var(--r-xs);
  font-size:.685rem;font-weight:700;line-height:1.75;letter-spacing:-.005em;
}
.badge-brand{background:var(--sienna-100);color:var(--sienna-700)}
.badge-moss{background:var(--pine-100);color:var(--pine)}
.badge-clay{background:var(--clay-100);color:var(--clay)}
.badge-info{background:var(--info-100);color:var(--azure)}
.badge-ink{background:var(--pine-900);color:#EFEBE0}
.badge-line{background:transparent;color:var(--mute);box-shadow:inset 0 0 0 1px var(--rule)}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.44rem .9rem;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--rule);font-size:.8rem;font-weight:700;color:var(--slate);
  cursor:pointer;transition:.16s;white-space:nowrap;
}
.chip:hover{border-color:var(--graphite);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.card-pad{padding:24px}
.card-flat{box-shadow:none}

/* ---------- Product card ---------- */
.pcard{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .24s,transform .24s cubic-bezier(.22,.8,.3,1);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--graphite)}

.pcard-fig{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:var(--bone-2);
  border-bottom:1px solid var(--rule)}
.pcard-fig .woodswatch{transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.pcard:hover .pcard-fig .woodswatch{transform:scale(1.05)}

.pcard-tags{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pcard-code{
  position:absolute;bottom:10px;right:10px;z-index:3;
  font-family:var(--mono);font-size:.63rem;font-weight:500;letter-spacing:.06em;
  color:#F3EEE2;background:rgba(21,37,28,.72);padding:2px 7px;border-radius:var(--r-xs);
  backdrop-filter:blur(4px);
}
.pcard-wish{
  position:absolute;top:10px;left:10px;z-index:4;width:30px;height:30px;display:grid;place-items:center;
  background:rgba(255,255,255,.9);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--slate);cursor:pointer;opacity:0;transform:translateY(-4px);transition:.2s;
}
.pcard:hover .pcard-wish{opacity:1;transform:none}
.pcard-wish:hover{color:var(--clay);border-color:var(--clay)}
.pcard-wish svg{width:15px;height:15px}
@media(hover:none){.pcard-wish{opacity:1;transform:none}}

.pcard-in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard-cat{font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--sienna)}
.pcard-title{
  font-size:.895rem;font-weight:700;line-height:1.7;color:var(--ink);letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.05em;
  transition:color .16s;
}
.pcard:hover .pcard-title{color:var(--sienna-700)}
.pcard-spec{
  font-family:var(--mono);font-size:.66rem;font-weight:500;color:var(--mute);letter-spacing:.02em;
  padding-top:8px;border-top:1px solid var(--rule-2);display:flex;align-items:center;gap:6px;
}
.pcard-spec i{width:4px;height:4px;background:var(--faint);display:inline-block;flex:none}
.pcard-foot{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pcard-unit{display:block;font-size:.66rem;color:var(--mute);margin-bottom:1px}

.price{font-weight:800;font-size:1.06rem;color:var(--ink);letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.price small{font-size:.66rem;font-weight:600;color:var(--mute);margin-inline-start:3px;letter-spacing:0}
.price-old{font-size:.75rem;color:var(--faint);text-decoration:line-through;font-weight:500}

.add-btn{
  width:34px;height:34px;display:grid;place-items:center;flex:none;
  background:var(--ink);color:var(--bone);border:0;border-radius:var(--r-sm);cursor:pointer;
  transition:background .16s,transform .12s;
}
.add-btn:hover{background:var(--sienna)}
.add-btn:active{transform:scale(.94)}
.add-btn svg{width:16px;height:16px}

/* ==========================================================================
   Price board — the signature component
   ========================================================================== */
.board{background:var(--pine-900);color:#E6E2D6;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lg);border:1px solid var(--pine-700)}
.board-hd{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.board-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.14em;color:#8FBF9E}
.board-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#5FA873;
  box-shadow:0 0 0 0 rgba(95,168,115,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(95,168,115,0)}100%{box-shadow:0 0 0 0 rgba(95,168,115,0)}}

.board-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .16s}
.board-row:last-child{border-bottom:0}
.board-row:hover{background:rgba(255,255,255,.045)}
.board-name{font-size:.79rem;font-weight:600;color:#DAD5C7;letter-spacing:-.01em}
.board-sub{font-family:var(--mono);font-size:.63rem;color:#7E8878;letter-spacing:.04em}
.board-val{font-size:.85rem;font-weight:700;color:#F2EEE2;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.board-chg{font-family:var(--mono);font-size:.68rem;font-weight:500;min-width:52px;text-align:left}
.up{color:#7FBC91}.dn{color:#D9887A}.flat{color:#7E8878}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:.38rem}
.label{font-size:.775rem;font-weight:700;color:var(--slate);letter-spacing:-.008em}
.input,.select,.textarea{
  width:100%;padding:.66rem .85rem;border-radius:var(--r-md);
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  transition:border-color .16s,box-shadow .16s;outline:none;font-size:.86rem;
  box-shadow:var(--sh-in);
}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--sienna);box-shadow:0 0 0 3px var(--sienna-50)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2387897A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left .85rem center;padding-left:2.2rem}
.textarea{resize:vertical;min-height:104px;line-height:1.9}
.hint{font-size:.71rem;color:var(--mute)}

.qty{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--paper);overflow:hidden;box-shadow:var(--sh-in)}
.qty button{width:32px;height:34px;border:0;background:transparent;cursor:pointer;color:var(--slate);
  font-size:1rem;font-weight:700;transition:.14s}
.qty button:hover{background:var(--bone-2);color:var(--sienna)}
.qty input{width:40px;height:34px;border:0;text-align:center;font-weight:700;background:transparent;
  outline:none;font-size:.85rem;font-variant-numeric:tabular-nums}

.switch{position:relative;display:inline-block;width:40px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--bone-3);border-radius:99px;cursor:pointer;transition:.22s}
.switch span::before{content:'';position:absolute;height:16px;width:16px;right:3px;top:3px;background:#fff;
  border-radius:50%;transition:.22s;box-shadow:var(--sh-xs)}
.switch input:checked + span{background:var(--pine)}
.switch input:checked + span::before{transform:translateX(-18px)}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{background:var(--pine-900);color:#B6BCAC;font-size:.745rem;letter-spacing:-.005em}
.topbar a{transition:color .16s}
.topbar a:hover{color:var(--brass)}

.site-header{position:sticky;top:0;z-index:60;background:rgba(245,242,234,.9);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:.24s}
.site-header.is-stuck{background:rgba(255,255,255,.95);border-bottom-color:var(--rule);
  box-shadow:0 1px 0 rgba(21,20,15,.03),0 6px 18px -12px rgba(21,20,15,.3)}

.navlink{position:relative;padding:.4rem 0;font-size:.86rem;font-weight:700;color:var(--slate);
  letter-spacing:-.012em;transition:color .16s}
.navlink::after{content:'';position:absolute;bottom:-2px;right:0;height:2px;width:0;background:var(--sienna);
  transition:width .26s cubic-bezier(.22,.8,.3,1)}
.navlink:hover{color:var(--ink)}
.navlink:hover::after,.navlink.is-active::after{width:100%}
.navlink.is-active{color:var(--sienna)}

.cart-dot{position:absolute;top:2px;left:2px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-xs);
  background:var(--sienna);color:#fff;font-size:.63rem;font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bone)}

/* Mega menu */
.has-mega{position:relative}
.mega{
  position:absolute;top:calc(100% + 15px);right:-24px;width:min(740px,92vw);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:70;
}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--r-md);transition:background .16s}
.mega-item:hover{background:var(--bone)}
.mega-thumb{width:50px;height:50px;border-radius:var(--r-sm);overflow:hidden;flex:none;border:1px solid var(--rule)}

/* ==========================================================================
   Drawer / Modal / Toast
   ========================================================================== */
.overlay{position:fixed;inset:0;background:rgba(21,37,28,.55);backdrop-filter:blur(2px);z-index:90;
  opacity:0;visibility:hidden;transition:.26s}
.overlay.is-open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;left:0;height:100dvh;width:min(410px,100vw);background:var(--bone);
  z-index:100;display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .36s cubic-bezier(.3,.9,.3,1);box-shadow:var(--sh-lg);
}
.drawer.is-open{transform:translateX(0)}
.drawer-right{left:auto;right:0;transform:translateX(100%)}
.drawer-right.is-open{transform:translateX(0)}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;align-items:center;
  justify-content:space-between;background:var(--paper)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px}
.drawer-foot{padding:18px 20px;border-top:1px solid var(--rule);background:var(--paper)}

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:.24s}
.modal.is-open{opacity:1;visibility:visible}
.modal-box{background:var(--bone);border-radius:var(--r-lg);width:min(880px,100%);max-height:90dvh;
  overflow-y:auto;box-shadow:var(--sh-lg);border:1px solid var(--rule);
  transform:scale(.98) translateY(8px);transition:transform .26s cubic-bezier(.22,.8,.3,1)}
.modal.is-open .modal-box{transform:none}

#toaster{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{
  display:flex;align-items:center;gap:11px;background:var(--pine-900);color:#F0ECE1;
  padding:11px 16px;border-radius:var(--r-md);box-shadow:var(--sh-lg);font-size:.82rem;font-weight:600;
  border:1px solid var(--pine-700);animation:toastIn .32s cubic-bezier(.22,.9,.3,1);max-width:340px;
}
.toast .ic{width:22px;height:22px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.12)}
.toast .ic svg{width:13px;height:13px}
.toast.ok .ic{background:var(--moss)}
.toast.err .ic{background:var(--clay)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .26s forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(-16px)}}

/* ==========================================================================
   Editorial components
   ========================================================================== */
.marquee{display:flex;overflow:hidden;user-select:none}
.marquee-track{display:flex;gap:3rem;flex:none;min-width:100%;animation:scrollX 34s linear infinite;
  padding-inline-start:3rem}
@keyframes scrollX{to{transform:translateX(100%)}}

.stat-num{font-size:2.5rem;font-weight:900;letter-spacing:-.045em;line-height:1.1;
  font-variant-numeric:tabular-nums}

.accordion-body{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,.8,.3,1)}

/* numbered editorial list */
.enum-item{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 0;
  border-top:1px solid var(--rule);transition:background .2s}
.enum-item:last-child{border-bottom:1px solid var(--rule)}
.enum-n{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--sienna);
  letter-spacing:.1em;padding-top:5px}

.step-dot{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-weight:700;font-size:.78rem;background:var(--paper);color:var(--faint);
  border:1px solid var(--rule);flex:none;transition:.24s;font-variant-numeric:tabular-nums}
.step.is-done .step-dot{background:var(--pine);border-color:var(--pine);color:#fff}
.step.is-active .step-dot{background:var(--sienna);border-color:var(--sienna);color:#fff;
  box-shadow:0 0 0 3px var(--sienna-50)}
.step.is-active .step-label,.step.is-done .step-label{color:var(--ink)}
.step-label{font-size:.79rem;font-weight:700;color:var(--faint)}

.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.83rem}
.table th{text-align:right;font-weight:700;color:var(--mute);font-size:.71rem;letter-spacing:.03em;
  padding:11px 14px;background:var(--bone);border-bottom:1px solid var(--rule);white-space:nowrap}
.table td{padding:13px 14px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.table tbody tr{transition:background .14s}
.table tbody tr:hover{background:var(--sienna-50)}
.table tbody tr:last-child td{border-bottom:0}

.skeleton{background:linear-gradient(90deg,var(--bone-2) 25%,var(--bone-3) 50%,var(--bone-2) 75%);
  background-size:200% 100%;animation:shim 1.4s infinite}
@keyframes shim{to{background-position:-200% 0}}

.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1)}

.no-scroll{overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dash-body{background:var(--bone)}
.dash-side{
  position:fixed;top:0;right:0;width:250px;height:100dvh;background:var(--pine-900);color:#AFB6A5;
  display:flex;flex-direction:column;z-index:95;border-left:1px solid var(--pine-700);
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.dash-main{margin-right:250px;min-height:100dvh;display:flex;flex-direction:column}
@media(max-width:1024px){
  .dash-side{transform:translateX(100%)}
  .dash-side.is-open{transform:translateX(0)}
  .dash-main{margin-right:0}
}
.dnav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);
  font-size:.825rem;font-weight:600;color:#9BA391;transition:.16s;position:relative}
.dnav svg{width:18px;height:18px;flex:none}
.dnav:hover{background:rgba(255,255,255,.055);color:#F0ECE1}
.dnav.is-active{background:var(--sienna);color:#fff;box-shadow:var(--sh-brand)}
.dnav-group{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.16em;
  color:#5E6857;padding:18px 12px 7px}

.kpi{background:var(--paper);border-radius:var(--r-lg);padding:20px;border:1px solid var(--rule);
  position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.kpi:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--graphite)}
.kpi-ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center}
.kpi-ic svg{width:19px;height:19px}
.kpi-k{font-size:.79rem;line-height:1.7}
.kpi-v{font-size:1.35rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* two KPIs to a row on a phone, so the figure has to give up some size */
@media(max-width:640px){
  .kpi{padding:14px}
  .kpi-ic{width:30px;height:30px;border-radius:var(--r-sm)}
  .kpi-ic svg{width:16px;height:16px}
  .kpi-k{font-size:.71rem}
  .kpi-v{font-size:1rem}
  .kpi .badge{font-size:.62rem;padding:.15rem .35rem}
}

.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero{position:relative;isolation:isolate;background:var(--pine-900);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-img{position:absolute;inset:0;background:url(../img/hero-yard.jpg) center 42%/cover no-repeat;
  transform:scale(1.02);animation:heroIn 1.6s cubic-bezier(.2,.8,.3,1) both}
@keyframes heroIn{from{transform:scale(1.09);opacity:.5}to{transform:scale(1.02);opacity:1}}
/* scrim: heavy where the Persian text starts (right), clearing toward the light door */
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(270deg,rgba(10,18,13,.94) 0%,rgba(10,18,13,.82) 26%,rgba(10,18,13,.42) 54%,rgba(10,18,13,.22) 100%),
    linear-gradient(to top,rgba(10,18,13,.9) 0%,transparent 42%)}
.hero-inner{position:relative;display:flex;align-items:center;
  min-height:clamp(560px,78vh,780px);padding-block:clamp(56px,9vh,104px) 128px}
.hero-copy{max-width:620px}
.hero-h1{font-size:clamp(2.15rem,5.2vw,3.75rem);line-height:1.2;color:#F6F3EA;margin-bottom:1.4rem;
  text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-sub{font-size:clamp(.92rem,1.35vw,1.02rem);line-height:2.05;color:#B9C0AF;max-width:34rem;margin-bottom:2rem}
.hero-ghost{background:transparent;color:#F2EFE5;border-color:rgba(255,255,255,.26)}
.hero-ghost:hover{background:#F2EFE5;color:var(--pine-900);border-color:#F2EFE5}

.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:29rem;
  border-top:1px solid rgba(255,255,255,.16)}
.hero-stat{padding:1.1rem .9rem 0}
.hero-stat + .hero-stat{border-inline-start:1px solid rgba(255,255,255,.16)}
.hero-stat-n{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:900;
  letter-spacing:-.04em;line-height:1.15;color:var(--brass)}
.hero-stat-l{font-size:.74rem;font-weight:600;color:#8E9887;margin-top:.2rem}

/* live rate ticker pinned to the foot of the hero */
.rate-strip{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:11px 0;
  background:rgba(9,16,12,.72);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
.rate-item{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;flex:none;transition:opacity .16s}
.rate-item:hover{opacity:.7}
.rate-name{font-size:.76rem;font-weight:600;color:#AEB6A5}
.rate-val{font-size:.82rem;font-weight:700;color:#F0ECE1;font-variant-numeric:tabular-nums}
.rate-chg{font-family:var(--mono);font-size:.68rem}
.rate-sep{width:1px;height:16px;background:rgba(255,255,255,.14);flex:none}

/* ==========================================================================
   Home — section headers & category cards
   ========================================================================== */
.sec-idx{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.sec-rule{width:32px;height:1px;background:var(--rule);flex:none}
.sec-h2{font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.3}

.cat-card{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--graphite)}
/* the studio sweep continues as the tile ground, so the whole bundle is visible —
   contained, never cropped, the way a product listing should read */
.cat-fig{position:relative;aspect-ratio:4/3;background:#E8E5DE;overflow:hidden;
  border-bottom:1px solid var(--rule)}
.cat-img{position:absolute;inset:0;background-size:contain;background-color:#E8E5DE;
  transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.cat-card:hover .cat-img{transform:scale(1.045)}
.cat-num{position:absolute;top:9px;inset-inline-start:11px;z-index:2}
.cat-ico{position:absolute;top:8px;inset-inline-end:8px;z-index:2;display:grid;place-items:center;
  width:28px;height:28px;border-radius:var(--r-sm);background:rgba(255,255,255,.82);
  color:var(--sienna);backdrop-filter:blur(4px)}
.cat-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.cat-name{display:block;font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:-.02em;color:var(--ink)}
.cat-card:hover .cat-name{color:var(--sienna-700)}
.cat-desc{display:block;font-size:.76rem;line-height:1.7;color:var(--slate)}
.cat-foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--rule-2);
  display:flex;align-items:center;justify-content:space-between;
  font-size:.73rem;font-weight:700;color:var(--mute)}
.cat-go{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-xs);
  background:var(--sienna);color:#fff;transition:transform .24s}
.cat-card:hover .cat-go{transform:translateX(-3px)}

/* ==========================================================================
   Home — trust bar (replaces the scrolling marquee: calmer, more credible)
   ========================================================================== */
.trustbar{display:grid;grid-template-columns:repeat(2,1fr);background:var(--paper)}
@media(min-width:900px){.trustbar{grid-template-columns:repeat(4,1fr)}}
.trust-cell{display:flex;align-items:flex-start;gap:12px;padding:22px 24px;
  border-inline-start:1px solid var(--rule);border-top:1px solid var(--rule)}
.trust-cell:first-child{border-inline-start:0}
@media(min-width:900px){.trust-cell{border-top:0}}
@media(max-width:899px){.trust-cell:nth-child(odd){border-inline-start:0}}
.trust-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--r-md);
  background:var(--sienna-50);color:var(--sienna)}
.trust-t{display:block;font-size:.86rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.15rem}
.trust-d{display:block;font-size:.75rem;line-height:1.7;color:var(--mute)}

/* ==========================================================================
   Home — applications gallery & operations strip
   ========================================================================== */
.app-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--graphite)}
.app-fig{position:relative;aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--rule)}
.app-fig .woodswatch{transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.app-card:hover .app-fig .woodswatch{transform:scale(1.05)}
.app-tag{position:absolute;top:10px;inset-inline-start:10px;z-index:3}
.app-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.app-title{display:block;font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:-.02em}
.app-desc{display:block;font-size:.78rem;line-height:1.75;color:var(--slate)}
.app-go{margin-top:auto;padding-top:11px;border-top:1px solid var(--rule-2);
  display:flex;align-items:center;justify-content:space-between;font-size:.76rem;font-weight:700;color:var(--sienna)}

.ops-fig{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;box-shadow:var(--sh-sm)}
.ops-fig .woodswatch{transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.ops-fig:hover .woodswatch{transform:scale(1.05)}
.ops-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,16,12,.9) 8%,rgba(9,16,12,.2) 52%,transparent)}
.ops-cap{position:absolute;inset-inline:0;bottom:0;padding:18px}
.ops-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--brass);display:block;margin-bottom:.35rem}
.ops-t{display:block;font-family:var(--display);font-weight:900;font-size:1.02rem;color:#F6F3EA;margin-bottom:.25rem}
.ops-d{display:block;font-size:.77rem;line-height:1.7;color:#AEB6A5}

/* ==========================================================================
   Utility furniture — skip link, sticky mobile bar, back to top
   ========================================================================== */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:300;padding:.7rem 1.2rem;
  background:var(--pine-900);color:#F2EFE5;border-radius:0 0 var(--r-md) 0;font-weight:700;font-size:.85rem}
.skip:focus{inset-inline-start:0}

.mbar{position:fixed;inset-inline:0;bottom:0;z-index:70;display:grid;grid-template-columns:auto 1fr 1fr;
  gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  box-shadow:0 -4px 20px -12px rgba(21,20,15,.4);transform:translateY(110%);transition:transform .3s cubic-bezier(.3,.9,.3,1)}
.mbar.is-up{transform:none}
@media(min-width:768px){.mbar{display:none}}
.mbar .btn{padding:.62rem .9rem;font-size:.82rem}

.totop{position:fixed;inset-inline-end:20px;bottom:20px;z-index:60;width:42px;height:42px;
  display:grid;place-items:center;border:1px solid var(--rule);border-radius:var(--r-md);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--slate);cursor:pointer;
  box-shadow:var(--sh-sm);opacity:0;visibility:hidden;transform:translateY(8px);transition:.24s}
.totop.is-up{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--sienna);border-color:var(--sienna)}
@media(max-width:767px){.totop{bottom:74px}}

/* ==========================================================================
   Data visualisation
   Categorical slots are brand hues snapped to steps that PASS the six checks
   on the bone surface (lightness band · chroma floor · CVD ΔE 8.5 · normal
   vision ΔE 18.8 · contrast ≥3:1). Assign in fixed order, never cycled.
   ========================================================================== */
:root{
  --viz-1:#B4531F;   /* sienna  — slot 1, the brand accent          */
  --viz-2:#46966A;   /* pine    — slot 2                            */
  --viz-3:#3178C6;   /* azure   — slot 3                            */
  --viz-4:#A8781E;   /* brass   — slot 4                            */
  --viz-grid:#E4DFD0;      /* one step off surface, hairline, solid */
  --viz-surface:#FFFFFF;
}

/* figures wear the text face, never the display face */
.viz, .viz-fig, .meter-val, .calc-out b{font-family:var(--sans);font-variant-numeric:tabular-nums}

.viz-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.viz-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding:20px 22px 0}
.viz-body{padding:14px 14px 20px}

/* segmented control — chart / table view */
.seg{display:inline-flex;padding:2px;background:var(--bone-2);border-radius:var(--r-md)}
.seg button{border:0;background:transparent;cursor:pointer;padding:.34rem .8rem;border-radius:var(--r-sm);
  font-family:var(--sans);font-size:.75rem;font-weight:700;color:var(--mute);transition:.16s}
.seg button.is-on{background:var(--paper);color:var(--ink);box-shadow:var(--sh-xs)}

/* legend — always present for two or more series */
.legend{display:flex;flex-wrap:wrap;gap:16px}
.legend-key{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--slate)}
.legend-key i{width:14px;height:3px;border-radius:2px;flex:none}
.legend-key.is-off{opacity:.38}

/* meter — a bar inside a table row. Grows from the inline-start baseline,
   4px rounded data-end, square at the baseline, capped thin.              */
.meter{height:6px;background:var(--rule-2);border-radius:2px;overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;background:var(--viz-1);
  border-start-end-radius:4px;border-end-end-radius:4px}
.meter-val{font-size:.76rem;font-weight:700;color:var(--slate);min-width:34px;text-align:start}

/* spec table — the comparison, and simultaneously the accessible table view */
.spec{width:100%;border-collapse:separate;border-spacing:0;font-size:.83rem}
.spec th{text-align:start;font-weight:700;color:var(--mute);font-size:.72rem;padding:10px 12px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.spec td{padding:12px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.spec tbody tr:last-child td{border-bottom:0}
.spec .sw{width:26px;height:26px;border-radius:var(--r-sm);flex:none;overflow:hidden;border:1px solid var(--rule)}

/* ---------------------------------------------------------------- calculator */
.calc{display:grid;gap:14px}
.calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:520px){.calc-grid{grid-template-columns:repeat(4,1fr)}}
.calc-f label{display:block;font-size:.72rem;font-weight:700;color:var(--mute);margin-bottom:5px}
.calc-f input,.calc-f select{width:100%;padding:.55rem .7rem;border:1px solid var(--rule);
  border-radius:var(--r-md);background:var(--paper);font-size:.86rem;font-weight:700;
  font-variant-numeric:tabular-nums;outline:none;transition:.16s;text-align:center}
.calc-f input:focus,.calc-f select:focus{border-color:var(--sienna);box-shadow:0 0 0 3px var(--sienna-50)}
.calc-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:16px 18px;
  border-radius:var(--r-md);background:var(--pine-900);color:#CBD3C4}
.calc-out .k{font-size:.74rem;color:#8E9887}
.calc-out b{display:block;font-size:1.15rem;color:#F2EFE5;letter-spacing:-.02em}
.calc-out .sep{width:1px;align-self:stretch;background:rgba(255,255,255,.12)}

/* ---------------------------------------------------------------- icon sprite */
.ico{width:22px;height:22px;flex:none;color:currentColor}
.ico-lg{width:30px;height:30px}
.ico-sm{width:17px;height:17px}
.ico-box{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);
  border:1px solid var(--rule);background:var(--paper);color:var(--sienna);flex:none}

/* ==========================================================================
   Product page — "the trade counter"
   A timber buyer does not browse, they specify: section, volume, coverage,
   freight. Every block below exists to answer one of those questions.
   ========================================================================== */

/* ---------- anchored section rail ---------- */
.pdp-nav{position:sticky;top:var(--header-h);z-index:44;background:rgba(245,242,234,.93);
  backdrop-filter:blur(10px);border-block:1px solid var(--rule)}
.pdp-nav-in{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.pdp-nav-in::-webkit-scrollbar{display:none}
.pdp-nav a{position:relative;padding:13px 1px;font-size:.795rem;font-weight:700;color:var(--mute);
  white-space:nowrap;transition:color .16s}
.pdp-nav a:hover{color:var(--ink)}
.pdp-nav a.is-on{color:var(--sienna)}
.pdp-nav a.is-on::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--sienna)}
.pdp-anchor{scroll-margin-top:calc(var(--header-h) + 54px)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px}
.gal-rail{display:flex;flex-direction:column;gap:8px}
.gal-th{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--bone-2);
  filter:saturate(.74) contrast(.97);transition:filter .18s,border-color .18s}
.gal-th:hover{filter:none}
.gal-th.is-on{border-color:var(--ink);box-shadow:0 0 0 2px var(--bone),0 0 0 3px var(--ink);filter:none}
.gal-th img{width:100%;height:100%;object-fit:cover}
.gal-th .woodswatch{width:100%;height:100%}
.gal-th-k{position:absolute;inset-inline:0;bottom:0;font-family:var(--mono);font-size:.53rem;
  letter-spacing:.05em;background:rgba(21,37,28,.74);color:#EDE8DC;padding:2px 0;text-align:center}

.gal-main{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bone-2);
  border:1px solid var(--rule);border-radius:var(--r-lg);cursor:zoom-in}
.gal-main>img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,.8,.3,1)}
.gal-main>.woodswatch{width:100%;height:100%}
.gal-main.is-zoom{cursor:zoom-out}
.gal-main.is-zoom>img{transform:scale(2.3);transition:none}
.gal-tags{position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.gal-note{position:absolute;bottom:0;inset-inline:0;z-index:2;padding:26px 14px 11px;font-size:.72rem;
  color:#DDD8CB;background:linear-gradient(to top,rgba(21,37,28,.86),transparent);
  display:flex;align-items:center;gap:8px;line-height:1.7}
.gal-note b{font-weight:700;color:#fff}
.gal-lens{position:absolute;top:12px;inset-inline-end:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:var(--r-sm);background:rgba(255,255,255,.9);font-family:var(--mono);
  font-size:.6rem;letter-spacing:.05em;color:var(--graphite);pointer-events:none}
.gal-lens svg{width:12px;height:12px}

@media(max-width:640px){
  .gal{grid-template-columns:minmax(0,1fr)}
  .gal-rail{flex-direction:row;order:2;overflow-x:auto;padding-bottom:2px}
  .gal-rail>*{width:62px;flex:none}
}

/* ---------- scale drawing ---------- */
.draw{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:16px 18px 12px}
.draw svg{width:100%;height:auto;display:block;overflow:visible}
.draw .dl{stroke:var(--faint);stroke-width:1;fill:none}
/* Dimension labels are anchored in drawing coordinates, so they need the
   LTR box rules the geometry was laid out with — inheriting dir="rtl" from
   the page flips every start/end anchor and pushes the labels into the
   geometry. Persian words inside a label still shape right-to-left. */
.draw .dt{fill:var(--slate);font-size:11px;font-family:'IBM Plex Mono',monospace;direction:ltr}
@media(max-width:1023px){.draw .dt{font-size:13px}}
/* Below 768px product.js draws a 360-unit sheet instead of a 700-unit one, so
   the text is already at its natural size — no scaling hack needed here. */
@media(max-width:767px){
  .draw{padding:14px 12px 10px}
  .draw .dt{font-size:11px}
  .draw-meta .idx:last-child{display:none}
}
.draw .dfill{fill:#C8A277;stroke:var(--graphite);stroke-width:1.2}
.draw .dend{fill:#AF8557;stroke:var(--graphite);stroke-width:1.2}
.draw .dring{stroke:#8C6743;stroke-width:.8;fill:none;opacity:.75}

/* ---------- key figures ---------- */
.eqs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.eq{background:var(--paper);padding:11px 13px;min-width:0}
.eq-k{display:block;font-size:.67rem;color:var(--mute);margin-bottom:2px}
.eq-v{display:block;font-family:var(--display);font-weight:800;font-size:.97rem;letter-spacing:-.028em;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-v small{font-size:.65rem;font-weight:600;color:var(--mute);margin-inline-start:3px}

/* ---------- buy box ---------- */
.buy{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.buy-hd{padding:13px 17px;background:var(--bone);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.buy-b{padding:17px}
.buy-price{font-family:var(--display);font-weight:900;font-size:1.72rem;letter-spacing:-.04em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.buy-price small{font-size:.66rem;font-weight:600;color:var(--mute);letter-spacing:0;margin-inline-start:4px}
.buy-foot{padding:13px 17px;background:var(--pine-900);color:#E6E2D6;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.buy-foot .k{font-size:.72rem;color:#8E9887}
.buy-foot b{font-family:var(--display);font-size:1.15rem;font-weight:800;color:#F6F3EA;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;padding:7px 0}
.buy-row + .buy-row{border-top:1px dashed var(--rule-2)}
.buy-row span{color:var(--slate)}
.buy-row b{font-variant-numeric:tabular-nums}

.gauge{height:5px;background:var(--bone-3);border-radius:2px;overflow:hidden;margin-top:7px}
.gauge i{display:block;height:100%;background:var(--moss);transition:width .3s}
.gauge.low i{background:var(--brass)}
.gauge.crit i{background:var(--clay)}

.qty-wide{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;border:1px solid var(--rule);
  border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.qty-wide button{border:0;background:var(--bone);cursor:pointer;font-size:1.05rem;color:var(--slate);
  line-height:1;transition:background .15s,color .15s}
.qty-wide button:hover{background:var(--bone-2);color:var(--sienna)}
.qty-wide button:disabled{opacity:.35;cursor:not-allowed}
.qty-wide input{border:0;text-align:center;font-weight:800;font-size:.95rem;background:transparent;
  padding:.55rem 0;font-variant-numeric:tabular-nums;min-width:0}
.qty-wide input:focus{outline:none;background:var(--sienna-50)}
.qpre{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.qpre button{border:1px solid var(--rule);background:transparent;border-radius:var(--r-sm);cursor:pointer;
  padding:.24rem .62rem;font-size:.72rem;font-weight:700;color:var(--slate);
  font-variant-numeric:tabular-nums;transition:.15s;font-family:inherit}
.qpre button:hover{border-color:var(--ink);color:var(--ink)}

/* wholesale ladder */
.tier{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 11px;
  border:1px solid var(--rule-2);border-radius:var(--r-sm);font-size:.76rem;transition:.16s}
.tier + .tier{margin-top:5px}
.tier.is-on{border-color:var(--sienna);background:var(--sienna-50);box-shadow:inset 2px 0 0 var(--sienna)}
.tier-q{font-family:var(--mono);font-size:.67rem;color:var(--mute);letter-spacing:.02em}
.tier.is-on .tier-q{color:var(--sienna-700)}
.tier-p{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tier-off{font-size:.68rem;font-weight:700;color:var(--moss)}

/* ---------- calculator ---------- */
.calcbox{background:var(--pine-900);border-radius:var(--r-lg);overflow:hidden;color:#E6E2D6}
.calcbox-hd{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.calcbox-b{padding:18px 20px}
.cf label{display:block;font-size:.71rem;font-weight:700;color:#8E9887;margin-bottom:5px}
.cf input,.cf select{width:100%;padding:.56rem .7rem;border:1px solid rgba(255,255,255,.17);
  border-radius:var(--r-sm);background:rgba(255,255,255,.06);color:#F2EFE5;font-size:.85rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.cf input:focus,.cf select:focus{outline:none;border-color:var(--brass);background:rgba(255,255,255,.11)}
.cf select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238E9887' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left .6rem center;padding-inline-start:2rem}
.cf select option{background:#15251C;color:#F2EFE5}
.calc-tabs{display:inline-flex;padding:2px;background:rgba(255,255,255,.07);border-radius:var(--r-md)}
.calc-tabs button{border:0;background:transparent;cursor:pointer;padding:.3rem .78rem;border-radius:var(--r-sm);
  font-size:.74rem;font-weight:700;color:#8E9887;font-family:inherit;transition:.16s}
.calc-tabs button.is-on{background:rgba(255,255,255,.14);color:#F6F3EA}
.calc-res{display:grid;gap:1px;background:rgba(255,255,255,.1);border-radius:var(--r-md);overflow:hidden;margin-top:16px}
.calc-res .c{background:#1D3227;padding:12px 14px;min-width:0}
.calc-res .c .k{font-size:.69rem;color:#8E9887;display:block;margin-bottom:2px}
.calc-res .c .v{font-family:var(--display);font-weight:800;font-size:1.04rem;color:#F6F3EA;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-res .c .v small{font-size:.64rem;font-weight:600;color:#8E9887;margin-inline-start:3px}
.calc-res .c.hi{background:var(--sienna)}
.calc-res .c.hi .k,.calc-res .c.hi .v small{color:rgba(255,255,255,.75)}
.calc-res .c.hi .v{color:#fff}

/* ---------- price history ---------- */
.hist svg{display:block;width:100%;height:auto;overflow:visible}
.hist .hg{stroke:var(--viz-grid);stroke-width:1}
.hist .hl{fill:none;stroke:var(--viz-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hist .ha{fill:var(--viz-1);opacity:.08}
.hist .hd{fill:var(--viz-1)}
.hist .hx{fill:var(--mute);font-size:9px}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem}
.cmp th{text-align:start;font-weight:700;color:var(--mute);font-size:.69rem;letter-spacing:.03em;
  padding:10px 11px;background:var(--bone);border-bottom:1px solid var(--rule);white-space:nowrap}
.cmp td{padding:11px;border-bottom:1px solid var(--rule-2);vertical-align:middle;white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:var(--bone)}
.cmp tr.is-this{background:var(--sienna-50)}
.cmp tr.is-this:hover{background:var(--sienna-100)}
.cmp tr.is-this td{font-weight:800}
.cmp .sw{width:30px;height:22px;border-radius:var(--r-xs);overflow:hidden;border:1px solid var(--rule);flex:none}

/* ---------- hairline fact list ---------- */
.facts>div{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:.82rem}
.facts>div:first-child{border-top:1px solid var(--rule-2)}
.facts dt{color:var(--mute);font-size:.78rem}
.facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.facts dd .sub{display:block;font-weight:400;font-size:.72rem;color:var(--mute);margin-top:2px;line-height:1.7}

/* ---------- trust rail ---------- */
.trust{display:grid;gap:1px;background:var(--rule)}
.trust>div{background:var(--bone);padding:17px 18px;display:flex;gap:12px;align-items:flex-start}
.trust b{display:block;font-size:.83rem;margin-bottom:3px}
.trust p{font-size:.735rem;color:var(--slate);line-height:1.8}
.trust svg{width:20px;height:20px;color:var(--sienna);flex:none;margin-top:2px}

/* ---------- reviews ---------- */
.rev{padding:18px 0;border-bottom:1px solid var(--rule-2)}
.rev:last-child{border-bottom:0}
.rev-av{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--pine-100);color:var(--pine);font-weight:800;font-size:.9rem}
.rev-ok{display:inline-flex;align-items:center;gap:4px;font-size:.67rem;font-weight:700;color:var(--moss)}
.rev-ok svg{width:12px;height:12px}
.rev-meta{font-family:var(--mono);font-size:.63rem;color:var(--faint);letter-spacing:.03em}
.rev-use{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;color:var(--mute);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:.18rem .5rem;background:var(--paper)}

/* ---------- mobile buy bar ---------- */
.mbuy{position:fixed;inset-inline:0;bottom:0;z-index:70;display:flex;align-items:center;gap:11px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-top:1px solid var(--rule);box-shadow:0 -6px 20px -12px rgba(21,20,15,.35);
  transform:translateY(120%);transition:transform .3s cubic-bezier(.22,.8,.3,1)}
.mbuy.is-on{transform:none}
@media(min-width:1024px){.mbuy{display:none}}

/* ---------- misc ---------- */
.note{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-md);font-size:.8rem;line-height:1.9}
.note svg{width:18px;height:18px;flex:none;margin-top:4px}
.note-brand{background:var(--sienna-50);border:1px solid var(--sienna-100);color:var(--slate)}
.note-brand svg{color:var(--sienna)}
.note-moss{background:var(--pine-100);color:var(--pine-800)}
.note-moss svg{color:var(--pine)}
.pill-row{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:.3rem .65rem;border:1px solid var(--rule);
  border-radius:var(--r-sm);font-size:.73rem;font-weight:700;color:var(--slate);background:var(--paper)}
.pill svg{width:13px;height:13px;color:var(--sienna)}

/* ==========================================================================
   Filter panel — a sidebar on desktop, an off-canvas sheet below 1024px
   ========================================================================== */
.filter-panel-hd{display:none}
@media(max-width:1023px){
  .filter-panel{
    position:fixed;top:0;right:0;z-index:100;
    width:min(380px,90vw);height:100dvh;overflow-y:auto;
    background:var(--bone);box-shadow:var(--sh-lg);
    padding:16px 16px calc(20px + env(safe-area-inset-bottom));
    transform:translateX(100%);
    transition:transform .34s cubic-bezier(.3,.9,.3,1);
  }
  .filter-panel.is-open{transform:translateX(0)}
  .filter-panel-hd{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:sticky;top:-16px;z-index:2;margin:-16px -16px 4px;padding:14px 16px;
    background:var(--paper);border-bottom:1px solid var(--rule);
  }
}

/* Account summary tiles: a stacked card in the three-up row, a single compact
   line once they stack — three tall cards with one number each is most of a
   phone screen spent on three digits. */
.statcell{padding:20px}
.statcell-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);margin-bottom:14px}
.statcell-k{display:block;font-size:.78rem;color:var(--mute);margin-bottom:.25rem}
.statcell-v{display:block;font-size:1.15rem;font-variant-numeric:tabular-nums}
@media(max-width:639px){
  .statcell{display:flex;align-items:center;gap:12px;padding:13px 15px}
  .statcell-ic{width:36px;height:36px;margin-bottom:0;flex:none}
  .statcell-k{flex:1;margin-bottom:0;font-size:.8rem}
  .statcell-v{font-size:1.02rem}
}

/* Blog side cards: a thumb beside text in the desktop column, a stacked card
   once they become slides — 104px of image next to 130px of text turns every
   headline into three broken lines. */
.blog-mini{display:flex;gap:16px;padding:16px}
.blog-mini-fig{flex:none;width:104px;min-height:104px;overflow:hidden;border-radius:var(--r-md)}
.blog-mini-fig .woodswatch{height:100%}
.blog-mini-body{min-width:0;display:flex;flex-direction:column;justify-content:center}
@media(max-width:767px){
  .blog-mini{flex-direction:column;gap:0;padding:0;overflow:hidden}
  .blog-mini-fig{width:auto;aspect-ratio:16/9;min-height:0;border-radius:0;
    border-bottom:1px solid var(--rule)}
  .blog-mini-body{padding:16px 18px 18px;justify-content:flex-start}
}

/* testimonials read as a hairline list on desktop and as slides on a phone */
.tst-item{padding-block:24px;border-top:1px solid var(--rule)}
@media(max-width:767px){
  .tst-item{padding:18px 16px;border:1px solid var(--rule);border-radius:var(--r-lg);
    background:var(--paper);box-shadow:var(--sh-xs)}
}

/* ==========================================================================
   Rails — card rows become snap sliders on phones
   A column of eight product cards is four thousand pixels of scrolling. The
   same eight cards on one snapping track is one screen, and the reader keeps
   the section header in view while they browse. Desktop is untouched: the
   grid classes on the same element still win above 768px.
   ========================================================================== */
.rail-bar{display:none}

@media(max-width:767px){
  .rail{
    display:flex!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    /* bleed to the screen edge so a card is visibly cut off — the clearest
       possible signal that the track keeps going */
    margin-inline:-16px;padding-inline:16px;
    padding-block-end:2px;
    scroll-padding-inline-start:16px;
    scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .rail::-webkit-scrollbar{display:none}
  /* Two classes deep so the slide width beats Tailwind's flex-1, which the CDN
     injects after this sheet. */
  .rail>*,.rail>.rail-flat>*{
    flex:0 0 var(--rw,78%);
    width:var(--rw,78%);
    scroll-snap-align:start;
  }
  /* a wrapper that should not itself be a slide — its children are.
     Tailwind's .flex is injected after this sheet, hence !important. */
  .rail-flat{display:contents!important}

  /* progress indicator: shows how much track is left, and where you are */
  .rail-bar{
    display:block;height:3px;margin-top:14px;border-radius:2px;
    background:var(--rule-2);overflow:hidden;
  }
  .rail-bar i{
    display:block;height:100%;border-radius:2px;background:var(--sienna);
    transition:margin-inline-start .12s linear;
  }

  /* cards in a rail stretch to the tallest so the track has one clean baseline */
  .rail>.pcard,.rail>.cat-card,.rail>.app-card{height:100%}
  .rail{align-items:stretch}
}

/* ==========================================================================
   Phone refinements — the same design, at a density that fits a hand
   ========================================================================== */
@media(max-width:767px){
  /* ---- hero: a full 78vh of photograph pushes every proof point below the
     fold. Keep the image, halve the dead space. ---- */
  .hero-inner{min-height:clamp(430px,64vh,560px);padding-block:34px 96px}
  .hero-h1{margin-bottom:1rem;line-height:1.26}
  .hero-sub{margin-bottom:1.35rem;line-height:1.9}
  .hero-stats{max-width:none}
  .hero-stat{padding:.85rem .5rem 0}
  .hero-stat-l{font-size:.68rem;line-height:1.6}
  .rate-strip{padding:9px 0}

  /* ---- section headers stack instead of fighting for one line ---- */
  .sec-h2{line-height:1.34}
  .sec-idx{margin-bottom:.6rem}

  /* ---- trust bar ---- */
  .trust-cell{padding:16px 14px;gap:10px}
  .trust-ic{width:30px;height:30px}
  .trust-d{font-size:.71rem;line-height:1.6}

  /* ---- product cards: two-up on a phone, so the card has ~150px of text
     width. Trim the padding and let the price own its own line. ---- */
  .pcard-in{padding:11px 12px 13px;gap:6px}
  .pcard-cat{font-size:.64rem}
  .pcard-title{font-size:.81rem;line-height:1.65;min-height:3.3em}
  .pcard-spec{font-size:.6rem;padding-top:6px}
  /* Two-up leaves ~150px of card. A price and a square button on one line
     only just fits at 390px and breaks below it, so give each its own row —
     which also turns a 30px tap target into a full-width one. */
  .pcard-foot{padding-top:10px;flex-direction:column;align-items:stretch;gap:9px}
  .pcard-unit{font-size:.62rem}
  .price{font-size:.94rem;white-space:nowrap}
  .price small{font-size:.6rem;margin-inline-start:3px}
  .add-btn{width:100%;height:34px}
  .pcard-code{font-size:.58rem;padding:2px 5px}

  /* ---- editorial numbered list ---- */
  .enum-item{padding:18px 0;gap:12px}

  /* ---- calculator: three figures wrapped in a flex row leave stray hairline
     separators floating mid-box. Lay them out instead. ---- */
  .calc-out{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:14px 16px}
  .calc-out .sep{display:none}
  .calc-out>div:last-child{grid-column:1/-1;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
  .calc-out b{font-size:1.05rem}

  /* ---- a row of chips or steps scrolls to the screen edge instead of
     stacking into three ragged rows or being clipped mid-word ---- */
  .scroll-row{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;
    margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .scroll-row::-webkit-scrollbar{display:none}
  .scroll-row>*{flex:none}

  /* ---- tables that cannot wrap get their own scroll, never the page's ---- */
  .spec,.cmp,.table{font-size:.78rem}
  .spec td,.spec th,.table td,.table th,.cmp td,.cmp th{padding:9px 10px}

  /* ---- tap targets: an 18px text link is under half a fingertip. Pad the
     rows that are pure text so each one clears ~30px without redesigning
     anything. ---- */
  .topbar a{min-height:30px}
  .foot-links a{display:inline-block;padding-block:5px}
  .legend-key{padding-block:.32rem}
  .rate-item{padding-block:5px}
  .qpre button{padding:.42rem .75rem}
  .calc-tabs button{padding:.45rem .85rem}
  .pdp-nav a{padding-block:15px}
  /* a 13px native checkbox is a coin toss with a thumb */
  input[type=checkbox]:not(.switch input),input[type=radio]{width:18px;height:18px}

  /* ---- utility bars ---- */
  .mbar{grid-template-columns:auto 1fr 1fr}
  .mbar>*{min-width:0}
  .mbar .btn{padding:.6rem .5rem;font-size:.78rem}
  .totop{width:38px;height:38px}
}

@media print{
  .site-header,.topbar,footer,.no-print,.dash-side{display:none!important}
  .dash-main{margin:0}
  body{background:#fff}
}