/* =============================================================================
   Claue V2 — Virtual Product Detail Page (P10)

   A virtual product is simple-shaped (price + qty + Add-to-Cart), so it reuses
   the shared 3-column clean PDP layout untouched — no <move> surgery (unlike
   P8 bundle / P9 grouped). This file only adds the virtual-specific Claue
   accents, scoped to the `cl-page-virtual` body class set by
   catalog_product_view_type_virtual.xml:

     1. a "Digital product" eyebrow badge above the title, and
     2. a light coral accent on the swapped (no-shipping) trust row icons.

   Registered AFTER product-clean.css in default.xml, so equal-specificity rules
   win the cascade. Palette mirrors product-clean.css: coral CTA #cf9683
   (var(--cl-cta)) / #bd7e63 (var(--cl-cta-dark)).
   ========================================================================== */

/* ── "Digital product" eyebrow badge ───────────────────────────────────────
   Rendered by virtual-badge.phtml as the first child of the left info column
   (cl.pdp.left), so it sits just above the product title. */
.cl-page-virtual .cl-virtual-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 12px;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-cta-dark, #bd7e63);
  background: rgba(207, 150, 131, 0.12);   /* #cf9683 @ 12% */
  border: 1px solid rgba(207, 150, 131, 0.35);
  border-radius: 100px;
  line-height: 1;
}

.cl-page-virtual .cl-virtual-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cl-cta, #cf9683);
}

/* ── No-shipping trust row: tint the icons coral to reinforce the digital,
   instant-delivery framing (distinct from the neutral physical-product row). */
.cl-page-virtual .cl-trust-row--virtual .cl-trust-row__icon {
  background: rgba(207, 150, 131, 0.12);
  color: var(--cl-cta-dark, #bd7e63);
}

/* ── Mobile: keep the badge comfortably sized on small viewports ── */
@media (max-width: 575px) {
  .cl-page-virtual .cl-virtual-badge {
    font-size: 10px;
    padding: 4px 10px;
  }
}