/* ==========================================================================
   MATERIAL WORLDS
   The global black-and-white system is unchanged. This sheet re-declares the
   band palette tokens inside a product page's <main>, so every component
   already reading --bg/--ink/--dim/--rule/--accent/--plate moves into that
   material's world without a component being rewritten.

   Scoped to `main` on purpose. The navigation, the menu overlay and the footer
   sit outside it and stay the approved brand black and white on every page.

   These are NOT black grounds with a coloured accent. Each palette is derived
   from the product's own photography: the material's real hue and saturation
   are kept, and only lightness is set — to whatever the contrast requirement
   needs. A product page should read as its material before it reads as a page.
   ========================================================================== */


/* generated from the real material of each product */

[data-page="s-osb"] main .band--dark {
  --bg: #4B2C0B;
  --ink: #F7F4F0;
  --dim: #E08A2E;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #E7A560;
  --plate: #61390E;
  --label-ink: #FFFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="s-osb"] main .band--light {
  --bg: #F2ECE6;
  --ink: #3F2509;
  --dim: #995A17;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #9B5B17;
  --plate: #E6DCD1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.5  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="hybrid-osb"] main .band--dark {
  --bg: #3D3024;
  --ink: #F7F4F0;
  --dim: #B3997F;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #C3AF9B;
  --plate: #4D3D2E;
  --label-ink: #FEFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="hybrid-osb"] main .band--light {
  --bg: #F2ECE6;
  --ink: #34291F;
  --dim: #7D644A;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #7F654C;
  --plate: #E6DBD1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.6  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="mdo"] main .band--dark {
  --bg: #402F22;
  --ink: #F7F3F0;
  --dim: #B9977C;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #C8AD98;
  --plate: #513B2B;
  --label-ink: #FEFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="mdo"] main .band--light {
  --bg: #F2EBE6;
  --ink: #37281D;
  --dim: #846146;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #866247;
  --plate: #E6DAD1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.5  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="hdcmr"] main .band--dark {
  --bg: #32342E;
  --ink: #F4F4F3;
  --dim: #9CA093;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #B1B4AA;
  --plate: #3F413A;
  --label-ink: #ABAFA4;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="hdcmr"] main .band--light {
  --bg: #ECEDEB;
  --ink: #2A2C27;
  --dim: #666A5E;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #686C5F;
  --plate: #DCDED9;
  --label-ink: #5E6256;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.5  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="veneers"] main .band--dark {
  --bg: #412F20;
  --ink: #F7F3F0;
  --dim: #BC9778;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #CAAD95;
  --plate: #523B29;
  --label-ink: #FEFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="veneers"] main .band--light {
  --bg: #F2EBE6;
  --ink: #37281B;
  --dim: #856042;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #876243;
  --plate: #E6DAD1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.6  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="laminates"] main .band--dark {
  --bg: #3F2F25;
  --ink: #F7F3F0;
  --dim: #B79784;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #C6AD9F;
  --plate: #4F3B2F;
  --label-ink: #FEFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="laminates"] main .band--light {
  --bg: #F2EAE6;
  --ink: #35281F;
  --dim: #82614D;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #84624E;
  --plate: #E6D9D1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.5  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="vintage-teak"] main .band--dark {
  --bg: #423017;
  --ink: #F7F4F0;
  --dim: #C49658;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #D1AD7D;
  --plate: #553D1E;
  --label-ink: #FFFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="vintage-teak"] main .band--light {
  --bg: #F2EDE6;
  --ink: #392914;
  --dim: #886230;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #896330;
  --plate: #E6DDD1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.5  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */

[data-page="everfinish"] main .band--dark {
  --bg: #3D3124;
  --ink: #F7F4F0;
  --dim: #B39A7E;
  --rule: rgba(255,255,255,0.16);
  --rule-strong: rgba(255,255,255,0.32);
  --accent: #C3B09A;
  --plate: #4D3E2D;
  --label-ink: #FEFEFE;
  --shadow: rgba(0,0,0,0.66);
}
[data-page="everfinish"] main .band--light {
  --bg: #F2ECE6;
  --ink: #342A1E;
  --dim: #7D6549;
  --rule: rgba(0,0,0,0.16);
  --rule-strong: rgba(0,0,0,0.30);
  --accent: #7E664A;
  --plate: #E6DCD1;
  --label-ink: #000000;
  --shadow: rgba(0,0,0,0.22);
}
/* dark: ink 11.5  dim 4.7  acc 6.0 | light: ink 12.0  dim 4.7  acc 4.6 */



/* ==========================================================================
   SHARED PRODUCT COMPONENTS
   Built once, themed by the tokens above. Nothing here hard-codes a colour.
   ========================================================================== */

/* --- the specification table — architect-readable, no card, no box -------- */

.datasheet { border-top: 1px solid var(--rule-strong); }
.datasheet__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(18px, 2.2vw, 30px);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.datasheet__key {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin: 0;
}
.datasheet__val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 25px);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 100%;
}
.datasheet__val small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--dim);
}
@media (max-width: 700px) {
  .datasheet__row { grid-template-columns: 1fr; gap: 10px; }
}


/* --- applications — a set list, not a grid of cards ----------------------- */

.applist {
  columns: 3;
  column-gap: clamp(30px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.applist li {
  break-inside: avoid;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink);
}
@media (max-width: 900px) { .applist { columns: 2; } }
@media (max-width: 560px) { .applist { columns: 1; } }


/* --- the download — a line, not a button ---------------------------------- */

.dl {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 30px);
  letter-spacing: -0.02em;
  transition: color var(--t-med) var(--ease);
}
.dl__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.dl:hover { color: var(--accent); }


/* --- measured figures ------------------------------------------------------
   Used where the brochure publishes a number worth reading on its own. */

.measures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(28px, 4vw, 72px);
}
.measure { border-top: 1px solid var(--rule-strong); padding-top: clamp(18px, 2vw, 28px); }
.measure__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: block;
}
.measure__n em { font-style: normal; color: var(--accent); }
.measure__u {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.measure p { margin-top: 14px; font-size: var(--fs-small); color: var(--dim); }