/* ==================================================================
   STORE PRODUCT PAGE — /products/<slug>   (2026-11-11)
   ------------------------------------------------------------------
   Loaded only by products/view.php ($page['css']). Builds on the
   "STORE PRODUCT PAGES" block in site.css (.pd-*, .pc-*, .store-table)
   and the machine page's enquiry grid (.mp-enquiry-*); kept in its own
   file so site.css is not touched (three header packages stage it).

   Direction from the project's design database (ui-ux-pro-max):
   style "Minimalism & Swiss" — white space, strict grid, borders not
   shadows, one accent for the action, 200–250 ms hovers; ux rules —
   65–75ch measure, balanced short headings, tables scroll in their own
   box, visible labels. No landing-pattern match for a B2B product page
   ("product detail" returned 0 rows), so the page keeps the documented
   Trust & Authority + Conversion spine. Existing tokens only.

   Contrast (WCAG AA, measured on #fff and --surface-2 #f8f9fb):
   --ink #080808 19.9:1 · --ink-70 #454a55 9.0:1 · --ink-50 #6b7280 4.8/4.6:1
   --brand-700 #a81264 7.0:1 (text in brand colour; --brand itself is
   4.36:1 and is used for shapes and borders only) · --accent #1d4ed8 6.7:1
   ================================================================== */

/* ---- Hero ------------------------------------------------------------ */
.pd-hero .pd-title {
    font-size: clamp(1.55rem, 1.15rem + 1.25vw, 2.15rem);
    line-height: 1.18;
    text-wrap: balance;
    max-width: 34ch;
}

.sp-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 16px 0 0; padding: 0; list-style: none;
}
.sp-chips li {
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: .84rem; font-weight: 600; line-height: 1.3;
    color: var(--ink-70);
}

.pd-hero .pd-summary { margin-top: 16px; }

.sp-highlights {
    display: grid; gap: 10px 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    margin: 20px 0 0; padding: 0; list-style: none;
    max-width: 68ch;
}
.sp-highlights li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .93rem; line-height: 1.55; color: var(--ink-70);
}
.sp-highlights li strong { color: var(--ink); font-weight: 600; }
.sp-highlights svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

.pd-hero .pd-buybox { margin-top: 24px; }

.sp-offer {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 14px 0 0; padding: 10px 14px;
    border: 1px dashed rgba(168, 18, 100, .45);
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    font-size: .88rem; line-height: 1.5; color: var(--ink-70);
}
.sp-offer svg { flex: 0 0 auto; margin-top: 1px; color: var(--brand-700); }
.sp-offer strong { color: var(--brand-700); font-weight: 700; margin-right: 4px; }

/* ---- Key-fact tiles --------------------------------------------------- */
.sp-band { padding: 0 0 clamp(28px, 4vw, 44px); }
.sp-tiles {
    display: grid; gap: 0; margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}
@media (min-width: 992px) { .sp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-tile {
    padding: 18px 22px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.sp-tile:nth-child(2n) { border-right: 0; }
.sp-tile:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 992px) {
    .sp-tile { border-bottom: 0; border-right: 1px solid var(--line); }
    .sp-tile:nth-child(2n) { border-right: 1px solid var(--line); }
    .sp-tile:last-child { border-right: 0; }
}
.sp-tile dt {
    margin: 0 0 4px;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-50);
}
.sp-tile dd {
    margin: 0;
    font-family: var(--font-heading); font-size: 1.22rem; line-height: 1.3;
    color: var(--ink); overflow-wrap: anywhere;
}
.sp-tile.is-sm dd { font-family: var(--font-body); font-size: .98rem; font-weight: 600; }

/* ---- On-this-page nav -------------------------------------------------- */
.sp-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.sp-toc ul {
    display: flex; gap: 6px; margin: 0; padding: 10px 0; list-style: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sp-toc ul::-webkit-scrollbar { display: none; }
.sp-toc a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border-radius: 999px; white-space: nowrap;
    font-size: .9rem; font-weight: 600; color: var(--ink-70); text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.sp-toc a:hover { background: var(--surface-3); color: var(--ink); }
.sp-toc a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Anchored sections clear the fixed header. */
.sp-details [id], .sp-works, #faq, #enquiry { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }

/* ---- Detail blocks ---------------------------------------------------- */
.sp-block { padding: 34px 0 0; margin-top: 34px; border-top: 1px solid var(--line); }
.sp-block:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.sp-block .pd-h2 { text-wrap: balance; }
.sp-h3 {
    font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.3;
    color: var(--ink); margin: 0 0 14px; text-wrap: balance;
}
.sp-block .store-table { margin-bottom: 0; background: var(--surface); }
.sp-block .store-table th[scope="row"] { font-weight: 600; color: var(--ink); white-space: nowrap; }
.sp-block .spec-table-wrap { background: var(--surface); }

.sp-steps {
    counter-reset: none;
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    margin: 0; padding: 0; list-style: none;
}
.sp-steps li {
    display: flex; gap: 14px; align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface);
    font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--ink);
}
.sp-step-n {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .84rem; font-weight: 700; color: #fff; background: var(--ink);
}
.sp-more { margin: 16px 0 0; }

.sp-terms {
    display: grid; gap: 0; margin: 0;
    grid-template-columns: 1fr;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); overflow: hidden;
}
@media (min-width: 768px) { .sp-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-terms > div { padding: 14px 18px; border-bottom: 1px solid var(--line); min-width: 0; }
@media (min-width: 768px) {
    .sp-terms > div:nth-child(odd) { border-right: 1px solid var(--line); }
    .sp-terms > div:nth-last-child(-n+2):nth-child(odd),
    .sp-terms > div:last-child { border-bottom: 0; }
}
.sp-terms > div:last-child { border-bottom: 0; }
.sp-terms dt { margin: 0 0 2px; font-size: .8rem; font-weight: 700; color: var(--ink-50); }
.sp-terms dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.sp-note { margin: 12px 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-50); }

.sp-guide {
    display: grid; gap: 18px; align-items: end;
    margin-top: 34px; padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--line); border-left: 4px solid var(--brand);
    border-radius: var(--r-lg); background: var(--surface);
}
@media (min-width: 768px) { .sp-guide { grid-template-columns: 1fr auto; } }
.sp-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.sp-topics li {
    padding: 4px 10px; border-radius: 999px; background: var(--surface-3);
    font-size: .8rem; font-weight: 600; color: var(--ink-70);
}
.sp-guide .btn-outline { white-space: nowrap; }

.sp-intro { margin: 0; max-width: 62ch; color: var(--ink-70); }

/* ---- Works with ------------------------------------------------------- */
.sp-machine .pc-figure { background: var(--surface-2); }
.sp-tag {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
}

/* ---- Enquiry ---------------------------------------------------------- */
.sp-enquiry .mp-enquiry-copy .pd-h2 { text-wrap: balance; }
.sp-enquiry-lede { max-width: 48ch; font-size: 1.02rem; }
.sp-enquiry-contact { margin-top: 26px; max-width: 420px; }
.sp-enquiry .enquiry-shell { box-shadow: none; }
.sp-enquiry .enquiry-shell .h-sub { margin-top: 0; }
.sp-enquiry .enquiry-intro { max-width: 60ch; }
@media (min-width: 992px) {
    .sp-enquiry .mp-enquiry-copy { position: sticky; top: calc(var(--header-h, 72px) + 24px); }
}
.form-row.form-row-single { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
    .sp-toc a { transition: none; }
}

/* Two-column key/value sheet: wrap instead of scrolling sideways (site.css
   gives .spec-table a 520px floor for wide multi-column sheets). */
.sp-block .spec-table { min-width: 0; table-layout: auto; }
.sp-block .spec-table th[scope="row"] { width: 38%; overflow-wrap: anywhere; }
.sp-block .spec-table td { overflow-wrap: anywhere; }
.sp-block .spec-table-wrap::after { display: none; }
@media (max-width: 575.98px) {
    .sp-block .spec-table th, .sp-block .spec-table td { padding: 12px 14px; }
}

/* ==================================================================
   POLISH (2026-11-11, second pass, after owner feedback "too much
   spacing, formatting not good"). No database match for spacing or
   redundancy; applied the Swiss brief: essential elements only, one
   rhythm, nothing said twice.
   ================================================================== */

/* Pinned columns work on this page: head.php wraps <body> content in
   .overflow-x-hidden, and overflow:hidden makes a scroll container that
   disables position:sticky for every descendant. clip cuts the same
   sideways overflow without that (same fix as blog posts). */
body > .overflow-x-hidden:has(.pd-hero) { overflow-x: clip !important; }

/* One vertical rhythm: 40–72px per section instead of 48–96px each side. */
#main .section { padding: clamp(40px, 5vw, 72px) 0; }
.pd-hero.section-tight { padding: clamp(20px, 3vw, 36px) 0 clamp(24px, 3vw, 36px); }
.sp-band { padding: 0 0 clamp(24px, 3vw, 36px); }
.sp-block { padding-top: 28px; margin-top: 28px; }
.sp-block .pd-h2 { margin-bottom: 16px; }
.sp-guide { margin-top: 28px; }

/* Hero, right column */
.pd-hero .pd-summary { margin-top: 14px; color: var(--ink-70); max-width: 62ch; }
.pd-hero .pd-buybox { margin-top: 22px; }

/* Key points: a quiet card under the photograph, label above text. */
.sp-points {
    margin-top: 18px; padding: 20px 22px;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface);
}
.sp-points-title {
    margin: 0 0 12px;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-700);
}
.sp-points .sp-highlights {
    margin: 0; max-width: none; gap: 14px 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.sp-points .sp-highlights li { font-size: .92rem; line-height: 1.5; }
.sp-points .sp-highlights li > span { display: flex; flex-direction: column; gap: 2px; }
.sp-points .sp-highlights strong { color: var(--ink); font-weight: 700; font-size: .9rem; }
.sp-points .sp-highlights svg { margin-top: 1px; }

/* Tiles: one type style for every value, figure or phrase. */
.sp-tile { padding: 16px 20px; }
.sp-tile dd, .sp-tile.is-sm dd {
    font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; line-height: 1.35;
}

/* Specification table: label column narrower, values in body ink. */
.sp-block .spec-table th[scope="row"] { width: 30%; }
.sp-block .spec-table td { color: var(--ink-70); }
.sp-block .spec-table th, .sp-block .spec-table td { padding-top: 11px; padding-bottom: 11px; }

/* Sidebar sticks beside the long column (sticky works again, see above). */
@media (min-width: 992px) {
    .sp-details .pd-aside { position: sticky; top: calc(var(--header-h, 72px) + 20px); }
}

/* Works with: two labelled groups of compact horizontal cards (photo left,
   text right), three across on wide screens — no half-empty rows of tall
   cards for a list of two or five related items. */
.sp-works-h {
    margin: 28px 0 12px;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    font-family: var(--font-body); color: var(--ink-50);
}
.sp-works-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.sp-works-grid .pc { flex-direction: row; align-items: stretch; }
.sp-works-grid .pc:hover { transform: translateY(-2px); }
.sp-works-grid .pc-figure {
    flex: 0 0 112px; width: 112px; aspect-ratio: auto; padding: 10px;
    border-bottom: 0; border-right: 1px solid var(--line);
}
.sp-works-grid .pc-figure img { width: 92px; height: 92px; }
.sp-works-grid .pc-body { padding: 12px 16px; gap: 4px; min-width: 0; }
.sp-works-grid .pc-cat { margin: 0; font-size: .68rem; }
.sp-works-grid .pc-title { font-size: .93rem; line-height: 1.35; margin: 0; }
.sp-works-grid .pc-price { font-size: .95rem; margin: 2px 0 0; }
.sp-works-grid .pc-price small { display: inline; margin: 0 0 0 4px; }
.sp-works-grid .pc-foot { padding-top: 6px; }
.sp-works-grid .pc-foot .link-arrow { white-space: nowrap; font-size: .86rem; }
.sp-works-grid .sp-tag { font-size: .68rem; padding: 2px 8px; }

/* Phones and tablets: photo, then name and price, then key points.
   The media column dissolves (display: contents) so its two children can be
   ordered around the info column without repeating any markup. */
@media (max-width: 991.98px) {
    .sp-hero-media { display: contents; }
    .sp-hero-media > * {
        order: 1; width: 100%; flex: 0 0 100%;
        padding-inline: calc(var(--bs-gutter-x) * .5);
    }
    .sp-hero-info { order: 2; }
    .sp-hero-media > .sp-points {
        order: 3; margin: var(--bs-gutter-y) calc(var(--bs-gutter-x) * .5) 0;
        width: auto; flex: 0 0 calc(100% - var(--bs-gutter-x));
        padding: 18px 18px;
    }
}
/* Never split a label mid-word; wide enough on a phone for "Application". */
.sp-block .spec-table th[scope="row"] { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 575.98px) {
    .sp-block .spec-table th[scope="row"] { width: 40%; }
}