/* Spec sheet: one stylesheet for screen (embedded on product pages) and print (A4 PDF via Chromium).
   Themes override the --sh-* tokens; nothing else changes per client. The repeating print footer comes from
   Playwright's footerTemplate, so .sh-foot is screen-only. */
.sheet{
  --sh-ink:oklch(0.24 0.035 252); --sh-muted:oklch(0.45 0.025 252); --sh-line:oklch(0.9 0.008 252); --sh-line-strong:oklch(0.78 0.012 252);
  --sh-paper:#fff; --sh-wash:oklch(0.975 0.006 90); --sh-band:oklch(0.235 0.035 252); --sh-on-band:oklch(0.96 0.01 86);
  --sh-accent:oklch(0.755 0.125 82); --sh-accent-ink:oklch(0.48 0.11 70);
  --sh-fd:"Bodoni Moda",Georgia,serif; --sh-fb:"Hanken Grotesk",system-ui,sans-serif; --sh-fn:var(--sh-fb);
  font:400 .9rem/1.45 var(--sh-fb); color:var(--sh-ink); background:var(--sh-paper);
  border-radius:10px; overflow:hidden; box-shadow:0 1px 2px oklch(0.2 0.02 252/.08),0 14px 34px -18px oklch(0.2 0.03 252/.35);
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}
.sheet .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sh-band{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;background:var(--sh-band);color:var(--sh-on-band);padding:1rem 1.4rem;}
.sh-co{display:flex;align-items:center;gap:.7rem;}
.sh-co b{display:block;font-weight:700;font-size:1rem;line-height:1.2;}
.sh-co small{display:block;font-size:.78rem;opacity:.82;}
.sh-mark{width:2.3rem;height:2.3rem;border-radius:.45rem;background:var(--sh-accent);color:var(--sh-band);display:grid;place-items:center;font:600 1.05rem/1 var(--sh-fd);flex:0 0 auto;}
.sh-doc{display:flex;gap:1.1rem;flex-wrap:wrap;margin:0;font-size:.74rem;}
.sh-doc dt{opacity:.75;} .sh-doc dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;}
.sh-example dd{border:1px solid currentColor;border-radius:4px;padding:.15rem .55rem;font-weight:700;letter-spacing:.04em;}
.sh-rule{height:4px;background:var(--sh-accent);}
.sh-hero{display:grid;grid-template-columns:1fr 7.5rem;gap:1rem 1.4rem;padding:1.3rem 1.4rem .4rem;align-items:start;}
.sh-kicker{margin:0;font-size:.76rem;font-weight:600;color:var(--sh-accent-ink);}
.sh-name{margin:.15rem 0 0;font:600 clamp(1.5rem,1.2rem + 1.2vw,2rem)/1.1 var(--sh-fd);color:var(--sh-ink);}
.sh-variant{margin:.3rem 0 0;color:var(--sh-muted);}
.sh-photo{margin:0;}
.sh-photo img,.sh-photo .sh-plate{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--sh-line);}
/* The plate also appears outside .sheet (product cards, heroes), so every colour has a site-token fallback. */
.sh-plate .pl-bg{fill:var(--sh-wash,var(--wash,#f2f0ea));}
.sh-plate .pl-grain{fill:var(--sh-accent,var(--accent,#c9a24a));opacity:.6;}
.sh-plate .pl-txt{fill:var(--sh-muted,var(--muted,#55585e));font-family:var(--sh-fb,var(--fb,sans-serif));}
.sh-keys{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin:0;border:1px solid var(--sh-line);border-radius:8px;overflow:hidden;background:var(--sh-wash);}
.sh-keys div{padding:.65rem .85rem;border-left:1px solid var(--sh-line);} .sh-keys div:first-child{border-left:0;}
.sh-keys dt{font-size:.74rem;font-weight:600;color:var(--sh-muted);}
.sh-keys dd{margin:.15rem 0 0;font:600 1.02rem/1.25 var(--sh-fn);}
.sh-keys dd.is-open{font:italic 400 .9rem/1.3 var(--sh-fb);color:var(--sh-muted);}
.sh-tab{width:calc(100% - 2.8rem);margin:1rem 1.4rem 0;border-collapse:collapse;font-size:.82rem;table-layout:fixed;}
/* Fixed columns so Parameter / Specification / Test method / Remarks line up across every group table. */
.sh-tab thead th:nth-child(1){width:30%;} .sh-tab thead th:nth-child(2){width:24%;} .sh-tab thead th:nth-child(3){width:24%;}
.sh-gref{font:400 .76rem/1.3 var(--sh-fb);color:var(--sh-muted);}
.sh-tab--compact thead th:nth-child(1){width:55%;}
.sh-tab caption{text-align:left;font:600 .95rem/1.3 var(--sh-fd);padding-bottom:.35rem;color:var(--sh-ink);}
.sh-tab thead th{text-align:left;font-weight:600;font-size:.72rem;color:var(--sh-muted);padding:.35rem .6rem .35rem 0;border-bottom:1.5px solid var(--sh-line-strong);}
.sh-tab tbody th{text-align:left;font-weight:600;padding:.42rem .6rem .42rem 0;border-bottom:1px solid var(--sh-line);vertical-align:top;}
.sh-tab td{padding:.42rem .6rem .42rem 0;border-bottom:1px solid var(--sh-line);vertical-align:top;}
.sh-tab td:nth-child(3),.sh-tab td:nth-child(4){color:var(--sh-muted);font-size:.76rem;}
/* No tabular-nums: in several of these faces the tabular full stop is as wide as a digit ("10 . 0"). */
.sh-spec{font-family:var(--sh-fn);}
.sh-spec.is-open{font-family:var(--sh-fb);font-style:italic;color:var(--sh-muted);white-space:normal;}
.sh-comm,.sh-certs{margin:1.1rem 1.4rem 0;padding-top:.8rem;border-top:1.5px solid var(--sh-line-strong);}
.sh-comm h3,.sh-certs h3,.sh-variants h3{margin:0 0 .45rem;font:600 .95rem/1.3 var(--sh-fd);}
.sh-comm dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.45rem 1.2rem;margin:0;}
.sh-comm dt{font-size:.72rem;font-weight:600;color:var(--sh-muted);} .sh-comm dd{margin:0;font-size:.84rem;}
.sh-certs ul{margin:0;padding-left:1.1rem;font-size:.84rem;}
.sh-p2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.2rem 1.4rem 0;padding-top:.8rem;border-top:1.5px solid var(--sh-line-strong);}
.sh-p2 .sh-tab{width:100%;margin:0;}
.sh-tag{font-size:.68rem;font-weight:600;color:var(--sh-accent-ink);border:1px solid currentColor;border-radius:3px;padding:0 .3rem;margin-left:.3rem;}
.sh-pack{margin:0;} .sh-pack svg{width:100%;height:auto;font-family:var(--sh-fb);}
.sh-pack figcaption{font-size:.76rem;color:var(--sh-muted);margin-top:.3rem;}
.sh-foot{margin-top:1.3rem;padding:.8rem 1.4rem 1rem;background:var(--sh-wash);font-size:.74rem;color:var(--sh-muted);border-top:1px solid var(--sh-line);}
.sh-foot p{margin:.15rem 0;} .sh-contact{color:var(--sh-ink);}

@media (max-width:640px){
  .sh-hero{grid-template-columns:1fr 5.5rem;padding:1.1rem 1rem .3rem;}
  .sh-band,.sh-foot{padding-left:1rem;padding-right:1rem;}
  .sh-keys{grid-template-columns:1fr;} .sh-keys div{border-left:0;border-top:1px solid var(--sh-line);} .sh-keys div:first-child{border-top:0;}
  .sh-tab{width:calc(100% - 2rem);margin-left:1rem;margin-right:1rem;}
  .sh-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .sh-tab tbody tr{display:grid;grid-template-columns:1fr;padding:.45rem 0;border-bottom:1px solid var(--sh-line);}
  .sh-tab tbody th,.sh-tab td{border:0;padding:.05rem 0;width:auto;}
  .sh-tab td:empty,.sh-tab td:has(> .sr-only:only-child){display:none;}
  .sh-spec{white-space:normal;}
  .sh-comm,.sh-certs,.sh-p2{margin-left:1rem;margin-right:1rem;}
  .sh-p2{grid-template-columns:1fr;}
}

@media print{
  @page{size:A4;}
  html,body{background:#fff !important;margin:0;}
  .sheet{box-shadow:none;border-radius:0;font-size:8.6pt;max-width:none;}
  .sh-band{padding:4mm 0 3.5mm;background:var(--sh-band);}
  .sh-band,.sh-hero{padding-left:0;padding-right:0;}
  .sh-band{padding-left:4mm;padding-right:4mm;}
  /* Print hero is one row: title | key specs | photo. Saves ~18 mm so a full sheet fits one A4 page. */
  .sh-hero{padding-top:3.5mm;grid-template-columns:minmax(0,.85fr) minmax(0,1.75fr) 24mm;grid-template-areas:"t k p";gap:4mm;align-items:center;}
  .sh-title{grid-area:t;} .sh-keys{grid-area:k;grid-column:auto;} .sh-photo{grid-area:p;}
  .sh-name{font-size:17pt;}
  .sh-keys dt{font-size:6.6pt;} .sh-keys dd{font-size:8.6pt;} .sh-keys dd.is-open{font-size:7.6pt;}
  /* Rows never split and a table never starts with an orphaned heading; long tables may continue on the
     next page, where the column headings repeat. Whole-table break-avoidance left half-empty pages. */
  .sh-tab{width:100%;margin:2.6mm 0 0;font-size:7.8pt;}
  .sh-tab caption{padding-bottom:1mm;}
  .sh-tab caption{break-after:avoid;}
  .sh-tab tr{break-inside:avoid;}
  .sh-tab thead{display:table-header-group;break-after:avoid;}
  .sh-tab tbody th,.sh-tab td{padding-top:.85mm;padding-bottom:.85mm;}
  .sh-tab thead th{padding-top:.6mm;padding-bottom:.6mm;}
  .sh-hero{padding-bottom:0;}
  .sh-keys div{padding:2mm 2.6mm;}
  .sh-comm,.sh-certs{margin:3mm 0 0;padding-top:2.2mm;break-inside:avoid;}
  .sh-comm dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6mm 4mm;}
  .sh-p2{margin:3mm 0 0;padding-top:2.2mm;break-inside:avoid;}
  .sh-pack svg{max-height:42mm;}
  .sh-foot{display:none;}
}