/* ==========================================================================
   VANGUARD DARK SYSTEM
   Appended last so it wins on specificity. Contains:
     1. Fixes for light surfaces the automated conversion could not reach
     2. Age gate (21+) restyled dark, behaviour untouched
     3. Hero moving banner
     4. Trust bar
     5. Featured carousel (3-up + arrows)
     6. Build Your Stack (blue)
     7. Why Vanguard (2 column, shimmer dividers)
     8. FAQ
     9. WooCommerce (cart / checkout / COA) dark pass
   ========================================================================== */

/* ---------------------------------------------- 1. leftover light surfaces */
.product-card-placeholder {
  background: radial-gradient(60% 60% at 50% 40%, rgba(77,157,255,.12), transparent 70%), #05070d !important;
}
.product-card-placeholder div { border-color: rgba(255,255,255,.14) !important; }

.section-heading h2,
.reviews-heading,
.coa-band-inner h2 {
  color: var(--text);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.section-heading p,
.reviews-sub,
.coa-band-sub { color: var(--text-muted); }

.site-header {
  background: rgba(7,10,18,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-footer { background: var(--bg-raised); border-top: 1px solid var(--border); }

/* inputs need to be readable on dark */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="url"], input[type="search"], input[type="number"], select, textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

/* ------------------------------------------------------- 2. age gate (21+) */
.age-gate { background: var(--bg); }
.age-gate-inner { position: relative; }
.age-gate-brand {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: .02em;
}
.age-gate-brand-sub { color: var(--blue); font-family: var(--font-mono); letter-spacing: .3em; }
.age-gate-eyebrow { color: var(--blue); font-family: var(--font-mono); letter-spacing: .18em; }
.age-gate-title { font-family: var(--font-display); color: var(--text); text-transform: uppercase; }
.age-gate-sub { color: var(--text-muted); }
.age-gate-enter {
  background: var(--blue);
  color: var(--on-blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-btn);
  font-weight: 700;
}
.age-gate-enter:hover { background: var(--blue-light); border-color: var(--blue-light); }
.age-gate-exit {
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
}
.age-gate-exit:hover { color: var(--text); border-color: var(--blue); }
.age-gate-disclaimer { color: var(--text-dim); }
.age-gate-disclaimer a { color: var(--blue-light); }

/* --------------------------------------------------- 3. hero moving banner */
.vg-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.vg-hero__field {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(77,157,255,.16), transparent 60%),
    radial-gradient(45% 60% at 85% 70%, rgba(77,157,255,.10), transparent 65%),
    var(--bg);
}
.vg-hero__grid {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 30% 40%, #000 20%, transparent 75%);
}
.vg-hero__orb {
  position: absolute; z-index: 0; width: 560px; height: 560px;
  right: -160px; top: 50%; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(77,157,255,.5), rgba(77,157,255,.05) 60%, transparent 70%);
  filter: blur(10px);
  animation: vgHeroPulse 7s ease-in-out infinite;
}
@keyframes vgHeroPulse {
  0%, 100% { opacity: .55; transform: translateY(-50%) scale(1); }
  50%      { opacity: .85; transform: translateY(-50%) scale(1.06); }
}
.vg-hero__slides {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max-width); margin: 0 auto; padding: 0 40px;
}
.vg-hero__slide { display: none; padding: 80px 0 60px; }
.vg-hero__slide.is-active { display: block; animation: vgHeroFade .6s cubic-bezier(.4,0,.2,1); }
@keyframes vgHeroFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.vg-hero__slide-inner { max-width: 720px; }
.vg-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.vg-hero__eyebrow-white { color: var(--text); }
.vg-hero__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08;
  margin: 0 0 22px; letter-spacing: .005em; color: var(--text);
}
.vg-hero__title em { font-style: normal; color: var(--blue-light); }
.vg-hero__desc {
  color: var(--text-muted); font-size: 17px; line-height: 1.65;
  max-width: 520px; margin-bottom: 34px;
}
.vg-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; align-items: center; }
.vg-hero__flags { display: flex; gap: 22px; flex-wrap: wrap; }
.vg-hero__flags span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--text-dim); text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.vg-hero__flags span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

@media (max-width: 780px) {
  .vg-hero { min-height: auto; }
  .vg-hero__slide { padding: 64px 0 100px; }
  .vg-hero__slides { padding: 0 20px; }

  /* Shop Now + View COAs side by side, Text Us centered on its own
     row below (spans both columns, centered rather than stretched). */
  .vg-hero__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .vg-hero__cta .btn-primary { grid-column: 1; }
  .vg-hero__cta .btn-secondary { grid-column: 2; }
  .vg-hero__cta .btn-text-us {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* ------------------------------------------------------------ 4. trust bar */
.vg-trust { border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.vg-trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-width); margin: 0 auto;
}
.vg-trust__item {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 30px; border-left: 1px solid var(--border);
}
.vg-trust__item:first-child { border-left: none; }
.vg-trust__icon { color: var(--blue-light); flex-shrink: 0; }
.vg-trust__title {
  font-weight: 700; font-size: 14px; text-transform: uppercase;
  letter-spacing: .02em; color: var(--text);
}
.vg-trust__desc { font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 780px) {
  .vg-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .vg-trust__item { border-left: none; border-top: 1px solid var(--border); padding: 20px; }
}

/* -------------------------------------------- 5. featured carousel (3-up) */
.vg-carousel-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 34px;
}

/* No arrow buttons — the track is a native horizontal scroller you move
   with a swipe/drag, same as the reference site. overflow-x:auto (not
   hidden) is what actually lets a finger/trackpad move it; hidden was
   blocking touch scroll entirely and only the old JS arrows could move
   the track, which is why cards looked like they scrolled "into
   oblivion" with no way to bring them back on mobile. */
.products-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.products-track::-webkit-scrollbar { display: none; height: 0; }
.products-track .product-card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .25s var(--transition), transform .25s var(--transition);
}
.products-track .product-card:hover {
  border-color: var(--blue-dim-2);
  transform: translateY(-4px);
}
.vg-shop-all-cta { text-align: center; margin-top: 44px; }

/* Mobile: a proper 2-across grid like the reference "Bestsellers" section
   — no partial-width peek cards, no single-column stack, all 4 peptides
   sit in their container and you scroll the page normally to see them. */
@media (max-width: 960px) and (min-width: 641px) {
  .products-track .product-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .products-track {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .products-track .product-card { flex: 0 0 calc((100% - 14px) / 2); }
}

/* ------------------------------------------------- 6. build your stack (blue) */
.favorites-editorial {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(70% 100% at 15% 20%, rgba(77,157,255,.22), transparent 55%),
    radial-gradient(60% 80% at 90% 90%, rgba(77,157,255,.14), transparent 60%),
    var(--bg-raised);
  border: 1px solid var(--border);
}
.favorites-deco-text { color: rgba(255,255,255,.04); font-family: var(--font-display); }
.favorites-overlay h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text);
}
.favorites-overlay h3::after { content: '.'; color: var(--blue-light); }
.favorites-overlay p { color: var(--text-muted); }

/* -------------------------------------------------------- 7. why vanguard */
.vg-why--centered {
  max-width: var(--max-width); margin: 0 auto; padding: 80px 32px;
  text-align: center;
}
.vg-why__head { max-width: 640px; margin: 0 auto 72px; }
.vg-why__head .vg-why__sub { margin: 0 auto; }

.vg-why__path {
  position: relative;
  display: flex; justify-content: center; gap: 0;
}
/* the connecting straight line running behind every step's number node */
.vg-why__path::before {
  content: '';
  position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px;
  background:
    linear-gradient(90deg, transparent, transparent 42%, var(--blue-light) 50%, transparent 58%, transparent),
    linear-gradient(90deg, rgba(77,157,255,.32), rgba(77,157,255,.32));
  background-size: 220% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  background-repeat: no-repeat;
  animation: vgShimmer 5s linear infinite;
  z-index: 0;
}
.vg-why__step {
  position: relative; z-index: 1;
  flex: 1; max-width: 260px; padding: 0 16px;
}
.vg-why__step-num {
  width: 44px; height: 44px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--blue-dim-2);
  font-family: var(--font-mono); font-size: 13px; color: var(--blue-light);
}
.vg-why__step h4 {
  font-family: var(--font-display); font-size: 17px; text-transform: uppercase;
  margin: 0 0 8px; letter-spacing: .01em; color: var(--text);
}
.vg-why__step p { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

@keyframes vgShimmer {
  0%   { background-position: 220% 0, 0 0; }
  100% { background-position: -100% 0, 0 0; }
}

@media (max-width: 900px) {
  .vg-why--centered { padding: 70px 20px; }
  .vg-why__path { flex-direction: column; gap: 40px; align-items: center; }
  .vg-why__path::before { display: none; }
  .vg-why__step { max-width: 320px; }
}

/* ----------------------------------------------------------------- 8. FAQ */
.vg-faq {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px;
  max-width: var(--max-width); margin: 0 auto; padding: 0 32px 80px;
}
.vg-faq__left { position: sticky; top: 110px; align-self: start; }
.vg-faq__left h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.1; margin: 0; color: var(--text);
}
.vg-faq__item { border-bottom: 1px solid var(--border); }
.vg-faq__item:first-child { border-top: 1px solid var(--border); }
.vg-faq__item.is-open { border-bottom-color: var(--border-strong); }
.vg-faq__q {
  width: 100%; background: none; border: none; color: var(--text); text-align: left;
  display: flex; align-items: center; gap: 18px; padding: 26px 4px; cursor: pointer;
}
.vg-faq__q-text {
  flex: 1; font-family: var(--font-display); font-size: 20px;
  font-weight: 500; letter-spacing: .01em; text-transform: uppercase;
}
.vg-faq__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--blue-light); border: 1px solid var(--blue-dim-2);
  background: var(--blue-dim); padding: 5px 10px; border-radius: 4px;
  white-space: nowrap; text-transform: uppercase;
}
.vg-faq__icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.vg-faq__icon::before, .vg-faq__icon::after {
  content: ''; position: absolute; background: var(--text-muted);
  transition: transform .3s, background .3s;
}
.vg-faq__icon::before { width: 14px; height: 2px; top: 9px; left: 3px; }
.vg-faq__icon::after  { width: 2px; height: 14px; top: 3px; left: 9px; }
.vg-faq__item.is-open .vg-faq__icon::after  { transform: rotate(90deg); opacity: 0; }
.vg-faq__item.is-open .vg-faq__icon::before { background: var(--blue-light); }
.vg-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.vg-faq__a-inner {
  padding: 0 4px 26px; color: var(--text-muted);
  font-size: 15px; line-height: 1.7; max-width: 560px;
}
.vg-faq__item.is-open .vg-faq__a { max-height: 260px; }
@media (max-width: 900px) {
  .vg-faq { grid-template-columns: 1fr; gap: 30px; padding: 0 20px 70px; }
  .vg-faq__left { position: static; }
}

/* -------------------------------- 9. WooCommerce: cart / checkout / COA dark */
.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-cart table.cart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--border); color: var(--text); }
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--bg-raised) !important;
  color: var(--text-muted);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg-raised) !important; }
.woocommerce-info, .woocommerce-message {
  background: var(--bg-card);
  border-top: 3px solid var(--blue);
  color: var(--text);
}
.woocommerce-error {
  background: var(--bg-card);
  border-top: 3px solid var(--new-red);
  color: var(--text);
}
.select2-container--default .select2-selection--single,
.select2-dropdown {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--blue) !important; color: var(--on-blue) !important; }

/* COA cards */
.vg-coa-card, .coa-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vg-hero__orb, .vg-why__path::before { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   10. Section headings used by Why Vanguard / FAQ left columns
   ========================================================================== */
.vg-why__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  color: var(--text);
  margin: 14px 0 18px;
}
.vg-why__sub {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}
.vg-faq__list { display: block; }

/* ==========================================================================
   11. Rounded buttons — every button on the site becomes a pill
   ========================================================================== */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-white,
.btn-text-us,
.coa-band-btn,
.email-btn,
.product-card-add-btn,
.product-card-view-btn,
.vgc-card-add-btn,
.vgc-card-btn,
.vsp-atc-btn,
.vsp-sticky-btn,
.age-gate-enter,
.age-gate-exit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-element-button,
button.single_add_to_cart_button,
#place_order {
  border-radius: var(--radius-btn) !important;
}

/* qty steppers + size chips stay soft-cornered rather than full pills */
.vsp-qty-btn,
.vg-size-btn {
  border-radius: 14px !important;
}

/* primary action = blue pill with dark text */
.btn-primary,
.coa-band-btn,
.product-card-add-btn,
.vsp-atc-btn,
.wc-block-components-button,
.woocommerce button.button.alt,
#place_order {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--on-blue) !important;
  font-weight: 700;
}
.btn-primary:hover,
.coa-band-btn:hover,
.product-card-add-btn:hover,
.vsp-atc-btn:hover,
.wc-block-components-button:hover,
.woocommerce button.button.alt:hover,
#place_order:hover {
  background: var(--blue-light) !important;
  border-color: var(--blue-light) !important;
  color: var(--on-blue) !important;
}

/* outline = transparent with a hairline border */
.btn-outline,
.product-card-view-btn {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
}
.btn-outline:hover,
.product-card-view-btn:hover {
  border-color: var(--blue) !important;
  color: var(--blue-light) !important;
}

/* secondary (View COAs, Shop All Peptides) = solid white pill */
.btn-secondary {
  background: var(--text) !important;
  border: 1px solid var(--text) !important;
  color: var(--bg) !important;
  font-weight: 700;
}
.btn-secondary:hover {
  background: var(--blue-light) !important;
  border-color: var(--blue-light) !important;
  color: var(--on-blue) !important;
}

/* ==========================================================================
   12. Elementor page content (Privacy, Terms, Shipping, Contact, etc.)
   Elementor widgets set their own font-family per-widget with high
   specificity, which is why pages built in it can drift from the theme's
   Oswald/Inter system even after style.css changes. This forces every
   Elementor text widget back onto the theme's type system and dark colors.
   ========================================================================== */
.elementor,
.elementor-widget-container,
.elementor-text-editor,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-element {
  font-family: var(--font-body) !important;
  color: var(--text) !important;
}
.elementor-heading-title,
.elementor h1, .elementor h2, .elementor h3,
.elementor h4, .elementor h5, .elementor h6 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  text-transform: uppercase;
}
.elementor-widget-text-editor p,
.elementor-text-editor p,
.elementor-widget-container p {
  font-family: var(--font-body) !important;
  color: var(--text-muted) !important;
  line-height: 1.7;
}
.elementor-widget-container a:not(.elementor-button):not(.btn-primary):not(.btn-secondary) {
  color: var(--blue-light) !important;
}
.elementor-widget-container ul li,
.elementor-widget-container ol li {
  color: var(--text-muted) !important;
}
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
  background-color: transparent !important;
}
/* form fields inside Elementor forms (e.g. Contact page) */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-btn) !important;
}
.elementor-field-group label { color: var(--text-muted) !important; }

/* ==========================================================================
   13. Cart drawer — slides in from the right, wraps WooCommerce's own
   mini-cart template (woocommerce_mini_cart()) so item data, quantity
   updates, and remove links are all real WC behavior, not reimplemented.
   ========================================================================== */
.vg-drawer-overlay {
  position: fixed; inset: 0; z-index: 998;
  background: transparent;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.vg-drawer-overlay.is-visible { opacity: 1; pointer-events: auto; }
body.vg-drawer-lock, body.vg-dosage-lock { overflow: hidden; }

.vg-cart-drawer {
  position: fixed; top: 0; right: 0;
  /* 100dvh, not 100%: on iOS Safari the URL bar is counted in the viewport
     height, so a 100%-tall drawer runs UNDER the browser chrome and takes the
     Checkout button with it. dvh tracks the visible viewport. */
  height: 100vh;
  height: 100dvh;
  width: min(420px, 100vw);
  background: var(--bg-raised, var(--white));
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: 1000;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
}
.vg-cart-drawer.is-open { transform: translateX(0); }

.vg-cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.vg-cart-drawer__head h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 18px; margin: 0; color: var(--text);
}
.vg-cart-drawer__close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; }
.vg-cart-drawer__close:hover { color: var(--text); }
/* Only the body scrolls; head stays put. min-height:0 is required or the flex
   child refuses to shrink and the list overflows the drawer instead of
   scrolling inside it. */
.vg-cart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
}

/* --- Mini-cart rows (see woocommerce/cart/mini-cart.php) ------------------
   The old rules here tried to lay out WooCommerce's stock markup with
   `a:has(img)` on the assumption that the thumbnail and the product name were
   two separate anchors. They are not — Woo puts the <img> AND the name text in
   the SAME <a>, so clamping it to 60x60 pushed every product name out of its
   box and on top of the row beneath it. That's what made the drawer unreadable
   on mobile. The template now emits explicit .vg-mc-* elements, so this is a
   plain, predictable flex row that cannot overlap. -------------------------- */
.vg-mc-list {
  list-style: none; margin: 0; padding: 0;
}

.vg-mc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.vg-mc-item:first-child { padding-top: 0; }

.vg-mc-thumb {
  flex: 0 0 60px;
  width: 60px;
}
.vg-mc-thumb a { display: block; line-height: 0; }
.vg-mc-thumb img {
  display: block;
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

/* min-width:0 is what actually lets a long product name wrap instead of
   forcing the flex row wider than the drawer and shoving the price offscreen. */
.vg-mc-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vg-mc-name {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
.vg-mc-name:hover { color: var(--blue-light) !important; }

.vg-mc-meta {
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  line-height: 1.4;
}
.vg-mc-meta p { margin: 0; }
.vg-mc-meta dl, .vg-mc-meta dt, .vg-mc-meta dd { display: inline; margin: 0; padding: 0; }
.vg-mc-meta dd::after { content: ''; }

.vg-mc-qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.vg-mc-qty-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  /* 34px, not the 24px this used to be: below ~30px these are genuinely hard
     to hit with a thumb, which is half of why the drawer felt broken on a
     phone even when it rendered. */
  width: 34px; height: 34px;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.vg-mc-qty-btn:hover { color: var(--text); background: var(--bg-card); }
.vg-mc-qty-val {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.vg-mc-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.vg-mc-price {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--blue-light);
  white-space: nowrap;
}
.vg-mc-price * { display: inline !important; white-space: nowrap; }
.vg-mc-price del { color: var(--text-dim); }
.vg-mc-price ins { color: var(--blue-light); text-decoration: none; }

.vg-mc-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color .15s ease, background .15s ease;
}
.vg-mc-remove:hover { color: var(--new-red, #ff5c5c); background: rgba(255,92,92,.1); }

/* Dim + lock the drawer while a quantity change is in flight, so a double-tap
   can't fire two conflicting updates at the same cart line. */
.vg-cart-drawer.is-busy .vg-mc-list,
.vg-cart-drawer.is-busy .vg-mc-foot { opacity: .55; pointer-events: none; }

/* --- Mini-cart footer --- */
.vg-mc-foot {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}
.vg-mc-total {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
}
.vg-mc-total-val, .vg-mc-total .amount { color: var(--blue-light); }

.vg-mc-buttons { margin: 0; }
.vg-mc-checkout {
  display: block; width: 100%;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius-btn, 999px);
  background: var(--blue);
  color: var(--on-blue, #020409) !important;
  border: 1px solid var(--blue);
  font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .03em;
  text-decoration: none !important;
  transition: background .2s ease;
}
.vg-mc-checkout:hover { background: var(--blue-light); border-color: var(--blue-light); }

.vg-mc-continue {
  display: block; width: 100%;
  margin-top: 10px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
}
.vg-mc-continue:hover { color: var(--text); }

.vg-mc-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--text-muted);
  font-size: 14px;
}
.vg-mc-empty p { margin: 0 0 20px; }

/* free-shipping progress bar (vanguard_cart_shipping_bar output) */
.vg-shipping-bar { margin-bottom: 18px; }
.vg-shipping-msg {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 13px; color: var(--text-muted);
}
.vg-shipping-msg strong { color: var(--blue-light); }
.vg-shipping-msg.unlocked { color: #6fd88a; }
.vg-shipping-msg svg { flex-shrink: 0; color: inherit; }
.vg-shipping-track {
  height: 6px; background: var(--bg-card); border-radius: 99px; overflow: hidden;
}
.vg-shipping-fill {
  height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: width .4s ease;
}
.vg-shipping-milestones {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); text-transform: uppercase;
}

@media (max-width: 900px) {
  /* Was 80vw — that left the drawer too narrow for a thumbnail + name + qty
     stepper + price to sit on one line, which is what forced the name to wrap
     underneath and collide with the next row. Near-full-width on a phone. */
  .vg-cart-drawer { width: min(420px, 100vw); }
}
@media (max-width: 600px) {
  .vg-cart-drawer { width: 100vw; border-left: none; }
  .vg-cart-drawer__head { padding: 18px 16px; }
  .vg-cart-drawer__body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .vg-mc-thumb, .vg-mc-thumb img { width: 52px; }
  .vg-mc-thumb { flex-basis: 52px; }
  .vg-mc-thumb img { height: 52px; }
  .vg-mc-item { gap: 10px; }
  .vg-mc-name { font-size: 13.5px; }
}

/* ==========================================================================
   14. Inline dosage picker — replaces a product card's own image area
   with a "Select Size" panel (stacked options) instead of a separate
   modal. Requires .product-card-image / .vgc-card-img to be
   position:relative (see product-card-image / vgc-card-img rules).
   ========================================================================== */
.product-card-image, .vgc-card-img { position: relative; overflow: hidden; }



/* Dosage picker sheet — rendered at <body> level (see vgOpenInlineDosage in
   main.js). It used to be injected into the card's image box, which is inside
   an <a> with overflow:hidden and a fixed aspect ratio; the Add to Cart button
   is the panel's last child, so on any card shorter than the panel — i.e. every
   card on a phone — it was clipped off entirely. Hoisting the picture to <body>
   means no ancestor can clip it and the button is always reachable. */
.vg-dosage-sheet {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.vg-dosage-sheet.is-open { opacity: 1; pointer-events: auto; }

.vg-dosage-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 4, 9, .72);
  backdrop-filter: blur(2px);
}

.vg-dosage-sheet__panel {
  position: relative;
  z-index: 1;
  width: min(400px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--bg-raised, #0b0f1c);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 20px;
  transform: translateY(12px) scale(.98);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.vg-dosage-sheet.is-open .vg-dosage-sheet__panel { transform: translateY(0) scale(1); }

.vg-dosage-sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.vg-dosage-sheet__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vg-dosage-sheet__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}
.vg-dosage-sheet__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 17px; font-weight: 700; color: var(--text);
  line-height: 1.2; overflow-wrap: anywhere;
}
.vg-dosage-sheet__close {
  flex-shrink: 0;
  background: none; border: none; color: var(--text-muted);
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.vg-dosage-sheet__close:hover { color: var(--text); background: var(--bg-card); }

/* The options list is the only part allowed to scroll. The footer holding Add
   to Cart is flex-shrink:0 and lives outside it, so it stays pinned and visible
   no matter how many dosages a product has. */
.vg-dosage-sheet__opts {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}
.vg-dosage-sheet__opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  background: var(--bg-card, #0d1220);
  border: 1px solid var(--border-strong);
  color: var(--text) !important;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.vg-dosage-sheet__opt:hover:not(.is-disabled) { border-color: var(--blue); }
.vg-dosage-sheet__opt b {
  font-size: 14px; font-weight: 700; color: var(--text) !important;
}
.vg-dosage-sheet__opt-price {
  font-size: 13px; color: var(--text-dim) !important;
  font-family: var(--font-mono); white-space: nowrap;
}
.vg-dosage-sheet__opt-price * { display: inline !important; white-space: nowrap; }
.vg-dosage-sheet__opt.is-selected {
  border-color: var(--blue);
  background: var(--blue-dim, rgba(80,130,255,.12));
  box-shadow: inset 0 0 0 1px var(--blue);
}
.vg-dosage-sheet__opt.is-selected .vg-dosage-sheet__opt-price { color: var(--blue-light); }
.vg-dosage-sheet__opt.is-disabled { opacity: .45; cursor: not-allowed; }
.vg-dosage-sheet__oos {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim);
}

.vg-dosage-sheet__foot { flex-shrink: 0; }
.vg-dosage-sheet__add {
  width: 100%;
  background: var(--blue);
  color: var(--on-blue, #020409);
  border: none;
  padding: 16px;
  border-radius: var(--radius-btn, 999px);
  font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .03em;
  cursor: pointer;
  transition: background .2s ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.vg-dosage-sheet__add span { font-family: var(--font-mono); font-weight: 400; }
.vg-dosage-sheet__add span * { display: inline !important; white-space: nowrap; }
.vg-dosage-sheet__add:hover:not(:disabled) { background: var(--blue-light); }
.vg-dosage-sheet__add:disabled { opacity: .5; cursor: not-allowed; }

/* On phones this becomes a bottom sheet — thumb-reachable, and the Add button
   sits above the home indicator rather than under it. */
@media (max-width: 600px) {
  .vg-dosage-sheet { align-items: flex-end; }
  .vg-dosage-sheet__panel {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .vg-dosage-sheet.is-open .vg-dosage-sheet__panel { transform: translateY(0); }
  .vg-dosage-sheet__opt { min-height: 58px; }
}

/* Cart drawer "Don't Forget" upsell card */
.vg-drawer-upsell {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 18px;
  border: 1px dashed var(--blue-dim-2, rgba(77,157,255,.28));
  background: var(--blue-dim, rgba(77,157,255,.14));
  border-radius: 14px;
}
.vg-drawer-upsell__img {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  background-color: var(--bg-card); background-size: cover; background-position: center;
}
.vg-drawer-upsell__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vg-drawer-upsell__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-light);
}
.vg-drawer-upsell__name { font-size: 13px; font-weight: 600; color: var(--text); }
.vg-drawer-upsell__price { font-size: 12px; color: var(--text-muted); }
.vg-drawer-upsell__add {
  flex-shrink: 0; background: var(--blue); color: var(--on-blue, #020409); border: none;
  font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-btn, 999px);
  cursor: pointer;
}
.vg-drawer-upsell__add:hover { background: var(--blue-light); }

/* ==========================================================================
   15. Custom affiliate application form ([vanguard_affiliate_apply])
   ========================================================================== */
.vg-affiliate-apply { max-width: 480px; }
.vg-affiliate-apply__form { display: flex; flex-direction: column; gap: 18px; }
.vg-form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vg-form-field { display: flex; flex-direction: column; gap: 7px; }
.vg-form-field label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text);
}
.vg-form-hint { margin: 0 0 2px; font-size: 12px; color: var(--text-muted); }
.vg-form-field input,
.vg-form-field select,
.vg-form-field textarea {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  padding: 12px 14px; border-radius: 10px; font-size: 14px; font-family: var(--font-body);
  width: 100%;
}
.vg-form-field input:focus,
.vg-form-field select:focus,
.vg-form-field textarea:focus {
  outline: none; border-color: var(--blue);
}
/* Browser autofill (Safari/Chrome) stamps its own white background on
   filled/visited fields via -webkit-autofill, ignoring our background
   color entirely — that's what was flipping fields back to white after
   typing. The inset box-shadow trick fakes the background since
   autofill can't override box-shadow, only background-color. */
.vg-form-field input:-webkit-autofill,
.vg-form-field input:-webkit-autofill:hover,
.vg-form-field input:-webkit-autofill:focus,
.vg-form-field input:-webkit-autofill:active,
.vg-form-field select:-webkit-autofill,
.vg-form-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
.vg-form-field textarea { resize: vertical; min-height: 90px; }
.vg-affiliate-apply__submit { align-self: flex-start; padding: 15px 34px; margin-top: 6px; }
.vg-affiliate-apply__error {
  background: rgba(255,111,87,.08); border: 1px solid rgba(255,111,87,.35);
  color: var(--new-red); padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 4px;
}
.vg-affiliate-apply__success h3 {
  font-family: var(--font-display); text-transform: uppercase; color: var(--text); margin: 0 0 10px;
}
.vg-affiliate-apply__success p { color: var(--text-muted); line-height: 1.6; }
@media (max-width: 480px) {
  .vg-form-row--split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. WooCommerce form fields site-wide (Checkout, My Account, lost
   password, order tracking). These were never themed at all — they were
   running on WooCommerce's own default light input styling with the
   theme's light body text on top, so every one of these fields was
   invisible while typing across the entire site, not just the affiliate
   page. Covers every standard WC form context in one place.
   ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="number"],
.woocommerce-page textarea,
.woocommerce-page select,
.select2-container .select2-selection--single {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus {
  background: var(--bg-card) !important;
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--blue-dim) !important;
}
/* select2 (WooCommerce's country/state dropdown) renders its own text
   node and dropdown panel outside the normal cascade — needs its own
   targeting or the selected-value text and the open dropdown list both
   stay on default light styling. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
  line-height: 44px !important;
}
.select2-container--default .select2-selection--single {
  height: 46px !important;
  padding: 0 14px !important;
}
.select2-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}
.select2-container--default .select2-results__option {
  color: var(--text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--blue) !important;
  color: var(--on-blue, #020409) !important;
}
.select2-search--dropdown .select2-search__field {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
/* Autofill (address/name/email suggestions are extremely common on
   checkout specifically) — same fix as the affiliate form, applied
   everywhere on WooCommerce pages. */
.woocommerce-page input:-webkit-autofill,
.woocommerce-page input:-webkit-autofill:hover,
.woocommerce-page input:-webkit-autofill:focus,
.woocommerce-page input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
}
.woocommerce-page ::placeholder { color: var(--text-dim) !important; opacity: 1; }

/* Affiliate "your code is live" block (auto-approved signups) */
.vg-affiliate-code {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: var(--bg-card, #0d1220);
  border: 1px dashed var(--blue);
  border-radius: 12px;
}
.vg-affiliate-code code {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 600;
  letter-spacing: .08em;
  color: var(--blue-light);
  background: none; padding: 0;
  overflow-wrap: anywhere;
}
.vg-affiliate-code__copy {
  flex: 0 0 auto;
  background: var(--blue); color: var(--on-blue, #020409);
  border: none; border-radius: 999px;
  padding: 9px 18px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer;
}
.vg-affiliate-code__copy:hover { background: var(--blue-light); }

/* ==========================================================================
   17. WooCommerce CHECKOUT BLOCK (Cart & Checkout blocks — the actual
   markup this theme uses). Everything in section 9/16 above targets the
   legacy shortcode markup (.woocommerce-checkout, .woocommerce-page …)
   which this site doesn't render — the real block markup (wc-block-*)
   was never touched, so every step card, the order-summary sidebar, the
   coupon panel, and the shipping/payment option rows were still on
   WooCommerce's default WHITE block styling. This section themes that
   markup dark to match the rest of the site.
   ========================================================================== */
.wc-block-checkout,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  background: transparent !important;
  color: var(--text) !important;
}

/* Step cards: Contact info / Shipping address / Shipping options / Payment */
.wc-block-components-checkout-step {
  background: var(--bg-card) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading {
  color: var(--text) !important;
}
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__container p {
  color: var(--text-muted) !important;
}
.wc-block-components-checkout-step::after { border-color: var(--border) !important; }
.wc-block-components-checkout-step-header,
.wc-block-components-checkout-step__heading-content { color: var(--text) !important; }

/* Order summary / totals sidebar */
.wc-block-checkout__sidebar,
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--bg-card) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
}
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-product-name,
.wc-block-components-totals-item__label {
  color: var(--text) !important;
}
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__individual-prices {
  color: var(--text-muted) !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wc-block-components-order-summary-item {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value { color: var(--text) !important; }
.wc-block-components-price-slider__range-text,
.wc-block-components-totals-coupon__content { color: var(--text) !important; }

/* Text inputs / address form (the visible <input> is already dark via
   the global input rules near the top of this file — this covers the
   wrapper divs and floating labels around them) */
.wc-block-components-text-input,
.wc-block-components-address-form,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2 {
  color: var(--text) !important;
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.wc-block-components-text-input label,
.wc-block-components-address-form label {
  color: var(--text-muted) !important;
  background: var(--bg-card) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-value label { color: var(--blue-light) !important; }
.wc-block-components-text-input::before,
.wc-block-components-text-input::after { border-color: var(--border) !important; }
.wc-block-components-text-input.is-active::after { border-color: var(--blue) !important; }

/* Dropdowns / combobox (state, country selectors) */
.wc-block-components-combobox,
.wc-block-components-dropdown-selector,
.components-form-token-field,
.components-base-control__field {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
.wc-block-components-combobox-control__button,
.components-form-token-field__input {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.components-form-token-field__suggestions-list,
.wc-blocks-components-select__container,
ul.components-form-token-field__suggestions-list {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Shipping options + Payment method rows (radio "cards" are white by default) */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-payment-method-content {
  background: var(--bg-raised) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.wc-block-components-radio-control__option-layout__description,
.wc-block-components-radio-control__secondary-label,
.wc-block-components-payment-method-label {
  color: var(--text) !important;
}
.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-components-radio-control-accordion-option.is-active {
  border-color: var(--blue) !important;
  background: var(--blue-dim) !important;
}

/* Coupon / gift-card accordion panel */
.wc-block-components-panel,
.wc-block-components-totals-coupon {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.wc-block-components-panel__button { color: var(--text) !important; }

/* Checkboxes (Ts&Cs, "create account", save info) */
.wc-block-components-checkbox__mark { color: var(--text) !important; }
.wc-block-components-checkbox__input {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.wc-block-checkout__terms,
.wc-block-checkout__terms-text,
.wc-block-components-checkbox__label { color: var(--text-muted) !important; }

/* Notices / validation errors (also white cards by default) */
.wc-block-components-notice-banner,
.wc-block-store-notice-banner {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.wc-block-components-notice-banner.is-error { border-left-color: var(--new-red) !important; }
.wc-block-components-notice-banner.is-success { border-left-color: var(--blue) !important; }
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
  background: transparent !important;
  color: #ff8a75 !important;
}

/* Return to cart link + misc small text */
.wc-block-checkout__return-to-cart-button,
.wc-block-components-checkout-return-to-cart-button { color: var(--blue-light) !important; }

@media (max-width: 700px) {
  .wc-block-components-checkout-step { padding: 16px !important; }
}

/* ==========================================================================
   18. Kill WooCommerce core's classic "View cart" link everywhere.
   Every add-to-cart flow on this site (shop cards, dosage sheet, cart
   drawer upsell) opens the cart drawer immediately on success, so a
   second "View cart" link injected by WooCommerce's own core
   add-to-cart.js next to a button it doesn't otherwise style is just
   visual noise/clutter — remove it sitewide rather than chase every
   place it can appear.
   ========================================================================== */
a.added_to_cart.wc-forward,
.vgc-card a.added_to_cart,
.product-card-add-btn + a.added_to_cart {
  display: none !important;
}

/* ==========================================================================
   19. My Account dashboard (woocommerce/myaccount/dashboard.php +
   navigation.php) — profile header, grouped link rows, delete/logout.
   ========================================================================== */
.vg-acct{ max-width: 460px; margin: 0 auto; }
.vg-acct-profile{
  display:flex; align-items:center; gap:16px;
  margin: 0 0 32px;
}
.vg-acct-avatar img{
  display:block; width:64px; height:64px; border-radius:50%;
  border:1px solid var(--border-strong);
}
.vg-acct-name{ font-family:var(--font-body); font-size:19px; font-weight:700; color:var(--text); margin:0; }
.vg-acct-since{ font-size:13px; color:var(--text-muted); margin:2px 0 0; }

.vg-acct-group{ margin-bottom: 30px; }
.vg-acct-group__title{
  font-family:var(--font-body); font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);
  margin: 0 0 10px;
}
.vg-acct-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px 4px; border:none; border-bottom:1px solid var(--border);
  background:transparent; color:var(--text); text-decoration:none;
  font-family:var(--font-body); font-size:15px; font-weight:600; text-align:left;
  cursor:pointer; transition: background .15s ease, padding-left .15s ease;
}
.vg-acct-row:last-child{ border-bottom:none; }
.vg-acct-row:hover{ background: var(--bg-card); padding-left:10px; border-radius:8px; }
.vg-acct-row__icon{ display:flex; color: var(--blue-light); flex-shrink:0; }
.vg-acct-row__label{ flex:1; }
.vg-acct-row__arrow{ color: var(--text-dim); font-weight:400; }
.vg-acct-row--soon.is-flashing .vg-acct-row__label{ color: var(--text-muted); font-style:italic; }

.vg-acct-delete-form{ margin: 0 0 14px; }
.vg-acct-delete{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 0; border-radius:10px;
  background:transparent; border:1px solid var(--border-strong); color: var(--text-muted);
  font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.vg-acct-delete:hover{ border-color: var(--new-red); color: var(--new-red); }

.vg-acct-logout{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 0; border-radius:999px;
  background: var(--new-red); color:#fff; text-decoration:none;
  font-family:var(--font-body); font-size:15px; font-weight:700;
  transition: background .15s ease, transform .12s ease;
}
.vg-acct-logout:hover{ background:#e0604a; transform: translateY(-1px); color:#fff; }

.vg-acct-back{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--blue-light); font-size:14px; font-weight:600;
  text-decoration:none; margin-bottom:20px;
}
.vg-acct-back:hover{ text-decoration:underline; }

/* Orders table / edit-account / addresses forms — same WC endpoint
   pages, now reached via .vg-acct-back instead of the old tab nav. */
.woocommerce-MyAccount-content{ max-width:640px; margin:0 auto; }
.woocommerce-orders-table{ width:100%; border-collapse:collapse; color:var(--text); }
.woocommerce-orders-table th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); padding:10px 8px; border-bottom:1px solid var(--border);
}
.woocommerce-orders-table td{ padding:12px 8px; border-bottom:1px solid var(--border); font-size:14px; }
.woocommerce-orders-table .button{
  background: var(--blue) !important; color: var(--on-blue) !important;
  border-radius:999px !important; padding:8px 16px !important; font-size:12.5px !important;
}
.woocommerce-Address{ color: var(--text); }
.woocommerce-Address-title h3{ color: var(--text); font-family:var(--font-body); }
.woocommerce-Address-title .edit{ color: var(--blue-light); }
address{ color: var(--text-muted); font-style:normal; line-height:1.6; }