/* ══ CHL:DETAIL_SURFACE v1 (Batch 6) — MUTED DETAIL CANVAS ═══════════════
   MEASURED, on live production at 1440px, painted-area and salience:

     route        chrome-orange  content-orange  content-salient  white-surface
     product           53              4              10             97.7%
     service            2              0              12             64.4%
     bookable           2              1              66             64.2%
     membership         2              1              18             63.5%
     business page      2              3              31             54.4%

   TWO HONEST CONCLUSIONS, and they are not the ones a screenshot suggests:

   1. The product page's OWN content is not orange-flooded. Four salient
      elements are orange, and three of those are the purchase actions §5
      explicitly permits to stay orange. What differs is that this route
      renders ~45 painted orange elements of what LOOKS like global chrome
      where every other route renders 2.

      CORRECTION (Batch 7, measured): the sentence that stood here blamed the
      mega-menu. That was wrong. `.chl-mega` is opacity:0/visibility:hidden
      with 0 visible anchors on the product route AND on every sibling —
      identical state, verified live. The real cause was a bare
      `a{color:#ff7043!important}` inside the product view's own inline
      <style>, which repainted 27 shared-footer links and 7 header links. The
      same .cpf-journey element measured rgb(232,230,242) on /service and
      rgb(255,112,67) on /product. It was never global chrome at all; it was
      one unscoped rule leaking OUT of the product page. Fixed in Batch 7 by
      scoping that rule, which dropped the count to 1 without touching the
      shared header or footer.

   2. The real "this doesn't feel like current CHL" signal is SURFACE, not
      hue: the product page is 97.7% flat white while the modern detail
      family sits at 54-64%. It has no muted panel language at all.

   So this layer supplies the muted family — parchment canvas, governed
   panels, one radius and one shadow — and softens only the NON-PRIMARY
   accents. It never touches a validation, payment, stock, security,
   destructive or success state, and it never weakens the primary purchase
   action. Those remain platform semantics (§6). */

:root {
    /* CHL muted family — semantic, not per-route literals */
    --chl-canvas:        #faf8f4;   /* warm parchment                        */
    --chl-surface:       #ffffff;   /* panels sit ON the canvas              */
    --chl-surface-soft:  #f4f1ea;   /* khaki-tinted secondary panel          */
    --chl-line:          rgba(38, 32, 26, .10);
    --chl-ink:           #241f1a;
    --chl-ink-soft:      #6f6459;
    --chl-radius:        14px;
    --chl-shadow:        0 10px 28px -20px rgba(38, 32, 26, .40);
    /* commerce accent: terracotta, not floodlight orange */
    --chl-commerce:      #c8623a;
    --chl-commerce-soft: #f6e9e2;
    --chl-commerce-ink:  #8f4326;
}

/* The canvas. Scoped to pages that carry the identity bridge, so it can only
   reach genuine business-owned detail journeys. */
body:has(.bpib) { background: var(--chl-canvas); }

/* The identity strip joins the muted family rather than sitting on raw white. */
body:has(.bpib) .bpib { background: var(--chl-surface); border-bottom-color: var(--chl-line); }

/* SOFTEN NON-PRIMARY ACCENTS ONLY.
   A wishlist link and a tab indicator do not need the same voice as "Add to
   Cart". The purchase action is deliberately left alone so it stays the
   clearest thing on the page. */
body:has(.bpib) a.btn-add-to.wishlist,
body:has(.bpib) a.btn-add-to.middles.wishlist { color: var(--chl-commerce); }
body:has(.bpib) .nav-link.active,
body:has(.bpib) .nav-tabs .nav-link.active {
    background: var(--chl-commerce-soft); color: var(--chl-commerce-ink);
}

/* Panels: one radius, one shadow, one border across the detail family. */
body:has(.bpib) .px-card,
body:has(.bpib) .px-panel,
body:has(.bpib) .product-details-card {
    background: var(--chl-surface);
    border: 1px solid var(--chl-line);
    border-radius: var(--chl-radius);
    box-shadow: var(--chl-shadow);
}

/* EXCLUSIONS (Batch 8 repair) — there is deliberately NO rule here.

   This block used to list .alert, .invalid-feedback, .is-invalid,
   [class*="error"|"warning"|"danger"|"success"|"out-of-stock"|"sold-out"] and
   set `background: revert; color: revert; border-color: revert`. It was
   written as "belt and braces" to keep platform semantics. It did the
   opposite.

   `revert` does not mean "the value this element would have without this
   sheet". It rolls the declaration back to the previous cascade ORIGIN — past
   every author rule, including the platform's own — and lands on the
   user-agent default. Measured on live production: the out-of-stock quantity
   control's border was forced from its intended rgb(224,224,224) soft grey to
   rgb(33,37,41) near-black. A rule written to protect a semantic state is
   still a rule about that state.

   The correct exclusion is silence. Nothing else in this sheet selects any of
   those elements — the remaining selectors are the body canvas, .bpib, the
   wishlist link, tab actives and .px-card/.px-panel/.product-details-card —
   so platform authority over validation, payment, stock, security, success
   and destructive states is now untouched BY CONSTRUCTION rather than by a
   counter-rule. Same repair Batch 7 made in product-detail.css. */

@media (max-width: 640px) {
    body:has(.bpib) { background: var(--chl-canvas); }
}