/* Banger Labs — Product Detail Page (PDP).
   1:1 source-of-truth UI port, rebranded to the Banger Labs design tokens.
   NOTE: style.css already strips .bl-purchase-card chrome below 639px — preserved.
   Uses brand vars from style.css: --bl-p #7C5CFF, --bl-p2 #5B3BE0, --bl-p3 #9B7BFF, --bl-ink #14102E. */

.bl-pdp { font-family: var(--font-body); color: var(--bl-ink); background: #fff; }

/* ── local keyframes (named distinctly; brand bl-* keyframes reused where present) ── */
@keyframes bl-pdp-gradient-border { 0%{background-position:0% 50%}25%{background-position:60% 30%}50%{background-position:100% 50%}75%{background-position:40% 70%}100%{background-position:0% 50%} }
@keyframes bl-pdp-shimmer-atc { 0%{background-position:200% 0}100%{background-position:-200% 0} }
@keyframes bl-pdp-pulse-dot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)} }
@keyframes bl-pdp-float { 0%,100%{transform:scale(1.08) translateY(0)}50%{transform:scale(1.08) translateY(-10px)} }

/* ============================================================ HERO */
.bl-pdp-hero {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem 2rem;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "gallery info"; gap: 0 3rem; align-items: start;
}

/* ── Gallery ── */
.bl-pdp-gallery { grid-area: gallery; position: sticky; top: 1rem; align-self: start; }
.bl-pdp-gallery-frame { aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; background: #0f0818; position: relative; margin-bottom: .75rem; }
.bl-pdp-gallery-glow { position: absolute; width: 55%; aspect-ratio: 1/1; border-radius: 50%; background: radial-gradient(circle, rgba(155,123,255,.5) 0%, rgba(124,92,255,.2) 40%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.bl-pdp-gallery-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.bl-float-img { animation: bl-pdp-float 6s ease-in-out infinite; }
.bl-pdp-ruo { position: absolute; bottom: 1rem; right: 1rem; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); border-radius: 8px; padding: .28rem .7rem; font-size: .58rem; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.1); }
.bl-pdp-thumbs { display: flex; gap: .5rem; }
.bl-pdp-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1.5px solid #e6e2f5; background: #0f0818; padding: 0; cursor: pointer; transition: border-color .15s; }
.bl-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bl-pdp-thumb.is-active { border-color: var(--bl-p); }

/* ── Info ── */
.bl-pdp-info { grid-area: info; padding-top: .85rem; }
.bl-pdp-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; flex-wrap: wrap; }
.bl-pdp-brand { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bl-p); }
.bl-pdp-name { font-family: var(--font-display); font-size: clamp(1.75rem,4.5vw,2.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--bl-ink); line-height: 1.05; margin: 0 0 .45rem; }
.bl-pdp-short { font-size: .86rem; color: #4a4860; line-height: 1.7; margin: 0 0 1.4rem; max-width: 440px; }
.bl-pdp-highlights { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bl-pdp-hl { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(20,16,46,.12); border-radius: 980px; padding: .28rem .78rem; font-size: .72rem; color: #4a4860; background: #fff; }
.bl-pdp-hl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bl-p); flex-shrink: 0; }

/* ── Purchase card ── */
.bl-purchase-card { background: #fff; border: 1px solid rgba(20,16,46,.08); border-radius: 18px; padding: 1.4rem; box-shadow: 0 2px 16px rgba(20,16,46,.06); }

.bl-pdp-ship { background: #edf7f2; border-radius: 14px; padding: .65rem 1rem; display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; border: 1px solid rgba(26,107,60,.1); }
.bl-pdp-ship-dot { width: 6px; height: 6px; border-radius: 50%; background: #1a6b3c; flex-shrink: 0; animation: bl-pdp-pulse-dot 2s ease-in-out infinite; }
.bl-pdp-ship-text { font-size: .76rem; color: #1a6b3c; font-weight: 500; }

.bl-pdp-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-mute); display: block; margin-bottom: .5rem; }

/* sizes */
.bl-pdp-sizes { margin-bottom: 1rem; }
.bl-pdp-size-grid { display: flex; gap: .45rem; flex-wrap: wrap; }
.bl-pdp-size { border: 1.5px solid rgba(20,16,46,.12); border-radius: 10px; background: #fafafa; padding: .55rem 1rem; cursor: pointer; transition: all .15s; text-align: left; position: relative; font-family: var(--font-body); }
.bl-pdp-size.is-active { border-color: var(--bl-p); background: rgba(124,92,255,.07); }
.bl-pdp-size.is-oos { opacity: .45; cursor: not-allowed; }
.bl-pdp-size-label { display: block; font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--bl-ink); letter-spacing: -.01em; }
.bl-pdp-size.is-active .bl-pdp-size-label { color: var(--bl-p2); }
.bl-pdp-size-price { display: block; font-size: .72rem; color: var(--bl-mute); margin-top: .1rem; }
.bl-pdp-size.is-oos .bl-pdp-size-price { color: #e57373; }

/* bundles */
.bl-pdp-bundle-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.bl-pdp-bundles { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.bl-pdp-bundle { position: relative; border: 1.5px solid rgba(20,16,46,.07); border-radius: 14px; background: #fafafa; cursor: pointer; isolation: isolate; transition: border-color .18s, background .18s; }
.bl-pdp-bundle.has-tag { margin-top: 10px; }
.bl-bundle-selected { border: 1.5px solid transparent; }
.bl-bundle-selected::before {
  content: ''; position: absolute; inset: -2px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bl-dk) 0%, var(--bl-p) 20%, var(--bl-amber) 35%, #b8902a 45%, var(--bl-amber) 55%, var(--bl-p3) 70%, var(--bl-dk) 85%, var(--bl-p) 100%);
  background-size: 400% 400%; animation: bl-pdp-gradient-border 10s cubic-bezier(.45,0,.55,1) infinite; z-index: -1; opacity: .9;
}
.bl-bundle-selected::after { content: ''; position: absolute; inset: 1.5px; border-radius: 13px; background: #fff; z-index: -1; }
.bl-pdp-bundle-tag {
  position: absolute; top: -11px; left: 48px; background: #fff; color: var(--bl-p2);
  border: 1.5px solid rgba(124,92,255,.4); border-radius: 980px; padding: .15rem .6rem;
  font-family: var(--font-display); font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; z-index: 2; line-height: 1.4;
}
.bl-bundle-selected .bl-pdp-bundle-tag { background: var(--bl-p); color: #fff; border-color: var(--bl-p); }
.bl-pdp-bundle-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: .85rem; padding: .95rem 1rem; }
.bl-pdp-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(20,16,46,.15); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.bl-bundle-selected .bl-pdp-radio { border-color: var(--bl-p); background: var(--bl-p); }
.bl-pdp-radio-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.bl-bundle-selected .bl-pdp-radio-dot { transform: scale(1); }
.bl-pdp-bundle-text { min-width: 0; }
.bl-pdp-bundle-title { display: block; font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--bl-ink); letter-spacing: -.01em; margin-bottom: .25rem; }
.bl-pdp-save { display: inline-flex; align-items: center; background: rgba(26,107,60,.1); color: #1a6b3c; border-radius: 980px; padding: .12rem .52rem; font-size: .63rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bl-pdp-bundle-price { text-align: right; flex-shrink: 0; }
.bl-pdp-bundle-now { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--bl-ink); letter-spacing: -.02em; display: block; margin-bottom: .1rem; }
.bl-pdp-bundle-orig { font-size: .7rem; color: #a8a4b8; text-decoration: line-through; display: block; }
.bl-pdp-bundle-per { font-size: .62rem; color: #a8a4b8; margin-top: .06rem; display: block; }

/* ATC row */
.bl-pdp-atc-row { display: flex; gap: .65rem; align-items: stretch; margin-bottom: .9rem; }
.bl-pdp-coa-btn { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .3rem; background: none; border: 1.5px solid rgba(20,16,46,.12); border-radius: 14px; width: 58px; padding: .7rem .5rem; color: var(--bl-mute); font-family: var(--font-display); font-size: .58rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .18s; }
.bl-pdp-coa-btn:hover { border-color: rgba(124,92,255,.22); color: var(--bl-p); background: rgba(124,92,255,.07); }
.bl-pdp-atc {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(100deg, var(--bl-p2) 0%, var(--bl-p) 40%, var(--bl-p3) 60%, var(--bl-p) 80%, var(--bl-p2) 100%);
  background-size: 200% 100%; border: none; border-radius: 14px; padding: 1rem 2rem; color: #fff;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 4px 20px rgba(91,59,224,.35), 0 1px 0 rgba(255,255,255,.15) inset; position: relative; overflow: hidden;
  transition: background-position .4s ease, transform .1s, box-shadow .2s;
}
.bl-pdp-atc:hover { background-position: 100% 0; }
.bl-pdp-atc:active { transform: scale(.99); }
.bl-pdp-atc.is-oos { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; }
.bl-pdp-atc-ico { position: relative; z-index: 1; flex-shrink: 0; }
.bl-pdp-atc-label { position: relative; z-index: 1; }
.bl-btn-atc-shine:not(.is-oos)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); background-size: 200% 100%; background-position: 200% 0; border-radius: inherit; animation: bl-pdp-shimmer-atc 3s ease-in-out infinite; }
.bl-pdp-atc.is-loading { opacity: .85; pointer-events: none; }

/* payment methods */
.bl-pdp-pay { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.bl-pdp-pay-label { font-size: .75rem; color: #a8a4b8; white-space: nowrap; }
.bl-pdp-pay svg { border-radius: 5px; }

/* trust bar */
.bl-pdp-trust { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(20,16,46,.07); }
.bl-pdp-trust-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; flex: 1; }
.bl-pdp-trust-txt { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.bl-pdp-trust-t { font-size: .82rem; font-weight: 600; color: var(--bl-ink); }
.bl-pdp-trust-s { font-size: .76rem; color: var(--bl-mute); }

/* ── COA section ── */
.bl-pdp-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--bl-p); margin: 0 0 .5rem; }
.bl-pdp-h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.025em; color: var(--bl-ink); line-height: 1.15; margin: 0; }
.bl-pdp-sub { font-size: .88rem; color: var(--bl-mute); margin: .4rem 0 0; }
.bl-pdp-coa { margin-top: 2rem; }
.bl-pdp-coa-head { margin-bottom: 1.5rem; }
.bl-pdp-coa-card { background: var(--bl-paper); border: 1px solid rgba(20,16,46,.07); border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.bl-pdp-coa-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.bl-pdp-coa-id { display: flex; align-items: center; gap: .75rem; }
.bl-pdp-coa-pass { background: #dcfce7; border: 1px solid #bbf7d0; color: #15803d; font-family: var(--font-display); font-size: .68rem; font-weight: 800; letter-spacing: .08em; padding: .28rem .65rem; border-radius: 6px; }
.bl-pdp-coa-name { font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--bl-ink); margin: 0; }
.bl-pdp-coa-meta { font-size: .72rem; color: var(--bl-mute); margin: .1rem 0 0; }
.bl-pdp-coa-live { display: flex; align-items: center; gap: .4rem; }
.bl-pdp-coa-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2a9d5c; display: inline-block; animation: bl-pdp-pulse-dot 2s ease-in-out infinite; }
.bl-pdp-coa-live span { font-size: .7rem; color: var(--bl-mute); }
.bl-pdp-coa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.bl-pdp-coa-cell { background: #fff; border: 1px solid rgba(20,16,46,.07); border-radius: 10px; padding: .7rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.bl-pdp-coa-k { font-size: .65rem; color: var(--bl-mute); font-weight: 500; }
.bl-pdp-coa-v { font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--bl-ink); }
.bl-pdp-coa-v.bl-green { color: #15803d; }
.bl-pdp-coa-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.bl-pdp-coa-dl { display: inline-flex; align-items: center; gap: .45rem; background: var(--bl-p); color: #fff; font-family: var(--font-display); font-size: .82rem; font-weight: 600; padding: .6rem 1.2rem; border-radius: 980px; transition: background .15s; }
.bl-pdp-coa-dl:hover { background: var(--bl-p2); }
.bl-pdp-coa-lib { display: inline-flex; align-items: center; background: none; border: 1px solid rgba(20,16,46,.12); color: #4a4860; font-size: .82rem; font-weight: 500; padding: .6rem 1.1rem; border-radius: 980px; transition: all .15s; }
.bl-pdp-coa-lib:hover { border-color: rgba(124,92,255,.22); color: var(--bl-p); }
.bl-pdp-coa-note { font-size: .7rem; line-height: 1.55; color: #a8a4b8; margin: 0; }

/* ── FAQ ── */
.bl-pdp-faq-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.bl-pdp-faq { grid-column: 2; }
.bl-pdp-faq .bl-pdp-h2 { margin-bottom: .4rem; }
.bl-pdp-faq-list { display: flex; flex-direction: column; margin-top: 2rem; }
.bl-pdp-faq-item { border-bottom: 1px solid rgba(20,16,46,.07); }
.bl-pdp-faq-item:first-child { border-top: 1px solid rgba(20,16,46,.07); }
.bl-pdp-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 1rem 0; cursor: pointer; text-align: left; gap: 1rem; }
.bl-pdp-faq-q > span { font-size: .875rem; font-weight: 600; color: var(--bl-ink); line-height: 1.4; }
.bl-pdp-faq-item.is-open .bl-pdp-faq-q > span { color: var(--bl-p); }
.bl-pdp-faq-caret { color: var(--bl-mute); flex-shrink: 0; transition: transform .25s var(--bl-ease); }
.bl-pdp-faq-item.is-open .bl-pdp-faq-caret { transform: rotate(180deg); }
.bl-pdp-faq-a { max-height: 0; overflow: hidden; font-size: .82rem; line-height: 1.7; color: #4a4860; transition: max-height .35s var(--bl-ease), padding .25s; }
.bl-pdp-faq-item.is-open .bl-pdp-faq-a { max-height: 320px; padding-bottom: 1rem; }

/* ── Related ── */
.bl-pdp-related { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 4rem; border-top: 1px solid rgba(20,16,46,.07); }
.bl-pdp-related .bl-pdp-h2 { margin-bottom: 2rem; }
.bl-pdp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.bl-pdp-related-card { background: #fff; border: 1px solid rgba(20,16,46,.07); border-radius: 20px; overflow: hidden; transition: box-shadow .2s, transform .2s; display: block; }
.bl-pdp-related-card:hover { box-shadow: 0 12px 28px -16px rgba(20,16,46,.2); transform: translateY(-2px); }
.bl-pdp-related-media { aspect-ratio: 1/1; background: #f6f4ff; position: relative; overflow:hidden; }
.bl-pdp-related-media img { width: 100%; height: 100%; object-fit: cover; display:block; }
.bl-pdp-related-body { padding: 1rem 1.25rem; }
.bl-pdp-related-cat { font-size: .68rem; color: var(--bl-mute); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .3rem; }
.bl-pdp-related-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--bl-ink); margin: 0 0 .4rem; }
.bl-pdp-related-price { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--bl-p); margin: 0; }
.bl-pdp-related-price del { color: var(--bl-mute); font-weight: 400; }
.bl-pdp-related-price ins { text-decoration: none; }

/* ── COA lightbox ── */
.bl-pdp-coa-lb { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.bl-pdp-coa-lb[hidden] { display: none; }
.bl-pdp-coa-lb-card { background: #fff; border-radius: 20px; padding: 1.5rem; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.bl-pdp-coa-lb-close { position: absolute; top: 1rem; right: 1rem; background: var(--bl-paper); border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #4a4860; }
.bl-pdp-coa-lb-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--bl-ink); margin: 0 0 .25rem; }
.bl-pdp-coa-lb-sub { font-size: .78rem; color: var(--bl-mute); margin: 0 0 1.25rem; }
.bl-pdp-coa-lb-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; margin-bottom: 1.25rem; }
.bl-pdp-coa-lb-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── Sticky mobile ATC bar ── */
.bl-pdp-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(255,255,255,.96); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(20,16,46,.08); padding: .85rem 2rem; box-shadow: 0 -8px 30px rgba(20,16,46,.08); transform: translateY(100%); transition: transform .35s var(--bl-ease); display: none; }
.bl-pdp-sticky.is-visible { transform: translateY(0); }
.bl-pdp-sticky-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bl-pdp-sticky-info { display: flex; flex-direction: column; gap: .15rem; }
.bl-pdp-sticky-name { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--bl-ink); }
.bl-pdp-sticky-sub { font-size: .72rem; color: var(--bl-mute); }
.bl-pdp-sticky-right { display: flex; align-items: center; gap: 1rem; }
.bl-pdp-sticky-price { display: flex; flex-direction: column; align-items: flex-end; }
.bl-pdp-sticky-now { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--bl-ink); }
.bl-pdp-sticky-orig { font-size: .8rem; color: #a8a4b8; text-decoration: line-through; }
.bl-pdp-sticky-atc { background: linear-gradient(100deg, var(--bl-p2) 0%, var(--bl-p) 40%, var(--bl-p3) 60%, var(--bl-p) 80%, var(--bl-p2) 100%); background-size: 200% 100%; border: none; border-radius: 14px; padding: .7rem 1.6rem; color: #fff; font-family: var(--font-display); font-size: .88rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(91,59,224,.35); flex-shrink: 0; }
.bl-pdp-sticky-atc.is-oos { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  .bl-pdp-hero { grid-template-columns: minmax(0,1fr); grid-template-areas: "gallery" "info"; padding: 1.5rem 1rem 1.5rem; gap: 0; }
  .bl-pdp-info, .bl-pdp-coa, .bl-coahero { min-width: 0; }
  .bl-pdp-gallery { position: static; margin-bottom: 1.5rem; }
  .bl-pdp-info { padding-top: 0; }
  .bl-pdp-faq-wrap { grid-template-columns: 1fr; padding: 1rem 1rem 2rem; }
  .bl-pdp-faq { grid-column: 1; }
  /* sticky mobile ATC only appears on mobile/tablet */
  .bl-pdp-sticky { display: block; }
}
@media (max-width: 600px) {
  .bl-pdp-hero { padding: 1.25rem .75rem 1rem; }
  .bl-pdp-trust { flex-direction: row; gap: .25rem; align-items: flex-start; justify-content: space-between; }
  .bl-pdp-trust-item { flex-direction: column; gap: .3rem; align-items: center; flex: 1; min-width: 0; }
  .bl-pdp-trust-t, .bl-pdp-trust-s { font-size: .65rem; }
  .bl-pdp-atc-row { flex-direction: column; }
  .bl-pdp-coa-btn { width: 100%; flex-direction: row; gap: .5rem; padding: .7rem; }
  .bl-pdp-related, .bl-pdp-coa { padding-left: 0; padding-right: 0; }
  .bl-pdp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- PDP FAQ left column: Verified Purity / Specs / COA trust panel ---- */
.bl-pdp-side{grid-column:1;align-self:start;position:sticky;top:120px;animation:bl-uni-in .7s var(--bl-ease) both;}
.bl-pdp-side-card{position:relative;overflow:hidden;background:linear-gradient(165deg,#14102E,#241a52);border-radius:24px;padding:34px 30px;color:#fff;box-shadow:0 26px 60px -26px rgba(46,28,110,.6);}
.bl-pdp-side-card::before{content:"";position:absolute;top:-40%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(124,92,255,.45),transparent 65%);pointer-events:none;}
.bl-pdp-side-seal{position:relative;width:54px;height:54px;border-radius:16px;background:linear-gradient(120deg,#7C5CFF,#5B3BE0);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -8px rgba(124,92,255,.6);animation:bl-wm-float 3.6s ease-in-out infinite;}
.bl-pdp-side-eyebrow{position:relative;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9B7BFF;margin:20px 0 6px;}
.bl-pdp-side-title{position:relative;font-family:var(--font-display);font-size:30px;line-height:1.05;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0 0 22px;}
.bl-pdp-specs{position:relative;list-style:none;margin:0 0 22px;padding:0;}
.bl-pdp-specs li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-top:1px solid rgba(155,123,255,.18);transition:padding-left .2s var(--bl-ease);}
.bl-pdp-specs li:last-child{border-bottom:1px solid rgba(155,123,255,.18);}
.bl-pdp-specs li:hover{padding-left:6px;}
.bl-spec-k{font-family:var(--font-body);font-size:13px;color:#a79fce;}
.bl-spec-v{font-family:var(--font-display);font-size:14px;font-weight:600;color:#fff;text-align:right;}
.bl-pdp-side-cta{position:relative;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#14102E;font-family:var(--font-display);font-size:14px;font-weight:600;padding:14px 24px;border-radius:999px;text-decoration:none;transition:transform .2s var(--bl-ease),box-shadow .2s var(--bl-ease);}
.bl-pdp-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(0,0,0,.45);}
.bl-pdp-side-note{position:relative;font-family:var(--font-body);font-size:11px;color:#8077a8;margin:18px 0 0;line-height:1.5;}
@media(max-width:900px){ .bl-pdp-side{position:static;margin:0 0 8px;} }

/* Bundle "+ Free BAC Water" bonus label */
.bl-pdp-bundle-bonus{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:11.5px;font-weight:600;color:#2a9d5c;margin-top:4px;line-height:1.2;}
.bl-pdp-bundle-bonus svg{color:#2a9d5c;flex-shrink:0;}

/* ── Per-vial AMOUNT dropdowns (mix & match doses inside the selected bundle) ── */
.bl-pdp-amount{margin-top:14px;padding-top:14px;border-top:1px solid rgba(124,92,255,.16);display:block;animation:blAmountIn .25s ease}
@keyframes blAmountIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bl-pdp-amount-label{display:block;font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9089a8;margin-bottom:10px}
.bl-pdp-amount-row{display:flex;align-items:center;gap:14px;margin-bottom:9px}
.bl-pdp-amount-row:last-child{margin-bottom:0}
.bl-pdp-amount-n{flex:0 0 auto;width:22px;font:700 15px/1 'Space Grotesk',sans-serif;color:#14102E}
.bl-pdp-amount-wrap{position:relative;flex:1 1 auto}
.bl-pdp-amount-sel{appearance:none;-webkit-appearance:none;width:100%;padding:13px 40px 13px 16px;border:1.5px solid rgba(20,16,46,.14);border-radius:13px;background:#fff;font:600 15px/1.1 'Inter',sans-serif;color:#14102E;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.bl-pdp-amount-sel:hover{border-color:rgba(124,92,255,.5)}
.bl-pdp-amount-sel:focus{outline:none;border-color:#7C5CFF;box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.bl-pdp-amount-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#7C5CFF;pointer-events:none}

/* BAC Water free-bonus thumbnail in bundle + cut-off fix */
.bl-pdp-bundle{overflow:visible}
.bl-pdp-bundle-bonus{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.bl-pdp-bac-img{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:0 0 auto;box-shadow:0 1px 4px rgba(20,16,46,.18);background:#f6f4ff}
.bl-pdp-amount{padding-bottom:4px}
.bl-pdp-amount-sel:disabled,.bl-pdp-amount-sel option:disabled{color:#b9b4c9}

/* ── Bundle fixes: per-bundle box count, bigger BAC thumb, aligned save+bonus row ── */
.bl-pdp-amount-row[hidden]{display:none!important}      /* hide rows beyond the bundle's vial count */
.bl-pdp-bundle-title{margin-bottom:7px}
.bl-pdp-save{vertical-align:middle;margin-right:9px}
.bl-pdp-bundle-bonus{margin-top:0;vertical-align:middle;font-size:12px;gap:8px}
.bl-pdp-bac-img{width:38px;height:38px;border-radius:9px;box-shadow:0 2px 8px rgba(20,16,46,.22)}
.bl-pdp-amount{padding-bottom:8px}

/* dynamic vial labels (#N paid / "Free Vial") + cut-off padding */
.bl-pdp-amount-n{flex:0 0 auto;width:auto;min-width:58px}
.bl-pdp-amount-n.is-free{font-size:11px;color:#2a9d5c;font-weight:700;line-height:1.15;letter-spacing:.01em}
.bl-pdp-amount{padding-bottom:20px!important}

/* inset the amount content off the card border + staggered reveal animation */
.bl-pdp-amount{padding:14px 18px 22px!important}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row{animation:blRowIn .42s cubic-bezier(.16,1,.3,1) backwards}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row:nth-of-type(1){animation-delay:.04s}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row:nth-of-type(2){animation-delay:.09s}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row:nth-of-type(3){animation-delay:.14s}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row:nth-of-type(4){animation-delay:.19s}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row:nth-of-type(5){animation-delay:.24s}
.bl-pdp-amount.bl-anim .bl-pdp-amount-label{animation:blRowIn .35s ease backwards}
@keyframes blRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bl-pdp-amount-sel{transition:border-color .15s,box-shadow .15s,transform .12s}
.bl-pdp-amount-sel:active{transform:scale(.997)}

/* ── Full Kit upsell card (premium gradient, free-bundle photo) ── */
.bl-pdp-kit{position:relative;margin-top:18px;border-radius:16px;padding:2px;background:linear-gradient(120deg,#7C5CFF,#FF6A2C);box-shadow:0 8px 28px rgba(124,92,255,.22)}
.bl-pdp-kit-badge{position:absolute;top:-11px;left:18px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(120deg,#7C5CFF,#5B3BE0);color:#fff;font:700 10.5px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:980px;box-shadow:0 3px 10px rgba(91,59,224,.4)}
.bl-pdp-kit-badge svg{color:#FFD36A}
.bl-pdp-kit-body{display:flex;gap:16px;align-items:center;background:#fff;border-radius:14px;padding:20px 18px 16px}
.bl-pdp-kit-photo{position:relative;flex:0 0 auto;width:108px;height:108px;border-radius:12px;overflow:hidden;background:#f6f4ff;box-shadow:0 3px 12px rgba(20,16,46,.12)}
.bl-pdp-kit-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bl-pdp-kit-photo-tag{position:absolute;top:6px;left:6px;background:#2a9d5c;color:#fff;font:800 9px/1 'Space Grotesk',sans-serif;letter-spacing:.06em;padding:3px 6px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.bl-pdp-kit-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:9px}
.bl-pdp-kit-title{font:700 1.04rem/1 'Space Grotesk',sans-serif;color:#14102E;letter-spacing:-.01em}
.bl-pdp-kit-dose{display:flex;align-items:center;gap:10px}
.bl-pdp-kit-dose-lbl{font:700 11px/1 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#9089a8;flex:0 0 auto}
.bl-pdp-kit-wrap{flex:1 1 auto;max-width:160px;position:relative}
.bl-pdp-kit-wrap .bl-pdp-amount-sel{padding:9px 36px 9px 13px;font-size:14px}
.bl-pdp-kit-perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.bl-pdp-kit-perks li{display:inline-flex;align-items:center;gap:5px;font:600 12px/1.2 'Inter',sans-serif;color:#2a7d4f}
.bl-pdp-kit-perks li svg{color:#2a9d5c;flex:0 0 auto}
.bl-pdp-kit-buy{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:3px;flex-wrap:wrap}
.bl-pdp-kit-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bl-pdp-kit-now{font:800 1.4rem/1 'Space Grotesk',sans-serif;color:#14102E;letter-spacing:-.02em}
.bl-pdp-kit-orig{font-size:.84rem;color:#a8a4b8;text-decoration:line-through}
.bl-pdp-kit-save{background:rgba(255,106,44,.12);color:#FF6A2C;font:800 10px/1 'Space Grotesk',sans-serif;letter-spacing:.04em;padding:4px 8px;border-radius:980px}
.bl-pdp-kit-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,#7C5CFF,#5B3BE0);color:#fff;border:none;border-radius:12px;padding:13px 20px;font:700 .92rem/1 'Space Grotesk',sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(124,92,255,.32);transition:transform .14s,box-shadow .14s}
.bl-pdp-kit-btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(124,92,255,.42)}
.bl-pdp-kit-btn:active{transform:translateY(0)}
.bl-pdp-kit-btn.is-loading{opacity:.7;pointer-events:none}
@media(max-width:560px){.bl-pdp-kit-body{flex-direction:column;align-items:stretch}.bl-pdp-kit-photo{width:100%;height:150px}.bl-pdp-kit-buy{flex-direction:column;align-items:stretch}.bl-pdp-kit-btn{justify-content:center}}

/* breathing room between the Full Kit card and the Add-to-Cart row */
.bl-pdp-atc-row{margin-top:20px}

/* Animated Add-to-Cart: continuous glow-breathing + hover lift (shine sweep already present) */
@keyframes bl-atc-pulse{0%,100%{box-shadow:0 4px 20px rgba(91,59,224,.35),0 1px 0 rgba(255,255,255,.15) inset}50%{box-shadow:0 8px 32px rgba(124,92,255,.6),0 0 0 5px rgba(124,92,255,.1),0 1px 0 rgba(255,255,255,.15) inset}}
.bl-pdp-atc:not(.is-oos){animation:bl-atc-pulse 2.4s ease-in-out infinite}
.bl-pdp-atc:not(.is-oos):hover{transform:translateY(-1px) scale(1.012);animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.bl-pdp-atc:not(.is-oos){animation:none}}
.bl-pdp-amount.bl-anim .bl-pdp-amount-row:nth-of-type(6){animation-delay:.29s}

/* ── Full Kit card: hero photo (chosen-dose 10-vial kit) above the free-stuff photo ── */
.bl-pdp-kit-hero{ position:relative; border-radius:16px; overflow:hidden; margin-bottom:14px; background:#f5f3fb; aspect-ratio:1/1; }
.bl-pdp-kit-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.bl-pdp-kit-hero-tag{ position:absolute; bottom:12px; left:12px; background:linear-gradient(90deg,#7C5CFF,#9b7dff); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.04em; padding:5px 10px; border-radius:999px; box-shadow:0 4px 14px -4px rgba(124,92,255,.8); }
/* On a dedicated kit PAGE the main gallery already shows the kit (swaps per dose) → hide the duplicate in-card hero */
.bl-pdp-kit.is-kitpage .bl-pdp-kit-hero{ display:none; }

/* ── Related products carousel (PDP): dose dropdown + BOGO add, arrows scroll all ── */
.bl-pdp-related-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.bl-pdp-related-nav{ display:flex; gap:8px; flex-shrink:0; }
.bl-pdp-related-arrow{ width:42px; height:42px; border-radius:50%; border:1.5px solid #e6e2f5; background:#fff; color:#5B3BE0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.bl-pdp-related-arrow:hover{ background:#7C5CFF; color:#fff; border-color:#7C5CFF; }
.bl-pdp-related-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:4px 2px 16px; scrollbar-width:thin; scrollbar-color:#ddd6fe transparent; }
.bl-pdp-related-track::-webkit-scrollbar{ height:6px; }
.bl-pdp-related-track::-webkit-scrollbar-thumb{ background:#ddd6fe; border-radius:3px; }
.bl-pdp-related-card{ flex:0 0 232px; scroll-snap-align:start; background:#fff; border:1px solid #ece9f6; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 24px -16px rgba(20,16,46,.22); }
.bl-pdp-related-media{ display:block; aspect-ratio:1/1; background:#f5f3fb; }
.bl-pdp-related-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bl-pdp-related-body{ padding:14px; display:flex; flex-direction:column; gap:11px; flex:1; }
.bl-pdp-related-name{ font-family:var(--font-display); font-size:15px; font-weight:700; color:#14102E; text-decoration:none; line-height:1.25; }
.bl-pdp-related-name:hover{ color:#5B3BE0; }
.bl-pdp-related-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.bl-pdp-related-price{ font-family:var(--font-display); font-size:16px; font-weight:700; color:#14102E; white-space:nowrap; }
.bl-pdp-related-dosewrap{ position:relative; display:inline-flex; align-items:center; }
.bl-pdp-related-dose{ appearance:none; -webkit-appearance:none; background:#f5f3ff; border:1.5px solid #ddd6fe; border-radius:9px; padding:7px 26px 7px 10px; font-size:13px; font-weight:600; color:#14102E; cursor:pointer; }
.bl-pdp-related-dose:focus{ outline:none; border-color:#7C5CFF; box-shadow:0 0 0 3px rgba(124,92,255,.2); }
.bl-pdp-related-chev{ position:absolute; right:8px; pointer-events:none; color:#7C5CFF; }
.bl-pdp-related-add{ width:100%; border:0; border-radius:10px; padding:11px; font-family:var(--font-display); font-size:13.5px; font-weight:700; color:#fff; background:linear-gradient(120deg,#9B7BFF,#7C5CFF 55%,#5B3BE0); cursor:pointer; transition:transform .12s, box-shadow .12s, opacity .15s; }
.bl-pdp-related-add:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(124,92,255,.7); }
.bl-pdp-related-add.is-loading{ opacity:.7; pointer-events:none; }
@media(max-width:600px){ .bl-pdp-related-card{ flex-basis:172px; } .bl-pdp-related-body{ padding:11px; } }

/* ───────────────────────── COA-HERO carousel (per-dose lab-verified hero) ───────────────────────── */
.bl-coahero{ margin-top:18px; border:1px solid rgba(124,92,255,.16); border-radius:20px; padding:22px 22px 24px; background:linear-gradient(180deg,#fff,#faf8ff); box-shadow:0 18px 44px -28px rgba(91,59,224,.4); position:relative; overflow:hidden; min-width:0; }
.bl-coahero-head{ margin-bottom:14px; }
.bl-coahero-title{ font-family:var(--font-display,'Space Grotesk',sans-serif); font-size:clamp(18px,2.4vw,22px); font-weight:700; letter-spacing:-.02em; color:#14102E; margin:6px 0 6px; }
.bl-coahero-sub{ font-family:var(--font-body,'Inter',sans-serif); font-size:13.5px; line-height:1.55; color:#5a5378; margin:0; }
.bl-coahero-sub strong{ color:#7C5CFF; }
.bl-coahero-stage{ position:relative; display:flex; align-items:center; gap:8px; }
.bl-coahero-orb{ position:absolute; top:-30%; right:-12%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(255,106,44,.18), rgba(124,92,255,.10) 55%, transparent 72%); filter:blur(6px); pointer-events:none; z-index:0; animation:bl-coa-float 11s ease-in-out infinite; }
@keyframes bl-coa-float{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-14px,16px) scale(1.06);} }
.bl-coahero-track{ position:relative; z-index:1; flex:1 1 auto; border-radius:16px; overflow:hidden; aspect-ratio:1/1; background:#fff5ee; touch-action:pan-y; cursor:grab; box-shadow:inset 0 0 0 1px rgba(20,16,46,.05); }
.bl-coahero-track:active{ cursor:grabbing; }
.bl-coahero-slide{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.02); transition:opacity .42s ease, transform .42s ease; pointer-events:none; }
.bl-coahero-slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
.bl-coahero-slide img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
.bl-coahero-cap{ position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:8px; padding:6px 11px 6px 7px; border-radius:999px; background:rgba(20,16,46,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.bl-coahero-pass{ font-family:var(--font-display,'Space Grotesk',sans-serif); font-size:10px; font-weight:700; letter-spacing:.08em; color:#fff; background:linear-gradient(120deg,#2ec27e,#1f9d63); padding:3px 7px; border-radius:6px; }
.bl-coahero-dose{ font-family:var(--font-body,'Inter',sans-serif); font-size:12.5px; font-weight:600; color:#fff; letter-spacing:.01em; }
.bl-coahero-arrow{ position:relative; z-index:2; flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(124,92,255,.22); background:#fff; color:#5B3BE0; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 18px -10px rgba(91,59,224,.5); transition:transform .14s, box-shadow .14s, background .14s; }
.bl-coahero-arrow:hover{ transform:translateY(-1px); background:#7C5CFF; color:#fff; box-shadow:0 12px 24px -10px rgba(124,92,255,.75); }
.bl-coahero-arrow:active{ transform:scale(.94); }
.bl-coahero-dots{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:14px; max-height:88px; min-width:0; max-width:100%; overflow:auto; scrollbar-width:thin; }
.bl-coahero-dot{ font-family:var(--font-display,'Space Grotesk',sans-serif); font-size:12px; font-weight:600; color:#5a5378; background:#f1ecff; border:1px solid transparent; border-radius:999px; padding:6px 12px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.bl-coahero-dot:hover{ background:#e5dcff; color:#5B3BE0; }
.bl-coahero-dot.is-active{ background:linear-gradient(120deg,#9B7BFF,#7C5CFF 55%,#5B3BE0); color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(124,92,255,.8); }
@media(max-width:600px){
	.bl-coahero{ padding:18px 14px 20px; }
	.bl-coahero-arrow{ width:34px; height:34px; }
	.bl-coahero-orb{ width:240px; height:240px; }
	.bl-coahero-dots{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; max-height:none; padding-bottom:2px; }
	.bl-coahero-dot{ flex:0 0 auto; }
}