/* ============================================================
   PDP CONVERSION HERO — MOCKUP (not linked from live pages)
   Larger gallery, spec line, rating, 3 benefits, dosing selector,
   supply selector, 90-day guarantee, ship-today live counter.
   ============================================================ */

.pdp-hero.pdpx { padding: clamp(104px, 11vw, 148px) 0 clamp(48px, 5vw, 72px); }

.pdpx .pdp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  grid-template-areas: "visual head" "visual info";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 0;
  align-items: start;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* neutralise the old flex hero-visual so the gallery can fill the column */
.pdpx .pdp-hero-visual { grid-area: visual; }
.pdpx-head { grid-area: head; min-width: 0; }
.pdpx .pdp-hero-visual {
  display: block;
  width: 100%;
  min-width: 0;
}

/* ---------- GALLERY: bigger main image, vertical thumb rail ---------- */
.pdpx-gallery {
  width: 100%;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.pdpx-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdpx-thumb {
  appearance: none;
  border: 1.5px solid #e6e0d6;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pdpx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdpx-thumb:hover { border-color: #c9c1b4; }
.pdpx-thumb.is-active {
  border-color: var(--sku-accent, #0097B2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sku-accent, #0097B2) 24%, transparent);
}
.pdpx-thumb:focus-visible { outline: 2px solid var(--sku-accent, #0097B2); outline-offset: 2px; }

.pdpx-main {
  position: relative;
  background: #fff;
  border: 1px solid #ece6dc;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Native horizontal scroll-snap track: real swipe on touch, two-finger
   swipe on trackpads, pointer-drag on mice, arrow keys when focused. */
.pdpx-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge */
  cursor: grab;
}
.pdpx-track::-webkit-scrollbar { display: none; }
.pdpx-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.pdpx-track:focus-visible { outline: 2px solid var(--sku-accent, #0097B2); outline-offset: -2px; }

.pdpx-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdpx-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .pdpx-track { scroll-behavior: auto; }
}

/* ---------- RIGHT COLUMN ---------- */
.pdpx-info { display: flex; flex-direction: column; }

/* ---------- TITLE ROW + SKU CYCLER ---------- */
.pdpx-titlerow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Bare chevrons: no circle. The padding stays clickable so the hit area is
   36px on desktop and 44px on mobile even though nothing is drawn around it. */
.pdpx-skunav {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 10px;
  color: #8d8981;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, transform .18s ease;
}
.pdpx-skunav svg { width: 20px; height: 20px; display: block; }
.pdpx-skunav:hover { color: var(--sku-accent, #0097B2); }
.pdpx-skunav[data-sku-nav="prev"]:hover { transform: translateX(-2px); }
.pdpx-skunav[data-sku-nav="next"]:hover { transform: translateX(2px); }
.pdpx-skunav:active { color: var(--sku-accent, #0097B2); transform: none; }
.pdpx-skunav:focus-visible {
  outline: 2px solid var(--sku-accent, #0097B2);
  outline-offset: 0;
}

.pdpx-title {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(34px, 2.7vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0;
}

.pdpx-spec {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: none;
  color: #4a4741;
  margin: 12px 0 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.pdpx-spec .sep { color: #bdb6a9; margin: 0 4px; }

/* rating row */
.pdpx-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ece6dc;
}
.pdpx-stars { color: var(--star-gold, #FFB300); font-size: 19.04px; letter-spacing: 1px; line-height: 1; }
.pdpx-rating-text { font-size: 13.5px; white-space: nowrap; color: #1a1a1a; font-weight: 600; }
.pdpx-rating-text span { font-weight: 400; color: #6b6862; }
.pdpx-avatars { display: flex; }
.pdpx-avatars img {
  width: 27px; height: 27px; border-radius: 50%;
  object-fit: cover; border: 2px solid #FAF7F2;
  margin-left: -9px;
}
.pdpx-avatars img:first-child { margin-left: 0; }
.pdpx-howto-link {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pdpx-howto-link:hover { color: var(--sku-accent, #0097B2); }

/* three benefits */
.pdpx-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.pdpx-benefits li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.35;
  color: #33302b;
}
.pdpx-benefits svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--sku-accent, #0097B2); }

/* selector blocks */
.pdpx-block {
  margin-top: 18px;
  border: 1.5px solid #e2dbcf;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}
.pdpx-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pdpx-block-label {
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.pdpx-block-note {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b6862;
}
.pdpx-block-note svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* dosing pills */
.pdpx-doses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pdpx-dose {
  appearance: none;
  border: 1.5px solid #d9d2c6;
  background: #fff;
  border-radius: 999px;
  padding: 11px 6px 10px;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body, sans-serif);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.pdpx-dose b { display: block; font-size: 13.5px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.01em; }
.pdpx-dose small { display: block; font-size: 12px; color: #6b6862; margin-top: 2px; }
.pdpx-dose:hover { border-color: #a9a196; }
.pdpx-dose.is-active {
  background: var(--sku-accent, #0097B2);
  border-color: var(--sku-accent, #0097B2);
}
.pdpx-dose.is-active b, .pdpx-dose.is-active small { color: #fff; }
.pdpx-dose:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* supply cards */
.pdpx-supplies { display: flex; flex-direction: column; gap: 9px; }
.pdpx-supply {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  appearance: none;
  text-align: left;
  border: 1.5px solid #e2dbcf;
  background: #fff;
  border-radius: 13px;
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.pdpx-supply:hover { border-color: #b8b0a3; }
.pdpx-supply.is-active {
  border-color: var(--sku-accent, #0097B2);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--sku-accent, #0097B2) 22%, transparent);
}
.pdpx-supply:not(.is-active) { opacity: .62; }
.pdpx-supply:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.pdpx-radio {
  flex: 0 0 19px; width: 19px; height: 19px;
  border-radius: 50%;
  border: 2px solid #c4bcaf;
  display: grid; place-items: center;
}
.pdpx-supply.is-active .pdpx-radio { border-color: var(--sku-accent, #0097B2); }
.pdpx-supply.is-active .pdpx-radio::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sku-accent, #0097B2);
}
.pdpx-supply-main { flex: 1 1 auto; min-width: 0; }
.pdpx-supply-title {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-size: 16px; font-weight: 600; color: #1a1a1a;
  font-variant-numeric: tabular-nums lining-nums;
}
.pdpx-supply-sub { display: block; font-size: 12.5px; color: #6b6862; margin-top: 2px; }
.pdpx-supply-price { text-align: right; flex: 0 0 auto; }
.pdpx-supply-total {
  display: block;
  font-size: 15px; font-weight: 600; color: #1a1a1a;
  font-variant-numeric: tabular-nums lining-nums;
}
.pdpx-supply-day { display: block; font-size: 12px; color: #6b6862; margin-top: 2px; font-variant-numeric: tabular-nums lining-nums; }
.pdpx-supply-tag {
  display: inline-block; margin-top: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: #1a1a1a; background: #F3EEE5;
  border: 1px solid #e2dbcf; border-radius: 5px;
  padding: 2px 6px;
}

/* guarantee strip */
.pdpx-guarantee {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: 16px;
  font-size: 13.5px; color: #33302b;
}
.pdpx-guarantee .divider { color: #cfc7ba; }
.pdpx-guarantee strong { font-weight: 600; }

/* CTA */
.pdpx-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  margin-top: 12px;
  appearance: none; border: none; cursor: pointer;
  background: var(--sku-accent, #0097B2);
  color: #fff;
  border-radius: 999px;
  padding: 20px 24px;
  font-family: var(--font-display, sans-serif);
  font-size: 18px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  transition: filter .16s ease, box-shadow .16s ease;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--sku-accent, #0097B2) 28%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
}
.pdpx-cta:hover { filter: brightness(1.08); }
.pdpx-cta:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 3px; }
.pdpx-cta .bar { opacity: .55; font-weight: 400; }

.pdpx-consistency {
  text-align: center;
  font-size: 13px;
  color: #6b6862;
  margin: 14px 0 0;
  line-height: 1.45;
}

/* live ship counter */
.pdpx-shipnow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  border: 1.5px solid var(--sku-accent, #0097B2);
  background: color-mix(in srgb, var(--sku-accent, #0097B2) 7%, #fff);
  border-radius: 14px;
  padding: 14px 16px;
}
.pdpx-shipnow-l, .pdpx-shipnow-r { display: flex; align-items: center; gap: 10px; }
.pdpx-shipnow-r { justify-content: flex-end; }
.pdpx-shipnow svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--sku-accent, #0097B2); }
.pdpx-shipnow-k { display: block; font-size: 12px; color: #55524c; line-height: 1.2; }
.pdpx-shipnow-v {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-size: 19px; font-weight: 700; color: #1a1a1a;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.15;
}
.pdpx-shipnow-arrow { color: #a9a196; display: grid; place-items: center; }
.pdpx-shipnow-arrow svg { width: 30px; height: 14px; color: #a9a196; flex: 0 0 30px; }

.pdpx-amazon { display: flex; justify-content: center; margin-top: 18px; opacity: .8; }
.pdpx-amazon img { width: auto; height: 22px; display: block; }

/* trust callouts under gallery */
.pdpx-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  margin-left: 106px;
}
.pdpx-trust div {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  font-size: 12px; line-height: 1.3; color: #55524c;
  background: #fff; border: 1px solid #ece6dc; border-radius: 12px;
  padding: 12px 8px;
}
.pdpx-trust svg { width: 20px; height: 20px; color: var(--sku-accent, #0097B2); }

/* hide the raw shopify button, we proxy clicks into it */
.pdpx-shopify-host { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .pdp-hero.pdpx { padding: 124px 0 48px !important; }
  .pdpx .pdp-hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "visual" "info";
    grid-template-rows: auto;
    row-gap: 22px;
  }
  .pdpx-main { max-height: none; }
  .pdpx-trust { margin-left: 0; }
}
@media (max-width: 700px) {
  .pdp-hero.pdpx { padding: 118px 0 40px !important; }
  .pdpx-howto-link { padding: 10px 0; }
  .pdpx-gallery { grid-template-columns: 1fr; }
  .pdpx-thumbs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .pdpx-thumbs::-webkit-scrollbar { display: none; }
  .pdpx-thumb { flex: 0 0 68px; }
  .pdpx-main { order: 1; border-radius: 16px; }
  .pdpx-title { font-size: clamp(30px, 8.4vw, 38px); }
  .pdpx-spec { font-size: 13.5px; letter-spacing: .1em; }
  .pdpx-howto-link { margin-left: 0; }
  .pdpx-benefits { grid-template-columns: 1fr; gap: 10px; }
  .pdpx-doses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdpx-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdpx-shipnow { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .pdpx-shipnow-r { justify-content: flex-start; }
  .pdpx-shipnow-arrow { display: none; }
  .pdpx-cta { font-size: 16px; padding: 18px 18px; letter-spacing: .03em; }
  .pdpx-guarantee { font-size: 12.5px; gap: 8px; }
}


/* ============================================================
   PDPX PASS 2 - SKU cycler arrow sizing on smaller screens
   ============================================================ */
@media (max-width: 1080px) {
  /* Centre the rating row and the How to use link under the stacked header. */
  .pdpx-rating-row { justify-content: center; }
  .pdpx-howto-link { margin-left: 0; flex: 0 0 100%; text-align: center; }
}
@media (max-width: 700px) {
  .pdpx-titlerow { gap: 4px; }
  .pdpx-skunav { padding: 11px; }
  .pdpx-skunav svg { width: 22px; height: 22px; }
  /* Trim the row just enough that stars, score and avatars hold one centred
     line on a phone. If a narrow screen still wraps, each line stays centred. */
  .pdpx-rating-row { gap: 8px; }
  .pdpx-stars { font-size: 16.8px; letter-spacing: .5px; }
  .pdpx-avatars img { width: 24px; height: 24px; margin-left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdpx-skunav, .pdpx-skunav:hover, .pdpx-skunav:active { transition: none; transform: none; }
}