/* Static product, category and brand pages (scripts/build-pages.mjs).
   Loaded after the site stylesheet, which supplies fonts, header and buttons. */
.static-page {
  --pp-ink: #141c27;
  --pp-text: #36404c;
  --pp-muted: #6b7380;
  --pp-line: #e4dfd3;
  --pp-blue: #000796;
  background: #f6f3ec;
  color: var(--pp-text);
}
.static-page main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px max(5%, 20px) 80px;
}
.static-page h1,
.static-page h2 { color: var(--pp-ink); }
.static-page h1 {
  margin: 8px 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0.018em currentColor;
}
.static-page h2 {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
}
.static-page a { color: inherit; }

/* Breadcrumbs */
.pp-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; color: var(--pp-muted); }
.pp-crumbs li + li::before { content: "/"; margin-right: 6px; color: #b5b0a4; }
.pp-crumbs a { text-decoration: none; }
.pp-crumbs a:hover { color: var(--pp-blue); text-decoration: underline; text-underline-offset: 3px; }

.pp-lead { max-width: 70ch; margin: 0 0 28px; font-size: 17px; line-height: 1.65; }
.pp-muted { color: var(--pp-muted); font-size: 14px; margin: 4px 0 0; }

/* Product top: gallery and summary */
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.pp-photo {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; max-height: 520px; padding: 32px;
  border: 1px solid var(--pp-line); border-radius: 8px; background: #fff;
}
.pp-photo img { width: 100%; height: 100%; object-fit: contain; }
.pp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pp-thumbs button { width: 64px; height: 64px; padding: 4px; border: 1px solid var(--pp-line); border-radius: 6px; background: #fff; cursor: pointer; }
.pp-thumbs button[aria-pressed="true"] { border-color: var(--pp-blue); box-shadow: 0 0 0 1px var(--pp-blue); }
.pp-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pp-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted); }
.pp-kicker a { text-decoration: none; }
.pp-kicker a:hover { color: var(--pp-blue); }
.pp-summary h1 { font-family: var(--font-body); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; -webkit-text-stroke: 0; }
.pp-price { margin: 4px 0 0; color: var(--pp-ink); font-size: 22px; font-weight: 500; }
.pp-summary .pp-lead { margin: 18px 0; font-size: 16px; }
.pp-trust { margin: 0 0 22px; padding: 12px 14px; border-left: 3px solid #1c6b3a; border-radius: 0 6px 6px 0; background: #e8f4ec; color: #1c4f30; font-size: 14px; line-height: 1.55; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-add[aria-pressed="true"] { border-color: var(--pp-blue); background: #eef0fb; color: var(--pp-blue); }
.pp-call { margin: 14px 0 0; font-size: 14px; color: var(--pp-muted); }
.pp-call a { color: var(--pp-blue); font-weight: 600; text-decoration: none; }

/* Product body */
.pp-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--pp-line); }
.pp-wide { grid-column: 1 / -1; }
.pp-ticks { margin: 0; padding: 0; list-style: none; }
.pp-ticks li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; line-height: 1.5; }
.pp-ticks li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px; border-left: 2px solid var(--pp-blue); border-bottom: 2px solid var(--pp-blue); transform: rotate(-45deg); }
.pp-note { padding: 16px 18px; border-left: 3px solid #c58a1c; border-radius: 0 6px 6px 0; background: #faf3e3; }
.pp-note h2 { color: #7a5410; font-size: 15px; }
.pp-note p { margin: 0; color: #5f4a1f; font-size: 14px; line-height: 1.55; }
.pp-body table { width: 100%; margin: 0 0 22px; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--pp-line); border-radius: 6px; overflow: hidden; }
.pp-body caption { padding: 4px 0 8px; color: var(--pp-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; }
.pp-body th, .pp-body td { padding: 10px 14px; border-top: 1px solid #efebe2; text-align: left; vertical-align: top; }
.pp-body tbody th { width: 38%; color: var(--pp-muted); font-weight: 500; }
.pp-body td { color: var(--pp-ink); }
.pp-body tbody tr:nth-child(odd) { background: #faf8f3; }
.pp-models thead th { background: #f1eee6; color: var(--pp-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-top: 0; }
.pp-models td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: nowrap; }
.pp-scroll { overflow-x: auto; }
.pp-download { display: inline-flex; margin: 0 10px 10px 0; padding: 10px 14px; border: 1px solid var(--pp-line); border-radius: 6px; background: #fff; color: var(--pp-blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.pp-download:hover { border-color: var(--pp-blue); }
.pp-desc { max-width: 90ch; margin: 0; font-size: 15px; line-height: 1.7; }

/* Product grids */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pp-card a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--pp-line); border-radius: 8px; background: #fff; text-decoration: none; overflow: hidden; transition: border-color 0.2s, box-shadow 0.3s; }
.pp-card a:hover { border-color: #c9c3b5; box-shadow: 0 10px 28px #141c2714; }
.pp-card-media { display: flex; align-items: center; justify-content: center; height: 180px; padding: 18px; border-bottom: 1px solid #efebe2; }
.pp-card-media img { width: 100%; height: 100%; object-fit: contain; }
.pp-card-text { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.pp-brand { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pp-muted); }
.pp-card-title { color: var(--pp-ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
.pp-card-price { margin-top: auto; padding-top: 6px; font-size: 14px; }
.pp-related { margin-top: 56px; }
.pp-related > p { margin-top: 18px; }
.pp-cat { margin-top: 44px; }
.pp-cat h2 a { text-decoration: none; }
.pp-cat h2 a:hover { color: var(--pp-blue); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.pp-chips a { padding: 6px 12px; border: 1px solid #cbc5b8; border-radius: 6px; background: #fff; font-size: 14px; text-decoration: none; }
.pp-chips a:hover { border-color: var(--pp-blue); color: var(--pp-blue); }
.pp-chips span { color: var(--pp-muted); font-size: 12px; }
.pp-404 { padding: 60px 0; }

/* Footer */
.static-page footer.page-footer { display: block; padding: 48px max(5%, 20px) 28px; border-top: 1px solid var(--pp-line); background: #fffefb; }
.page-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; max-width: 1240px; margin: 0 auto; }
.page-footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.page-footer-grid h2 { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-muted); }
.page-footer-grid a, .page-footer-grid address { color: var(--pp-ink); font-size: 14px; font-style: normal; line-height: 1.6; text-decoration: none; }
.page-footer-grid a:hover { color: var(--pp-blue); }
.page-footer-grid p { margin: 12px 0 0; max-width: 320px; font-size: 14px; line-height: 1.6; }
.page-footer-legal { max-width: 1240px; margin: 32px auto 0; padding-top: 18px; border-top: 1px solid var(--pp-line); color: var(--pp-muted); font-size: 12px; }

@media (max-width: 900px) {
  .pp-top, .pp-body { grid-template-columns: 1fr; gap: 28px; }
  .pp-photo { max-height: 380px; }
  .page-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .static-page main { padding-top: 20px; }
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pp-card-media { height: 130px; padding: 10px; }
  .pp-card-title { font-size: 14px; }
  .pp-actions .button { flex: 1 1 100%; }
  .page-footer-grid { grid-template-columns: 1fr; }
}

/* Fixes against inherited site rules */
.static-page a.button.primary,
.static-page a.header-enquiry,
.static-page a.header-enquiry:hover { color: #fff; }
.static-page a.button:not(.primary):not(.header-enquiry) { color: #141c27; }
.static-page .pp-crumbs { display: block !important; position: static; width: auto; height: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.static-page .pp-add { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.pp-call [data-list-link]::before { content: "· "; color: var(--pp-muted); font-weight: 400; }