/* ============================================================================
 * henry_plastic.css — shared component CSS for the PLASTIC CLUSTER (PC-* / PCA-*)
 *
 * Loaded by www/product.php AFTER henry_coolgray.css and henry_fc.css, gated on the
 * curated `plastic_v1` flag — so only the plastic-cluster pages load it. Same shape as
 * henry_ind.css does for Tier 3.
 *
 * WHY THIS SHEET IS SMALL (measured, not assumed). The 7 v01 mockups carry 34 byte-identical
 * <style> blocks, ~120 KB — but almost all of it is the FC vocabulary copied wholesale: the
 * blocks include CSS for #combos, .best-for-section and #foil-range, none of which appear on
 * any plastic page. Of the 140 classes the plastic BODY actually uses, 91 are already covered
 * by the sheets a fc_v2 page loads. Only 49 are new, and 31 of those are the pricing block.
 * So this sheet ports the GAP, verbatim, and nothing else — porting the 120 KB would have
 * duplicated (and eventually forked) henry_fc.css.
 *
 * THE FAMILY HAS NO PER-PAGE SCOPED SHEETS. 34 of 34 style blocks are byte-identical across
 * all 7 pages — a tighter cohort than Tier 3 (36 of 37). A plastic page that appears to need
 * page-unique CSS is a finding to report, not a file to create.
 *
 * WHAT IS ACTUALLY REUSED (do NOT re-implement these — they already ship):
 *   #why #uses #finishes #silk #also-like -> g3-band.php   (four of them are the SAME
 *     component with different data; only the LINK mode below is additive)
 *   #material-proof -> route-band.php     (markup matches its output exactly)
 *   #final -> cta-band + .final-band modifier
 *   hero / reviews / samples / design-help / faq / worth-knowing -> the existing components
 *
 * ⚠️ THE --pm-* VARIABLES ARE DECLARED HERE ON PURPOSE. They exist only inside the mockups'
 * own <style> blocks; none is declared in henry_common / henry_coolgray / henry_fc. Porting
 * the rules without them renders every colour, border and background in this sheet DEAD —
 * the exact trap that has bitten a shared block on this project before (a var declared only
 * in the base page's sheet). Verified identical across all 7 mockups before being lifted.
 * They are namespaced --pm-* and this sheet is gated, so they cannot collide.
 *
 * PRICES ARE NEVER IN THIS SHEET OR IN THE MARKUP — they are read from the engine at render
 * time via inc/page/plastic-price.php. See that file's header for why.
 * ========================================================================== */

:root {
  --pm-cyan: #00C2FF;
  --pm-cyan-d: #0099CC;
  --pm-ink: #14181D;
  --pm-body: #424B55;
  --pm-muted: #7A8590;
  --pm-line: #E2E7EC;
  --pm-soft: #EDF1F4;
  --pm-cool: #F4F6F8;
  --pm-gold: #C9A96E;
  --pm-white: #FFFFFF;
}

/* ---- ported VERBATIM from the locked v01 mockups (mechanically extracted) ---------- */

/* --- Clickable g3 link cards (finishes / uses / related) --- */
.g3-band.g3-links a.g3-feat{ text-decoration:none; color:inherit; display:flex; flex-direction:column; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.g3-band.g3-links a.g3-feat:hover{ transform:translateY(-3px); border-color:#00C2FF;
  box-shadow:0 20px 46px rgba(12,20,30,.10); }
.g3-feat-cue{ margin-top:14px; font-weight:700; font-size:13px; letter-spacing:.02em; color:#0099CC; }
.g3-band.g3-links a.g3-feat:hover .g3-feat-cue{ color:#00C2FF; }
.g3-band.g3-related .g3-feat{ min-height:0; }
.g3-band.g3-related .g3-feat p{ display:none; }
.g3-band.g3-related .g3-feat h3{ margin-bottom:2px; }
.g3-band.silk-step .g3-feat.is-wide{ grid-column:1 / -1; }
.g3-band.silk-step .g3-feat .g3-num{ font-size:15px; letter-spacing:.16em; text-transform:uppercase; }
.faq-sub{ color:#424B55; font-size:16px; line-height:1.6; margin-top:16px; max-width:640px; }
.cta-band.final-band .final-center{ text-align:center; justify-items:center; }
.cta-band.final-band .final-center .btn-row{ justify-content:center; }
/* ============================================================
   PRICE MATRIX BAND (plastic "show the math" — self-contained)
   ============================================================ */
.pm-band{
  --pm-cyan:#00C2FF; --pm-cyan-d:#0099CC; --pm-ink:#14181D; --pm-body:#424B55;
  --pm-muted:#7A8590; --pm-line:#E2E7EC; --pm-soft:#EDF1F4; --pm-cool:#F4F6F8;
  --pm-gold:#C9A96E; --pm-white:#FFFFFF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F6F8 100%);
  padding:clamp(56px,6vw,96px) 0;
}
.pm-band > .section{ max-width:1240px; margin:0 auto; padding:0 24px; }
.pm-band .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pm-gold); margin-bottom:14px; }
.pm-band h2{ font-size:clamp(26px,3vw,38px); line-height:1.12; color:var(--pm-ink); letter-spacing:-.01em; max-width:820px; }
.pm-band .lead{ color:var(--pm-body); font-size:17px; line-height:1.65; max-width:760px; margin-top:16px; }
.pm-band h3{ color:var(--pm-ink); }
/* ══ TYPE-WIDTH CORRECTION — ⚠️ PREMISE EXPIRED 2026-08-14, READ BEFORE TRUSTING THESE VALUES ══
   ORIGINALLY (owner-directed 2026-08-05; GOTCHAS #11): the mockups declare a webfont and never
   load it, so Henry designed against HELVETICA, which was ~11-13% narrower than the Montserrat
   the built page actually loaded (same 36px string: 854px mockup vs 965px built). That made 14
   text blocks wrap ONE LINE MORE than the mockup — headlines Henry set on one line broke onto
   two. The remedy was to keep the face and SHRINK each block until its line count matched the
   mockup, rather than use the mockup's literal px. Every value below was measured that way.
   WHAT CHANGED: the site face is now MANROPE, and Manrope measures THE SAME WIDTH AS HELVETICA
   — 2026-08-14, 4 strings at 40px, with a nonsense-family fallback control proving nothing fell
   back: Manrope 607px vs Helvetica 605px (~1%), against Montserrat's 674px. The ~11-13% excess
   these shrinks compensate for NO LONGER EXISTS, so every size below is now ~8-10% SMALLER than
   Henry drew it, and the mockup's literal px values are correct again for the first time.
   ✅ RESTORED TO THE MOCKUP'S OWN VALUES 2026-08-14 (owner-directed look-sweep). Every value
   below is now read straight from the locked mockup `PC-02.html` — cross-checked against the
   values the retired `?font=helv` toggle used to restore, which were authored from the same
   mockup independently, and the two agree. So these lines no longer SHRINK anything; they
   simply pin the mockup's sizes over whatever the shared sheets would otherwise give.
   ⚠️ Only SIZE was restored. Do NOT also "restore" the mockups' declared font-WEIGHTS on the
   same reasoning — Helvetica caps at Bold, so a mockup's 800/900 has never actually rendered
   as 800/900 anywhere, and copying those numbers moves you further from the mockup, not closer.
   Scoped to the `plastic_v1` flag, so no FC page moves with this. */
#reviews .g3-head h2, #why h2, #silk h2, #finishes h2, #uses h2, #also-like h2{ font-size:clamp(21px,2.8vw,36px); }
#material-proof .route-box h2{ font-size:clamp(24px,2.4vw,32px); }
.pm-band h2{ font-size:clamp(26px,3vw,38px); }
.pm-band .value-line > p{ font-size:16px; }
.g3-band .g3-lead, .route-band .route-box > p{ font-size:clamp(14.5px,1.15vw,16.5px); }
.g3-feat p{ font-size:14.5px; }
#faq .faq-sub{ font-size:16px; }
/* ⚖️ INTENTIONAL DEVIATION, measured and left alone: the FAQ grid sits 14px tighter under its
   sub-heading than the mockup (gap a reader sees — grid top minus sub bottom — mockup 54px, ours
   40px). NOT corrected, because henry_fc.css:675 sets `margin:40px auto 0 !important` as a
   deliberate site-wide FAQ standard across ~25 pages; overriding it here would make the plastic
   family the only one whose FAQ spacing differs, to fix 14px nobody sees side by side. Shared
   component wins over a small mockup delta (the compare-and-ask rule). Surfaced to the owner. */

/* CTA-ROW LINK ALIGNMENT — `.text-link` carries `margin-top:18px` in henry_common.css for its usual
   standalone-block use. Inside this flex row (`align-items:center`) that margin shifts the link DOWN
   ~9px, so "Compare to 12mil" sat 24px below the button top against the mockup's 15px — visibly
   off-centre beside the two buttons (owner-caught 2026-08-05, mark #1). The row rule itself is
   byte-identical to the mockup's; only the inherited margin differs. */
.pm-band .matrix-cta-row .text-link{ margin-top:0; }

/* HERO ACCENT — the plastic cluster overrides the shared FC gold accent to cyan. The mockup carries
   BOTH rules: `.fw-hero .fwh-h1 em{color:#9A7B41}` (the shared default, which henry_fc.css also has)
   AND this override. Only the first was ported, so every plastic hero rendered GOLD where the mockup
   is CYAN (owner-caught 2026-08-05 on the full-page visual diff). Applies to all 7 plastic pages;
   scoped safely because this sheet loads only behind the curated `plastic_v1` flag. */
header#top .fwh-h1 em{ color:#00C2FF !important; font-style:normal; }

/* ⚠️ UNCLAIMED-PROPERTY RULE (same class as henry_ind.css's header rule; measured 2026-08-05).
   A rule that does not DECLARE a property cannot win it. `.pm-band h4{color}` claimed only colour,
   so henry_common.css's `h1,h2,h3,h4{margin:0;line-height:1.02}` + `h4{font-size:17px}` supplied the
   rest — and the mockup's h4s render at the UA default (16px / line-height normal / 1.33em bottom
   margin) because Henry never styled them. Measured user-visible gap under the two step h4s:
   mockup 21px / 24px vs built 16px / 6px. The second lost 18px, which is the cramped feel.
   Assert them here rather than widen an external allowlist. */
.pm-band h4{ color:var(--pm-ink); font-size:16px; line-height:normal; margin-bottom:1.33em; }
.pm-band p{ color:var(--pm-body); }
.pm-band .small{ font-size:13.5px; color:var(--pm-muted); line-height:1.6; }
.pm-band .value-line{ background:var(--pm-white); border:1px solid var(--pm-line); border-radius:16px;
  padding:24px 26px; box-shadow:0 10px 30px rgba(12,20,30,.05); }
.pm-band .stock-kicker{ font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
/* base price table */
.pm-band .matrix-wrap{ margin-top:22px; }
.pm-band .matrix-scroll{ overflow-x:auto; border-radius:16px; border:1px solid var(--pm-line); background:var(--pm-white);
  box-shadow:0 12px 34px rgba(12,20,30,.06); }
.pm-band table.pm{ width:100%; border-collapse:collapse; min-width:520px; }
.pm-band table.pm th{ text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--pm-muted);
  background:var(--pm-soft); padding:14px 18px; border-bottom:1px solid var(--pm-line); }
.pm-band table.pm td{ padding:15px 18px; border-bottom:1px solid var(--pm-line); font-size:15px; color:var(--pm-body); }
.pm-band table.pm td.qty{ font-weight:700; color:var(--pm-ink); }
.pm-band table.pm td.total b{ font-size:18px; color:var(--pm-ink); }
.pm-band table.pm td.per{ color:var(--pm-muted); }
.pm-band table.pm tr:last-child td{ border-bottom:0; }
.pm-band table.pm tr.is-feature td{ background:rgba(0,194,255,.06); }
.pm-band table.pm tr.is-feature td.qty::after{ content:" · popular"; color:var(--pm-cyan-d); font-weight:600; font-size:11px; letter-spacing:.04em; }
.pm-band a.pm-cellcta{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:13px; text-decoration:none;
  color:var(--pm-cyan-d); border:1.5px solid rgba(0,194,255,.5); border-radius:10px; padding:7px 12px; transition:.18s; white-space:nowrap; }
.pm-band a.pm-cellcta:hover{ background:var(--pm-cyan); border-color:var(--pm-cyan); color:#081014; }
/* step 2 finishes */
.pm-band .matrix-sub{ margin-top:36px; }
.pm-band .matrix-sub h3{ font-size:22px; }
.pm-band .finish-price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:16px; }
.pm-band a.finish-price-card{ display:flex; flex-direction:column; gap:6px; text-decoration:none; background:var(--pm-white);
  border:1px solid var(--pm-line); border-radius:14px; padding:18px 20px; transition:.2s; }
.pm-band a.finish-price-card:hover{ transform:translateY(-3px); border-color:var(--pm-cyan); box-shadow:0 18px 40px rgba(12,20,30,.10); }
.pm-band a.finish-price-card strong{ font-size:15px; color:var(--pm-ink); }
.pm-band a.finish-price-card b{ font-size:24px; color:var(--pm-ink); }
.pm-band a.finish-price-card span{ font-size:13px; color:var(--pm-muted); }
.pm-band .finish-price-note{ font-size:13px; color:var(--pm-muted); margin-top:12px; }
/* step 3 add-ons */
.pm-band .opt-wrap{ overflow-x:auto; border-radius:16px; border:1px solid var(--pm-line); background:var(--pm-white);
  box-shadow:0 12px 34px rgba(12,20,30,.06); }
.pm-band table.opt{ width:100%; border-collapse:collapse; min-width:560px; }
.pm-band table.opt th{ text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--pm-muted);
  background:var(--pm-soft); padding:14px 18px; border-bottom:1px solid var(--pm-line); }
.pm-band table.opt td{ padding:14px 18px; border-bottom:1px solid var(--pm-line); font-size:14.5px; color:var(--pm-body); vertical-align:top; }
.pm-band table.opt td.price{ font-weight:800; color:var(--pm-cyan-d); white-space:nowrap; }
.pm-band table.opt tr:last-child td{ border-bottom:0; }
.pm-band .addon-curve-card{ margin-top:22px; background:var(--pm-white); border:1px solid var(--pm-line); border-radius:18px; padding:24px; box-shadow:0 12px 34px rgba(12,20,30,.06); }
.pm-band .addon-curve-head{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start; }
.pm-band .addon-curve-head h4{ font-size:18px; }
.pm-band .addon-curve-head p{ font-size:14px; max-width:520px; margin-top:6px; }
.pm-band .addon-example{ background:var(--pm-soft); border-radius:12px; padding:12px 16px; font-size:14px; color:var(--pm-ink); font-weight:600; }
.pm-band .addon-example b{ color:var(--pm-cyan-d); }
.pm-band .addon-curve-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:18px; }
.pm-band .addon-tier{ border:1px solid var(--pm-line); border-radius:14px; padding:16px; background:var(--pm-cool); }
.pm-band .addon-tier.feature{ border-color:var(--pm-cyan); background:rgba(0,194,255,.06); }
.pm-band .addon-tier .qty{ font-size:12.5px; color:var(--pm-muted); font-weight:700; letter-spacing:.03em; }
.pm-band .addon-tier .price{ font-size:22px; font-weight:800; color:var(--pm-ink); margin-top:2px; }
.pm-band .addon-tier .note{ font-size:12px; color:var(--pm-muted); margin-top:8px; }
/* transparency compare */
.pm-band .transparency-compare{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:32px; }
.pm-band .compare-mini{ background:var(--pm-white); border:1px solid var(--pm-line); border-radius:14px; padding:18px 20px; }
.pm-band .compare-mini .label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--pm-muted); }
.pm-band .compare-mini h4{ font-size:16px; margin:8px 0 6px; }
.pm-band .compare-mini p{ font-size:13.5px; line-height:1.55; }
/* CTAs inside matrix */
.pm-band .matrix-cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px; }
.pm-band a.btn.btn-hero-ink{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:12px; border:2px solid var(--pm-ink); color:var(--pm-ink); background:transparent; transition:.2s; }
.pm-band a.btn.btn-hero-ink:hover{ border-color:var(--pm-cyan); background:var(--pm-cyan); color:#081014; box-shadow:0 0 0 4px rgba(0,194,255,.18); }
.pm-band a.text-link{ color:var(--pm-cyan-d); font-weight:700; text-decoration:none; font-size:14.5px; }
.pm-band a.text-link:hover{ text-decoration:underline; }
.pm-band .matrix-foot{ margin-top:20px; font-size:13.5px; color:var(--pm-muted); line-height:1.6; }
.pm-band .matrix-foot b{ color:var(--pm-ink); }
.pm-band .center{ text-align:center; }
@media (max-width:640px) {
  .pm-band .addon-curve-head{ flex-direction:column; }
}
/* --- Step-2 reframe: all-in surface cards (swap, not sum) --- */
.pm-band a.finish-price-card{ position:relative; }
.pm-band a.finish-price-card.is-base{ border-color:#C9A96E; background:linear-gradient(180deg,#FFFDF8 0%,#FFFFFF 60%); }
.pm-band .fp-tag{ align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color:#8F6A2B; background:rgba(201,169,110,.16); border:1px solid rgba(201,169,110,.4); border-radius:999px; padding:3px 9px; margin-bottom:2px; }
.pm-band .fp-tag.fp-tag-pop{ color:#0099CC; background:rgba(0,194,255,.10); border-color:rgba(0,194,255,.42); }
.pm-band a.finish-price-card .fp-allin{ font-size:12px; color:#7A8590; letter-spacing:.01em; }
.pm-band a.finish-price-card .fp-delta{ margin-top:8px; align-self:flex-start; font-size:12px; font-weight:800; color:#0099CC;
  background:rgba(0,194,255,.08); border:1px solid rgba(0,194,255,.28); border-radius:999px; padding:3px 10px; }
/* --- One box per step: charts sit INSIDE the value-line, no own border/shadow --- */
.pm-band .value-line .matrix-wrap{ margin-top:20px; }
.pm-band .value-line .matrix-scroll,
.pm-band .value-line .opt-wrap{ border:0; box-shadow:none; background:transparent; border-radius:10px; overflow-x:auto; }
.pm-band .value-line .opt-wrap{ margin-top:20px; }
.pm-band .value-line table.pm,
.pm-band .value-line table.opt{ border:1px solid var(--pm-line); border-radius:10px; overflow:hidden; }
.pm-band .value-line .addon-curve-card{ border:0; box-shadow:none; background:transparent; padding:0;
  border-top:1px solid var(--pm-line); border-radius:0; margin-top:22px; padding-top:22px; }
.pm-band .value-line .finish-price-grid{ margin-top:16px; }
/* --- Surface finish cards: descriptor + Choose-this-surface CTA (Henry 2026-07-22) --- */
.pm-band .finish-price-card{ display:flex; flex-direction:column; text-decoration:none; background:var(--pm-white);
  border:1px solid var(--pm-line); border-radius:14px; padding:20px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pm-band .finish-price-card:hover{ transform:translateY(-3px); border-color:var(--pm-cyan); box-shadow:0 18px 40px rgba(12,20,30,.10); }
.pm-band .finish-price-card .fp-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pm-band .finish-price-card .fp-top strong{ font-size:16px; color:var(--pm-ink); }
.pm-band .finish-price-card .fp-top b{ font-size:20px; color:var(--pm-ink); }
.pm-band .finish-price-card .fp-desc{ margin:12px 0 18px; color:var(--pm-body); font-size:13px; line-height:1.6; min-height:52px; }
.pm-band .finish-price-card .fp-cta{ margin-top:auto; color:var(--pm-cyan-d); font-weight:800; font-size:12.5px; text-decoration:none; }
.pm-band .finish-price-card .fp-cta:hover{ color:var(--pm-cyan); text-decoration:underline; }
@media (max-width:640px) {
  .pm-band .finish-price-card .fp-desc{ min-height:0; }
}
/* --- Black "Know what your card costs" promise panel (replaces 4-box strip) --- */
.pm-band .pm-promise{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr); gap:48px;
  align-items:center; padding:clamp(34px,4vw,54px); margin-top:32px; border-radius:18px; background:#14181D; color:#fff; }
.pm-band .pm-promise .pm-promise-eyebrow{ margin:0 0 12px; color:#C7A15A; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.pm-band .pm-promise h3{ margin:0; color:#fff; font-size:clamp(27px,3vw,41px); line-height:1.08; letter-spacing:-.035em; }
.pm-band .pm-promise .pm-promise-list{ display:grid; gap:15px; margin:0; padding:0; list-style:none; }
.pm-band .pm-promise .pm-promise-list li{ position:relative; padding-left:29px; color:#D9DEE2; font-size:15px; line-height:1.5; }
.pm-band .pm-promise .pm-promise-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:#00C2FF; font-weight:900; }
.pm-band .pm-promise .pm-promise-trust{ margin:18px 0 0; color:#AEB8C0; font-size:12px; line-height:1.55; }
@media (max-width:920px) {
  .pm-band .pm-promise{ grid-template-columns:1fr; gap:28px; }
}
/* --- Final section: fully centered, no buttons (sticky carries CTA) --- */
.cta-band.final-band .cta-box{ display:block !important; text-align:center; max-width:780px; margin:0 auto; }
.cta-band.final-band .cta-box > div{ display:block; }
.cta-band.final-band .cta-box .eyebrow{ display:inline-flex; justify-content:center; }
.cta-band.final-band h2{ margin-left:auto; margin-right:auto; }
.cta-band.final-band p{ margin-left:auto; margin-right:auto; max-width:640px; }

/* ── THE MOCKUP'S INLINE STYLES, ported as rules ──────────────────────────────────────────
   The #pricing band carries SEVEN inline style="" declarations. The first pass ported two and
   dropped five, which is why the band's vertical rhythm read as cramped against the mockup
   (owner-flagged 2026-08-05: "spacing still looks weird"). All seven are here now.
   Ported as RULES, never re-inlined: an inline style beats any @media rule at any specificity,
   so inlining freezes a value across every breakpoint (the .g3-cols-* lesson from the IND wave).
   Mockup source -> rule:
     .value-line          margin-top:28px   -> step 1 (the first band under the lead)
     .value-line          margin-top:0      -> step 2 (already spaced by .matrix-sub's own 36px)
     .value-line          margin-top:32px   -> step 3
     .stock-kicker        color + margin-bottom:10px
     h3                   font-size:24px; margin-bottom:10px
     h4                   margin-top:24px
     .opt-wrap            margin-top:18px                                                     */
.pm-band .value-line{ margin-top:32px; }
.pm-band > .section > .value-line:first-of-type{ margin-top:28px; }
.pm-band .matrix-sub .value-line{ margin-top:0; }
.pm-band .stock-kicker{ color:var(--pm-cyan-d); margin-bottom:10px; }
.pm-band .value-line h3{ font-size:24px; margin-bottom:10px; }
.pm-band .value-line h4{ margin-top:24px; }
.pm-band .value-line .opt-wrap{ margin-top:18px; }

/* ============================================================
   PRICE TABS (OP family — Other Products pages, first consumer OP-07 Presentation Folders
   2026-09-22). Rendered by inc/page/pm-price-tabs.php. Both blocks below are the OP-07
   mockup's own <style> blocks 34 + 35, verbatim — the only two of its 36 that the plastic
   cluster did not already ship. Block 34 is the Postcards v03 size switcher; block 35 layers
   the tab head + panel blurb on it (its "soon" styles are carried for the siblings, unused here).
   ============================================================ */
/* === PM SIZE TABS (OP-01 v03) — 4x6 / 5x7 / 6x9 switcher on the Step 1 matrix === */
.pm-band .pm-sizetabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;
  background:var(--pm-soft); border:1px solid var(--pm-line); border-radius:14px; padding:8px;
}
.pm-band .pm-sizetab{
  flex:1 1 150px; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  font:inherit; text-align:left; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:10px; padding:11px 14px;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pm-band .pm-sizetab .pm-sizetab-name{ font-weight:800; font-size:16px; color:var(--pm-ink); letter-spacing:-.01em; }
.pm-band .pm-sizetab .pm-sizetab-note{ font-size:12px; color:var(--pm-muted); line-height:1.35; }
.pm-band .pm-sizetab:hover{ background:rgba(255,255,255,.7); border-color:var(--pm-line); }
.pm-band .pm-sizetab:focus-visible{ outline:none; border-color:var(--pm-cyan);
  box-shadow:0 0 0 3px rgba(0,194,255,.35); }
.pm-band .pm-sizetab.is-active{
  background:var(--pm-white); border-color:var(--pm-cyan);
  box-shadow:0 0 0 1px var(--pm-cyan), 0 8px 20px rgba(0,194,255,.14);
}
.pm-band .pm-sizetab.is-active .pm-sizetab-name{ color:var(--pm-cyan-d); }
.pm-band .pm-sizetabs-hint{ font-size:13px; color:var(--pm-muted); margin:0 0 12px; }
.pm-band .pm-sizetabs-hint b{ color:var(--pm-ink); }
.pm-band .pm-panel[hidden]{ display:none !important; }
.pm-band .pm-panel:focus{ outline:none; }
.pm-band .pm-panel:focus-visible{ outline:2px solid var(--pm-cyan); outline-offset:3px; border-radius:16px; }
@media (max-width:640px){
  .pm-band .pm-sizetab{ flex:1 1 100%; }
  .pm-band .pm-sizetab .pm-sizetab-note{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pm-band .pm-sizetab{ transition:none; }
}

/* === OP-04 PRESENTATION FOLDERS: tab head wrapper + panel blurb, layered on the v03 tab component === */
.pm-band .pm-sizetab .pm-sizetab-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pm-band .pm-sizetab .pm-sizetab-soon{
  display:inline-block;  font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
  color:#8A5A00; background:#FFF6E5; border:1px solid #F0D9A8;
  border-radius:999px; padding:2px 7px;
}
.pm-band .pm-sizetab.is-soon .pm-sizetab-name{ color:var(--pm-muted); }
.pm-band .pm-sizetab.is-soon.is-active{ border-color:#E8C99A; box-shadow:0 0 0 1px #E8C99A, 0 8px 20px rgba(201,169,110,.16); }
.pm-band .pm-sizetab.is-soon.is-active .pm-sizetab-name{ color:#8A5A00; }
.pm-band .pm-panel-blurb{ font-size:14.5px; line-height:1.6; color:var(--pm-body); margin:0 0 14px; max-width:760px; }
.pm-band .pm-soon-card{
  background:var(--pm-white); border:1px dashed #E8C99A; border-radius:16px;
  padding:26px 24px; text-align:left;
}
.pm-band .pm-soon-card .pm-soon-badge{
  display:inline-block; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:#8A5A00; background:#FFF6E5; border:1px solid #F0D9A8; border-radius:999px;
  padding:5px 11px; margin-bottom:12px;
}
.pm-band .pm-soon-card h4{ font-size:19px; margin:0 0 8px; color:var(--pm-ink); }
.pm-band .pm-soon-card p{ font-size:14.5px; line-height:1.65; margin:0 0 18px; max-width:640px; }
.pm-band .pm-soon-card .btn-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* === OP-08 CATALOGS: quote banner + spec cards, layered on the v03 tab component ===
   The OP-08 mockup's <style> block 35, verbatim, except ONE scoping change: its 8-tab grid rule
   was written against every .pm-sizetabs, which would reflow the two-tab Folders and Rack Cards
   switchers into a 4-column grid. Here it is keyed to .pm-sizetabs--grid4, which only the
   catalog page sets (inc/page/product-bespoke/catalog-printing.php, 2026-09-22). */
.pm-band .quote-banner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--pm-white); border:1px solid var(--pm-cyan); border-radius:16px;
  padding:22px 24px; margin-top:24px; box-shadow:0 12px 34px rgba(0,194,255,.10);
}
.pm-band .quote-banner-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; color:var(--pm-cyan-d);
  background:rgba(0,194,255,.10); display:flex; align-items:center; justify-content:center;
}
.pm-band .quote-banner > div:nth-child(2){ flex:1 1 320px; }
.pm-band .quote-banner h3{ font-size:18px; margin:0 0 6px; color:var(--pm-ink); }
.pm-band .quote-banner p{ font-size:14.5px; line-height:1.6; margin:0; }
.pm-band .cat-spec{ background:var(--pm-white); border:1px solid var(--pm-line); border-radius:16px; padding:22px 24px; }
.pm-band .cat-spec-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px;
}
.pm-band .cat-spec-cell{
  display:flex; flex-direction:column; gap:4px;
  background:var(--pm-cool); border:1px solid var(--pm-line); border-radius:12px; padding:13px 15px;
}
.pm-band .cat-spec-k{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pm-muted); }
.pm-band .cat-spec-v{ font-size:16px; font-weight:800; color:var(--pm-ink); }
.pm-band .cat-spec-v.is-quote{ color:var(--pm-cyan-d); }
.pm-band .cat-spec-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pm-band .cat-spec-note{ font-size:13px; color:var(--pm-muted); }

/* 8 length tabs: force an even grid so "Custom" never strands on a row of its own */
@media (min-width:900px){
  .pm-band .pm-sizetabs--grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pm-band .pm-sizetabs--grid4 .pm-sizetab{ flex:none; }
}
@media (min-width:641px) and (max-width:899px){
  .pm-band .pm-sizetabs--grid4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pm-band .pm-sizetabs--grid4 .pm-sizetab{ flex:none; }
}