/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIT 365 — PDP Represent Quality Layer  v1
   Product-page-only visual polish. No new sections,
   no JS/API/form changes. Loaded last on all PDPs.
   Benchmark: Represent (representclo.com) product pages.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── 1. Design tokens ────────────────────────────────────── */
:root {
  --rq-hair: #e5e8ee;    /* hairline separator */
  --rq-muted: #8d959e;   /* muted editorial label */
  --rq-dim: #b3bbc3;     /* very dim / whisper text */
  --rq-body: #1c2228;    /* primary body */
  --rq-sub: #4b5360;     /* secondary body */
}

/* ═══════════════════════════════════════════════════════════
   1b. URGENCY STRIP — hide when empty (hidden attribute)
   pdp-premium.css sets background:#fdf8ef !important which
   overrides the UA [hidden]{display:none} rule. The empty
   cream/yellow box renders even with no message inside.
   This rule restores the correct hidden behaviour.
   ═══════════════════════════════════════════════════════════ */

.urgency-strip[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   2. BUY ASSURANCE
   Strip bordered box widget → clean hairline-topped text line.

   Cascade notes:
   • Inline <style> block (no !important): border, background, padding
   • pdp-premium.css (!important): margin-top, font-size, color
   → Normal rules beat inline (external CSS loads after inline <style>).
   → !important needed only where pdp-premium.css used !important.
   ═══════════════════════════════════════════════════════════ */
.buy-assurance {
  /* ── strip the box ── */
  border: none;
  background: transparent;
  padding: 0;

  /* ── replace with hairline separator ── */
  border-top: 1px solid var(--rq-hair);
  padding-top: 14px;

  /* ── typography (override pdp-premium.css !important) ── */
  margin-top: 16px !important;
  font-size: .71rem !important;
  color: #8d969f !important;
  letter-spacing: .015em;
  font-weight: 500;      /* beats inline font-weight:600 */
  line-height: 1.62;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   3. REVIEWS SNAPS
   Strip bordered box → borderless editorial section.

   pdp-premium.css has !important on: border, background,
   padding, border-radius, margin-top → all need !important here.
   ═══════════════════════════════════════════════════════════ */
.reviews-snaps {
  /* ── strip the box (all !important to beat pdp-premium.css) ── */
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;

  /* ── editorial separator + breathing room ── */
  border-top: 1px solid var(--rq-hair) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}

/* "CUSTOMER REVIEWS" → editorial label */
.reviews-title {
  font-size: .60rem !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
  color: var(--rq-muted) !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
}

.reviews-list {
  gap: 9px !important;
}

.reviews-list li {
  font-size: .80rem !important;
  line-height: 1.50 !important;
  color: #252c33 !important;
}

.reviews-list strong {
  color: #0f1318;
  font-weight: 700;
}

.reviews-meta {
  display: block !important;
  font-size: .67rem !important;
  color: var(--rq-muted) !important;
  margin-top: 2px !important;
  letter-spacing: .02em !important;
}

/* ═══════════════════════════════════════════════════════════
   4. SECURE LINE
   Strip bordered box → whisper-quiet payment caption.

   Inline <style>: border, background, padding, font-weight,
   text-transform (all no !important — normal rules beat it).
   pdp-premium.css !important: font-size, letter-spacing, color.
   ═══════════════════════════════════════════════════════════ */
.secure-line {
  /* ── strip the box ── */
  border: none;
  background: transparent;
  padding: 0;
  font-weight: 400;      /* beats inline font-weight:700 */
  text-transform: none;  /* beats inline uppercase */

  /* ── minimal spacing; no extra divider (sits between reviews
         and accordion which already has a hairline) ── */
  margin-top: 12px !important;

  /* ── typography (override pdp-premium.css !important) ── */
  font-size: .65rem !important;
  letter-spacing: .04em !important;
  color: var(--rq-dim) !important;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   5. STANDALONE details.accord
   Pre-JS fallback state + JS-disabled browsers.
   (JS wraps these in .details-compact on DOMContentLoaded.)

   Inline <style>: border, background, padding (no !important).
   pdp-premium.css: no rules for standalone details.accord.
   → All normal rules beat the inline style block.
   ═══════════════════════════════════════════════════════════ */
details.accord {
  border: none;
  background: transparent;
  padding: 0;
  margin-top: 0;
  border-top: 1px solid var(--rq-hair);
}

details.accord > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rq-body);
  list-style: none;
  cursor: pointer;
}

/* suppress default browser markers */
details.accord > summary::-webkit-details-marker { display: none; }
details.accord > summary::marker { display: none; content: ""; }

/* + / − toggle indicator */
details.accord > summary::after {
  content: "+";
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #99a1aa;
  flex-shrink: 0;
  line-height: 1;
}

details.accord[open] > summary::after {
  content: "−";
}

details.accord > ul,
details.accord > div {
  padding: 0 0 14px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   6. DETAILS-COMPACT (post-JS accordion wrapper)
   JS wraps the standalone details.accord elements in a
   .details-compact div. Refine on top of pdp-premium.css.
   ═══════════════════════════════════════════════════════════ */

/* top hairline matching our token */
.details-compact {
  border-top: 1px solid var(--rq-hair) !important;
  margin-top: 12px !important;
}

/* individual accordion hairlines */
.details-compact .accord {
  border-bottom: 1px solid var(--rq-hair) !important;
}

/* summary row: crisp uppercase label + clean toggle indicator */
.details-compact .accord > summary {
  min-height: 50px !important;
  padding: 0 2px !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--rq-body) !important;
}

/* toggle indicator refinement (content set by inline <style> block) */
.details-compact .accord > summary::after {
  color: #99a1aa !important;
  font-size: .9rem !important;
}

/* expanded body padding */
.details-compact .accord > ul,
.details-compact .accord > div {
  padding: 2px 2px 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   7. VARIANT SELECTORS — label + size + color
   ═══════════════════════════════════════════════════════════ */

/* variant label ("COLOR" / "SIZE") */
.variant-label {
  font-size: .62rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #5e6872 !important;
}

/* size button: crisper active state (solid fill vs double-stroke) */
.size-btn.is-active {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
  box-shadow: none !important;
}

/* hover intent on desktop only */
@media (hover: hover) and (pointer: fine) {
  .size-btn:not(.is-active):not(:disabled):hover {
    border-color: #787f87 !important;
    color: #111 !important;
    background: #f6f7f8 !important;
  }
}

/* color tiles: cleaner active indicator */
.color-tile {
  transition: border-color .14s ease, box-shadow .14s ease !important;
}

/* ═══════════════════════════════════════════════════════════
   8. META ROW — size guide link + inventory note
   ═══════════════════════════════════════════════════════════ */
.size-guide-link {
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: #3e4751 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,0,0,.22) !important;
  text-underline-offset: 2px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.inventory-note {
  font-size: .70rem !important;
  color: #909aa3 !important;
  letter-spacing: .02em !important;
}

/* ═══════════════════════════════════════════════════════════
   9. PURCHASE AREA — finance note
   ═══════════════════════════════════════════════════════════ */
.finance-note {
  font-size: .72rem !important;
  color: #7e8590 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  margin-top: 5px !important;
}

/* ═══════════════════════════════════════════════════════════
   10. RECS SECTION — premium rebuild
   ═══════════════════════════════════════════════════════════ */

.recommend {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: clamp(52px, 6vw, 80px) !important;
  background: #fff !important;
}

/* Centered label — thin, max-tracked, pure black */
.recommend h2 {
  text-align: center !important;
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #111 !important;
  margin: 0 0 clamp(20px, 2.6vw, 32px) !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Grid — gap-spaced, transparent bg. Border only on cards so              */
/* nothing renders when the API hasn't loaded yet (no empty L-borders)     */
.recs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  margin-top: 0 !important;
}

/* Each card is self-contained with a subtle hairline all around */
.rec-card {
  border: 1px solid #ebebeb !important;
  border-radius: 0 !important;
  background: #fff !important;
  transition: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.rec-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Image area — clean warm grey, generous 3:5 ratio for tall presence */
.rec-media {
  aspect-ratio: 3 / 4 !important;
  background: #f5f5f5 !important;
}

.rec-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Body — stacked: name above, price below */
.rec-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 11px 13px 14px !important;
  background: #fff !important;
  border-top: 1px solid #ebebeb !important;
}

/* Product name — full wrap, bold, clean */
.rec-title {
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  color: #111 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  line-height: 1.28 !important;
}

/* Price — secondary, supporting */
.rec-body span:not(.rec-title) {
  font-family: Barlow, "Helvetica Neue", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #5a5a5a !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   11. PDP FOOTER LINKS
   ═══════════════════════════════════════════════════════════ */
.pdp-footer {
  font-size: .69rem !important;
  color: #8e96a0 !important;
  letter-spacing: .03em !important;
  gap: 18px !important;
}

.pdp-footer a {
  color: inherit !important;
  text-decoration-color: rgba(0,0,0,.18) !important;
  text-underline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   12. CART DRAWER TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
.drawer-header h3 {
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.drawer-note {
  font-size: .68rem !important;
  color: #909aa4 !important;
  letter-spacing: .02em !important;
}

.cart-msg {
  font-size: .74rem !important;
  color: #495260 !important;
  letter-spacing: .01em !important;
}

/* ═══════════════════════════════════════════════════════════
   13. MOBILE  ≤ 980px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .buy-assurance {
    text-align: left !important;
    font-size: .70rem !important;
  }

  .secure-line {
    font-size: .63rem !important;
    text-align: center !important;
  }

  .reviews-title {
    font-size: .59rem !important;
    letter-spacing: .18em !important;
  }

  .reviews-list li {
    font-size: .78rem !important;
  }

  details.accord > summary {
    font-size: .74rem !important;
    padding: 14px 0 !important;
  }

  .details-compact .accord > summary {
    font-size: .74rem !important;
    min-height: 48px !important;
  }

  .recommend h2 {
    font-size: 0.54rem !important;
    letter-spacing: 0.28em !important;
  }

  .variant-label {
    font-size: .61rem !important;
    letter-spacing: .14em !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. MOBILE  ≤ 700px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .buy-assurance {
    padding-top: 12px !important;
    margin-top: 14px !important;
    font-size: .69rem !important;
    line-height: 1.58 !important;
    text-align: left !important;
  }

  .reviews-snaps {
    padding-top: 12px !important;
    margin-top: 12px !important;
  }

  .secure-line {
    font-size: .61rem !important;
    margin-top: 10px !important;
  }

  details.accord > summary {
    font-size: .72rem !important;
    padding: 13px 0 !important;
    letter-spacing: .065em !important;
  }

  .details-compact .accord > summary {
    font-size: .72rem !important;
    min-height: 46px !important;
    letter-spacing: .065em !important;
  }

  .gallery {
    background: #f6f7f8 !important;  /* matches homepage .product-media bg */
  }

  .recommend {
    margin-top: clamp(36px, 4vw, 52px) !important;
  }

  .recs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .recommend h2 {
    font-size: 0.54rem !important;
    letter-spacing: 0.28em !important;
    margin-bottom: clamp(16px, 3vw, 22px) !important;
  }

  .pdp-footer {
    gap: 12px !important;
  }

  .finance-note {
    font-size: .70rem !important;
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   15a. DESKTOP GALLERY — flush, no padding bars
   At ≥981px the inline <style> block sets .gallery-slide img
   to object-fit:contain with clamp(10px,1.2vw,16px) padding,
   and pdp-premium.css sets .gallery{background:#f4f5f7}.
   Together they create visible colored bars around the image
   wherever the container aspect-ratio doesn't exactly match
   the photo. Fix: cover fills the frame edge-to-edge, padding
   zero, bg white so there is nothing to show through.
   At ≤980px the inline block already reduces to 8px padding —
   zero that out too so the mid-range matches.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 981px) {
  .gallery {
    background: #f6f7f8 !important;  /* matches homepage .product-media bg */
    border-color: #e8eaed !important;
  }

  .gallery-slide img {
    object-fit: cover !important;
    padding: 0 !important;
  }
}

/* mid-range (tablet/small desktop ≤980px, >700px) also has 8px padding */
@media (max-width: 980px) and (min-width: 701px) {
  .gallery-slide img {
    padding: 0 !important;
  }

  .gallery {
    background: #f6f7f8 !important;  /* matches homepage .product-media bg */
  }
}


/* ═══════════════════════════════════════════════════════════
   15. MOBILE  ≤ 420px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .buy-assurance {
    font-size: .67rem !important;
    line-height: 1.55 !important;
  }

  .secure-line {
    font-size: .60rem !important;
    letter-spacing: .03em !important;
  }

  .reviews-list li {
    font-size: .76rem !important;
  }

  .recommend h2 {
    font-size: 0.52rem !important;
    letter-spacing: 0.22em !important;
  }

  details.accord > summary {
    font-size: .70rem !important;
  }

  .details-compact .accord > summary {
    font-size: .70rem !important;
  }
}