/* =========================================================
   PRODUCTS PAGE (products.html only)
   White page, warm off-white used only behind product photos
   and the dimension table; charcoal text; orange for actions.
   ========================================================= */

.page-products{
  --pr-max:1200px;
  --pr-side:max(var(--gutter),calc((100% - var(--pr-max))/2));
  --pr-space:4.5rem;                    /* 72px */
  --pr-charcoal:#23211f;
  --pr-text:#3f3b37;
  --pr-warm:#f6f3ee;
  --pr-line:#e6e0d7;
}

/* active navigation item */
.header nav a[aria-current="page"]{border-bottom-color:var(--orange);color:var(--ink)}

/* ---------- shared ---------- */
.pr-section{padding:var(--pr-space) var(--pr-side) 0}
.pr-section[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}
.pr-head{max-width:720px;margin-bottom:2rem}
.pr-head .eyebrow{margin-bottom:.6rem}
.pr-section h2,
.pr-close h2{
  margin:0;color:var(--pr-charcoal);
  font-size:clamp(1.9rem,2.5vw,2.35rem);           /* 30–38px */
  font-weight:700;line-height:1.15;letter-spacing:-.02em;
}
.pr-section h3{margin:0 0 .4rem;color:var(--pr-charcoal);font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.pr-section p:not(.eyebrow){margin:0;color:var(--pr-text);font-size:1.05rem;line-height:1.6}
.pr-section .pr-lead{margin-top:.8rem}

/* buttons & focus */
.pr-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.pr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;
  padding:.9rem 1.5rem;border:1px solid transparent;
  text-decoration:none;font-size:.95rem;font-weight:700;
  transition:background .2s,border-color .2s;
}
.pr-btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.pr-btn--primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.pr-btn--ghost{border-color:rgba(255,255,255,.7);color:#fff}
.pr-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.pr-file-meta{font-weight:500;opacity:.75}
.page-products main a:focus-visible,
.page-products main button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* product photo area: one warm off-white surface, product never cropped */
.pr-media{
  position:relative;height:220px;
  background:var(--pr-warm);
}
.pr-media--lg{height:290px}
.pr-media img{
  position:absolute;inset:1.4rem;
  width:calc(100% - 2.8rem);height:calc(100% - 2.8rem);
  object-fit:contain;
  mix-blend-mode:multiply;                         /* catalogue photos sit on white */
}

/* ---------- banner: charcoal text / off-white product ---------- */
.pr-banner{
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  height:480px;
}
.pr-banner-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:2.5rem 3rem 3rem var(--pr-side);
  background:var(--pr-charcoal);color:#fff;
}
.pr-banner-text > *{max-width:520px}
.pr-banner h1{
  margin:0;color:#fff;
  font-size:clamp(2.5rem,4.4vw,3.9rem);            /* ~62px at 1440 */
  font-weight:700;line-height:1.04;letter-spacing:-.03em;
}
.pr-banner-intro{margin:1.1rem 0 0;color:#e6e1da;font-size:1.08rem;line-height:1.6}
.pr-banner-media{
  position:relative;
  background:var(--pr-warm);
}
.pr-banner-media img{
  position:absolute;inset:2.5rem 3rem;
  width:calc(100% - 6rem);height:calc(100% - 5rem);
  object-fit:contain;mix-blend-mode:multiply;
}

/* ---------- category navigation ---------- */
.pr-cats{border-bottom:1px solid var(--pr-line);padding:0 var(--pr-side);background:#fff}
.pr-cats ul{display:flex;gap:2.2rem;margin:0;padding:0;list-style:none}
.pr-cats a{
  display:inline-block;padding:1.1rem 0;
  color:var(--pr-charcoal);text-decoration:none;font-size:.96rem;font-weight:600;white-space:nowrap;
  border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
}
.pr-cats a:hover{border-bottom-color:var(--orange);color:var(--orange-dark)}

/* ---------- grids & cards ---------- */
.pr-grid{display:grid;gap:1.75rem}
.pr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-card{display:flex;flex-direction:column}
.pr-card-body{padding:1.2rem .2rem 0}
.pr-more{
  display:inline-flex;gap:.4rem;margin-top:.8rem;
  color:var(--orange-dark);text-decoration:none;font-size:.96rem;font-weight:700;
}
.pr-more:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- dimensions ---------- */
.pr-dims-layout{
  display:grid;grid-template-columns:minmax(0,65fr) minmax(0,35fr);gap:clamp(2rem,5vw,4rem);align-items:start;
}
.pr-dims{padding:1.6rem;background:var(--pr-warm)}
.pr-dims-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.pr-switch{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:460px;margin-bottom:1.4rem}
.pr-switch label{
  display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:.7rem 1rem;
  border:1px solid #3f3b37;background:#fff;color:var(--pr-charcoal);
  font-size:1.05rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.pr-switch label span{font-weight:800;color:var(--orange-dark)}
.pr-switch label:hover{border-color:var(--orange)}
#flute-3:checked ~ .pr-switch label[for="flute-3"],
#flute-5:checked ~ .pr-switch label[for="flute-5"]{background:var(--pr-charcoal);border-color:var(--pr-charcoal);color:#fff;box-shadow:inset 0 -3px 0 var(--orange)}
#flute-3:checked ~ .pr-switch label[for="flute-3"] span,
#flute-5:checked ~ .pr-switch label[for="flute-5"] span{color:var(--orange)}
#flute-3:focus-visible ~ .pr-switch label[for="flute-3"],
#flute-5:focus-visible ~ .pr-switch label[for="flute-5"]{outline:2px solid var(--orange);outline-offset:3px}
#flute-3:checked ~ .pr-table-wrap--5,
#flute-5:checked ~ .pr-table-wrap--3{display:none}

.pr-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:#fff}
.pr-table caption{padding:0 0 .8rem;text-align:left;font-size:.95rem;font-weight:700;color:var(--pr-charcoal)}
.pr-table th{
  padding:.8rem 1.3rem;text-align:left;background:var(--pr-charcoal);color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.pr-table td{padding:.8rem 1.3rem;border-bottom:1px solid var(--pr-line);font-size:1.08rem;color:var(--pr-charcoal)}
/* collapsed state is added by products.js; without JS every row stays visible */
.pr-table-wrap.is-collapsed tbody tr:nth-child(n+7){display:none}
.pr-toggle{
  display:inline-flex;align-items:center;min-height:48px;margin-top:1.2rem;padding:.6rem 1.3rem;
  background:#fff;border:1px solid #3f3b37;color:var(--pr-charcoal);
  font:700 .95rem var(--font);cursor:pointer;
}
.pr-toggle:hover{border-color:var(--orange)}
.pr-section .pr-note{margin-top:1.2rem;font-size:.92rem;color:var(--muted)}

.pr-dims-guide{margin:0;padding-top:.4rem}
.pr-dims-guide svg{display:block;width:100%;max-width:300px;height:auto;font-family:var(--font)}
.pr-dims-guide figcaption{margin-top:.8rem;font-size:.95rem;font-weight:700;color:var(--pr-charcoal)}

/* ---------- special applications: compact text cards ---------- */
.pr-app{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;
  padding:1.6rem 1.8rem;border-top:2px solid var(--orange);background:var(--pr-warm);
}
.pr-section .pr-app-figure{
  margin:0;min-width:5.5ch;
  color:var(--pr-charcoal);font-size:2.2rem;font-weight:700;line-height:1;letter-spacing:-.02em;
}
.pr-section .pr-app-figure span{display:block;margin-top:.35rem;font-size:.85rem;font-weight:600;letter-spacing:0;color:var(--muted)}

/* ---------- materials: horizontal cards ---------- */
.pr-grid--materials{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.75rem}
.pr-material{
  display:grid;grid-template-columns:38% minmax(0,1fr);align-items:stretch;
  background:#fbfaf7;
}
.pr-material .pr-media{height:auto;min-height:190px}
.pr-material-body{display:flex;flex-direction:column;justify-content:center;padding:1.4rem 1.6rem}

/* ---------- closing ---------- */
.pr-close{padding:var(--pr-space) var(--pr-side)}
.pr-close-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 3rem;
  padding-top:2.8rem;border-top:1px solid var(--pr-line);
}
.pr-close h2{max-width:26ch}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .page-products{--pr-space:3.75rem}
  .pr-banner{grid-template-columns:1fr;height:auto}
  .pr-banner-text{padding:3rem var(--pr-side) 3.2rem}
  .pr-banner-media{height:320px}
  .pr-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-grid--materials{grid-template-columns:1fr}
  .pr-dims-layout{grid-template-columns:1fr}
  .pr-dims-guide{display:grid;grid-template-columns:220px auto;gap:1.2rem;align-items:center}
  .pr-dims-guide figcaption{margin-top:0}
}
@media(max-width:680px){
  .page-products{--pr-space:2.75rem}             /* 44px */
  .pr-banner-text{padding:2.5rem var(--gutter) 2.75rem}
  .pr-banner-media{height:240px}
  .pr-banner-media img{inset:1.4rem;width:calc(100% - 2.8rem);height:calc(100% - 2.8rem)}
  .pr-actions{flex-direction:column;align-items:stretch}
  .pr-cats{padding-right:0}
  .pr-cats ul{overflow-x:auto;gap:1.6rem;padding-right:var(--gutter);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .pr-grid--2,.pr-grid--3{grid-template-columns:1fr}
  .pr-media--lg{height:250px}
  .pr-dims{padding:1rem}
  .pr-switch{max-width:none}
  .pr-switch label{min-height:52px;font-size:1rem}
  .pr-table td,.pr-table th{padding-left:.9rem;padding-right:.9rem}
  .pr-dims-guide{grid-template-columns:150px auto}
  .pr-app{grid-template-columns:1fr;gap:.9rem;padding:1.3rem}
  .pr-material{grid-template-columns:38% minmax(0,1fr)}
  .pr-material .pr-media{min-height:150px}
  .pr-material-body{padding:1rem}
  .pr-close .pr-btn{width:100%}
}