/* ============================================================================
   CHL:PRODUCT_NEUTRAL_GLASS_CORAL_ACCENT v4  (BP Premium Live Batch 11)

   The ONE governed colour + material authority for the active Product detail
   route (front/product/index.php + its include front/product/order_option.php,
   reached only via Home::product_view with $type === 'product').
   Every rule is scoped to body.chlp-detail, emitted by front/partials/
   header.php only when $page_name === 'product/index.php'.

   ── WHY v4 ──────────────────────────────────────────────────────────────
   v3 built real glass and still failed acceptance, as "a monochromatic peach
   wash". The defect was PLACEMENT, not material and not hue:

     · the two canvas light sources were high-alpha and background-attachment:
       fixed, so a peach wash followed the viewport everywhere;
     · --chlp-glass-warm (apricot) was the BASE FILL of large passive panels;
     · --chlp-line was a warm apricot border applied to every structural edge
       AND every inactive control, so the accent was spent before any
       interaction;
     · body and description text carried a warm brown.

   Compounded, that removed the neutral the glass needed to be legible AS
   glass: translucency only reads against neutral contrast behind it. Tint the
   canvas and the panel the same temperature and the material disappears.

   v4 law: COLOUR GUIDES THE EYE, IT DOES NOT TINT THE AIR.
     PASSIVE   surfaces and structural borders  -> neutral
     ACTIVE    hover / selected / focus / CTA / icons / badges -> coral
   Two separate border tokens now exist so the two can never be confused
   again: --chlp-line (structural, neutral) and --chlp-line-coral
   (interactive). Nothing passive may use the coral one.
   ============================================================================ */

body.chlp-detail{
  /* ── canvas: luminous, near-neutral ivory ── */
  --chlp-canvas:          #fdfbf9;
  /* Light sources kept, but low-saturation, low-alpha and LOCALISED. They are
     no longer `fixed`, so they sit near the top of the document instead of
     following the viewport as a wash. */
  --chlp-canvas-glow-a:   rgba(255, 206, 170, .20);
  --chlp-canvas-glow-b:   rgba(255, 216, 200, .14);

  /* ── glass: neutral warm-white is the BASE for every large panel ── */
  --chlp-glass:           rgba(255, 255, 255, .74);
  --chlp-glass-strong:    rgba(255, 255, 255, .90);
  --chlp-glass-highlight: rgba(255, 255, 255, .80);
  /* Apricot glass is now a STATE material only — hover, selected, active,
     badges, empty-state chips. It is never the base fill of a passive panel. */
  --chlp-glass-warm:      rgba(255, 240, 230, .72);
  --chlp-glass-warm-soft: rgba(255, 244, 236, .55);
  --chlp-disabled-glass:  rgba(243, 242, 240, .88);

  /* ── borders, split by role ── */
  --chlp-line:            rgba(122, 112, 102, .16);   /* STRUCTURAL — neutral */
  --chlp-line-soft:       rgba(122, 112, 102, .10);
  --chlp-line-coral:      rgba(226, 112, 60, .55);    /* INTERACTIVE only     */

  /* ── accent scale (contrast-tested in Batch 10, unchanged) ── */
  --chlp-accent-soft:     #ffefe3;
  --chlp-accent:          #e2703c;   /* 3.17:1 on white — icons, marks, borders */
  --chlp-accent-hover:    #d96030;
  --chlp-accent-ink:      #a94725;   /* 5.18:1 on accent-soft — ACCENT TEXT ONLY */
  --chlp-cta:             #c75028;   /* 4.56:1 with white label */
  --chlp-cta-hover:       #b84a22;

  /* ── text: neutral. Brown is not a text colour here. ── */
  --chlp-text:            #23262b;   /* charcoal, 15.2:1 on white */
  --chlp-text-soft:       #6b7280;   /* neutral grey, 4.83:1 — AA */

  /* ── light and depth: neutral shadows, coral glow only near active things ── */
  --chlp-glow:            rgba(226, 112, 60, .22);
  --chlp-shadow:          0 1px 2px rgba(40, 38, 36, .04),
                          0 16px 36px -24px rgba(40, 38, 36, .26);
  --chlp-shadow-lift:     0 2px 6px rgba(40, 38, 36, .06),
                          0 24px 50px -26px rgba(40, 38, 36, .32);
  --chlp-focus-ring:      rgba(226, 112, 60, .45);
  --chlp-radius:          16px;
  --chlp-radius-sm:       11px;

  /* Back-compat aliases for the view's runtime JS (Batch 8/9 writes governed
     vars with literal fallbacks). Re-pointed at v4 so a runtime write cannot
     resurrect an older value. `--chlp-tint` is a STATE surface, so it maps to
     the apricot state material, not to any passive base. */
  --chlp-panel:           var(--chlp-glass);
  --chlp-surface:         var(--chlp-glass);
  --chlp-tint:            var(--chlp-accent-soft);
  --chlp-tint-strong:     var(--chlp-accent-soft);
  --chlp-tint-line:       var(--chlp-line-coral);
  --chlp-ink:             var(--chlp-accent-ink);
  --chlp-well:            #ffffff;
  --chlp-disabled:        var(--chlp-disabled-glass);
  --chlp-ring:            var(--chlp-focus-ring);
  --chlp-glass-border:    var(--chlp-line);   /* structural default = neutral */
}

/* ── 1. CANVAS (§3) — ivory first, light second ─────────────────────────────
   Not `fixed`: the two sources sit near the top of the document so they read
   as localised illumination behind the hero, not as a full-viewport wash that
   follows the scroll. */
body.chlp-detail{
  background-color: var(--chlp-canvas) !important;
  background-image:
    radial-gradient(48rem 30rem at 20% 4%, var(--chlp-canvas-glow-a) 0%, rgba(255,206,170,0) 64%),
    radial-gradient(44rem 28rem at 86% 10%, var(--chlp-canvas-glow-b) 0%, rgba(255,216,200,0) 62%) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  color: var(--chlp-text);
}

/* ── 2. PANELS (§4) — neutral warm-white glass, NEUTRAL structural border ── */
body.chlp-detail .borNew,
body.chlp-detail .borNew.bg-white,
body.chlp-detail .product-details-side,
body.chlp-detail .product-details-card,
body.chlp-detail .tab-content,
body.chlp-detail .product-card{
  background-color: rgba(255, 255, 255, .93) !important;   /* no-blur fallback */
  border: 1px solid var(--chlp-line) !important;
  border-radius: var(--chlp-radius) !important;
  box-shadow: var(--chlp-shadow), inset 0 1px 0 var(--chlp-glass-highlight);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  body.chlp-detail .borNew,
  body.chlp-detail .borNew.bg-white,
  body.chlp-detail .product-details-side,
  body.chlp-detail .product-details-card,
  body.chlp-detail .tab-content,
  body.chlp-detail .product-card{
    background-color: var(--chlp-glass) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
            backdrop-filter: blur(16px) saturate(1.05);
  }
}
body.chlp-detail .bpib{
  background: var(--chlp-glass-strong);
  border-bottom: 1px solid var(--chlp-line);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  body.chlp-detail .bpib{
    background: var(--chlp-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.04);
            backdrop-filter: blur(12px) saturate(1.04);
  }
}

/* ── 3. MEDIA (§5) — neutral frame, apricot only as a LOCAL halo ────────── */
body.chlp-detail .img-display,
body.chlp-detail .product-imgs.custon_New{ background: transparent; }
body.chlp-detail .img-display .swiper-slide{
  background: var(--chlp-well);           /* photography is never tinted */
  border-radius: var(--chlp-radius);
}
body.chlp-detail .img-select{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line) !important;
  border-radius: var(--chlp-radius-sm);
}
body.chlp-detail .img-select .swiper-slide.img-item{
  border: 2px solid var(--chlp-line) !important;   /* inactive = NEUTRAL */
  border-radius: 9px;
  background: var(--chlp-well);
}
body.chlp-detail .img-select .swiper-slide-thumb-active.img-item{
  border-color: var(--chlp-accent) !important;      /* selected = coral */
  box-shadow: 0 0 0 3px var(--chlp-focus-ring) !important;
}
/* The panel itself is neutral glass. The apricot is a SMALL halo behind the
   icon only — a light source, not a fill covering the media region. */
body.chlp-detail .chlp-media-empty{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  aspect-ratio: 4 / 3; min-height: 300px; max-height: 460px;
  padding: 28px 20px; text-align: center;
  color: var(--chlp-text-soft);
  border: 1px solid var(--chlp-line);
  border-radius: var(--chlp-radius);
  background-color: rgba(255, 255, 255, .90);
  background-image:
    radial-gradient(9rem 9rem at 50% 41%, rgba(255, 205, 170, .40) 0%, rgba(255, 205, 170, 0) 70%);
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight), var(--chlp-shadow);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  body.chlp-detail .chlp-media-empty{
    background-color: var(--chlp-glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
}
body.chlp-detail .chlp-media-empty i{
  font-size: 2.1rem; color: var(--chlp-accent); opacity: .9;
  filter: drop-shadow(0 6px 14px var(--chlp-glow));
}
body.chlp-detail .chlp-media-empty span{ font-size: .9rem; color: var(--chlp-text-soft); }
body.chlp-detail .chlp-nomedia .img-display,
body.chlp-detail .chlp-nomedia .img-select{ display: none !important; }

/* ── 4. TEXT (§12) — neutral by default ─────────────────────────────────── */
body.chlp-detail h1.title,
body.chlp-detail .chlp-title{
  font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.1rem);
  line-height: 1.2; font-weight: 700; letter-spacing: -.012em;
  color: var(--chlp-text); margin: 0 0 8px;
}
body.chlp-detail .price{
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.15rem) !important;
  font-weight: 800 !important; line-height: 1.1;
  color: var(--chlp-text) !important; letter-spacing: -.015em;
}
body.chlp-detail .cusDisc,
body.chlp-detail .cusDisc *,
body.chlp-detail .tab-text-content,
body.chlp-detail .spec-content{
  color: var(--chlp-text-soft) !important;   /* neutral grey, never warm brown */
}
body.chlp-detail .cusDisc{ max-width: 62ch; font-size: .95rem; line-height: 1.65 !important; }
body.chlp-detail .cusDisc > * + *{ margin-top: .7em; }

/* ── 5. PRIMARY / SECONDARY ACTIONS (§7) ────────────────────────────────── */
body.chlp-detail .btn-add-to.cart,
body.chlp-detail .addToCustom{
  background: var(--chlp-cta) !important;
  border: 1px solid var(--chlp-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px -10px rgba(199, 80, 40, .55),
              0 0 0 5px rgba(226, 112, 60, .10);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.chlp-detail .btn-add-to.cart:hover,
body.chlp-detail .addToCustom:hover{
  background: var(--chlp-cta-hover) !important;
  border-color: var(--chlp-cta-hover) !important;
  box-shadow: 0 12px 26px -10px rgba(199, 80, 40, .62),
              0 0 0 7px rgba(226, 112, 60, .14);
  transform: translateY(-1px);
}
/* Unavailable: NEUTRAL disabled glass. No coral, no purchase affordance. */
body.chlp-detail .btn-add-to.cart.chlp-unavailable,
body.chlp-detail .addToCustom.chlp-unavailable,
body.chlp-detail .btn-add-to.cart.disabled,
body.chlp-detail .addToCustom.disabled{
  background: var(--chlp-disabled-glass) !important;
  border: 1px solid var(--chlp-line) !important;
  color: #5f6670 !important;
  box-shadow: none !important; transform: none !important;
  cursor: not-allowed !important; pointer-events: none; opacity: 1 !important;
}
body.chlp-detail .chlp-cta-oos{ display: none; }
body.chlp-detail .chlp-unavailable .chlp-cta-oos,
body.chlp-detail .disabled .chlp-cta-oos{ display: inline; }
body.chlp-detail .chlp-unavailable .chlp-cta-label,
body.chlp-detail .disabled .chlp-cta-label{ display: none; }
body.chlp-detail .chlp-unavailable .fa-shopping-cart,
body.chlp-detail .disabled .fa-shopping-cart{ display: none; }

/* Wishlist: neutral glass base, coral ICON and label, low-emphasis coral edge. */
body.chlp-detail .btn-add-to.middles,
body.chlp-detail .btn-add-to.wishlist,
body.chlp-detail .btn-add-to.wished{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line-coral) !important;
  color: var(--chlp-accent-ink) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight) !important;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.chlp-detail .btn-add-to.middles:hover,
body.chlp-detail .btn-add-to.wishlist:hover,
body.chlp-detail .btn-add-to.wished:hover{
  background: var(--chlp-glass-warm) !important;
  border-color: var(--chlp-accent) !important;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight),
              0 8px 20px -14px var(--chlp-glow) !important;
}
body.chlp-detail .btn-add-to.middles i,
body.chlp-detail .btn-add-to.wishlist i,
body.chlp-detail .btn-add-to.wished i{ color: var(--chlp-accent) !important; }
body.chlp-detail .btn-add-to.btn-warning{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line) !important;
  color: var(--chlp-accent-ink) !important;
  border-radius: 999px !important;
}

/* ── 6. SOCIAL (§10) — neutral until touched ────────────────────────────── */
body.chlp-detail .share_icons li,
body.chlp-detail .share_icons ul li,
body.chlp-detail .a2a_kit a{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line) !important;      /* NEUTRAL by default */
  border-radius: 50% !important;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.chlp-detail .share_icons li:hover,
body.chlp-detail .share_icons ul li:hover,
body.chlp-detail .a2a_kit a:hover{
  background: var(--chlp-glass-warm) !important;
  border-color: var(--chlp-accent) !important;
  box-shadow: 0 8px 18px -12px var(--chlp-glow);
  transform: translateY(-1px);
}
body.chlp-detail .share_icons li a,
body.chlp-detail .share_icons li i,
body.chlp-detail .share_icons a svg,
body.chlp-detail .a2a_kit a svg{ color: var(--chlp-accent) !important; fill: var(--chlp-accent) !important; }
body.chlp-detail .a2a_svg,
body.chlp-detail .a2a_kit .a2a_svg{ background-color: transparent !important; border-radius: 50% !important; }

/* ── 7. QUANTITY ────────────────────────────────────────────────────────── */
body.chlp-detail .quantity.product-quantity{
  background: var(--chlp-glass-strong);
  border: 1px solid var(--chlp-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight);
}
body.chlp-detail .quantity.product-quantity .btn{ color: var(--chlp-text); background: transparent; }
body.chlp-detail .quantity.product-quantity .btn:hover{ background: var(--chlp-glass-warm); color: var(--chlp-accent-ink); }
body.chlp-detail .quantity.product-quantity.out-of-stock{
  background: var(--chlp-disabled-glass); border-color: var(--chlp-line); opacity: 1;
}
body.chlp-detail .quantity.product-quantity.out-of-stock .btn,
body.chlp-detail .quantity.product-quantity.out-of-stock input{
  color: #7c828b !important; opacity: 1 !important; cursor: not-allowed;
}
body.chlp-detail .chlp-qty-note{ display: block; margin-top: 6px; font-size: .8rem; color: var(--chlp-text-soft); }

/* ── 8. CONFIGURATOR (§8) — neutral default, apricot hover, coral selected ─ */
body.chlp-detail .chlp-config-label,
body.chlp-detail .variation-attr-label{
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--chlp-text-soft); margin: 0 0 7px;
}
body.chlp-detail .group-tab-btn,
body.chlp-detail .variation-btn{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line) !important;      /* DEFAULT = neutral */
  color: var(--chlp-text) !important;
  min-height: 44px; font-weight: 600; position: relative;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.chlp-detail .group-tab-btn{ border-radius: 999px !important; padding: 9px 16px !important; }
body.chlp-detail .variation-btn{ border-radius: 11px !important; padding: 8px 14px !important; }
body.chlp-detail .group-tab-btn:hover,
body.chlp-detail .variation-btn:hover{
  background: var(--chlp-glass-warm) !important;      /* HOVER = pale apricot */
  border-color: var(--chlp-accent) !important;
  color: var(--chlp-accent-ink) !important;
  box-shadow: 0 8px 20px -14px var(--chlp-glow);
  transform: translateY(-1px);
}
body.chlp-detail .group-tab-btn.active,
body.chlp-detail .variation-btn.selected,
body.chlp-detail .variation-btn.active,
body.chlp-detail .variation-btn[aria-pressed="true"]{
  background: var(--chlp-accent-soft) !important;     /* SELECTED = coral set */
  border: 2px solid var(--chlp-accent) !important;
  color: var(--chlp-accent-ink) !important;
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight), 0 8px 20px -14px var(--chlp-glow);
}
body.chlp-detail .variation-btn.selected,
body.chlp-detail .variation-btn.active,
body.chlp-detail .variation-btn[aria-pressed="true"]{ padding: 7px 13px !important; }
body.chlp-detail .variation-btn.selected::after,
body.chlp-detail .variation-btn.active::after,
body.chlp-detail .variation-btn[aria-pressed="true"]::after{
  content: "\2713"; margin-left: 7px; font-weight: 700; color: var(--chlp-accent);
}
body.chlp-detail .variation-btn:disabled,
body.chlp-detail .variation-btn.chlp-unavailable,
body.chlp-detail .variation-btn[aria-disabled="true"]{
  background: var(--chlp-disabled-glass) !important;   /* DISABLED = neutral */
  border: 1px dashed var(--chlp-line) !important;
  color: #8b9096 !important; box-shadow: none !important;
  cursor: not-allowed; text-decoration: line-through; transform: none !important;
}
body.chlp-detail .group-tab-btn:focus-visible,
body.chlp-detail .variation-btn:focus-visible,
body.chlp-detail .btn-add-to:focus-visible,
body.chlp-detail .share_icons li:focus-within,
body.chlp-detail .nav-pills .nav-link:focus-visible{
  outline: 2px solid var(--chlp-accent); outline-offset: 3px;
}

/* ── 9. TABS (§9) — inactive tabs are NOT outlined in peach ─────────────── */
body.chlp-detail .nav-pills{ gap: 8px; }
body.chlp-detail .nav-pills .nav-link,
body.chlp-detail .nav-tabs .nav-link{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line) !important;      /* NEUTRAL */
  color: var(--chlp-text-soft) !important;
  border-radius: 999px !important; font-weight: 600;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.chlp-detail .nav-pills .nav-link:hover,
body.chlp-detail .nav-tabs .nav-link:hover{
  background: var(--chlp-glass-warm) !important;
  border-color: var(--chlp-accent) !important;
  color: var(--chlp-accent-ink) !important;
  box-shadow: 0 8px 18px -14px var(--chlp-glow);
}
body.chlp-detail .nav-pills .nav-link.active,
body.chlp-detail .nav-tabs .nav-link.active{
  background: var(--chlp-accent-soft) !important;
  border: 1px solid var(--chlp-accent) !important;
  color: var(--chlp-accent-ink) !important; font-weight: 700;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight), 0 8px 20px -14px var(--chlp-glow);
}

/* ── 10. FLASH SALES (§11) — neutral card, coral badge ──────────────────── */
body.chlp-detail .chlp-flash-icon{
  background: var(--chlp-accent-soft) !important;     /* small badge only */
  border: 1px solid var(--chlp-line-coral) !important;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight), 0 6px 16px -12px var(--chlp-glow);
}
body.chlp-detail .chlp-flash-icon i{
  color: var(--chlp-accent) !important;
  filter: drop-shadow(0 3px 8px var(--chlp-glow));
}
body.chlp-detail .chlp-tab-empty,
body.chlp-detail .chlp-flash-empty{
  padding: 22px 18px; text-align: center;
  background: var(--chlp-glass-warm-soft);
  border: 1px dashed var(--chlp-line);
  border-radius: var(--chlp-radius-sm);
  color: var(--chlp-text-soft); font-size: .88rem;
  box-shadow: inset 0 1px 0 var(--chlp-glass-highlight);
}

/* ── 11. CARDS AND DECORATIVE ACCENTS ───────────────────────────────────── */
body.chlp-detail .product-card:hover{
  border-color: var(--chlp-accent) !important;
  box-shadow: var(--chlp-shadow-lift), inset 0 1px 0 var(--chlp-glass-highlight) !important;
  transform: translateY(-2px);
}
body.chlp-detail .product-card:hover .product-card-title{ color: var(--chlp-accent-ink); }
body.chlp-detail .product-card-divider{ background: var(--chlp-accent); }
body.chlp-detail .product-card-image{ background: var(--chlp-well); }
body.chlp-detail .img-display .swiper-button-next,
body.chlp-detail .img-display .swiper-button-prev,
body.chlp-detail .img-select .thumb-next,
body.chlp-detail .img-select .thumb-prev{
  background: var(--chlp-glass-strong) !important;
  border: 1px solid var(--chlp-line) !important;
  box-shadow: 0 4px 12px -6px rgba(40, 38, 36, .26) !important;
}
body.chlp-detail .img-display .swiper-button-next::after,
body.chlp-detail .img-display .swiper-button-prev::after,
body.chlp-detail .img-select .thumb-next::after,
body.chlp-detail .img-select .thumb-prev::after{ color: var(--chlp-accent) !important; }
body.chlp-detail .img-display .swiper-button-next:hover,
body.chlp-detail .img-display .swiper-button-prev:hover,
body.chlp-detail .img-select .thumb-next:hover,
body.chlp-detail .img-select .thumb-prev:hover{
  background: var(--chlp-accent) !important; border-color: var(--chlp-accent) !important;
}
body.chlp-detail .swiper-pagination-bullet,
body.chlp-detail .swiper-pagination-bullet-active{ background: var(--chlp-accent); }
body.chlp-detail .stars,
body.chlp-detail .stars i,
body.chlp-detail i.rated{ color: var(--chlp-accent) !important; }
body.chlp-detail .category-pill.active,
body.chlp-detail .cart-item-price{ color: var(--chlp-accent-ink) !important; }
body.chlp-detail hr,
body.chlp-detail .borNew hr,
body.chlp-detail .tab-content hr{ border-color: var(--chlp-line-soft); opacity: 1; }

/* Content links: neutral-leaning ink at rest, coral on interaction. Semantic
   classes excluded so this can never speak for a state. */
body.chlp-detail main a:not(.btn):not([class*="cpf-"]):not(.chlp-keep):not([class*="error"]):not([class*="warning"]):not([class*="danger"]):not([class*="success"]):not([class*="stock"]){
  color: var(--chlp-accent-ink);
}
body.chlp-detail main a:not(.btn):not([class*="cpf-"]):not(.chlp-keep):not([class*="error"]):not([class*="warning"]):not([class*="danger"]):not([class*="success"]):not([class*="stock"]):hover{
  color: var(--chlp-accent-hover);
}

/* ── 12. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 860px){
  body.chlp-detail .nav-pills .nav-link,
  body.chlp-detail .nav-tabs .nav-link{ min-height: 44px; display: flex; align-items: center; justify-content: center; }
  body.chlp-detail .btn-add-to{ min-height: 44px; }
  body.chlp-detail .cusDisc{ max-width: 100%; }
}
@media (max-width: 480px){
  body.chlp-detail .chlp-media-empty{ min-height: 220px; aspect-ratio: 1 / 1; }
  body.chlp-detail .btn-add-to.cart,
  body.chlp-detail .addToCustom{ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
  body.chlp-detail .btn-add-to.cart,
  body.chlp-detail .group-tab-btn,
  body.chlp-detail .variation-btn,
  body.chlp-detail .share_icons li,
  body.chlp-detail .product-card{ transition: none !important; transform: none !important; }
}

/* ── 13. SEMANTIC EXCLUSIONS ────────────────────────────────────────────────
   Deliberately NO rule. Batches 7 and 8 both proved that "protecting" a state
   with `revert` rolls past the AUTHOR rule to the UA default and CHANGES what
   it claims to defend. Exclusion here is silence: nothing above selects
   .stock, .alert, .invalid-feedback, .cart-item-remove or any
   error/warning/danger/success class, and no glass, blur or glow is applied to
   them. `.quantity.product-quantity.out-of-stock` IS styled, deliberately —
   Batch 9 required an explicit readable unavailable state — but only its
   neutral surface and text tone, never a semantic hue. */