/* ============================================================
   BRIGHTLY — Product page cohesion + redesign
   Design tokens: pill (9999px) buttons/chips, 4px panels/cards,
   solid dark primary #121212, gold accent #f5d17a, Hanken Grotesk
   Loaded only on the GLP-3 product page (after the vendor Amino Club
   CSS), so the .site-content rule below is effectively page-scoped.
   ============================================================ */

/* ---- 1. Trim dead whitespace above the research banner ----
   woocommerce.css sets `body.woocommerce-page .site-content` padding-top to
   clamp(28px,5vw,56px). Match that selector's specificity (this file loads
   after, so it wins) and cut the top gap. */
body.woocommerce-page .site-content { padding-top: 16px; }
.ac-product > main > section:first-of-type {      /* product section */
  padding-top: 14px;
  padding-bottom: 10px;
}

/* ---- 2. Radius standardization: panels/cards -> 4px ---- */
.ac-product [class*="rounded-[20px]"],
.ac-product [class*="rounded-[24px]"],
.ac-product [class*="rounded-3xl"],
.ac-product [class*="rounded-xl"] { border-radius: 4px; }

/* Research banner: soften to a muted warm gray (was near-black), and strip the
   alarm colors — the red "FOR RESEARCH PURPOSES ONLY" goes neutral and the
   ⚠️ emoji is desaturated to grayscale. */
.ac-product [class*="from-[#2a2a2a]"] {
  border-radius: 4px;
  background: #121212;
}
.ac-product [class*="from-[#2a2a2a]"] [class*="text-[#ff6b6b]"] {
  color: inherit;         /* drop the red */
  filter: grayscale(1);   /* desaturate the ⚠️ emoji */
}

/* ---- 3. Dosage "ovals" -> match the site's .catalog-chip proportions
   (pill radius, subtle grey bg, no hard white border, medium weight, ink-muted)
   instead of the chunky px-4 py-2 white boxes. ---- */
.ac-product button[class*="rounded-lg"] {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 15px; min-width: 0;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: rgba(18,18,18,0.04); color: var(--color-ink-muted);
  font-size: 0.875rem; font-weight: var(--fw-medium); letter-spacing: -0.01em;
}
.ac-product button[class*="rounded-lg"]:hover {
  background: rgba(18,18,18,0.08); color: var(--color-ink); border-color: transparent;
}

/* ---- 4. Primary CTA -> solid dark pill (like homepage) ---- */
.ac-product button[class*="bg-[#e8e8e8]"] {
  background-color: #121212;
  color: #fff;
  border-color: #121212;
  font-weight: 400;
}
.ac-product button[class*="bg-[#e8e8e8]"]:hover { background-color: #000; }

/* ---- H1 -> lighter weight to match homepage ---- */
.ac-product h1.font-bold {
  font-weight: 300;
  letter-spacing: -0.03em;
}

/* ---- 5. Image action buttons (favorite + share) ---- */
.brightly-imgactions {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
}
.brightly-iconbtn {
  width: 40px; height: 40px; border-radius: 9999px;
  background: #fff; border: 1px solid #ececec;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a1714; cursor: pointer;
  box-shadow: 0 1px 3px rgba(19,19,21,.10);
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
}
.brightly-iconbtn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(19,19,21,.16); }
.brightly-iconbtn.is-active { color: #e0245e; border-color: #f6c6d4; }

/* ---- Amazon-style price (superscript $ + cents) ---- */
.brightly-price {
  font-family: "Hanken Grotesk", Inter, "Helvetica Neue", Arial, sans-serif;
  display: inline-flex; align-items: flex-start; line-height: 1;
  color: #121212; letter-spacing: -0.01em; white-space: nowrap;
}
.brightly-price .bp-cur   { font-size: .5em; font-weight: 600; margin-top: .18em; margin-right: .05em; }
.brightly-price .bp-int   { font-size: 1em;  font-weight: 700; line-height: .9; }
.brightly-price .bp-cents { font-size: .5em; font-weight: 600; margin-top: .18em; margin-left: .04em; }
.brightly-price-wrap-main .brightly-price { font-size: 34px; }

/* ---- 6. Shipping strip (replaces the old pill) ---- */
.brightly-ship {
  display: flex; align-items: center; gap: 12px;
  margin-top: 9px; padding: 8px 4px 8px 0;
  border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;
  font-family: "Hanken Grotesk", Inter, sans-serif;
}
.brightly-ship__dot {
  width: 8px; height: 8px; border-radius: 9999px; flex: none;
  background: #1fae54; box-shadow: 0 0 0 4px rgba(31,174,84,.15);
}
.brightly-ship__main { font-size: 14px; font-weight: 600; color: #1a1714; letter-spacing: -0.01em; }
.brightly-ship__main b { color: #1fae54; font-weight: 700; }
.brightly-ship__sub  { font-size: 12px; color: #8a8580; margin-top: 1px; }

/* ---- 7. Subscribe & Save card (money-mover) ---- */
.brightly-sub {
  position: relative; overflow: hidden;
  margin-top: 9px; padding: 11px 16px; border-radius: 4px;
  background: linear-gradient(135deg, #151210 0%, #2a241f 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; border: none; width: 100%; text-align: left;
  font-family: "Hanken Grotesk", Inter, sans-serif;
  transition: transform .15s ease, box-shadow .15s ease;
}
.brightly-sub:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(21,18,16,.28); }
.brightly-sub__left  { display: flex; flex-direction: column; gap: 2px; }
.brightly-sub__tag   { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #f5d17a; }
.brightly-sub__price { display: flex; align-items: baseline; gap: 8px; }
.brightly-sub__price .brightly-price { font-size: 26px; color: #fff; }
.brightly-sub__price .brightly-price .bp-cur,
.brightly-sub__price .brightly-price .bp-cents { color: #fff; }
.brightly-sub__price s  { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.45); }
.brightly-sub__price em { font-size: 12px; font-weight: 500; font-style: normal; color: rgba(255,255,255,.55); }
.brightly-sub__sub { font-size: 12px; color: rgba(255,255,255,.6); }
.brightly-sub__cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #151210; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 9999px; white-space: nowrap;
}
.brightly-sub:hover .brightly-sub__cta { background: #f5d17a; }

/* ---- 8. Buy box — radio plan selector (one-time vs subscribe) + single CTA ----
   Amazon-style "reduce the barrier to subscribe": subscribe is a peer option,
   not a separate button. One-time is the honest default; subscribe emphasized. */
.brightly-buybox { display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  font-family: "Hanken Grotesk", Inter, sans-serif; }
.brightly-plan {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 13px 15px; border: 1px solid #e2e2e2; border-radius: 4px; background: #fff;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.brightly-plan:hover { border-color: #b8b8b8; }
.brightly-plan.is-selected { border-color: #121212; box-shadow: inset 0 0 0 1px #121212; }
.brightly-plan--sub.is-selected { background: #fbfaf8; }
.brightly-plan__radio {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 9999px;
  border: 2px solid #cfcfcf; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease;
}
.brightly-plan.is-selected .brightly-plan__radio { border-color: #121212; }
.brightly-plan__radio::after { content: ""; width: 10px; height: 10px; border-radius: 9999px;
  background: #121212; transform: scale(0); transition: transform .15s ease; }
.brightly-plan.is-selected .brightly-plan__radio::after { transform: scale(1); }
.brightly-plan__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.brightly-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.brightly-plan__name { font-size: 15px; font-weight: 700; color: #1a1714; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px; }
.brightly-plan__tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #7a5a12; background: #f5d17a; padding: 2px 7px; border-radius: 9999px; }
/* Price on the plan card (injected by the buy controller) */
.brightly-plan__price { margin-left: auto; white-space: nowrap; font-size: 15px; font-weight: 600; color: #111; }
/* Subscribe benefit line — single line with a larger floating dot */
.brightly-plan__benefits { display: inline-flex; font-size: 12px; color: #6a655e; font-weight: 500; }
.brightly-plan__line { display: inline-flex; align-items: center; gap: 7px; }
.brightly-plan__dot { font-size: 1.35em; line-height: 0; opacity: .85; position: relative; top: .06em; }
.brightly-plan__note { font-size: 12px; color: #8a8580; }
.brightly-buybox__cta {
  margin-top: 3px; width: 100%; height: 52px; border: none; border-radius: 9999px;
  background: #121212; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .15s ease;
}
.brightly-buybox__cta:hover { background: #000; }

/* ---- 9. Hide the redundant top "From $69.99" — the plan cards show price ---- */
.brightly-price-wrap-main { display: none; }

/* ---- 10. Image caption (purity chip + research note), inside the image panel ---- */
.brightly-imgcaption {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: "Hanken Grotesk", Inter, sans-serif; pointer-events: none;
}
.brightly-imgcaption .bic-chip {
  font-size: 11px; font-weight: 600; color: #4a463f;
  background: #fff; border: 1px solid #e8e8e8;
  padding: 3px 10px; border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(19,19,21,.05);
}
.brightly-imgcaption .bic-note {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #b3ada4; font-weight: 600;
}

/* ---- 11. Delivery / protection box: tidy padding ---- */
.ac-product [class*="grid-cols-3"][class*="bg-[#f8f8f8]"] {
  padding: 14px 16px; gap: 10px; align-items: start;
}
/* Delivery/protection icons: green -> steel blue, so green stays reserved for the
   "In stock" status cue (one restrained green). */
.ac-product [class*="grid-cols-3"][class*="bg-[#f8f8f8]"] .text-green-600 { color: #3A6B8A; }

/* ---- 12. "We accept" payment row: slightly smaller icons ---- */
.ac-product .flex.items-center.gap-3.mt-3 img[class*="h-6"] { height: 18px; }
.ac-product .flex.items-center.gap-3.mt-3 img[class*="h-5"] { height: 15px; }

/* ---- 13. Buy-box action slot: Add to cart (outline) + Buy/Subscribe (dark).
   Fixed-height slot outside the plan cards so nothing shifts when toggling. */
.brightly-slot { margin-top: 10px; font-family: "Hanken Grotesk", Inter, sans-serif; }
.brightly-slot__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brightly-slot button {
  height: 46px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.brightly-slot .bar-cart { background: #fff; color: #121212; border: 1px solid #121212; }
.brightly-slot .bar-cart:hover { background: #f5f5f5; }
.brightly-slot .bar-checkout {
  background: #121212; color: #fff; border: 1px solid #121212;
  display: inline-flex; align-items: center; justify-content: center;
}
.brightly-slot .bar-checkout:hover { background: #000; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(19,19,21,.22); }
.brightly-slot .bar-label { display: inline-block; transition: opacity .12s ease; }
/* Mobile: stack so the two buttons don't cramp */
@media (max-width: 480px) { .brightly-slot__row { grid-template-columns: 1fr; } }

/* ---- 14. Savings summary bar (after H1). PLACEHOLDER figures — bind to the
   selected quantity/pack tier (Total / Your price / Vials / You save / %). ---- */
.brightly-savingsbar{
  display:flex; align-items:center;
  background:#faf9f7; border:1px solid rgba(18,18,18,.08);
  border-radius:4px; padding:10px 4px; margin:10px 0;
  font-family:"Hanken Grotesk",Inter,"Helvetica Neue",Arial,sans-serif;
}
.brightly-savingsbar .bsb-col{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:0 10px; position:relative; text-align:center;
}
.brightly-savingsbar .bsb-col:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:26px; width:1px; background:rgba(18,18,18,.10);
}
.brightly-savingsbar .bsb-k{
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(26,23,20,.55); font-weight:500; white-space:nowrap;
}
.brightly-savingsbar .bsb-v{ font-size:15px; font-weight:600; color:rgb(26,23,20); line-height:1.1; }
.brightly-savingsbar .bsb-strike{ text-decoration:line-through; color:rgba(26,23,20,.4); font-weight:500; }
.brightly-savingsbar .bsb-save{ display:inline-flex; align-items:center; gap:6px; }
.brightly-savingsbar .bsb-badge{
  display:inline-block; background:#f5d17a; color:#7a5a12;   /* Brightly gold */
  font-size:10px; font-weight:700; letter-spacing:.03em;
  padding:2px 7px; border-radius:9999px; line-height:1.3; white-space:nowrap;
}
/* Responsive: 2x2 on narrow screens so the 4 columns don't cram/overflow. */
@media (max-width:560px){
  .brightly-savingsbar{ flex-wrap:wrap; padding:6px 2px; }
  .brightly-savingsbar .bsb-col{ flex:0 0 50%; padding:7px 8px; }
  .brightly-savingsbar .bsb-col:not(:last-child)::after{ display:none; }
  .brightly-savingsbar .bsb-v{ font-size:14px; }
}

/* ---- 15. Upgrade nudge — plain text (no box, no icon). Hides at top tier. ---- */
.bt-nudge{
  margin-top:10px; font-size:13px; line-height:1.4; font-weight:500; color:#6a655e;
  font-family:"Hanken Grotesk",Inter,"Helvetica Neue",Arial,sans-serif;
}
.bt-nudge strong{ font-weight:700; color:#213B5E; }

/* ---- 16. Layout: fix image stretch + compress right column ---- */
.ac-product .grid.grid-cols-1.lg\:grid-cols-2{ align-items:start; }
.ac-product .bg-\[\#f8f8f8\].border[class*="rounded"]{ border-radius:4px; }
/* Sticky + square image only on the 2-col desktop layout. On mobile (single
   column) it must stay in normal flow, or it pins to the top and the info card
   scrolls underneath it. */
@media (min-width:1024px){
  /* Sticky the whole left column (image + feature row) as one unit. */
  .ac-leftcol{ position:sticky; top:80px; align-self:start; }
  .ac-product .bg-\[\#f8f8f8\].border[class*="rounded"]{ aspect-ratio:1/1; max-height:560px; }
}

/* Feature row under the image (inside the left column cell). */
.brightly-features {
  margin-top: 16px; padding-top: 20px; border-top: 1px solid #e8e8e8;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  text-align: center; font-family: "Hanken Grotesk", sans-serif;
}
.brightly-features .bf-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brightly-features .bf-icon { width: 26px; height: 26px; color: #1d1d1f; }
.brightly-features .bf-label { font-size: 12px; line-height: 16px; color: #1d1d1f; }
.ac-product .flex.flex-col.bg-white.border{ border-radius:4px; }
.ac-product p.text-sm.text-\[\#666\]{ margin-bottom:12px; }               /* description */
.ac-product .hidden.lg\:flex.lg\:items-center.lg\:gap-6{ margin-bottom:8px; } /* dosage/qty row */
/* Dosage + Quantity merged onto one row — compact so both fit without wrapping:
   auto-width labels, tighter dosage pills, smaller stepper buttons. */
.ac-product .hidden.lg\:flex.lg\:items-center.lg\:gap-6 .w-20{ width:auto; margin-right:8px; }
.ac-product .hidden.lg\:flex.lg\:items-center.lg\:gap-6 .flex.gap-2 > button{ padding-left:11px; padding-right:11px; }
.ac-product .hidden.lg\:flex.lg\:items-center.lg\:gap-6 .w-9{ width:1.9rem; height:1.9rem; }
/* Drop the redundant "Quantity" word (the +/- stepper is self-evident) to reclaim the row. */
.ac-product .hidden.lg\:flex.lg\:items-center.lg\:gap-6 .flex-1 > div:nth-child(2) > span.w-20{ display:none; }
.brightly-buybox{ margin-top:8px; gap:8px; }
.brightly-ship{ margin-top:8px; }
.ac-product .flex.items-center.gap-3.mt-3{ margin-top:8px; }              /* payment icons row */

/* ---- 17. Amount group — quick-pick bundle BOXES + stepper. One control for
   quantity; the bulk discount auto-applies and the total lives on the CTA. ---- */
.brightly-group-label{ margin:16px 0 8px; font-size:14px; font-weight:600; color:#1a1714;
  font-family:"Hanken Grotesk",Inter,sans-serif; }
.brightly-group-label span{ font-weight:400; font-size:13px; color:#8a8580; letter-spacing:-0.01em; }
.brightly-packs{ margin:0; font-family:"Hanken Grotesk",Inter,sans-serif; }
.brightly-packs__grid{ display:flex; gap:8px; }
.brightly-packs__grid .brightly-pack{
  flex:1; height:88px; min-height:88px; max-height:88px; box-sizing:border-box; overflow:hidden;
  padding:8px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:1px solid transparent; border-radius:14px; background:#f5f5f7; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.brightly-packs__grid .brightly-pack:hover{ background:#ececee; }
/* selected = solid fill (matches Buy now) */
.brightly-packs__grid .brightly-pack.is-selected{ background:#111; border-color:#111; }
.brightly-pack__qty{ font-weight:600; font-size:16px; color:#1a1714; }
.brightly-pack__unit{ font-size:11px; color:#8a8a8e; }
/* savings + per-vial hidden by default; revealed only on the selected box */
.brightly-pack__save, .brightly-pack__per{ display:none; }
.brightly-pack.is-selected .brightly-pack__qty{ color:#fff; }
.brightly-pack.is-selected .brightly-pack__unit{ color:#c7c7cc; }
.brightly-pack.is-selected .brightly-pack__save{ display:block; color:#c7c7cc; font-weight:600; font-size:10.5px; letter-spacing:.1px; }
.brightly-pack.is-selected .brightly-pack__per{ display:block; color:#fff; font-size:11px; font-weight:500; margin-top:1px; }
/* Mobile: horizontal scroll so the selected box's per-vial price stays readable */
@media (max-width:560px){
  .brightly-packs__grid{ overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .brightly-packs__grid::-webkit-scrollbar{ display:none; }
  .brightly-packs__grid .brightly-pack{ flex:0 0 78px; }
}
/* CTA running total */
.brightly-slot .bar-total{ font-weight:400; opacity:.85; }
/* Old quantity steppers -> replaced by the pack selector (desktop + mobile) */
.ac-product .hidden.lg\:flex.lg\:items-center.lg\:gap-6 .flex-1 > div:nth-child(2){ display:none; }
.ac-product .lg\:hidden > div:nth-child(2){ display:none; }