/* product.css — product pages (anti-slip, tags). Loaded after site.css; the header and footer come from site-chrome.js.
   Layout: a hero row (text beside a picture of the same height), then a sticky section list beside the sections. */

.fill-in { background: #FFF4D6; color: #8A5A00; border-bottom: 1.5px dashed #8A5A00; font-weight: 700; padding: 0 3px; }

.pp-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; padding-top: 8px; }
.pp-intro-text { display: flex; flex-direction: column; justify-content: center; padding-block: 12px; }
.pp-intro h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; line-height: 1.1; margin-top: 10px; }
.pp-intro .lede { font-size: 17px; color: var(--slate); margin-top: 16px; max-width: 52ch; }
.pp-intro figure { margin: 0; }
/* Photo hero: the picture crops to the height of the text. */
.pp-intro .pp-photo { position: relative; min-height: 280px; }
.pp-intro .pp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; border-radius: var(--r); background: var(--line); }
/* Product-shot hero: a long product sits centred on a dark panel the height of the text. */
.pp-intro .pp-panel { background: #24272D; border-radius: var(--r); display: grid; place-items: center; padding: 28px; min-height: 280px; }
.pp-intro .pp-panel img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .pp-intro { grid-template-columns: 1fr; gap: 24px; }
  .pp-intro figure { order: -1; }
  .pp-intro .pp-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .pp-intro .pp-panel { min-height: 0; }
}

.pp-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; align-items: start; }
.pp-toc { position: sticky; top: 84px; padding-top: 72px; font-size: 14px; }
.pp-toc h2 { font-family: var(--body); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.pp-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); display: grid; }
.pp-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--muted); font-weight: 600; transition: color .15s, border-color .15s; }
.pp-toc a:hover { color: var(--ink); }
.pp-toc a.on { color: var(--ink); border-left-color: var(--blue); }
@media (max-width: 900px) {
  .pp-body { grid-template-columns: 1fr; gap: 0; }
  .pp-toc { position: static; padding-top: 32px; }
  .pp-toc ol { border-left: 0; border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0 20px; padding-block: 6px; }
  .pp-toc a { padding: 6px 0; margin: 0; border: 0; }
}

.pp-section { padding-top: 72px; scroll-margin-top: 80px; }
.pp-section > header { margin-bottom: 24px; max-width: 64ch; }
.pp-section > header h2 { font-size: clamp(23px, 2.6vw, 30px); font-weight: 800; margin-top: 6px; }
.pp-section > header p { color: var(--muted); margin-top: 8px; }

/* Photo row with a caption under each (anti-slip: where they go). */
.pp-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pp-uses figure { margin: 0; }
.pp-uses img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--line); }
.pp-uses h3 { font: 700 15px var(--body); margin-top: 12px; }
.pp-uses p { font-size: 14px; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { .pp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Numbered steps, each with its picture. */
.pp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.pp-steps img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--line); }
.pp-steps h3 { font: 700 15.5px var(--body); margin-top: 14px; display: flex; gap: 10px; align-items: baseline; }
.pp-steps h3::before { counter-increment: step; content: counter(step); font: 600 13px var(--mono); color: var(--blue); }
.pp-steps p { font-size: 14px; color: var(--slate); margin-top: 4px; }
.pp-after { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--slate); max-width: 75ch; }
@media (max-width: 760px) { .pp-steps { grid-template-columns: 1fr; } }

/* Short points in a row (why FRP, what you gain). */
.pp-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pp-points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.pp-points li { padding: 16px 20px 0 0; }
.pp-points b { display: block; font: 700 15px var(--body); }
.pp-points span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { .pp-points, .pp-points.three { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }
.pp-more { display: inline-block; margin-top: 22px; font-weight: 700; font-size: 14.5px; color: var(--blue); text-decoration: none; }
.pp-more:hover { text-decoration: underline; }

/* Tables (specification, resistance). */
.pp-table { overflow-x: auto; }
.pp-table table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); font-size: 14.5px; }
.pp-table th, .pp-table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.pp-table tbody tr:last-child > * { border-bottom: 0; }
.pp-table thead th { font-weight: 700; color: var(--muted); background: var(--ground); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.pp-table tbody th { font-weight: 600; color: var(--muted); width: 30%; }
.pp-table td { font-weight: 600; }
.pp-note { font-size: 13.5px; color: var(--muted); margin-top: 12px; max-width: 75ch; }

/* FAQ, two columns. */
.pp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.pp-faq div { padding: 18px 0; border-top: 1px solid var(--line); }
.pp-faq h3 { font: 700 15.5px var(--body); }
.pp-faq p { color: var(--slate); font-size: 14.5px; margin-top: 6px; }
@media (max-width: 860px) { .pp-faq { grid-template-columns: 1fr; } }

.pp-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-related a { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 18px; text-decoration: none; display: grid; gap: 6px; align-content: start; transition: border-color .15s, box-shadow .15s; }
.pp-related a:hover { border-color: var(--line); box-shadow: 0 6px 16px rgba(13,17,23,.06); }
.pp-related small { font-size: 12px; color: var(--muted); font-weight: 600; }
.pp-related b { font: 700 15px var(--body); }
.pp-related span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 860px) { .pp-related { grid-template-columns: 1fr; } }

/* Coated tags: two production routes as numbered step rows. */
.pp-routes { display: grid; gap: 14px; }
.pp-route { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 18px 20px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
.pp-route h3 { font: 700 14.5px var(--body); }
.pp-route h3 small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.pp-route ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: s; }
.pp-route li { counter-increment: s; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 6px; background: var(--ground); color: var(--muted); }
.pp-route li::before { content: counter(s); font: 600 12px var(--mono); }
.pp-route.ours { border-color: var(--ink); }
.pp-route.ours li { background: var(--ink); color: #fff; }
.pp-route.ours li::before { color: #C9CED6; }
@media (max-width: 700px) { .pp-route { grid-template-columns: 1fr; gap: 10px; } }

/* Coated tags: the marked tag full width, details in a row underneath. */
.pp-mark { display: grid; gap: 24px; }
.pp-mark figure { margin: 0; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 32px; }
.pp-mark img { display: block; width: 100%; height: auto; }
.pp-mark figcaption { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.pp-mark dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.pp-mark dl div { padding: 14px 0; border-top: 1px solid var(--line); }
.pp-mark dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pp-mark dd { margin: 3px 0 0; font-weight: 600; }
@media (max-width: 800px) { .pp-mark dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-mark figure { padding: 18px; } }