/* ===========================================================================
   pp-product.css -- R4 Step 7 layer for the single-product surface
   (wp_template 110 "single-product" + the nine product post_content bodies).

   LOADED BY: novamira-sandbox/pp-redesign-product.php, on is_singular('product')
   only, as the LAST link of the chain
       pp-tokens -> pp-site-scoped -> pp-compat -> pp-product

   AUTHORITY: design-reference/claude-concept/product.html + css/pp-site.css
   (values copied, never rounded); redesign/02-design-system-analysis.md;
   redesign/04-content-adaptation.md s2a/s2c/s2e/s2f/s3;
   redesign/05-wordpress-mapping.md s3 (product.html row);
   redesign/build/step-07/STEP-7-PACKET.md -- the pinned candidate set, the
   full rationale, the recorded design decisions D7-1..D7-8 and the rollback.

   SCOPE RULE: every rule opens on `.pp-site`. The surface root is the <main>
   element of wp_template 110. Nothing here is global; nothing leaks to a
   legacy page.

   ------------------------------------------------------------------------
   PROTECTED COMMERCE SURFACE -- WHAT THIS FILE DELIBERATELY DOES NOT TOUCH
   ------------------------------------------------------------------------
   The A4 add-to-cart safety re-derivation (MIGRATION-PLAN s4b A4, D4) has NOT
   been performed. Until it has, buy-block styling is prohibited. This file
   therefore contains ZERO EXECUTABLE declarations whose selector can reach the
   WooCommerce buy block or the artefacts that repair it. The excluded
   families, named here once so the exclusion is auditable and never a blanket
   claim -- raw occurrences below are THIS COMMENT ONLY, executable count 0:

       .wp-block-woocommerce-add-to-cart-with-options
       .wc-block-add-to-cart-with-options
       [data-block-name="woocommerce/add-to-cart-with-options"]
       .single_add_to_cart_button
       [hidden]
       .pp-proceed / .pp-proceed-wrap / .pp-proceed-note / .pp-buy-degraded

   Why it matters: WooCommerce 11 gates the buy button with the HTML `hidden`
   attribute; custom_css post 27's "Buttons and links" rule sets
   display:inline-flex !important on .single_add_to_cart_button, defeating the
   gate; pp-buy-block-fix.php restores it with its own !important display:none
   inside the block only. That three-way cascade is the live safety mechanism.
   Step 7 adds nothing to it and removes nothing from it.

   Inherited-only exposure, measured rather than assumed: adding `.pp-site` to
   <main> brings the applied step-5 root layer (pp-site-scoped.css rows 30-38)
   into scope over the buy block. Measured on the live file: that layer has
   ZERO [hidden] selectors, and all 17 of its display declarations sit on
   selectors carrying a .pp- class token, which the buy block never emits --
   so none can match inside it. box-sizing:border-box is already the live
   computed value site-wide from post 27's own *,*::before,*::after reset, so
   that rule is a no-op. The display/hidden cascade the A4 story rests on is
   therefore unchanged by Step 7. This is a scoped non-regression argument for
   the styling actually shipped -- it is NOT the A4 re-derivation, it does not
   discharge A4, and it authorises no buy-block styling now or later.

   ------------------------------------------------------------------------
   !important POLICY
   ------------------------------------------------------------------------
   The nine product bodies are NOT rewritten by Step 7 (production wording is
   preserved byte-identically), so they keep their legacy class names, and the
   founder sheet in post 27 targets several of those names with !important.
   Specificity cannot beat !important. Every !important below is therefore
   MATCHED one-to-one to a specific legacy !important declaration on the same
   property and the same element, and is documented in place beside the legacy
   rule it answers. It is used nowhere else in this file.

   FORBIDDEN CONSTRUCTS (audited, comment-stripped): no :root, no @keyframes,
   no @import, no bare body{ / html{, no custom-property definitions, no
   reference to the legacy token names (--pp-navy, --pp-blue, --pp-ice,
   --pp-silver, --pp-slate, --pp-white, --pp-radius, --pp-radius-small).

   ROLLBACK: novamira/delete-file on this file -- one operation.
   =========================================================================== */


/* ============ 1. SURFACE ROOT + SHELL ============
   SRC pp-site.css 83 (.pp-page-top:150px) is NOT reproduced: the sitewide
   clearance for the fixed pill is already supplied by template part 79's
   .pp-pill-clearance spacer (pp-header.css G: 150px / 104px <=700). The
   catalogue lane took the same decision (pp-catalogue.css departure 1). */
.pp-site .pp-pdp-page{padding-block:0 0;background:var(--pp-surface-page)}
.pp-site .pp-pdp-shell{padding-block-end:96px}


/* ============ 2. BREADCRUMBS ============
   SRC product.html 31-33: mono, 12px, --pp-text-muted, margin-bottom 40px.
   WooCommerce renders either the block or the classic markup depending on
   version; both are styled to the same result. */
.pp-site .wp-block-woocommerce-breadcrumbs,
.pp-site .wc-block-breadcrumbs,
.pp-site .woocommerce-breadcrumb{margin:0 0 40px;font-family:var(--pp-font-mono);font-size:12px;line-height:1.6;color:var(--pp-text-muted)}
.pp-site .wc-block-breadcrumbs a,
.pp-site .woocommerce-breadcrumb a{color:var(--pp-text-muted)}
.pp-site .wc-block-breadcrumbs a:hover,
.pp-site .woocommerce-breadcrumb a:hover{color:var(--pp-blue-600)}


/* ============ 3. PDP HERO GRID ============
   SRC product.html 35: grid-template-columns:1.1fr .9fr; gap:70px;
   align-items:start. The wp:columns block is re-laid as a grid. */
.pp-site .pp-pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start;margin:0}
.pp-site .pp-pdp>.wp-block-column{flex-basis:auto;min-width:0;margin:0}


/* ============ 4. GALLERY PLATE ============
   Framed plate = radius-md + neutral-50 ground + hairline, i.e. the concept's
   .pp-tile__img treatment at page scale (SRC pp-site.css 108-110).

   DEPARTURE D7-1, recorded: the concept hard-codes aspect-ratio:4/3 +
   object-fit:cover on the PDP image (product.html 39). That is NOT carried.
   The nine live assets ship at two source ratios -- 1264x848 (1.490566, the
   pens) and 1448x1086 (1.333333, the vial PNGs) -- so ANY fixed ratio with
   `cover` crops one family. That is the launch-blocking defect class recorded
   as MIGRATION-PLAN item 13d (G1 subject containment). Natural aspect is
   therefore preserved: no aspect-ratio, no object-fit, no width/height
   override. Containment is total by construction, and the block's own srcset
   and sizes are untouched (item 13c is scoped to the homepage reel and the
   catalogue archive; the PDP gallery is not in its scope and must not be made
   worse here). */
.pp-site .pp-pdp__media .wc-block-product-gallery,
.pp-site .pp-pdp__media .wp-block-woocommerce-product-gallery{margin:0}
.pp-site .pp-pdp__media .wc-block-components-product-image,
.pp-site .pp-pdp__media .wp-block-woocommerce-product-image{margin:0;overflow:hidden;border:1px solid var(--pp-border-subtle);border-radius:var(--pp-radius-md);background:linear-gradient(70deg,#e8f2fd 0%,#d2e4f8 30%,#b0d0f1 62%,#8abcec 100%)}
.pp-site .pp-pdp__media .wc-block-components-product-image img,
.pp-site .pp-pdp__media .wp-block-woocommerce-product-image img{display:block;width:100%;height:auto;aspect-ratio:1/1 !important;object-fit:cover;margin:0;border-radius:0}
.pp-site .pp-pdp__media .wc-block-woocommerce-product-gallery-large-image__image{display:block;width:100%;height:auto;aspect-ratio:1/1 !important;object-fit:cover}


/* ============ 5. AVAILABILITY ============
   [pp_product_availability] emits
   <p class="pp-product-availability is-available"><span aria-hidden></span>Available</p>
   (Catalogue Manager plugin, unmodified). Restyled to the concept's .pp-badge
   register (SRC pp-site.css 166-171): status colours are muted on purpose and
   never out-shout brand blue. */
.pp-site .pp-pdp__avail{margin:0 0 18px}
.pp-site .pp-product-availability{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--pp-radius-xs);font-family:var(--pp-font-sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;background:var(--pp-neutral-100);color:var(--pp-neutral-600)}
.pp-site .pp-product-availability.is-available{background:var(--pp-green-100);color:var(--pp-green-600)}
.pp-site .pp-product-availability.is-unavailable{background:var(--pp-amber-100);color:var(--pp-amber-600)}
.pp-site .pp-product-availability span[aria-hidden]{width:5px;height:5px;border-radius:var(--pp-radius-pill);background:currentColor}


/* ============ 6. SUMMARY COLUMN ============ */

/* Eyebrow -- template markup, carries .pp-kicker from the shared sheet. */
.pp-site .pp-pdp__summary .pp-kicker{margin:0}

/* H1. SRC product.html 53: .pp-display .pp-display--sm, margin-top 12px. */
.pp-site .pp-pdp__summary .wp-block-post-title{margin:12px 0 0;max-width:none;font-family:var(--pp-font-display);font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--pp-text-heading);overflow-wrap:normal}

/* Identity meta from [pp_product_identity] -- strength + format spans, in the
   mono data register (anything that is a figure or a record). */
.pp-site .pp-product-summary__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:14px 0 0;font-family:var(--pp-font-mono);font-size:12px;letter-spacing:.02em;color:var(--pp-text-muted)}
.pp-site .pp-product-summary__meta span{display:inline-flex;align-items:center}
.pp-site .pp-product-summary__meta span+span::before{content:'\00B7';margin-right:14px;color:var(--pp-border-strong)}

/* Price. SRC product.html 54: mono, 21px, --pp-navy-700, weight 600,
   margin-top 16px. This is the product-price BLOCK, a sibling of the buy
   block -- not inside it, and carrying none of its state contract. The
   DIRECT-CHILD combinator is deliberate and load-bearing: it makes it
   structurally impossible for this rule to reach a price element nested
   anywhere inside the buy block, without this file having to name the buy
   block. If a future wrapper breaks the match, the price falls back to theme
   defaults -- a visible QA failure, never a commerce one. */
.pp-site .pp-pdp__summary>.wp-block-woocommerce-product-price{margin:16px 0 0;font-family:var(--pp-font-mono);font-size:21px;font-weight:600;line-height:1.3;color:var(--pp-navy-700)}
.pp-site .pp-pdp__summary>.wp-block-woocommerce-product-price del{opacity:.5;font-weight:400}
.pp-site .pp-pdp__summary>.wp-block-woocommerce-product-price ins{text-decoration:none}

/* Short description. SRC product.html 58: 15px/1.7, max-width 460,
   margin-top 26px. */
.pp-site .pp-pdp__summary .wp-block-woocommerce-product-summary{margin:26px 0 0;max-width:460px;font-family:var(--pp-font-sans);font-size:15px;line-height:1.7;color:var(--pp-text-body)}
.pp-site .pp-pdp__summary .wp-block-woocommerce-product-summary p{margin:0 0 14px}
.pp-site .pp-pdp__summary .wp-block-woocommerce-product-summary p:last-child{margin-bottom:0}

/* Secondary actions. SRC product.html 94: .pp-link register. */
.pp-site .pp-pdp__actions{display:flex;flex-wrap:wrap;gap:26px;margin:34px 0 0}
.pp-site .pp-pdp__actions a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pp-navy-700);border-bottom:1px solid var(--pp-border-default);padding-bottom:3px;min-height:44px;display:inline-flex;align-items:center}
.pp-site .pp-pdp__actions a:hover{border-color:var(--pp-blue-600)}

/* RUO notice. SRC product.html 96 places .pp-notice--boxed at the foot of the
   summary column; 04-content-adaptation s3.7 requires the BOXED navy-text
   variant on product surfaces. The component is already defined in the shared
   sheet (rows 102-103) -- reused, never forked. Wording is the existing
   production-source string, live on the homepage in both of its placements
   (reconciliation/05-homepage-sourcing.md slots 6 and 42); nothing is
   authored here. */
.pp-site .pp-pdp__ruo{margin:26px 0 0;max-width:460px}


/* ============ 7. ASSURANCE STRIP ============
   The four-item strip from wp_template 110, content unchanged (existing
   production wording + the existing line icons). Re-set as a ruled ledger in
   the concept's register instead of the legacy card row. */
.pp-site .pp-pdp-assurance{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:40px 0 0;border-top:1px solid var(--pp-border-subtle)}
.pp-site .pp-pdp-assurance__item{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:20px 0;border-bottom:1px solid var(--pp-border-subtle)}
.pp-site .pp-pdp-assurance__icon{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;color:var(--pp-blue-600)}
.pp-site .pp-pdp-assurance__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pp-site .pp-pdp-assurance__item b{font-family:var(--pp-font-sans);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--pp-text-heading)}
.pp-site .pp-pdp-assurance__item span:not(.pp-pdp-assurance__icon){font-family:var(--pp-font-sans);font-size:13px;line-height:1.55;color:var(--pp-text-muted)}


/* ============ 8. DOCUMENT BODY -- SECTION RHYTHM ============
   04-content-adaptation s2a: one measure, 96px between top-level sections,
   mono section numbering with a hairline beneath, H2 at the intermediate
   .pp-heading-2 register. */
.pp-site .pp-pdp__doc{margin:96px 0 0}
.pp-site .pp-product-copy{max-width:none;color:var(--pp-text-body)}

/* Body kicker (the strength line above the intro).
   MATCHED !important x2 -- answers post 27
   `.pp-product-kicker{color:var(--pp-blue)!important;font-size:12px!important}`.
   Same two properties, same element, no others. */
.pp-site .pp-product-kicker{margin:0;font-family:var(--pp-font-sans);font-size:10.5px !important;letter-spacing:var(--pp-ls-eyebrow);text-transform:uppercase;font-weight:600;color:var(--pp-text-accent) !important}

.pp-site .pp-product-intro{max-width:620px;margin:22px 0 0;font-family:var(--pp-font-sans);font-size:16px;line-height:1.7;color:var(--pp-text-body)}

.pp-site .pp-product-section{margin:0;padding:96px 0 0;border-top:0}
.pp-site .pp-product-section:first-of-type{padding-top:70px}

/* PDP pruning: every remaining product body contains only the preserved
   "Also in the catalog" section. Keep the existing shared document gap
   (96px desktop / responsive overrides below), but remove the first-section
   inset so the catalogue heading does not float in a second empty gap. */
.pp-site .pp-product-copy--catalogue-only .pp-product-section:first-of-type{padding-top:0}

/* Section number label.
   MATCHED !important x2 -- answers post 27
   `.pp-product-section-label{color:var(--pp-blue)!important;font-size:11px!important}`.
   Same two properties, same element, no others. */
.pp-site .pp-product-section-label{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--pp-border-subtle);font-family:var(--pp-font-mono);font-size:11.5px !important;letter-spacing:var(--pp-ls-label);text-transform:uppercase;font-weight:500;color:var(--pp-text-accent) !important}

.pp-site .pp-product-section h2{margin:0 0 26px;max-width:760px;font-family:var(--pp-font-display);font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1.14;color:var(--pp-text-heading)}
.pp-site .pp-product-section h3{margin:40px 0 0;font-family:var(--pp-font-sans);font-size:17px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--pp-text-heading)}

.pp-site .pp-product-section p,
.pp-site .pp-product-section li{max-width:640px;font-family:var(--pp-font-sans);font-size:15px;line-height:1.7;color:var(--pp-text-body)}
.pp-site .pp-product-section p{margin:22px 0 0}
.pp-site .pp-product-section h3+p{margin-top:14px}
.pp-site .pp-product-section strong{color:var(--pp-text-heading);font-weight:600}
.pp-site .pp-product-section em{font-style:italic}
.pp-site .pp-product-section a{color:var(--pp-text-accent);border-bottom:1px solid var(--pp-blue-200);transition:border-color var(--pp-dur-fast) var(--pp-ease),color var(--pp-dur-fast) var(--pp-ease)}
.pp-site .pp-product-section a:hover{color:var(--pp-blue-700);border-bottom-color:var(--pp-blue-500)}
.pp-site .pp-product-section ul{margin:22px 0 0;padding-left:20px;list-style:disc}
.pp-site .pp-product-section li{margin-top:10px}


/* ============ 9. s01 PRODUCT FACTS -- the spec list ============
   SRC pp-site.css 157-160 (.pp-spec / .pp-spec__row). The live markup is a
   flat dl of dt/dd pairs with no row wrappers, so the row rhythm is produced
   by a two-column grid with a hairline on each cell instead of by a flex row.
   Same rendered result, same values. */
.pp-site .pp-product-facts{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;padding:0;overflow:visible;border:0;border-top:1px solid var(--pp-border-subtle);border-radius:0;background:none}
.pp-site .pp-product-facts dt,
.pp-site .pp-product-facts dd{margin:0;padding:14px 0;border-bottom:1px solid var(--pp-border-subtle);background:none;font-family:var(--pp-font-mono);font-size:13px;line-height:1.5;font-weight:400}
.pp-site .pp-product-facts dt{color:var(--pp-text-subtle)}
.pp-site .pp-product-facts dd{padding-left:var(--pp-space-6);text-align:right;color:var(--pp-text-heading)}


/* ============ 10. s02 DOCUMENTATION -- the record card ============
   04-content-adaptation s2e: verify.html's .pp-coa vessel, re-founded on the
   approved record schema. Two live shapes: the reduced status card
   (.pp-document-status, eight products) and the full record (.pp-docrecord,
   product 41). */
.pp-site .pp-document-status{margin:0;padding:34px;border:1px solid var(--pp-border-subtle);border-left:2px solid var(--pp-blue-500);border-radius:var(--pp-radius-sm);background:var(--pp-neutral-50)}
.pp-site .pp-document-status h2{margin:0 0 20px;font-size:27px}
.pp-site .pp-document-status p{max-width:600px}
.pp-site .pp-document-status p:first-of-type{margin-top:0}
.pp-site .pp-document-status strong{color:var(--pp-text-heading);font-size:inherit}

.pp-site .pp-docrecord{margin:0;padding:34px;border:1px solid var(--pp-border-subtle);border-radius:var(--pp-radius-md);background:var(--pp-neutral-25)}
.pp-site .pp-docrecord__head{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0;border-top:1px solid var(--pp-border-subtle)}
.pp-site .pp-docrecord__field{display:flex;justify-content:space-between;align-items:baseline;gap:var(--pp-space-6);padding:14px 0;border-bottom:1px solid var(--pp-border-subtle);font-family:var(--pp-font-mono);font-size:13px}
.pp-site .pp-docrecord__field dt{margin:0;color:var(--pp-text-subtle)}
.pp-site .pp-docrecord__field dd{margin:0;text-align:right;color:var(--pp-text-heading)}
.pp-site .pp-docrecord__field dd small{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--pp-text-muted)}
.pp-site .pp-docrecord__body{margin-top:34px}
.pp-site .pp-docrecord__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin:0 0 30px}
.pp-site .pp-docrecord__body p{max-width:600px}
.pp-site .pp-docrecord__body p:first-of-type{margin-top:0}

/* Verification key -- an identifier, therefore the mono data register. */
.pp-site a.pp-verifykey{display:inline-flex;align-items:center;min-height:44px;font-family:var(--pp-font-mono);font-size:12px;line-height:1.5;color:var(--pp-text-accent);border-bottom:1px solid var(--pp-blue-200)}
.pp-site a.pp-verifykey b{font-weight:600;letter-spacing:.04em}
.pp-site a.pp-verifykey:hover{color:var(--pp-blue-700);border-bottom-color:var(--pp-blue-500)}

/* Strength-scoping flag -- a designed element of the record, never fine print
   (04-content-adaptation s2e / s3.6). */
.pp-site .pp-scopeflag{margin:0 0 26px;padding:20px 22px;border:1px solid var(--pp-border-default);border-radius:var(--pp-radius-sm);background:var(--pp-surface-page)}
.pp-site .pp-scopeflag strong{display:block;font-family:var(--pp-font-sans);font-size:15px;line-height:1.5;color:var(--pp-text-heading)}
.pp-site .pp-scopeflag p{margin-top:10px;max-width:600px}
.pp-site .pp-doc-lead{font-size:16px;line-height:1.65;color:var(--pp-text-heading)}


/* ============ 11. s05 RESEARCH CONTEXT ============
   pull-out, mechanism list, evidence table, closer, references. Product 41
   carries all of these; the other eight carry none, and the template must
   tolerate that without looking broken. */
.pp-site .pp-pullwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;margin:0}
.pp-site .pp-pullwrap__copy{min-width:0}
.pp-site .pp-pullwrap__copy>p:first-child{margin-top:0}

.pp-site .pp-pullstat{margin:0;padding:26px 28px;border:1px solid var(--pp-border-subtle);border-top:2px solid var(--pp-blue-500);border-radius:var(--pp-radius-sm);background:var(--pp-surface-accent-soft)}
.pp-site .pp-pullstat__label{display:block;font-family:var(--pp-font-sans);font-size:10.5px;letter-spacing:var(--pp-ls-eyebrow);text-transform:uppercase;font-weight:600;color:var(--pp-text-accent)}
.pp-site .pp-pullstat dl{display:flex;align-items:baseline;gap:22px;margin:20px 0 0}
.pp-site .pp-pullstat dl>div{display:flex;align-items:baseline;gap:8px}
.pp-site .pp-pullstat dt{margin:0;font-family:var(--pp-font-display);font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--pp-navy-700)}
.pp-site .pp-pullstat dd{margin:0;font-family:var(--pp-font-sans);font-size:13px;line-height:1.4;color:var(--pp-text-body)}
.pp-site .pp-pullstat__rule{width:1px;align-self:stretch;min-height:34px;background:var(--pp-border-default)}

.pp-site .pp-mech{margin:22px 0 0;border-top:1px solid var(--pp-border-subtle)}
.pp-site .pp-mech>div{padding:20px 0;border-bottom:1px solid var(--pp-border-subtle)}
.pp-site .pp-mech dt{margin:0;font-family:var(--pp-font-sans);font-size:13px;letter-spacing:.02em;font-weight:600;color:var(--pp-text-heading)}
.pp-site .pp-mech dd{margin:8px 0 0;max-width:600px;font-family:var(--pp-font-sans);font-size:15px;line-height:1.7;color:var(--pp-text-body)}

/* Evidence table -- SRC pp-site.css 161-163 (.pp-table): rules and air only,
   never zebra striping, boxed cells or shaded headers. Restacks to cards at
   <=700 in s17, per 04-content-adaptation s2c. */
.pp-site .pp-evidence{width:100%;margin:26px 0 0;border-collapse:collapse;font-family:var(--pp-font-sans)}
.pp-site .pp-evidence caption{margin:0 0 22px;max-width:640px;text-align:left;font-size:13px;line-height:1.6;color:var(--pp-text-muted)}
.pp-site .pp-evidence th{text-align:left;font-family:var(--pp-font-sans);font-size:11px;letter-spacing:var(--pp-ls-label);text-transform:uppercase;font-weight:600;color:var(--pp-text-muted);padding:0 var(--pp-space-6) 16px 0;border-bottom:1px solid var(--pp-navy-700);vertical-align:bottom}
.pp-site .pp-evidence tbody th{font-size:15px;letter-spacing:0;text-transform:none;color:var(--pp-text-heading);padding:22px var(--pp-space-6) 22px 0;border-bottom:1px solid var(--pp-border-subtle);vertical-align:top;max-width:220px}
.pp-site .pp-evidence td{padding:22px var(--pp-space-6) 22px 0;border-bottom:1px solid var(--pp-border-subtle);vertical-align:top;font-size:14px;line-height:1.6;color:var(--pp-text-body);max-width:none}
.pp-site .pp-evidence td:last-child,
.pp-site .pp-evidence th:last-child{padding-right:0}
.pp-site .pp-cite{display:block;margin-top:8px;font-family:var(--pp-font-mono);font-size:11.5px;line-height:1.5;color:var(--pp-text-muted)}
.pp-site .pp-verdict{color:var(--pp-text-heading)}

/* Canonical closer -- a designed terminal element at body weight, never
   shrunk or greyed (04-content-adaptation s3.6). */
.pp-site .pp-closer{margin:44px 0 0;padding:26px 28px;border:1px solid var(--pp-border-subtle);border-radius:var(--pp-radius-sm);background:var(--pp-neutral-50)}
.pp-site .pp-closer p{max-width:620px;color:var(--pp-navy-700)}
.pp-site .pp-closer p:first-child{margin-top:0}
.pp-site .pp-closer strong{color:var(--pp-navy-700)}

/* References -- open-rendered, the credibility payload
   (04-content-adaptation s4.7). PMIDs are identifiers, so they sit in the
   mono data register. */
.pp-site .pp-refs{margin:22px 0 0;padding:0;list-style:none;counter-reset:pp-ref;border-top:1px solid var(--pp-border-subtle)}
.pp-site .pp-refs li{counter-increment:pp-ref;position:relative;margin:0;padding:18px 0 18px 38px;border-bottom:1px solid var(--pp-border-subtle);max-width:none;font-size:14px;line-height:1.65}
.pp-site .pp-refs li::before{content:counter(pp-ref);position:absolute;left:0;top:18px;font-family:var(--pp-font-mono);font-size:12px;color:var(--pp-text-subtle)}
.pp-site .pp-pmid{font-family:var(--pp-font-mono);font-size:12px;color:var(--pp-text-muted);white-space:nowrap}


/* ============ 12. s06 COMMON QUESTIONS -- the accordion ============
   04-content-adaptation s2f: native <details> styled in the concept's
   .pp-summary grammar (flat hairline rows, mono +/- marker). Answers are
   server-rendered in full, so AI extraction and SEO are unaffected. The
   FAQPage payload is curated separately from this DOM and is NOT generated
   from it (s3.2) -- Step 7 emits no schema of any kind. */
.pp-site .pp-product-faq{margin:0;border-top:1px solid var(--pp-border-subtle)}
.pp-site .pp-product-faq details{padding:0;border-bottom:1px solid var(--pp-border-subtle)}
.pp-site .pp-product-faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--pp-font-sans);font-size:16px;line-height:1.45;font-weight:600;color:var(--pp-text-heading);transition:color var(--pp-dur-fast) var(--pp-ease)}
.pp-site .pp-product-faq summary:hover{color:var(--pp-blue-600)}
.pp-site .pp-product-faq summary::-webkit-details-marker{display:none}
.pp-site .pp-product-faq summary::after{content:'+';width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;font-family:var(--pp-font-mono);font-size:17px;line-height:1;color:var(--pp-text-muted);transform:none;transition:color var(--pp-dur-fast) var(--pp-ease)}
.pp-site .pp-product-faq details[open]>summary::after{content:'\2212';transform:none}
.pp-site .pp-product-faq p{margin:0 0 26px;max-width:640px;font-size:15px;line-height:1.7;animation:none}


/* ============ 13. s07 ORDERING ============
   ------------------------------------------------------------------
   STRUCTURAL GUARD -- DO NOT CONVERT s07 TO <details>/AN ACCORDION.
   s07 Ordering is deliberately structured UNLIKE the s06 FAQ directly
   above it so it can never be scraped into a FAQPage payload, and its
   HTML is sha1-protected (bdbf2aee...) and byte-identical across all
   nine products. It renders as an OPEN numbered section: label
   "07 / Ordering", H2 "Delivery, packaging and returns", three open H3
   sub-blocks. CSS may wrap and style it; the DOM is never restructured.
   Authority: MIGRATION-PLAN s3a; 04-content-adaptation s3.1.

   s07 needs and gets NO rules of its own. Its silhouette is produced
   entirely by the generic open-section rules in s8 above -- H2 + open H3
   sub-blocks + prose at the standard measure -- while s06 directly above
   it is the only section on the page rendered as hairline rows with
   summary markers (s12). The two are therefore visually distinct by
   construction, and nothing here could be "unified" with s06 without
   deleting s12 or restructuring the protected body DOM.
   ------------------------------------------------------------------ */


/* ============ 14. ALSO IN THE CATALOG ============
   The body's own editorial cross-reference list (existing production
   wording). Set as a ruled ledger so it reads as part of the document, not as
   a second product grid -- the tile grid at the page foot (s16) is the
   catalogue strip, and the two must not read as one component (D7-3). */
/* PP-FIX C6 (2026-08-29): the ruled ledger read as plain bulleted text links
   under an otherwise carded design. The same three <li>s now render as mini
   record cards -- product name as the card title, the body's own "-- role,
   AED price" text as the card meta line. No page body is rewritten: the
   markup is untouched, only the register changes. (The audit's other C6 note
   -- the KLOW pen render being indistinguishable from MOTS-c at card sizes --
   needs a re-shot product image, not CSS, and remains open.) */
.pp-site .pp-product-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:8px 0 0;list-style:none;border-top:0}
.pp-site .pp-product-related li{position:static;min-width:0;max-width:none;margin:0;padding:24px 26px 26px;border:1px solid var(--pp-border-subtle);border-bottom:1px solid var(--pp-border-subtle);border-radius:var(--pp-radius-sm);background:var(--pp-surface-page);box-shadow:none;transform:none;transition:box-shadow var(--pp-dur-slow) var(--pp-ease-out),transform var(--pp-dur-slow) var(--pp-ease-out);font-family:var(--pp-font-sans);font-size:13.5px;line-height:1.6;color:var(--pp-text-muted)}
.pp-site .pp-product-related li:hover{border-color:var(--pp-border-subtle);border-bottom-color:var(--pp-border-subtle);background:var(--pp-surface-page);box-shadow:var(--pp-shadow-lift);transform:translateY(-2px)}
.pp-site .pp-product-related li::after{content:none;display:none}
@media (max-width:860px){
  .pp-site .pp-product-related{grid-template-columns:1fr;gap:16px}
}

/* MATCHED !important x2 -- answers post 27 `.pp-product-related li a{color:
   var(--pp-navy)!important;text-decoration:none!important}`. */
.pp-site .pp-product-related li a{display:block;margin:0 0 8px;padding:0;border:0;font-family:var(--pp-font-display);font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--pp-text-heading) !important;text-decoration:none !important}
/* MATCHED !important x1 -- answers post 27 `.pp-product-related li a:hover{
   color:var(--pp-blue)!important}`. */
.pp-site .pp-product-related li a:hover{color:var(--pp-blue-600) !important}


/* ============ 15. SUPPORT BLOCK + BODY LINK COMPONENTS ============
   The single dark moment on this page (.pp-band rule: max two navy bands per
   page; the PDP spends exactly one). Existing production wording untouched.

   The four link components below carry a type selector (a.pp-*) deliberately,
   to reach specificity (0,2,1) and win their intended cascade against
   `.pp-site .pp-product-section a` and `.pp-site .pp-product-support a` by
   source order rather than by adding further !important. */
.pp-site .pp-product-support{display:flex;align-items:center;justify-content:space-between;gap:44px;margin:0;padding:56px;border-radius:var(--pp-radius-md);color:var(--pp-text-on-dark);background:var(--pp-surface-inverse)}
.pp-site .pp-product-support h2{margin:0;max-width:520px;font-size:30px;letter-spacing:-.035em;color:var(--pp-text-on-dark)}
.pp-site .pp-product-support p{margin:20px 0 0;max-width:520px;font-size:15px;line-height:1.8;color:var(--pp-text-on-dark-muted)}
.pp-site .pp-product-support__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;flex:0 0 auto}

/* MATCHED !important x2 -- answers post 27 `.pp-product-support a{color:
   var(--pp-white)!important;text-decoration:none!important}`. */
.pp-site .pp-product-support a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border:1px solid var(--pp-border-inverse);border-radius:var(--pp-radius-pill);background:transparent;font-family:var(--pp-font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pp-text-on-dark) !important;text-decoration:none !important;transition:background var(--pp-dur-fast) var(--pp-ease),border-color var(--pp-dur-fast) var(--pp-ease)}
.pp-site .pp-product-support a:hover{border-color:var(--pp-blue-400);background:rgba(255,255,255,.08)}

/* MATCHED !important x2 -- answers post 27 `.pp-whatsapp-link{display:
   inline-flex!important;color:var(--pp-navy)!important}` and, inside the
   support band, `.pp-product-support .pp-whatsapp-link{color:
   var(--pp-white)!important}`. */
.pp-site a.pp-whatsapp-link{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:var(--pp-radius-pill);background:var(--pp-blue-600);box-shadow:none;transform:none;font-family:var(--pp-font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pp-text-on-dark) !important}
/* MATCHED !important x1 -- answers post 27 `.pp-whatsapp-link:hover{color:
   var(--pp-navy)!important}` (and the support-scoped white override). */
.pp-site a.pp-whatsapp-link:hover{border-color:transparent;background:var(--pp-blue-500);box-shadow:none;transform:none;color:var(--pp-text-on-dark) !important}
.pp-site .pp-whatsapp-link__icon{display:inline-flex;width:17px;height:17px}
.pp-site .pp-whatsapp-link__icon svg{width:17px;height:17px;fill:currentColor}
.pp-site .pp-whatsapp-link__label{display:inline}

/* MATCHED !important x2 -- answers post 27 `.pp-text-link{color:
   var(--pp-blue)!important;text-decoration:none!important}`. */
.pp-site a.pp-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--pp-border-default);font-family:var(--pp-font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pp-navy-700) !important;text-decoration:none !important}
/* MATCHED !important x2 -- answers the base rule above plus post 27
   `.pp-text-link:hover{text-decoration:underline!important}`. */
.pp-site a.pp-text-link:hover{border-bottom-color:var(--pp-blue-600);color:var(--pp-blue-600) !important;text-decoration:none !important}

/* MATCHED !important x5 -- answers the post 27 "Buttons and links" group
   (display:inline-flex!important; padding:0 21px!important; border:1px solid
   var(--pp-blue)!important; border-radius:var(--pp-radius-small)!important;
   color:var(--pp-white)!important) AS IT APPLIES TO `.pp-button` ONLY. This
   file never emits, and can never match, .single_add_to_cart_button or any
   other member of that legacy selector list, and it does not alter that rule. */
.pp-site a.pp-button{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px !important;border:1px solid var(--pp-navy-700) !important;border-radius:var(--pp-radius-pill) !important;background:var(--pp-navy-700);font-family:var(--pp-font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pp-text-on-dark) !important}
/* MATCHED !important x4 -- answers post 27 `.pp-button:hover{border-color:
   #0b5ed7!important;color:var(--pp-white)!important;background:#0b5ed7!important}`
   plus its `.pp-button:not(.pp-button--secondary){box-shadow:...!important}`
   companion. */
.pp-site a.pp-button:hover{border-color:var(--pp-blue-600) !important;background:var(--pp-blue-600) !important;color:var(--pp-text-on-dark) !important;box-shadow:none !important;transform:none}


/* ============ 16. RELATED PRODUCTS (WooCommerce product-collection) ============
   The block, its query and its related-by logic are WooCommerce behaviour and
   are untouched; only its rendered output is restyled, per owner decision D4.
   The tile grammar matches the shared .pp-tile definition's own values (SRC
   pp-site.css 108-116, live in pp-site-scoped.css rows 67-74); .pp-tile
   itself is not modified and not forked. */
.pp-site .pp-pdp__related{margin:96px 0 0;padding:70px 0 0;border-top:1px solid var(--pp-border-subtle)}
.pp-site .pp-pdp__related>h2{margin:0 0 34px;font-family:var(--pp-font-display);font-size:15px;letter-spacing:var(--pp-ls-section);text-transform:uppercase;font-weight:600;color:var(--pp-text-subtle)}
.pp-site .pp-pdp__related .wp-block-woocommerce-product-collection{margin:0}
.pp-site .pp-pdp__related .wc-block-product-template{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:0;padding:0;list-style:none}
.pp-site .pp-pdp__related .wc-block-product{display:flex;flex-direction:column;margin:0;padding:0 0 24px;border:1px solid var(--pp-border-subtle);border-radius:var(--pp-radius-sm);overflow:hidden;background:var(--pp-surface-page);transition:box-shadow var(--pp-dur-slow) var(--pp-ease-out),transform var(--pp-dur-slow) var(--pp-ease-out)}
.pp-site .pp-pdp__related .wc-block-product:hover{box-shadow:var(--pp-shadow-lift);transform:translateY(-4px)}
.pp-site .pp-pdp__related .wc-block-components-product-image{margin:0 0 20px}
.pp-site .pp-pdp__related .wc-block-components-product-image img{display:block;width:100%;height:auto;aspect-ratio:1/1 !important;object-fit:cover;object-position:44% center;background:linear-gradient(70deg,#e8f2fd 0%,#d2e4f8 30%,#b0d0f1 62%,#8abcec 100%);border-radius:0}
.pp-site .pp-pdp__related .wp-block-post-title{margin:0 22px;font-family:var(--pp-font-display);font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--pp-text-heading)}
.pp-site .pp-pdp__related .wp-block-post-title a{color:inherit;border:0}
.pp-site .pp-pdp__related .wp-block-woocommerce-product-price{margin:14px 22px 0;font-family:var(--pp-font-mono);font-size:13px;line-height:1.4;color:var(--pp-text-heading)}


/* ============ 17. RESPONSIVE ============
   One markup set, media queries only, at the concept's own breakpoints
   (1100 / 960 / 860 / 700 / 380). Verified to 320. */

@media (max-width:1100px){
  .pp-site .pp-pdp{gap:54px}
  .pp-site .pp-pdp__related .wc-block-product-template{grid-template-columns:repeat(3,1fr)}
}

/* SRC pp-site.css 217-218: the PDP two-column grid collapses at 960. */
@media (max-width:960px){
  .pp-site .pp-pdp{grid-template-columns:1fr;gap:44px}
  .pp-site .pp-pdp__summary .wp-block-woocommerce-product-summary,
  .pp-site .pp-pdp__ruo{max-width:620px}
  .pp-site .pp-pullwrap{grid-template-columns:1fr;gap:34px}
  .pp-site .pp-docrecord__head{grid-template-columns:1fr;gap:0}
}

@media (max-width:860px){
  .pp-site .pp-product-section h2{font-size:30px}
  .pp-site .pp-product-support{padding:44px}
  .pp-site .pp-product-support h2{font-size:27px}
  .pp-site .pp-pdp__related .wc-block-product-template{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:700px){
  .pp-site .pp-pdp-shell{padding-block-end:70px}
  .pp-site .wp-block-woocommerce-breadcrumbs,
  .pp-site .wc-block-breadcrumbs,
  .pp-site .woocommerce-breadcrumb{margin-bottom:26px;font-size:11.5px}
  .pp-site .pp-pdp{gap:34px}
  .pp-site .pp-pdp-assurance{grid-template-columns:1fr;gap:0;margin-top:34px}
  .pp-site .pp-pdp__actions{gap:18px;margin-top:28px}
  .pp-site .pp-pdp__doc{margin-top:70px}
  .pp-site .pp-product-section{padding-top:70px}
  .pp-site .pp-product-section:first-of-type{padding-top:48px}
  .pp-site .pp-product-section h2{font-size:27px}
  .pp-site .pp-product-section h3{margin-top:30px}
  .pp-site .pp-product-section-label{margin-bottom:14px;padding-bottom:12px;font-size:11px !important}
  .pp-site .pp-product-facts{grid-template-columns:1fr}
  .pp-site .pp-product-facts dt{padding:14px 0 0;border-bottom:0;font-size:12px}
  .pp-site .pp-product-facts dd{padding:4px 0 14px;text-align:left;font-size:13px}
  .pp-site .pp-document-status,
  .pp-site .pp-docrecord{padding:24px}
  .pp-site .pp-docrecord__field{display:block;padding:12px 0}
  .pp-site .pp-docrecord__field dd{margin-top:4px;text-align:left}
  .pp-site .pp-docrecord__actions{flex-direction:column;align-items:flex-start;gap:12px}
  .pp-site .pp-pullstat{padding:22px}
  .pp-site .pp-pullstat dt{font-size:34px}
  .pp-site .pp-closer{padding:22px}
  .pp-site .pp-scopeflag{padding:18px}
  .pp-site .pp-product-faq summary{font-size:15px;padding:20px 0}
  .pp-site .pp-product-support{display:block;padding:34px 26px}
  .pp-site .pp-product-support h2{font-size:24px}
  .pp-site .pp-product-support__actions{margin-top:28px}
  .pp-site .pp-product-support a,
  .pp-site a.pp-whatsapp-link{width:100%}
  .pp-site .pp-product-related li a{font-size:16px}
  .pp-site .pp-pdp__related{margin-top:70px;padding-top:48px}
  .pp-site .pp-pdp__related .wc-block-product-template{gap:14px}
  .pp-site .pp-pdp__related .wc-block-components-product-image img{height:auto;aspect-ratio:1/1 !important;min-height:132px}
  .pp-site .pp-pdp__related .wp-block-post-title{margin:0 16px;font-size:17px}
  .pp-site .pp-pdp__related .wp-block-woocommerce-product-price{margin:10px 16px 0;font-size:12px}

  /* Evidence table restack -- 04-content-adaptation s2c: each row becomes a
     card built from the row's own cells, never a letterboxed scroller. The
     data-label attributes are already in the live markup. */
  .pp-site .pp-evidence,
  .pp-site .pp-evidence tbody,
  .pp-site .pp-evidence tr,
  .pp-site .pp-evidence td,
  .pp-site .pp-evidence tbody th{display:block;width:auto;max-width:none}
  .pp-site .pp-evidence thead{display:none}
  .pp-site .pp-evidence tr{padding:22px 0;border-bottom:1px solid var(--pp-border-subtle)}
  .pp-site .pp-evidence tbody th{padding:0 0 14px;border-bottom:0;font-size:16px}
  .pp-site .pp-evidence td{padding:0;border-bottom:0}
  .pp-site .pp-evidence td+td{margin-top:12px}
  .pp-site .pp-evidence td::before{content:attr(data-label);display:block;margin-bottom:4px;font-family:var(--pp-font-sans);font-size:11px;letter-spacing:var(--pp-ls-label);text-transform:uppercase;font-weight:600;color:var(--pp-text-muted)}
}

@media (max-width:380px){
  .pp-site .pp-product-section h2{font-size:24px}
  .pp-site .pp-product-support{padding:26px 20px}
  .pp-site .pp-pdp__related .wc-block-product-template{grid-template-columns:1fr}
  .pp-site .pp-pullstat dl{gap:16px}
  .pp-site .pp-docrecord,
  .pp-site .pp-document-status{padding:20px}
}


/* ============ 18. REDUCED MOTION ============
   The concept's motion system only: fades and <=8px translations. Everything
   collapses under prefers-reduced-motion. */
@media (prefers-reduced-motion:reduce){
  .pp-site .pp-pdp__related .wc-block-product,
  .pp-site .pp-pdp__related .wc-block-product:hover{transition:none;transform:none}
  .pp-site .pp-product-faq summary,
  .pp-site .pp-product-support a,
  .pp-site .pp-product-section a,
  .pp-site a.pp-verifykey{transition:none}
}