/* ==========================================================================
   Option B PDP skin — flagship treatment showcase (conversion-assertive)
   Extends option-b.css (copied unmodified from the homepage set).
   ========================================================================== */

/* --- Buy hero ---------------------------------------------------------------- */
.b-buy { background: var(--paper); padding-block: clamp(8px, 2vw, 24px) clamp(44px, 6vw, 80px); }
.b-award-chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sage-tint); color: var(--cypress-deep);
  font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 7px 14px;
  max-width: calc(100% - 28px);
}
.b-award-chip svg { flex: 0 0 auto; }
.b-buy__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.b-buy__title { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.b-buy__sub { font-size: 1.08rem; color: var(--shiitake); }
.b-proof { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--shiitake); flex-wrap: wrap; }
.b-ticks { display: grid; gap: 8px; }
.b-ticks li { display: flex; gap: 10px; align-items: baseline; font-weight: 500; }
.b-ticks .tick { color: var(--sage); font-weight: 700; }
.b-price-block {
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  background: var(--cream); border-radius: var(--radius-s); padding: 14px 18px;
}
.b-price-block .price { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--cypress-deep); }
.b-fine { border-top: 1px solid rgba(33, 35, 34, 0.12); padding-top: 12px; font-size: 0.85rem; color: var(--shiitake); }

/* --- Product-details tabs ------------------------------------------------------ */
.ptabs { padding: var(--section-y) 0; background: var(--paper); }
.ptabs__list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ptabs__list::-webkit-scrollbar { display: none; }
.ptab {
  flex: 0 0 auto; min-height: 44px;
  border: 1.5px solid var(--stucco-tint); border-radius: 999px;
  padding: 10px 18px; font-weight: 600; font-size: 0.9rem; color: var(--shiitake);
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}
.ptab:hover { border-color: var(--cypress); color: var(--cypress); }
.ptab.is-active { background: var(--cypress); border-color: var(--cypress); color: var(--paper); }
.ptabs__pane {
  background: var(--cream); border-radius: var(--radius-m);
  padding: clamp(20px, 3.5vw, 44px); margin-top: 14px;
}
.ptabs__pane > * + * { margin-top: 12px; }
.ptabs__pane .pane-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.ptabs__pane .pane-subhead { font-family: var(--sans); font-weight: 700; font-size: 1rem; margin-top: 20px; }
.ptabs__pane p, .ptabs__pane li { max-width: 70ch; }
.ptabs__pane ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 8px; }

/* --- Award cards ------------------------------------------------------------------ */
.b-awards { background: var(--paper-deep); padding: var(--section-y) 0; }
.b-awards__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .b-awards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.b-award-card {
  background: var(--cream); border-radius: var(--radius-m); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.b-award-card img { max-height: 30px; width: auto; max-width: 150px; object-fit: contain; object-position: left; }
.b-award-card h3 { font-size: 1.25rem; }
.b-award-card p { font-size: 0.9rem; color: var(--shiitake); }

/* --- On-the-label trust cards ------------------------------------------------------ */
.b-label { background: var(--sage-tint); padding: var(--section-y) 0; }
.b-label__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .b-label__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .b-label__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-label__card { background: var(--cream); border-radius: var(--radius-m); padding: 22px; }
.b-label__card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.b-label__card p { font-size: 0.92rem; color: var(--shiitake); }

/* --- Cross-sell cards ---------------------------------------------------------------- */
.b-xsell { padding: var(--section-y) 0; }
.b-xsell .xsell-card {
  background: var(--cream); border-radius: var(--radius-m); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.b-xsell .xsell-card h3 { font-size: 1.15rem; }
.b-xsell .xsell-card .size { font-size: 0.85rem; color: var(--shiitake); }

/* --- Consultation bridge ---------------------------------------------------------------- */
.b-bridge { background: var(--cypress-deep); color: var(--paper); padding: var(--section-y) 0; }
.b-bridge .kicker { color: #cdd3a8; }
.b-bridge .kicker::before { background: #cdd3a8; }
.b-bridge__row { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .b-bridge__row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.b-bridge h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-block: 10px 14px; }
.b-bridge__sub { color: rgba(243, 234, 218, 0.85); max-width: 56ch; }
.b-bridge__ctas { display: grid; gap: 10px; }