/* ── PDP Grid ──────────────────────────────────────── */
  .pdp-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      /* Prevent any child from blowing out the grid on mobile */
      min-width: 0;
  }
  @media(min-width:768px){ .pdp-grid { grid-template-columns:1fr 1fr; } }
  @media(min-width:1024px){ .pdp-grid { grid-template-columns:1.1fr 1fr; } }

  /* ── PDP Gallery Column ──────────────────────────────
     Critical: CSS Grid children default to min-width:auto which
     allows content (real images) to overflow the cell boundary.
     min-width:0 + width:100% ensures the column never exceeds
     the available grid track width on any viewport size.
  ─────────────────────────────────────────────────────── */
  .pdp-gallery {
      min-width: 0;
      width: 100%;
  }

  /* ── PDP Info Column ────────────────────────────────── */
  .pdp-info {
      min-width: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }

  /* ── PDP Main Image Wrapper ─────────────────────────── */
  .pdp-main-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: var(--clr-surface-2);
      cursor: zoom-in;
  }
  .pdp-main-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s;
  }
  .pdp-main-wrap:hover img { transform: scale(1.03); }

  /* ── PDP Thumbnails Strip ───────────────────────────── */
  .pdp-thumbs-strip {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      /* min-width:0 prevents flex row from overflowing its parent */
      min-width: 0;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
      -ms-overflow-style: none;
  }
  .pdp-thumbs-strip::-webkit-scrollbar { display: none; }

  .pdp-thumb {
      flex-shrink: 0;
      width: 68px;
      height: 68px;
      border-radius: var(--radius-thumb);
      overflow: hidden;
      border: 2px solid var(--clr-border);
      cursor: pointer;
      padding: 0;
      background: var(--clr-surface-2);
      transition: border-color .2s, transform .15s;
  }
  .pdp-thumb:hover { transform: scale(1.05); }
  .pdp-thumb-active { border-color: var(--clr-primary); }
  .pdp-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  /* ── PDP No-Image Placeholder ──────────────────────── */
  .pdp-no-img {
      width: 100%;
      height: 100%;
  }
  .pdp-no-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
  }

  /* ── PDP Zoom Hint Badge ────────────────────────────── */
  .pdp-zoom-hint {
      position: absolute;
      bottom: 12px;
      background: rgba(0,0,0,.5);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 999px;
      pointer-events: none;
      line-height: 1;
  }

  /* ── PDP Product Title ─────────────────────────────── */
  .pdp-product-title {
      font-size: clamp(20px,3.5vw,28px);
      font-weight: 900;
      line-height: 1.2;
      color: var(--clr-text);
      margin-bottom: 10px;
  }

  /* ── PDP Brand Row (v5.82) ───────────────────────────────────
     Wraps the "From brand" label + brand badge so the product
     name visually hands off to its brand on the next line. */
  .pdp-brand-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
  }
  .pdp-brand-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--clr-text-3);
  }
  .pdp-brand-row .pdp-brand-badge { margin-top: 0; }

  /* ── PDP Brand Badge ───────────────────────────────── */
  .pdp-brand-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px 5px 10px;
      background: var(--clr-primary-50);
      border: 1.5px solid var(--clr-primary-200);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: var(--clr-primary);
      margin-top: 4px;
      text-decoration: none;
      transition: background .15s, color .15s, border-color .15s;
  }
  a.pdp-brand-badge:hover,
  a.pdp-brand-badge:focus-visible {
      background: var(--clr-primary);
      color: #fff;
      border-color: var(--clr-primary);
      outline: none;
  }
  .pdp-brand-badge i {
      font-size: 11px;
      opacity: .8;
  }

  /* ── PDP Price Block (v6.62 — compact deal card) ────────
     Tight, visually calm price card. No red frame / no edge
     spine: the surface stays neutral and red is used only as a
     restrained accent on the price text and a small tag chip.
     • Fully RTL/LTR safe via CSS logical properties.
     • Light & dark mode aware (dark overrides further below).
     • Two states: plain (no compare) and .--sale (compact offer
       treatment: discount tag + muted strike/save sub-line). */
  .pdp-price-block {
      padding: 12px 15px;
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-lg);
      animation: pdpPriceIn .3s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes pdpPriceIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: none; }
  }

  /* ── Main row: current price + discount tag chip ───────── */
  .pdp-price-main {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
  }
  .pdp-price-current {
      font-size: clamp(22px,3.4vw,27px);
      font-weight: 900;
      color: var(--clr-price);
      line-height: 1.1;
      letter-spacing: -.01em;
  }
  /* Elegant little price-tag chip (echoes the sticker reference,
     kept tiny + direction-safe with a leading tag glyph). */
  .pdp-price-discount {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11.5px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .01em;
      color: #fff;
      background: var(--clr-price);
      padding: 4px 9px;
      border-radius: 5px;
  }
  .pdp-price-discount i { font-size: 9.5px; opacity: .9; }

  /* ── Sub-line: strikethrough compare · savings (muted) ── */
  .pdp-price-sub {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 5px;
      font-size: 13px;
  }
  .pdp-price-compare {
      color: var(--clr-text-3);
      text-decoration: line-through;
      text-decoration-color: rgba(201,0,0,.5);
      text-decoration-thickness: 1.5px;
      font-weight: 600;
  }
  .pdp-price-save {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--clr-price);
      font-weight: 700;
  }
  .pdp-price-save::before {           /* subtle dot separator */
      content: '';
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--clr-text-3);
      opacity: .7;
  }
  .pdp-price-save i { font-size: 11px; opacity: .85; }

  /* ── Dark-mode legibility tuning ──────────────────────── */
  body.dark-mode .pdp-price-current,
  body.dark-mode .pdp-price-save { color: #ff5a5a; }
  body.dark-mode .pdp-price-discount { background: #e11919; }
  body.dark-mode .pdp-price-compare { text-decoration-color: rgba(255,90,90,.55); }

  /* ── Catalog / RFQ price block — shown instead of a price when the
     store is in catalog mode. No price is ever printed; this is real
     "request pricing" microcopy, theme-aware + direction-safe. ── */
  .pdp-price-rfq {
      padding: 14px 16px;
      background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface));
      border: 1.5px solid color-mix(in srgb, var(--clr-primary) 22%, transparent);
      border-radius: var(--radius-lg);
      animation: pdpPriceIn .3s cubic-bezier(.4,0,.2,1) both;
  }
  .pdp-price-rfq__badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 900;
      color: var(--clr-primary);
      line-height: 1.2;
  }
  .pdp-price-rfq__badge i { font-size: 12px; opacity: .85; }
  .pdp-price-rfq__hint {
      margin: 8px 0 0;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--clr-text-2);
      line-height: 1.55;
  }
  .pdp-price-rfq__sub {
      margin: 4px 0 0;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--clr-text-3);
      line-height: 1.55;
  }
  body.dark-mode .pdp-price-rfq__badge { color: #fff; }

  /* ── PDP Badge Slideshow sizing overrides ───────────────
     .pdp-badge-wrap inherits the card system but is larger
     on PDP since it sits in a wider info panel context.    */
  .pdp-badge-wrap {
      height: 32px;
      margin-bottom: 4px;
  }
  .pdp-badge-wrap .yalo-badge-pill {
      font-size: 12.5px;
      padding: 7px 16px;
  }

  /* ── PDP Badge Slideshow — pre-price placement (v7.96) ───────
     Scoped modifier ONLY: pulls the badge row tight against the
     price block right below it, so the active offer reads as one
     unit with the price it applies to. Additive to .pdp-badge-wrap
     — never touches the shared .pc-badge-slide-wrap / .yalo-badge-pill
     classes, which stay untouched for product cards elsewhere. */
  .pdp-badge-wrap--preprice {
      margin-bottom: -6px;
  }

  /* ── PDP Stock Row ─────────────────────────────────── */
  .pdp-stock-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
  }
  .pdp-stock-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
  }
  .pdp-stock-dot.pdp-stock-in  { background: #22c55e; box-shadow: 0 0 0 3px #22c55e33; }
  .pdp-stock-dot.pdp-stock-out { background: #ef4444; }
  .pdp-stock-label {
      font-size: 13.5px;
      font-weight: 700;
  }
  .pdp-stock-label.pdp-stock-in  { color: #16a34a; }
  .pdp-stock-label.pdp-stock-out { color: #dc2626; }
  .pdp-sku {
      font-size: 11px;
      color: var(--clr-text-3);
      font-weight: 600;
      margin-inline-start: 8px;
  }

  /* PDP Qty Selector — MOVED to assets/css/qty-stepper.css (v9.26.0),
     which the Ads-Campaign order form now shares. Same markup, same
     classes; one definition instead of two that had already drifted
     into different shapes. */