/* Sanamere Band product page (product-band.html). De-vibed 2026-10-21 to the brand standard in
   STATE.md (2026-07-29 brand pass) and .impeccable.md: warm cream canvas with the site's editorial
   serif (Erode, the base h1/h2/h3 face in styles.css), flat fills, 6px buttons and cards, 3px flags,
   1px warm-grey hard dividers, no gradients, no shadows, no hover motion. Sections alternate cream
   and white. Trust pass 2026-11-03 (W-023): product-first hero with one clean buy box, the quantity
   ladder moved to "Choose your kit" as a quiet choice list, a 1120px desktop column, a customer strip
   under the hero, quieter practitioner quotes and a company and payment line above the footer.
   Hero pass 2026-11-03 (survivor study, research/m4/survivor-stores/HERO-BUYBOX-STUDY.md section 5): gallery first, 2 line headline,
   price row, the 1/2/3 Band ladder above the button, icon trust strip, one review, then the details; the button lands inside the
   first screen at 390x844.
   Previous files: pdp-c.pre-devibe.bak.css (before the de-vibe), tmp/pdp-c.pre-trust.css (before the trust pass), tmp/pdp-c.pre-hero.css (before the hero pass). */

.band-control-page {
  /* legacy tokens: used only by the header, utility bar and footer rules below */
  --band-ink: #201c19;
  --band-paper: #fffdf9;
  --band-red: #c63526;
  --band-red-dark: #98251a;
  --band-line: #d5cec5;

  --pc-white: #FFFFFF;
  --pc-soft: #FBF7F2;    /* warm cream canvas */
  --pc-ink: #231D17;
  --pc-head: #16130F;
  --pc-muted: #6B6055;   /* the site's --muted: 5.7:1 on cream, 6.1:1 on white */
  --pc-line: #E6E0DA;    /* warm grey hard divider and card border */
  --pc-red: #C63526;     /* the header button red */
  --pc-red-deep: #98251A;
  --pc-tint: #FDF1EE;    /* flat light red, ladder selected state */
  --pc-r: 6px;
  --pc-serif: 'Erode', Georgia, serif;

  margin: 0;
  color: var(--pc-ink);
  background: var(--pc-white);
  font-family: 'Switzer', 'Helvetica Neue', Arial, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.band-control-page img { display: block; max-width: 100%; }
.band-control-page button, .band-control-page a { -webkit-tap-highlight-color: transparent; }
:where(.band-control-page) button { font: inherit; }
.band-control-page a { color: inherit; }
.band-control-page :focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }

/* ---------- header, utility bar, footer: unchanged from band-pdp.css except the button radius ---------- */
.band-shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.band-utility {
  position: relative;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 16px;
  color: #fff;
  background: var(--band-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: center;
}
.band-header-row .cart-nav-btn { color: var(--band-ink); }
.band-header { color: var(--band-ink); border-bottom: 1px solid var(--band-line); background: var(--band-paper); }
.band-header-row { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.band-logo { color: var(--band-ink); font-size: 24px; text-decoration: none; }
.band-logo .brand-mark { width: 23px; height: 23px; }
.band-nav { display: flex; align-items: center; gap: 27px; margin-left: auto; font-size: 14px; font-weight: 600; }
.band-nav a { text-decoration: none; }
.band-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.band-header-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: #fff !important;
  background: var(--band-red);
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.band-footer { padding: 42px 0 24px; color: #ded7d2; background: #171412; }
.band-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.band-footer .brand { color: #fff; font-size: 22px; text-decoration: none; }
.band-footer nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.band-footer nav a { color: inherit; }
.band-legal { display: flex; justify-content: space-between; gap: 30px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #413a36; color: #9e958f; }
.band-legal p { max-width: 850px; margin: 0; font-size: 13px; }

/* ---------- company, support and payment line (above the footer, plain small text) ---------- */
.pc-company { padding: 28px 0 26px; border-top: 1px solid var(--pc-line); background: var(--pc-white); color: var(--pc-muted); }
.pc-company .band-shell { width: min(1120px, calc(100% - 48px)); display: grid; gap: 6px; }
.pc-company p { margin: 0; font-size: 13px; line-height: 1.5; text-align: left; }
.pc-company a { color: var(--pc-ink); text-underline-offset: 3px; }
.pc-company-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- layout ---------- */
.pc-wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.pc-page h1, .pc-page h2, .pc-page h3 { margin: 0; color: var(--pc-head); font-family: var(--pc-serif); font-weight: 600; }
:where(.pc-page) p { margin: 0; }
.pc-page h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.pc-page h3 { font-size: 18px; line-height: 1.25; }

/* sections alternate cream and white, split by a 1px hard divider */
.pc-band { padding: 40px 0; border-top: 1px solid var(--pc-line); background: var(--pc-white); }
.pc-soft { background: var(--pc-soft); }

/* eyebrows are small uppercase text, not pills */
.pc-pill, .pc-step-pill, .pc-doctor-eyebrow { display: block; margin: 0 0 8px; color: var(--pc-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.pc-head { max-width: 720px; margin: 0 0 24px; }
.pc-head > p:not(.pc-pill) { margin-top: 12px; color: var(--pc-muted); }
.pc-head-left { max-width: none; margin: 0 0 16px; }
.pc-fig { margin: 0; overflow: hidden; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-soft); }
.pc-fig img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pc-card { padding: 20px; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }

/* price comparison figures: plain serif in ink */
.pc-num { margin: 0; color: var(--pc-head); font-family: var(--pc-serif); font-size: 32px; font-weight: 600; line-height: 1.15; }
.pc-num small { margin-left: 8px; color: var(--pc-muted); font-family: 'Switzer', Arial, sans-serif; font-size: 14px; font-weight: 500; }

/* ---------- hero: product first ---------- */
.pc-hero { padding: 14px 0 40px; background: var(--pc-white); }
.pc-hero-grid { width: min(1120px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 32px; align-items: start; }
.pc-gallery { position: relative; min-width: 0; }
.pc-track { display: flex; overflow-x: auto; border-radius: var(--pc-r); background: var(--pc-white); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pc-track::-webkit-scrollbar { display: none; }
.pc-slide { position: relative; flex: 0 0 100%; aspect-ratio: 1; overflow: hidden; background: var(--pc-white); scroll-snap-align: start; }
.pc-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.band-gallery-tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; color: #fff; background: var(--pc-ink); border-radius: 3px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.pc-chip { position: absolute; right: 12px; top: 12px; padding: 4px 8px; color: #fff; background: var(--pc-ink); border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.pc-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: none; gap: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(35, 29, 23, .8); }
.pc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8B8178; }
.pc-dots i.on { background: #fff; }
.gal-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.gal-rail button { width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 4px; background: var(--pc-white); cursor: pointer; aspect-ratio: 1; }
.gal-rail button[aria-pressed="true"] { border-color: var(--pc-head); }
.gal-rail img { width: 100%; height: 100%; object-fit: cover; }
/* visual order follows the slides: product-only shot first unless an ad names an area (then the placement photo is first); pdp.js keeps writing to the first DOM button */
.pc-gallery:not(.pc-place-first) .gal-rail button:nth-child(2) { order: -1; }

.band-hero-copy { padding-top: 4px; }
.pc-page h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.band-deck { max-width: 560px; margin: 14px 0 0; color: var(--pc-ink); font-size: 16px; line-height: 1.55; }
.pc-bullets, .pc-ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc-bullets { margin-top: 16px; }
.pc-bullets li, .pc-ticks li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.pc-bullets li::before, .pc-ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--pc-red); }
.pc-spec { width: 100%; margin: 20px 0 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); font-size: 14px; }
.pc-spec th, .pc-spec td { padding: 9px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pc-line); line-height: 1.4; }
.pc-spec th { width: 36%; color: var(--pc-muted); font-weight: 600; }
.pc-spec td { color: var(--pc-head); font-weight: 600; }
.pc-spec tr:last-child > * { border-bottom: 0; }
.pc-disclose { margin: 8px 4px 0; color: var(--pc-muted); font-size: 12px; line-height: 1.4; }
#pdp-buy { margin: 0; }

/* trust row: plain text cells split by hard rules, no icons */
.pc-trust { display: grid; grid-template-columns: repeat(2, 1fr); margin: 16px 0 0; padding: 0; list-style: none; border-block: 1px solid var(--pc-line); }
.pc-trust li { padding: 9px 12px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.pc-trust li:nth-child(even) { border-left: 1px solid var(--pc-line); }
.pc-trust li:nth-child(n+3) { border-top: 1px solid var(--pc-line); }

/* rating */
.pc-rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; color: var(--pc-muted); font-size: 14px; line-height: 1.2; text-decoration: none; }
.pc-stars { color: var(--pc-red); font-size: 16px; font-style: normal; letter-spacing: .06em; }
.pc-star-off { color: #D9D1C9; }
.pc-rating b { color: var(--pc-head); font-size: 16px; font-weight: 700; }
.pc-rating span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* hero buy box (markup injected by pdp.js): price row, the quantity ladder, one button, then the promises */
.band-purchase-form { margin: 0; }
.band-price { display: flex; align-items: baseline; gap: 0 8px; height: 32px; margin: 0 0 8px; color: var(--pc-head); font-family: var(--pc-serif); font-size: 28px; font-weight: 600; line-height: 32px; letter-spacing: -.01em; }
.band-price-each, .band-ship { color: var(--pc-ink); font-family: 'Switzer', 'Helvetica Neue', Arial, system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.band-price-each { margin-left: -4px; }
.band-price-save { align-self: center; margin-left: auto; padding: 1px 7px; border-radius: 3px; color: #0F6B30; background: #E6F4EB; font-family: 'Switzer', 'Helvetica Neue', Arial, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.5; white-space: nowrap; }
.band-qty-slot { min-height: 196px; margin-bottom: 8px; }
.band-qty-slot.is-ready { min-height: 0; }
.band-atc, .pc-final-card button, .band-mobile-buy button {
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--pc-r); color: #fff; background: var(--pc-red);
  font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease;
}
.band-atc { width: 100%; }
.band-atc:hover, .pc-final-card button:hover, .band-mobile-buy button:hover { background: var(--pc-red-deep); }
.band-ship-note { margin: 10px 0 0; color: var(--pc-ink); font-size: 14px; line-height: 1.45; }
/* icon trust strip: simple line icons in the brand red, one row of four, hairlines between */
.band-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; list-style: none; border-block: 1px solid var(--pc-line); }
.band-icons li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px; color: var(--pc-ink); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; text-wrap: balance; }
.band-icons li + li { border-left: 1px solid var(--pc-line); }
.band-icons svg { flex: none; color: var(--pc-red); }
.band-guarantee { margin: 12px 0 0; color: var(--pc-muted); font-size: 13px; line-height: 1.45; }
.band-cards { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.band-cards li { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--pc-line); border-radius: 4px; background: var(--pc-white); color: var(--pc-ink); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }

/* one real customer review under the promises, then "What you get" */
.pc-hero-review { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-soft); }
.pc-hero-review .pc-review-stars { font-size: 15px; }
.pc-hero-review blockquote { margin: 8px 0 0; color: var(--pc-ink); font-size: 14px; line-height: 1.45; }
.pc-hero-review figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 8px; color: var(--pc-muted); font-size: 13px; line-height: 1.4; }
.pc-hero-review figcaption strong { color: var(--pc-head); font-size: 14px; }
.pc-get { margin-top: 20px; }
.pc-page .pc-get-h { margin: 0 0 10px; color: var(--pc-muted); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.pc-get .band-deck { margin: 0 0 12px; }
.pc-get .pc-bullets { margin-top: 0; }

/* quantity ladder (markup injected by pdp.js, in the hero and again in #pdp-kit): three quiet tiles, one selected.
   1px border, selected is a light tint with a red ring drawn inside the same box so nothing shifts;
   savings and the one badge are small flags. */
.band-qty { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.band-kit-form .band-qty { margin-bottom: 14px; }
.band-qty-option {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  box-sizing: border-box; width: 100%; height: 60px; margin: 0; padding: 8px 12px; text-align: left;
  color: var(--pc-ink); background: var(--pc-white); border: 1px solid var(--pc-line); border-radius: var(--pc-r); cursor: pointer;
  font: inherit; transition: border-color .15s ease, background-color .15s ease;
}
.band-qty-option:hover { border-color: #C9BEB8; }
.band-qty-option input { position: absolute; opacity: 0; pointer-events: none; }
.band-qty-option:focus-visible, .band-qty-option:has(input:focus-visible) { outline: 3px solid #1769aa; outline-offset: 3px; }
.band-qty-option.is-selected { background: var(--pc-tint); border-color: var(--pc-red); box-shadow: inset 0 0 0 1px var(--pc-red); }
.band-qty-dot { box-sizing: border-box; width: 18px; height: 18px; border: 1px solid #B9AEA7; border-radius: 50%; background: var(--pc-white); }
.band-qty-option.is-selected .band-qty-dot { padding: 3px; border-color: var(--pc-red); background: var(--pc-red) content-box; }
.band-qty-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.band-qty-label b { color: var(--pc-ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
.band-qty-label small { color: var(--pc-muted); font-size: 13px; font-weight: 400; line-height: 1.3; }
.band-qty-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.band-qty-total { color: var(--pc-head); font-size: 18px; font-weight: 700; line-height: 1.2; }
.band-qty-save { padding: 0 7px; border-radius: 3px; color: #0F6B30; background: #E6F4EB; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.band-qty-badge { position: absolute; z-index: 1; top: -7px; right: 12px; padding: 0 7px; border-radius: 3px; color: #fff; background: var(--pc-ink); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 14px; text-transform: uppercase; white-space: nowrap; }

/* cart drawer: the one-Band upsell button rendered by cart.js (uses the site .btn classes) */
.cart-upsell { margin: 12px 0 6px; padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer; }

/* ---------- customers strip (directly under the hero) ---------- */
.pc-from { padding: 32px 0; }
.pc-page .pc-from h2 { font-size: 24px; }
.pc-from .pc-head { margin-bottom: 18px; }
.pc-from-grid { display: grid; gap: 12px; }

/* ---------- practitioners: one pull-quote, two plain quotes ---------- */
.pc-docs-layout { display: grid; gap: 28px; }
.pc-doctor { max-width: 860px; margin: 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--pc-red); }
.pc-doctor blockquote { margin: 0; color: var(--pc-head); font-family: var(--pc-serif); font-size: 19px; font-weight: 500; line-height: 1.5; }
.pc-doctor-cite { margin-top: 14px; color: var(--pc-muted); font-size: 14px; line-height: 1.5; }
.pc-doctor-cite strong { color: var(--pc-head); font-size: 16px; }
.pc-docs-grid { display: grid; gap: 22px; }
.pc-doc { display: flex; flex-direction: column; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--pc-line); }
.pc-doc blockquote { margin: 0; color: var(--pc-ink); font-size: 15px; line-height: 1.55; }
.pc-doc figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; color: var(--pc-muted); font-size: 13px; line-height: 1.45; }
.pc-doc figcaption strong { color: var(--pc-head); font-size: 15px; }

/* when can it help */
.pc-help-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.pc-help { grid-column: span 2; display: flex; flex-direction: column; }
.pc-help:nth-child(n+4) { grid-column: span 3; }
.pc-help h3 { font-size: 22px; }
.pc-help > p { margin-top: 10px; color: var(--pc-muted); font-size: 15px; }
.pc-help h4 { margin: 18px 0 12px; color: var(--pc-red-deep); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.pc-help .pc-ticks { gap: 8px; }
.pc-help .pc-ticks li { color: var(--pc-ink); font-size: 14px; }

/* ---------- cost comparison ---------- */
.pc-cost-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 900px; }
.pc-cost-card { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
.pc-cost-card > span { font-size: 15px; font-weight: 700; }
.pc-cost-card small { color: var(--pc-muted); font-size: 13px; line-height: 1.4; }
.pc-cost-ours { padding: 19px 23px; border: 2px solid var(--pc-red); }
.pc-or { color: var(--pc-muted); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }

/* ---------- choose your kit ---------- */
.pc-kit .pc-head { margin-bottom: 20px; }
.pc-kit .pc-wrap > .pc-trust { max-width: 560px; }
.pc-kit-fig { display: none; }
.pc-links { display: flex; gap: 24px; font-size: 14px; font-weight: 700; }
.pc-links a, .pc-faq a { color: var(--pc-red-deep); text-underline-offset: 3px; }
.pc-kit .pc-links a { font-size: 15px; }

/* ---------- faq ---------- */
.pc-faq { max-width: 920px; overflow: hidden; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
.pc-faq details { border-bottom: 1px solid var(--pc-line); }
.pc-faq details:last-child { border-bottom: 0; }
.pc-faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; font-size: 16px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::after { content: '+'; flex: none; color: var(--pc-red-deep); font-size: 22px; font-weight: 500; line-height: 1; }
.pc-faq details[open] summary::after { content: '\2212'; }
.pc-faq details p { max-width: 680px; padding: 0 20px 20px; color: var(--pc-muted); font-size: 15px; }
.pc-faq .pc-ticks { max-width: 680px; padding: 0 20px 20px; }
.pc-faq details p.pc-tight { padding-bottom: 12px; }

/* ---------- see it in action ---------- */
.pc-strip-scroll { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pc-strip-scroll::-webkit-scrollbar { display: none; }
.pc-strip-scroll > figure { margin: 0; overflow: hidden; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); scroll-snap-align: start; }
.pc-videos { grid-auto-columns: calc((100% - 32px) / 3); }
.pc-videos video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pc-soft); }
.pc-videos figcaption { padding: 10px 14px; font-size: 15px; font-weight: 700; }
.pc-how-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.pc-how-sub { margin-top: 40px; }
.pc-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pc-steps li { padding: 16px 20px 18px; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
.pc-steps p { margin-top: 6px; color: var(--pc-muted); font-size: 15px; }

/* ---------- customer reviews ---------- */
.pc-reviews .pc-head { margin-bottom: 20px; }
.pc-head > .pc-prov { margin-top: 10px; color: var(--pc-muted); font-size: 15px; }
.pc-head > .pc-rate-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; color: var(--pc-head); font-size: 18px; font-weight: 600; }
.pc-rate-sum b { font-family: var(--pc-serif); font-size: 32px; font-weight: 600; line-height: 1; }
.pc-rate-sum .pc-stars { font-size: 20px; }
.pc-mention { max-width: 800px; margin: 0 0 24px; }
.pc-mention h3 { margin-bottom: 12px; color: var(--pc-muted); font-family: inherit; font-size: 16px; font-weight: 600; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc-tags li { padding: 6px 12px; border: 1px solid var(--pc-line); border-radius: 3px; background: var(--pc-soft); font-size: 14px; font-weight: 600; line-height: 1.2; }
/* the wall is a grid of equal rows: a text card is one row, a photo card is two rows (see the min-width: 801px block) */
.pc-reviews-grid { display: grid; gap: 16px; }
.pc-review { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
.pc-review img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
.pc-review-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 16px 18px 18px; }
.pc-review-stars { color: var(--pc-red); font-size: 17px; letter-spacing: .06em; line-height: 1; }
.pc-review h3 { margin-top: 10px; font-size: 16px; line-height: 1.3; }
.pc-review blockquote { margin: 8px 0 0; color: var(--pc-ink); font-size: 15px; line-height: 1.55; }
.pc-review figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; color: var(--pc-muted); font-size: 13px; line-height: 1.4; }
.pc-review figcaption strong { color: var(--pc-head); font-size: 14px; }

/* ---------- final buy, support ---------- */
.pc-final-card { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; max-width: 980px; padding: 24px; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
.pc-final-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--pc-r); object-fit: cover; }
.pc-final-card h2 { margin-bottom: 12px; }
.pc-final-card > div > p:last-of-type { margin-bottom: 24px; color: var(--pc-muted); }
.pc-final-card button { width: 100%; max-width: 360px; }
.pc-support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 920px; }
.pc-support-grid .pc-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-color .15s ease; }
.pc-support-grid .pc-card:hover { border-color: var(--pc-red); }
.pc-support-grid span { color: var(--pc-red-deep); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pc-support-grid strong { font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- sticky mobile bar (markup injected by pdp.js): price, stars and review count, then the button; the slide-in is the only motion on the page ---------- */
.band-mobile-buy {
  position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--pc-white); border-top: 1px solid var(--pc-line);
  transform: translateY(110%); transition: transform .18s ease;
}
.band-mobile-buy.is-visible { transform: translateY(0); }
.band-mobile-buy .band-mobile-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.15; }
.band-mobile-buy .band-mobile-top { display: flex; align-items: baseline; gap: 6px; }
.band-mobile-buy b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.band-mobile-buy em { color: var(--pc-muted); font-size: 13px; font-style: normal; font-weight: 600; }
.band-mobile-buy em:empty { display: none; }
.band-mobile-buy small { display: flex; align-items: center; gap: 5px; color: var(--pc-muted); font-size: 12px; white-space: nowrap; }
.band-mobile-buy small .pc-stars { font-size: 12px; letter-spacing: .02em; }
.band-mobile-buy button { flex: none; min-width: 168px; min-height: 48px; padding: 0 18px; }

@media (max-width: 1000px) {
  .pc-hero-grid { gap: 28px; }
  .pc-help-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-help, .pc-help:nth-child(n+4) { grid-column: auto; }
  .pc-help:last-child { grid-column: 1 / -1; }
  .pc-videos { grid-auto-columns: min(46%, 300px); }
  .pc-how-grid { gap: 36px; }
  .pc-final-card { grid-template-columns: 240px 1fr; gap: 32px; }
}

@media (min-width: 801px) {
  :where(.pc-page) p { font-size: 16px; }
  .pc-page h1 { margin-bottom: 14px; font-size: clamp(30px, 3.2vw, 36px); line-height: 1.15; }
  .pc-page h2 { font-size: 34px; line-height: 1.12; }
  .pc-band { padding: 48px 0; }
  .pc-hero { padding: 24px 0 48px; }
  .pc-head { margin-bottom: 24px; }
  .pc-head > p:not(.pc-pill) { font-size: 16px; }
  .pc-from { padding: 40px 0; }
  .pc-page .pc-from h2 { font-size: 26px; }

  /* hero: gallery left, copy and the one buy box right inside a 1px panel */
  .band-hero-copy { padding: 28px 32px 30px; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
  .pc-bullets li { font-size: 16px; }
  .band-deck { font-size: 16px; }
  .band-price { height: 38px; font-size: 32px; line-height: 38px; }
  .band-qty-slot { min-height: 208px; }
  .band-qty-option { height: 64px; }
  .band-atc { min-height: 56px; }
  .band-ship-note { font-size: 15px; }
  .band-guarantee { font-size: 14px; }
  .pc-hero-review blockquote { font-size: 15px; }
  .pc-spec { font-size: 15px; }
  .pc-trust li { font-size: 14px; }

  /* customers strip: three columns */
  .pc-from-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  /* practitioners: the pull-quote on top, the two plain quotes side by side below */
  .pc-docs-layout { gap: 32px; }
  .pc-doctor { padding-left: 26px; }
  .pc-doctor blockquote { font-size: 22px; line-height: 1.45; }
  .pc-docs-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .pc-doc blockquote { font-size: 16px; }

  /* conditions and benefits */
  .pc-help { padding: 22px; }
  .pc-help > p { font-size: 16px; }
  .pc-help .pc-ticks li { font-size: 15px; }
  .pc-fig img { aspect-ratio: 3 / 2; }
  .pc-how-sub { margin-top: 32px; }

  /* choose your kit: ladder and button left, the product right */
  .pc-kit .pc-wrap { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .pc-kit .pc-wrap > * { grid-column: 1; }
  .pc-kit .pc-wrap > .pc-trust { margin-top: 20px; }
  .pc-kit-fig { display: block; grid-column: 2 !important; grid-row: 1 / span 3; }
  .pc-kit-fig img { aspect-ratio: 1; }

  /* reviews: three columns on equal rows; a text card is one row, a photo card is two rows with the photo filling the card */
  .pc-reviews-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(236px, auto); grid-auto-flow: dense; gap: 20px; }
  .pc-review-photo { grid-row: span 2; }
  .pc-review-photo img { flex: 1 1 0; min-height: 120px; aspect-ratio: auto; }
  .pc-review-photo .pc-review-body { flex: none; }
  .pc-review blockquote { font-size: 16px; }
  .pc-from-grid .pc-review img { flex: none; aspect-ratio: 3 / 2; }
  .pc-final-card { padding: 20px; }
  .pc-final-card > div > p:last-of-type { margin-bottom: 20px; }

  /* gallery: five thumbnails in a column on the left, the main photo right; it follows the longer copy column */
  .pc-gallery { position: sticky; top: 16px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pc-gallery .gal-rail { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
  .pc-gallery .pc-track { grid-column: 2; grid-row: 1; }
}
@media (min-width: 801px) and (max-width: 1000px) {
  .pc-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-from-grid, .pc-docs-grid { grid-template-columns: 1fr; }
  .pc-from-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 801px) and (max-height: 819px) { .pc-gallery { position: relative; top: auto; } }
@media (min-width: 640px) {
  .pc-kit .pc-trust { grid-template-columns: repeat(4, 1fr); }
  .pc-kit .pc-trust li, .pc-kit .pc-trust li:nth-child(n+3) { border-top: 0; border-left: 1px solid var(--pc-line); }
  .pc-kit .pc-trust li:first-child { border-left: 0; }
}

@media (max-width: 800px) {
  .band-shell, .pc-wrap { width: min(100% - 32px, 620px); }
  .band-utility { min-height: 31px; padding-inline: 10px; font-size: 12px; white-space: nowrap; }
  .band-header-row { min-height: 55px; gap: 18px; }
  .band-header-row .cart-nav-btn { display: inline-flex; padding: 8px 0; }
  .band-header-row .cart-nav-btn .cart-nav-label { display: none; }
  .band-logo { font-size: 21px; }
  .band-logo .brand-mark { width: 20px; height: 20px; }
  .band-nav { display: none; }
  .band-header-cta { min-height: 42px; padding: 0 14px; font-size: 13px; }
  .band-footer { padding-bottom: 93px; }
  .band-footer-row, .band-legal { align-items: flex-start; flex-direction: column; }
  .pc-company .band-shell { width: min(100% - 32px, 620px); }

  :where(.pc-page) p { font-size: 16px; }
  .pc-head { margin-bottom: 16px; }
  .pc-head > p:not(.pc-pill) { margin-top: 8px; }
  .pc-reviews .pc-head:not(.pc-head-rate) > p { font-size: 15px; line-height: 1.5; }
  .pc-head > p.pc-links { margin-top: 14px; }
  .pc-fig img { aspect-ratio: 16 / 10; }

  /* mobile hero order is the DOM order: gallery, rating, title, price, ladder, button, promises, one review, what you get, specs;
     the copy wrapper dissolves into one flex column */
  .pc-hero { padding-top: 8px; }
  .pc-hero-grid { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .band-hero-copy { display: contents; }
  .pc-gallery { margin: 0 16px; }
  .pc-slide { aspect-ratio: 358 / 336; }
  .pc-dots { display: flex; }
  .band-gallery-tag { top: 12px; bottom: auto; }
  .gal-rail { display: none; }
  .pc-rating { min-height: 22px; margin: 8px 16px 6px; }
  .pc-page h1 { margin: 0 16px 8px; font-size: 24px; line-height: 28px; }
  #pdp-buy { margin: 0 16px; }
  .pc-hero-review { margin: 16px 16px 0; }
  .pc-get { margin: 20px 16px 0; }
  .band-deck { font-size: 15px; line-height: 1.5; }
  .pc-bullets { gap: 8px; }
  .pc-bullets li { font-size: 14px; line-height: 1.4; }
  .pc-spec { width: calc(100% - 32px); margin: 20px 16px 0; }
  .pc-disclose { margin: 8px 20px 0; }

  /* customers strip: three stacked cards, photo left and text right */
  .pc-from { padding: 28px 0; }
  .pc-from-grid { gap: 10px; }
  .pc-from-grid .pc-review { flex-direction: row; }
  .pc-from-grid .pc-review img { flex: none; width: 96px; height: auto; aspect-ratio: auto; align-self: stretch; }
  .pc-from-grid .pc-review-body { padding: 12px 14px; }
  .pc-from-grid .pc-review blockquote, .pc-from-grid .pc-review h3 { font-size: 14px; line-height: 1.4; }
  .pc-from-grid .pc-review h3 { margin-top: 6px; font-size: 15px; }
  .pc-from-grid .pc-review figcaption { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 8px; padding-top: 0; }
  .pc-from-grid .pc-review-stars { font-size: 15px; }

  /* practitioners: plain quotes with a thin rule; review cards stack inside one border; condition cards still swipe */
  .pc-docs-layout { gap: 22px; }
  .pc-doctor { padding-left: 16px; }
  .pc-doctor blockquote { font-size: 17px; line-height: 1.5; }
  .pc-doc blockquote { font-size: 14px; line-height: 1.45; }
  .pc-doc figcaption { padding-top: 10px; }
  .pc-reviews-grid { display: block; border: 1px solid var(--pc-line); border-radius: var(--pc-r); background: var(--pc-white); }
  .pc-reviews-grid .pc-review { margin: 0; border: 0; border-bottom: 1px solid var(--pc-line); border-radius: 0; }
  .pc-reviews-grid .pc-review:last-child { border-bottom: 0; }
  .pc-review blockquote { font-size: 14px; line-height: 1.4; }
  .pc-reviews-grid .pc-review-photo { display: grid; grid-template-columns: 88px 1fr; }
  .pc-reviews-grid .pc-review-photo img { width: 100%; height: 100%; aspect-ratio: auto; }
  .pc-reviews-grid .pc-review figcaption { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 8px; padding-top: 0; }
  .pc-review-stars { font-size: 15px; }
  .pc-review h3 { margin-top: 6px; }
  .pc-help-grid { display: flex; align-items: stretch; gap: 12px; margin-right: -16px; padding: 0 16px 4px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pc-help-grid::-webkit-scrollbar { display: none; }
  .pc-help, .pc-help:last-child { flex: 0 0 min(86%, 340px); scroll-snap-align: start; }
  .pc-help { padding: 16px; }
  .pc-help h3 { font-size: 20px; }
  .pc-help h4 { margin: 14px 0 10px; }
  .pc-help .pc-ticks { gap: 6px; }
  .pc-spec th, .pc-spec td { padding: 7px 14px; }
  .pc-review-body { padding: 12px 14px; }
  .pc-rate-sum b { font-size: 28px; }
  .pc-cost-row { grid-template-columns: 1fr; gap: 6px; }
  .pc-cost-card { padding: 14px 16px; }
  .pc-cost-ours { padding: 13px 15px; }
  .pc-or { line-height: 1; }
  .pc-how-sub { margin-top: 28px; }
  .pc-how-grid { grid-template-columns: 1fr; gap: 20px; }
  .pc-videos { grid-auto-columns: min(78%, 290px); gap: 12px; margin-right: -16px; padding-right: 16px; }
  .pc-videos video { aspect-ratio: 16 / 10; }
  .pc-steps li { padding: 14px 16px 16px; }
  .pc-tags li { padding: 5px 10px; font-size: 13px; }
  .pc-mention { margin-bottom: 18px; }
  .pc-final-card button { width: 100%; min-width: 0; max-width: none; }
  .pc-faq summary { min-height: 48px; padding: 10px 16px; }
  .pc-faq details p { padding: 0 16px 16px; }
  .pc-faq .pc-ticks { padding: 0 16px 16px; }
  .pc-support-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--pc-line); border-radius: var(--pc-r); }
  .pc-support-grid .pc-card { padding: 12px 16px; border: 0; border-radius: 0; }
  .pc-support-grid .pc-card + .pc-card { border-top: 1px solid var(--pc-line); }
  .pc-final-card { display: block; padding: 16px; }
  .pc-final-card img { float: left; width: 96px; height: 96px; margin: 0 14px 6px 0; aspect-ratio: 1; }
  .pc-final-card button { clear: both; }
  .band-mobile-buy { display: flex; }
}

/* short phone viewports (360x780 and the like): a slightly shorter gallery keeps ADD TO CART inside the first screen */
@media (max-width: 800px) and (max-height: 800px) { .pc-slide { aspect-ratio: 358 / 310; } }

@media (prefers-reduced-motion: reduce) {
  .band-control-page *, .band-control-page *::before, .band-control-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
