/*!
 * HYPE design system — ported from rey-child/style.css v1.9.40 for the
 * Gutenberg / block-theme build. Structural Elementor tokens were renamed:
 *   .e-con -> .lg-con   .e-con-inner -> .lg-inner   .e-con-full -> .lg-full
 *   .elementor-widget|-element -> .lg-w
 * Generated by scripts/gb-port-css.mjs — edit the source, re-run, don't hand-patch.
 */
/* ============================================================ */
/* CART PANEL (mini cart) — LiverGuard Design System            */
/* Selectors verified against live AJAX-rendered cart drawer.   */
/* ============================================================ */

/* 1. Base font reset */
.js-rey-cartPanel { font-family: 'Inter', -apple-system, sans-serif; }

/* 2. Panel title (SHOPPING BAG) */
.js-rey-cartPanel .rey-cartPanel-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: #0B1D2E; line-height: 1.2;
}

/* 3. Header divider */
.rey-cartPanel-header { border-bottom: 1px solid rgba(0,0,0,0.06); }

/* 4. Shipping bar */
.js-rey-cartPanel .rey-cartShippingBar {
  --bar-color: #3BB5E8 !important;
  --accent-color: #3BB5E8 !important;
}
.js-rey-cartPanel .rey-cartShippingBar .__text {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #1a1a2e;
}
.js-rey-cartPanel .rey-cartShippingBar .__bar {
  background: rgba(0,0,0,0.06); box-shadow: none; height: 5px; border-radius: 4px;
}
.js-rey-cartPanel .rey-cartShippingBar .__bar::before {
  background: linear-gradient(90deg, #3BB5E8, #2A8BB5); border-radius: 4px;
}

/* 5. Cart item rows */
.js-rey-cartPanel .woocommerce-mini-cart-item { border-bottom: 1px solid rgba(0,0,0,0.06); }
.js-rey-cartPanel .rey-cartImg img { border-radius: 8px; }
.js-rey-cartPanel .woocommerce-mini-cart-thumbTitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: none; color: #0B1D2E; text-decoration: none;
}
.js-rey-cartPanel .woocommerce-mini-cart-thumbTitle:hover { color: #16779B; }
.js-rey-cartPanel .rey-removeBtn {
  color: #6a6a7a; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.js-rey-cartPanel .rey-removeBtn:hover { color: #0B1D2E; border-color: rgba(0,0,0,0.3); }
.js-rey-cartPanel .woocommerce-mini-cart-item .quantity {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: #6a6a7a;
}
.js-rey-cartPanel .woocommerce-mini-cart-price del .woocommerce-Price-amount {
  color: #6a6a7a; font-weight: 400;
}
.js-rey-cartPanel .woocommerce-mini-cart-price ins,
.js-rey-cartPanel .woocommerce-mini-cart-price ins .woocommerce-Price-amount {
  color: #A25E00; font-weight: 600; font-family: 'Inter', sans-serif; text-decoration: none;
}
.js-rey-cartPanel .woocommerce-mini-cart-price > .woocommerce-Price-amount:only-child,
.js-rey-cartPanel .woocommerce-mini-cart-price span:only-child .woocommerce-Price-amount {
  color: #0B1D2E; font-weight: 600;
}

/* 6. Qty stepper */
.js-rey-cartPanel .rey-qtyField {
  border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; overflow: hidden;
  height: 40px; display: inline-flex; align-items: center; background: #fff;
}
.js-rey-cartPanel .cartBtnQty-control {
  width: 40px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #0B1D2E; background: none; cursor: pointer;
  transition: background 0.2s; border: none;
}
.js-rey-cartPanel .cartBtnQty-control:hover { background: rgba(59,181,232,0.06); }
.js-rey-cartPanel .cartBtnQty-control.--disabled { opacity: 0.35; cursor: not-allowed; }
.js-rey-cartPanel input.qty {
  height: 100%; border: none;
  border-left: 1px solid rgba(0,0,0,0.12); border-right: 1px solid rgba(0,0,0,0.12);
  text-align: center; font: 600 14px/1 'Inter', sans-serif; color: #1a1a2e;
  width: 44px; background: #fff; -moz-appearance: textfield;
}
.js-rey-cartPanel input.qty::-webkit-outer-spin-button,
.js-rey-cartPanel input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }

/* 7. Subtotal row */
.js-rey-cartPanel .woocommerce-mini-cart__total { border-top: 1px solid rgba(0,0,0,0.06); }
.js-rey-cartPanel .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-family:Manrope,"Manrope Fallback", sans-serif; font-size: 22px; font-weight: 700; color: #0B1D2E;
}
.js-rey-cartPanel .minicart-total-row-head {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #6a6a7a;
}
.js-rey-cartPanel .minicart-total-row-content {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #0B1D2E;
}

/* 8. Coupon button */
.js-rey-cartPanel .rey-toggleCoupon-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 400; color: #16779B;
  background: none; border: none; cursor: pointer;
  text-decoration: underline; padding: 0;
}
.js-rey-cartPanel .rey-toggleCoupon-btn:hover { color: #0B1D2E; }
.js-rey-cartPanel .rey-toggleCoupon-content input[type="text"],
.js-rey-cartPanel .rey-toggleCoupon-content input[name="coupon_code"] {
  height: 48px; border: 1px solid rgba(0,0,0,0.12); border-radius: 12px;
  font: 400 16px/1 'Inter', sans-serif; color: #1a1a2e;
  padding: 12px 16px; background: #fff; width: 100%; box-sizing: border-box;
}
.js-rey-cartPanel .rey-toggleCoupon-content input[type="text"]:focus,
.js-rey-cartPanel .rey-toggleCoupon-content input[name="coupon_code"]:focus {
  outline: none; border: 2px solid #1A8FBA;
}
.js-rey-cartPanel .rey-toggleCoupon-content .button,
.js-rey-cartPanel .rey-toggleCoupon-content button[type="submit"] {
  background: linear-gradient(135deg, #F7941D, #F15A24);
  color: #fff; border: none; border-radius: 50px;
  font: 700 14px/1 'Inter', sans-serif; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 14px 24px; min-height: 44px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(247,148,29,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* 9. CHECKOUT button */
.js-rey-cartPanel .woocommerce-mini-cart__buttons .btn-primary,
.js-rey-cartPanel .woocommerce-mini-cart__buttons .btn.checkout,
.js-rey-cartPanel .woocommerce-mini-cart__buttons .checkout {
  background: linear-gradient(135deg, #F7941D, #F15A24) !important;
  color: #fff !important; border: none !important; border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important; font-weight: 700 !important;
  letter-spacing: 0.5px !important; text-transform: uppercase !important;
  padding: 16px 36px !important; min-height: 48px !important; width: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 16px rgba(247,148,29,0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  text-decoration: none !important;
}
.js-rey-cartPanel .woocommerce-mini-cart__buttons .btn-primary:hover,
.js-rey-cartPanel .woocommerce-mini-cart__buttons .btn.checkout:hover,
.js-rey-cartPanel .woocommerce-mini-cart__buttons .checkout:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(247,148,29,0.4) !important;
  color: #fff !important;
}
.js-rey-cartPanel .woocommerce-mini-cart__buttons .btn-primary:active,
.js-rey-cartPanel .woocommerce-mini-cart__buttons .checkout:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(247,148,29,0.3) !important;
}

/* 10. Cross-sells */
.js-rey-cartPanel .rey-crossSells-carousel-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  color: #A25E00 !important; line-height: 1.2 !important;
}
.js-rey-cartPanel .rey-crossSells-item .rey-crossSells-itemTitle,
.js-rey-cartPanel .rey-crossSells-item .rey-crossSells-itemTitle a {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; color: #0B1D2E; line-height: 1.3;
}
.js-rey-cartPanel .rey-crossSells-item del .woocommerce-Price-amount {
  color: #6a6a7a; font-weight: 400;
}
.js-rey-cartPanel .rey-crossSells-item ins .woocommerce-Price-amount {
  color: #A25E00; font-weight: 600;
}

/* ============================================================ */
/* GLOBAL SITE STYLES                                           */
/* ============================================================ */

/* === HYPE — Site CSS === */
/* ============================================
   HYPE — Complete Site CSS
   Merged from: Kit global CSS + WP Customizer + page CSS
   Single source of truth.
   ============================================ */

/* === Kit: Design System (tokens, utilities, components) === */
/* ============================================
   LiverGuard Design System v3.1.0
   HYPE Supplements — Elementor Global CSS
   ============================================ */

/* --- CSS CUSTOM PROPERTIES --- */
:root {
  /* === Backgrounds === */
  --bg: #FFFFFF;
  --cream: #FDFAF5;
  --warm: #F9F3EB;
  --blue-tint: #edf8fc;
  --blue-tint-light: #f8fcfe;
  --surface: #FFFFFF;

  /* === Navy === */
  --navy: #0B1D2E;
  --navy-light: #122B42;

  /* === Brand Blue === */
  --blue: #3BB5E8;
  --blue-dark: #2A8BB5;
  --blue-deeper: #1a6d8f;
  --blue-text: #15789C;

  /* === Brand Orange === */
  --orange: #F7941D;
  --orange-end: #F15A24;
  --orange-text: #A25E00;

  /* === Text === */
  --text: #1a1a2e;
  --text-sec: #4a4a5a;
  --text-light: #6a6a7a;
  --text-primary: #1a1a2e;

  /* === Semantic === */
  --green: #27AE60;
  --success-bg: #e8f9ef;
  --success-dark: #1a7a42;
  --red-soft: #e74c3c;
  --error-bg: #fef2f2;
  --error-dark: #b91c1c;
  --warning: #E5A832;
  --warning-bg: #fef9e8;
  --warning-dark: #92690d;

  /* === Borders === */
  --border: rgba(0,0,0,0.06);
  --border-input: rgba(0,0,0,0.12);
  --border-accent: rgba(59,181,232,0.3);
  --border-blue-tint: rgba(59,181,232,0.1);
  --border-pain: #fde2e2;
  --overlay-dim: rgba(0,0,0,0.6);

  /* === Gradients === */
  --gradient-orange: linear-gradient(135deg, #F7941D, #F15A24);
  --gradient-blue: linear-gradient(135deg, #3BB5E8, #2A8BB5);
  --gradient-navy: linear-gradient(90deg, #0B1D2E, #122B42);
  --gradient-hero-bg: linear-gradient(170deg, #f8fcfe 0%, #edf8fc 40%, #fff 100%);
  --gradient-warm-section: linear-gradient(180deg, #F9F3EB 0%, #fff 100%);
  --gradient-blue-section: linear-gradient(180deg, #edf8fc 0%, #fff 100%);
  --gradient-stat: linear-gradient(135deg, #0B1D2E, #2A8BB5);
  --gradient-danger-stat: linear-gradient(135deg, #e74c3c, #c0392b);

  /* === Fonts === */
  --font-display:Manrope,"Manrope Fallback", -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  /* === Border Radius === */
  --radius-card: 12px;
  --radius-pill: 50px;
  --radius: 12px;

  /* === Shadows === */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-brand-glow: 0 4px 16px rgba(247,148,29,0.3);
  --shadow-info-glow: 0 4px 16px rgba(59,181,232,0.3);
  --shadow-xs: 0 2px 8px rgba(0,0,0,0.04);
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-glow: 0 4px 16px rgba(247,148,29,0.3);
  --shadow-glow-hover: 0 8px 28px rgba(247,148,29,0.4);
  --shadow-product: 0 20px 60px rgba(0,0,0,0.15);

  /* === Z-Index === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-cta: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* === Spacing === */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* === Fluid Spacing === */
  --section-padding-y: clamp(48px, 5.6vw, 80px);
  --section-padding-x: clamp(16px, 5.6%, 80px);
  --section-gap: clamp(16px, 2vw, 24px);
  --widget-gap: clamp(16px, 1.7vw, 24px);
  --card-gap: clamp(16px, 2vw, 24px);
  --col-gap: clamp(32px, 4vw, 64px);
  --card-padding: clamp(20px, 2.5vw, 32px);

  /* === Easing === */
  --ease-button: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Header === */
  --header-default--height: 67px;

  /* === Fluid Gaps === */
  --gap-xxs: clamp(0.25rem, 1vw, 0.5rem);    /* 4px  -> 8px  */
  --gap-xs:  clamp(0.5rem,  1.5vw, 1rem);    /* 8px  -> 16px */
  --gap-s:   clamp(1rem,    1.5vw, 1.5rem);  /* 16px -> 24px */
  --gap-m:   1.5rem;                          /* 24px fixed   */
  --gap-l:   clamp(1.5rem,  3vw, 2.5rem);    /* 24px -> 40px */
  --gap-xl:  clamp(1.5rem,  5vw, 4rem);      /* 24px -> 64px */
  --gap-xxl: clamp(1.5rem,  7.5vw, 7.5rem);  /* 24px -> 120px */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  color: var(--text-sec);
  font-family: var(--font-body);
}
main { flex-grow: 1; }

h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 300;
  color: var(--blue-text);
}

.lg-eyebrow .lg-w-title,
.lg-eyebrow,
.lg-eyebrow p,
.lg-eyebrow span {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  color: var(--orange-text);
}

/* ── Mechanisms grid ── */
.mech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}
.mech-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3BB5E8, #2A8BB5);
  color: #fff;
  font-family:Manrope,"Manrope Fallback", -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.mech-num .lg-w-title { color: #fff; }
@media (max-width: 768px) {
  .mech-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 380px) {
  .mech-grid { grid-template-columns: 1fr; }
}

/* ── Ingredients table ── */

/* ── Food comparison ── */

@media (max-width: 768px) {
  .food-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .food-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 380px) {
  .food-grid { grid-template-columns: 1fr; }
}

/* ============================================
   HYPE — Unified Button System (2026-04-30)
   --------------------------------------------
   ONE primary CTA style for the whole site.
   Selectors covered:
     .lg-btn-el         (Elementor button widget)
     .cta                      (raw HTML <a class="cta">)
     .single_add_to_cart_button, .button.alt, .checkout-button   (WooCommerce)
     .wc-block-components-button                                 (Woo blocks)
     .rey-btn--primary                                           (Rey theme)

   USE: drop a button widget in Elementor. No widget custom_css.
   Per-button overrides via CSS Classes field:
     .btn-sm, .btn-lg              — size modifiers
     .lg-cta-outline, .btn-ghost   — outline / ghost variant
     .btn-link                     — inline text link with underline
   Never set typography/background/padding on individual button widgets.
   ============================================ */
.lg-btn-el,
.cta,
.single_add_to_cart_button,
.button.alt,
.checkout-button,
.wc-block-components-button,
.rey-btn--primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  text-transform: none;
  color: #fff !important;
  background: var(--gradient-orange) !important;
  background-image: var(--gradient-orange) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  min-height: 48px;
  box-shadow: var(--shadow-brand-glow) !important;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 200ms var(--ease-button),
              box-shadow 200ms var(--ease-button),
              background 200ms var(--ease-button) !important;
}

.lg-btn-el:hover,
.cta:hover,
.single_add_to_cart_button:hover,
.button.alt:hover,
.checkout-button:hover,
.wc-block-components-button:hover,
.rey-btn--primary:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(247,148,29,0.45) !important;
}

.lg-btn-el:active,
.cta:active,
.single_add_to_cart_button:active,
.button.alt:active,
.checkout-button:active,
.wc-block-components-button:active,
.rey-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-brand-glow) !important;
}

.lg-btn-el:focus-visible,
.cta:focus-visible,
.single_add_to_cart_button:focus-visible,
.button.alt:focus-visible,
.checkout-button:focus-visible,
.wc-block-components-button:focus-visible,
.rey-btn--primary:focus-visible {
  outline: 3px solid rgba(59,181,232,0.6);
  outline-offset: 3px;
}

.lg-btn-el:disabled,
.lg-btn-el[disabled],
.cta[aria-disabled="true"],
.single_add_to_cart_button:disabled,
.button.alt:disabled,
.checkout-button:disabled,
.wc-block-components-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .lg-btn-el,
  .cta,
  .single_add_to_cart_button,
  .button.alt,
  .checkout-button,
  .wc-block-components-button,
  .rey-btn--primary {
    transition: background 200ms, box-shadow 200ms !important;
  }
  .lg-btn-el:hover,
  .cta:hover,
  .single_add_to_cart_button:hover,
  .button.alt:hover,
  .checkout-button:hover,
  .wc-block-components-button:hover,
  .rey-btn--primary:hover { transform: none; }
}

/* === Size modifiers === */
.lg-btn-el.btn-sm,
.btn-sm .lg-btn-el,
.cta.btn-sm {
  padding: 10px 20px !important;
  font-size: 14px !important;
  min-height: 40px;
}
.lg-btn-el.btn-lg,
.btn-lg .lg-btn-el,
.cta.btn-lg,
.cta.lg {
  padding: 18px 36px !important;
  font-size: 18px !important;
  min-height: 56px;
}

/* === Variant: ghost / outline === */
/* canonical class is .lg-cta-outline (defined below); .btn-ghost is an alias. */
.btn-ghost,
.lg-btn-el.btn-ghost,
.cta.btn-ghost {
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
}
.btn-ghost:hover,
.lg-btn-el.btn-ghost:hover,
.cta.btn-ghost:hover {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}

/* === Variant: link / inline text link with underline === */
.btn-link,
.lg-btn-el.btn-link,
.cta.btn-link {
  background: transparent !important;
  background-image: none !important;
  color: var(--blue-text) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(42,139,181,0.3) !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: normal;
}
.btn-link:hover,
.lg-btn-el.btn-link:hover,
.cta.btn-link:hover {
  background: transparent !important;
  background-image: none !important;
  color: var(--blue-deeper) !important;
  border-bottom-color: var(--blue-text) !important;
  transform: none;
  box-shadow: none !important;
}

.lg-cta-outline {
  background: transparent !important;
  color: var(--text) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none;
  transition: all 250ms var(--ease-button);
}
.lg-cta-outline:hover {
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  transform: translateY(-2px);
}

.lg-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.2;
  background: linear-gradient(135deg, #0B1D2E, #2A8BB5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

@keyframes lg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.lg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.lg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }

.lg-text-medium { font-size: clamp(1.0625rem, 1.2vw, 1.25rem) !important; line-height: 1.45 !important; }

/* === Unified page rail — single source of truth for horizontal alignment (v1.9.0)
   - lg-section-* for vertical sizing + rail alignment
   - lg-rail (or lg-header-footer alias) for rail-only standalone containers
   - Boxed (.lg-con > .lg-inner) and full (.lg-full) land on same grid === */
:root {
  --page-gutter: 16px;
  --page-max: 1440px;
}
@media (min-width: 768px)  { :root { --page-gutter: 24px; } }
@media (min-width: 1025px) { :root { --page-gutter: clamp(24px, 5.6%, 80px); } }

/* THE RAIL */
.lg-section-l     > .lg-inner, .lg-section-l.lg-full,
.lg-section-m     > .lg-inner, .lg-section-m.lg-full,
.lg-section-s     > .lg-inner, .lg-section-s.lg-full,
.lg-section-xs    > .lg-inner, .lg-section-xs.lg-full,
.lg-section-hero  > .lg-inner, .lg-section-hero.lg-full,
.lg-hero-section  > .lg-inner, .lg-hero-section.lg-full,
.lg-rail          > .lg-inner, .lg-rail.lg-full,
.lg-header-footer > .lg-inner, .lg-header-footer.lg-full {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}

/* Outer containers zero their side padding — inner is the only gutter */
.lg-section-l, .lg-section-m, .lg-section-s, .lg-section-xs,
.lg-section-hero, .lg-hero-section, .lg-rail, .lg-header-footer {
  padding-inline: 0;
}

/* Route Elementor's Rey-overridden --padding-inline-start/end to --page-gutter for
   rail containers. Rey theme has a higher-specificity rule on header/footer chrome
   that reads these vars; without this, the rail rule loses on those elements. */
.lg-rail, .lg-header-footer {
  --padding-inline-start: var(--page-gutter);
  --padding-inline-end: var(--page-gutter);
}

/* Section vertical padding — independent of rail */
.lg-section-xs { padding-block: clamp(16px, 1.7vw, 24px); }
.lg-section-s  { padding-block: clamp(24px, 2.8vw, 40px); }
.lg-section-m  { padding-block: clamp(32px, 3.9vw, 56px); }
.lg-section-l  { padding-block: clamp(48px, 5.6vw, 80px); }

/* Hero variant — tight top (IM8-style), normal bottom. Use on first-section
   above-the-fold containers where the sticky header already provides air. */
.lg-section-hero { padding-block: clamp(16px, 3vw, 32px) clamp(32px, 5.6vw, 64px); }

/* Article hero (single-post template) — align top spacing to other heroes
   (16px below sticky header). Three cleanups: (a) the cumulative .lg-inner
   default block padding inside the hero region, (b) an empty depth-1 shortcode
   widget that renders nothing but eats 16px of vertical space, (c) the
   e-con-full heading container's default 10px block padding. */
body.single-post .lg-section-hero > .lg-inner { padding-block: 0; }
body.single-post .lg-section-hero > .lg-inner > .lg-w-shortcode:first-child { display: none; }
.lg-article-hero,
.lg-article-hero > .lg-inner,
.lg-article-hero > .lg-con,
.lg-article-hero > .lg-con > .lg-inner { padding-block: 0; }

/* Mobile drawer info cards (Shipping / Returns / Hours) — mirror the footer
   icon-box layout but tuned for the light drawer background. */
.hype-drawer__infocards {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hype-drawer__infocard {
  background: var(--blue-tint, #edf8fc);
  border-radius: var(--radius-card, 12px);
  padding: 12px 14px;
}
.hype-drawer__infocard-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.hype-drawer__infocard:not(:has(a)) {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hype-drawer__infocard-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(59,181,232,0.18);
  color: var(--blue-text, #1A8FBA);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hype-drawer__infocard-icon svg { width: 18px; height: 18px; }
.hype-drawer__infocard-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hype-drawer__infocard-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-light, #6a6a7a);
  line-height: 1.2;
}
.hype-drawer__infocard-desc {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  line-height: 1.3;
}
.hype-drawer__infocard-link:hover .hype-drawer__infocard-desc { color: var(--blue-text, #1A8FBA); }

/* Article hero excerpt — match the canonical hero sub-text size (lg-body-m, 16px).
   theme-post-excerpt uses excerpt_typography_* keys, not generic typography_*, so
   a scoped rule is the cleanest way to unify it with the rest of the hero sub-texts. */
body.single-post .lg-section-hero .lg-w-theme-post-excerpt,
body.single-post .lg-section-hero .lg-w-theme-post-excerpt p { font-size: 16px !important; line-height: 1.6 !important; }

/* Article body — trim Elementor's default per-widget block padding inside the
   single-post region. Stacked defaults (64px post-content + 32px share + 40px
   nav + 40px carousel margin + container ghosts) create dead space between
   the last reference and the share/nav/related blocks. Container gaps already
   provide breathing room. Selectors stack two body-* classes to outweigh
   Elementor's per-post (0,3,0) inline-equivalent rules. */
body.single-post .lg-w.lg-w-theme-post-content { padding-bottom: 16px; }
body.single-post .lg-w.lg-w-share-buttons { padding-block: 0; }
body.single-post .lg-w.lg-w-post-navigation { padding-block: 16px; }
body.single-post .lg-w.lg-w-loop-carousel { margin-top: 16px; }
body.single-post .lg-section-hero .lg-full:not(.hype-cta-block) { padding-block: 0; }
@media (max-width: 767px) {
  .lg-article-hero,
  .lg-article-hero > .lg-inner { display: flex !important; flex-direction: column !important; gap: clamp(16px, 3vw, 24px); }
  .lg-article-hero .lg-w-theme-post-featured-image { order: 2; }
  .lg-article-hero > .lg-inner > .lg-con:not(.lg-w-theme-post-featured-image) { order: 1; }
}

/* Narrow variant — same gutter, tighter cap. Stack on top of lg-section-l. */
.lg-section-narrow > .lg-inner,
.lg-section-narrow.lg-full { max-width: 900px; }

/* Kill Elementor's default 10px INLINE container padding site-wide. Nested
   .lg-con stops accumulating ghost horizontal padding; sub-container inline
   padding comes from Elementor settings or is 0 by default. Replaces the old
   :not() escape chain. Block defaults are left untouched so containers without
   explicit padding (header, footer chrome) keep their natural breathing room. */
.lg-con {
  --container-default-padding-right: 0px;
  --container-default-padding-left: 0px;
}

/* Inner grid containers ride the parent rail without adding side padding */
.lg-hero-info,
.whatis-grid,
.use-layout,
.proof-body { padding-inline: 0; }

/* UGC video carousel — play button always visible. Original HTML-widget CSS
   uses opacity:0 + .ugc-card:hover reveal + @media (hover: none) fallback,
   but Samsung/DeX/S-Pen devices report (hover: hover) so the fallback misses
   and visitors don't see the play affordance on phones. Override centrally. */
.ugc-play { opacity: 1 !important; }
/* === HYPE unified card system (added 2026-05-10) ===
   One base .hype-card carries the chrome (bg, radius, border, shadow,
   transition). Pad with --card-pad or a size modifier. Compose with
   layout/behaviour modifiers. New cards: prefix with `hype-card`. */
.hype-card,
.mech-card, .food-card, .lg-feature-card,
.lg-mech-card, .not-card, .pw-card, .mix-card, .who-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 12px;
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.08));
  padding: var(--card-pad, 24px 20px);
  transition: transform .3s ease, box-shadow .3s ease;
  box-sizing: border-box;
}
/* Legacy size mapping — keeps existing pages pixel-identical until snippets are stripped */
.mech-card        { --card-pad: 28px 24px; text-align: center; }
.food-card        { --card-pad: 24px 16px; text-align: center; }
.lg-mech-card     { --card-pad: 18px 16px; }
.not-card         { --card-pad: 32px 30px; }
.pw-card          { --card-pad: 32px 32px; }
.mix-card         { --card-pad: 36px 36px; }
.who-card         { --card-pad: 32px 34px; }
.lg-feature-card  { --card-pad: 16px 20px; }
.hype-card--sm { --card-pad: 18px 16px; }
.hype-card--md { --card-pad: 24px 20px; }
.hype-card--lg { --card-pad: 32px 28px; }
.hype-card--xl { --card-pad: 36px 32px; }
.hype-card--center { text-align: center; }
.hype-card--hover { will-change: transform; }
.hype-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated, 0 12px 32px rgba(0,0,0,0.12)); }
.hype-card--hover:active { transform: translateY(-2px); }
.hype-card--row { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.hype-card--icon { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: flex-start; }
.hype-card--dark { --surface: rgba(255,255,255,.04); --border: rgba(255,255,255,.1); color: #fff; }
/* === end HYPE unified card system === */

/* (v1.9.0: removed the :not() escape chain. Sub-container padding is now
   controlled by Elementor settings only; the global --container-default-padding-*: 0
   rule above prevents the old 10px-default-stacking problem.) */

/* Variation cards — sit on the rail. Internal padding kept (card UI). */

/* Width utilities — migrated from 6-hype-site-css.php 2026-04-30 */

/* Dosage table (Elementor element c9247c5) — migrated from 6-hype-site-css.php 2026-04-30 */



/* ── Accordion card — shared utility (.lg-accordion-card) ── */
/* Visual spec mirrors New Website/LiverGuard_Homepage_1.html .faq-* design. */
/* !important needed to win over per-widget Elementor settings on existing accordions. */

.lg-accordion-card {
  max-width: 900px !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

/* Item card — white surface, hairline border, soft shadow, 12px radius, 12px stack gap */
.lg-accordion-card .lg-acc-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: var(--radius-card, 12px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  overflow: hidden;
  margin-bottom: 12px;
}
.lg-accordion-card .lg-acc-item:last-child {
  margin-bottom: 0;
}

/* Question row — navy 600, Inter 15px, 20/24 padding, chevron right, blue-tint hover */
.lg-accordion-card .lg-tab-title {
  background: transparent !important;
  border: 0 !important;
  padding: 20px 24px !important;
  cursor: pointer;
  user-select: none;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--navy, #0B1D2E) !important;
  transition: background 0.2s ease;
}
.lg-accordion-card .lg-tab-title:hover {
  background: rgba(59,181,232,0.04) !important;
}
.lg-accordion-card .lg-tab-title.lg-active {
  background: transparent !important;
}

/* Chevron icon — pin size to 16px so it stays consistent regardless of tab title tag
   (h3 vs div changes the inherited 1em base; this rule decouples chevron from title size) */
.lg-accordion-card .lg-tab-title .lg-accordion-icon svg,
.lg-accordion-card .lg-tab-title .lg-accordion-icon i {
  width: 1em !important;
  height: 1em !important;
  font-size: 16px !important;
  color: var(--navy, #0B1D2E) !important;
  transition: transform 0.3s ease;
}

/* Answer panel — Inter 15px, secondary grey, 1.75 LH, 0/24/20 padding */
.lg-accordion-card .lg-tab-content {
  background: transparent !important;
  border: 0 !important;
  padding: 0 24px 20px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #4a4a5a !important;
}
.lg-accordion-card .lg-tab-content p:last-child {
  margin-bottom: 0;
}

/* ── Schlitz icon box — gradient bg + blue SVG fill (.schlitz-icon-box) ── */

/* ── Counter widget — column-reverse + hover scale (.lg-counter) ── */

/* === WP Customizer: Theme-level fixes === */

/* Vertically center nav items with the button */
.lg-nav-menu,
.lg-nav-menu > li,
.lg-nav-menu .menu-item > a {
    display: inline-flex !important;
    align-items: center !important;
}
.lg-nav-menu--main.lg-nav-menu__container { align-items: center !important; }
.lg-nav-menu--main > li.menu-item > a {
    display: inline-flex !important;
    align-items: center !important;
}

/* Buy Now nav button */
.menu-btn-orange > a,
.menu-btn-orange a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #F7941D, #F15A24) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 26px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
    line-height: 1 !important;
    height: auto !important;
}
.menu-btn-orange > a:hover,
.menu-btn-orange a:hover {
    opacity: 0.88 !important;
    color: #ffffff !important;
}
.lg-nav-menu--main > li.menu-btn-orange > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mega menu panel wrapper - transparent, no spacing */
.rey-mainNavigation.rey-mainNavigation--desktop .rey-mega-gs {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Dim Buy Now button when mega menu is open */
.rey-mainMenu--desktop .depth--0.--is-mega.--hover ~ .menu-btn-orange > a {
    opacity: 0.3 !important;
    pointer-events: none;
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  
  * { transition-duration: 0.01ms !important; }
  :focus { transition: outline 0.1s ease; }
}

/* --- Scroll Reveal Base --- */

/* ===== SCROLL REVEAL ===== */

/* ===== RESPONSIVE ===== */

/* === BG Ingredients — CSS === */

/* ===== GOOGLE FONTS ===== */
/* Google-Fonts @import removed by gb-trim-fonts.mjs — faces are self-hosted in fonts.css */
/* Ingredient 2-col: fix gap overflow.
   Columns are width:50% each with gap:64px -> total = 100% + 64px = overflow.
   max-width: calc(50% - 32px) clamps each column so:
   (50%-32px) + 64px + (50%-32px) = exactly 100%.
   Elementor never sets max-width on these, so !important wins cleanly. */

/* ===== SHIMMER TEXT ===== */
.hype-shimmer {
  font-family:Manrope,"Manrope Fallback", -apple-system, sans-serif !important;
  background-image: linear-gradient(135deg, #0B1D2E, #2A8BB5, #3BB5E8, #2A8BB5, #0B1D2E) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  will-change: background-position !important;
}

/* =============================================
   GLOBAL INNER CONTAINER ALIGNMENT
   All sections share the same horizontal rhythm:
   5% padding, max-width 1280px, auto-centered
   ============================================= */

/* Comparison table icons */
.cmp-icon-yes,.cmp-icon-no,.cmp-icon-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-size: 28px; line-height: 1;
}
.cmp-icon-yes { color: #27AE60; }
.cmp-icon-no { color: #ccc; }

/* Dosage table — minimalistic */

/* Scroll reveal */

/* Responsive */

 .entry-title { display: none !important; }

/* Accordion */

/* Search/nav bar */
#faq-search-nav, #faqSearch, .faq-pill {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* === Our Story — CSS + JS (CSS) === */
/* ═══════════════════════════════════════════════
   OUR STORY — CSS INJECTION (v12)
   ═══════════════════════════════════════════════ */

/* ── hype-fu ── */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  
  [data-id] img { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
  :focus { transition: outline 0.1s ease; }
}

/* ── Responsive ── */

/* ===== RESPONSIVE ===== */


/* ===== SCROLL REVEAL ===== */

/* === Home — CSS + JS (CSS) === */

/* === Homepage Injection CSS v3.0 === */

/* Awareness section mobile fix */

/* Icon SVG: Phosphor duotone fix */

/* ===== SPEC-COMPLIANT HOVER TRANSITIONS ===== */

/* Card lift — spec: translateY(-6px), 0.3s ease */
.lg-card{
  transition: transform 0.3s ease !important;
}
@media (hover: hover) {
  .lg-card:hover{
    transform: translateY(-6px) !important;
  }
}
@media (hover: none) {
  .lg-card:active{
    transform: translateY(-2px) !important;
  }
}

/* Schlitz / icon-box cards — spec: -6px lift, 0.3s ease */
.lg-iconbox-wrapper {
  transition: transform 0.3s ease !important;
}
@media (hover: hover) {
  .lg-iconbox-wrapper:hover {
    transform: translateY(-6px) !important;
  }
}
@media (hover: none) {
  .lg-iconbox-wrapper:active {
    transform: translateY(-2px) !important;
  }
}

/* Price cards — spec: -4px lift + shadow, 0.2s */

/* Button styles consolidated into Unified Button System above (2026-04-30) */

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  
  [data-id] img {
    animation: none !important;
  }
  * {
    transition-duration: 0.01ms !important;
  }
  :focus {
    transition: outline 0.1s ease;
  }
}

/* === Typography Utilities — HYPE Design System === */

/* === Gap Utility Classes v1.0 — HYPE Design System === */
/* ===========================
   GAP UTILITY CLASSES v1.0
   HYPE Design System
   ===========================
   Apply via Elementor Advanced > CSS Classes (no dot prefix).
   Use on the container whose CHILDREN need the gap.
   Dual-target: .gap-X covers full-width containers (.lg-con),
   .gap-X .lg-inner covers boxed containers.
*/

 
 
 
 
 
 
 

/* ============================================
   Heading visual lock classes — v1.0
   Tag-independent type scale. Assign these so
   changing h-tag for SEO does not affect visuals.
   Values from tokens.md type scale.
   ============================================ */

.lg-heading-xl,
.lg-heading-xl .lg-w-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 48px) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lg-heading-l,
.lg-heading-l .lg-w-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ============================================
   Typography v2 — unified ladder (2026-05-02)
   Tag-independent visual locks. Apply via
   Elementor → Advanced → CSS Classes.
   Headings: xl/l/m (above) + s (below).
   Body: l/m/s/xs. Modifier: lg-bold.
   See HYPE/design/tokens.md for the full scale.
   ============================================ */

.lg-heading-s,
.lg-heading-s .lg-w-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.5vw + 14px, 24px) !important;
  line-height: 1.25;
}

.lg-body-l, .lg-body-l p, .lg-body-l .lg-w, .lg-body-l .lg-w p { font-family: var(--font-body) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.6 !important; }
.lg-body-m, .lg-body-m p, .lg-body-m .lg-w, .lg-body-m .lg-w p { font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; }
.lg-body-s, .lg-body-s p, .lg-body-s .lg-w, .lg-body-s .lg-w p { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; }
.lg-body-xs, .lg-body-xs p, .lg-body-xs .lg-w, .lg-body-xs .lg-w p { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; }

.lg-bold { font-weight: 600 !important; }

/* DEPRECATED — kept for backward compat. Will be removed after page migration.
   .lg-text-medium → migrate to .lg-body-l (close visual; line-height shifts 1.45 → 1.6)
   .lg-eyebrow     → migrate to .lg-eyebrow-gold (functionally identical) */

/* === HYPE v4 — .h-card (migrated from Fluent Snippet #4, 2026-04-28) === */

/* CONSOLIDATION CLASSES - re-added after restore */

.lg-eyebrow-gold .lg-w-title, .lg-eyebrow-gold p, .lg-eyebrow-gold span { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 3px !important; color: #df731a !important; }
.lg-eyebrow-blue .lg-w-title, .lg-eyebrow-blue p, .lg-eyebrow-blue span { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 3px !important; color: var(--blue) !important; }

/* lg-feature-card icon: force widget DOM box to glyph size so flex gap mirrors card padding */

/* ============================================================
   Global utilities (extracted from former PDP block)
============================================================ */

/* ============================================================
   LiverGuard PDP — Sections 1-7 + Pill Nav
   Added: 2026-04-19
============================================================ */

/* --- Elementor boxed-container fix: .lg-inner breaks grid/flex children --- */

/* --- Shared utility classes --- */

*{box-sizing:border-box}

img{display:block;max-width:100%}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy);letter-spacing:-.01em;text-wrap:balance;margin:0}

h1 em,h2 em,h3 em,h4 em{font-style:normal;font-weight:300;color:#16779B}

/* Eyebrow */

.eyebrow{display:block;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#df731a;margin:0 0 20px}

.eyebrow.blue{color:#16779B}

/* When .eyebrow is applied to an Elementor heading widget (outer .lg-w), push bottom margin onto the widget itself so spacing is respected even when parent container uses display:contents */

/* .cta styles consolidated into Unified Button System above (2026-04-30) */

/* Section shell */

/* padding delegated to .lg-section-l > .lg-inner */

/* Panel head */

/* Placeholder box */

/* --- Comp table overflow (all sizes) --- */

/* --- Global responsive breakpoint --- */

/* --- Pill Nav --- */

html{scroll-behavior:smooth}

/* --- Section 1 — What is LiverGuard --- */

/* --- Section 2 — What it is NOT --- */

/* === Section 6 — mechanism comparison cards (replaces .comp-table-wrap on PDP) === */

/* --- Section 3 — How it works --- */

/* --- Section 4 — How to use --- */

/* --- Section 5 — Who is it for --- */

/* --- Section 6 — vs Competitors --- */

/* --- Section 7 — Proof --- */

/* ============================================================
   End LiverGuard PDP block
============================================================ */
/* === Article headings: scroll offset for sticky header (67px) + admin bar === */
.lg-w-theme-post-content h2,
.lg-w-theme-post-content h3 {
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 87px);
}

/* === CTA block button: bulletproof centering (text-align drifts with row-reverse icon) === */
.hype-cta-block .lg-w-button {
  display: flex;
  justify-content: center;
}

/* === Quantity: un-join from ATC button, add gap === */

/* === Reviews — Star Rating Filter === */

/* Override Rey's desktop opacity:0.2 on remove button — should be visible in normal state */

/* ── Elementor widget — utility class compatibility (added 2026-04-27 to restore lg-stat-number gradient on BG liverguard) ─── */

/* === Fix: Rey equalizer clamps register form too short, button overflows (2026-04-28) === */

/* ============================================
   HYPE — Button Variants v2 (2026-05-02)
   --------------------------------------------
   Restores the secondary + blue/info CTA styles
   from the spec sheet. Works on:
     a) raw HTML buttons that have the class directly
        e.g. <a class="cta lg-btn-secondary">
     b) Elementor button widgets where the class is
        on the wrapper (Advanced > CSS Classes)
        — the .lg-btn-el child is targeted
        via descendant selector.
   USAGE in Elementor:
     Add to button widget Advanced > CSS Classes:
       lg-btn-secondary   — outline grey → hover blue border + blue text
       lg-btn-blue        — blue gradient pill (info CTAs)
   Aliases (same effect):
     btn-secondary, btn-blue, lg-cta-outline (legacy)
   ============================================ */

/* SECONDARY / OUTLINE — grey border, dark text, hover blue */
.lg-btn-secondary .lg-btn-el,
.lg-btn-el.lg-btn-secondary,
.btn-secondary .lg-btn-el,
.lg-btn-el.btn-secondary,
.lg-cta-outline .lg-btn-el,
.lg-btn-el.lg-cta-outline,
.cta.lg-btn-secondary,
.cta.btn-secondary,
.cta.lg-cta-outline {
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 2px solid #e0e0e0 !important;
  box-shadow: none !important;
}
.lg-btn-secondary .lg-btn-el:hover,
.lg-btn-el.lg-btn-secondary:hover,
.btn-secondary .lg-btn-el:hover,
.lg-btn-el.btn-secondary:hover,
.lg-cta-outline .lg-btn-el:hover,
.lg-btn-el.lg-cta-outline:hover,
.cta.lg-btn-secondary:hover,
.cta.btn-secondary:hover,
.cta.lg-cta-outline:hover {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

/* BLUE / INFO — blue gradient pill, blue glow */
.lg-btn-blue .lg-btn-el,
.lg-btn-el.lg-btn-blue,
.btn-blue .lg-btn-el,
.lg-btn-el.btn-blue,
.cta.lg-btn-blue,
.cta.btn-blue {
  background: var(--gradient-blue) !important;
  background-image: var(--gradient-blue) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--shadow-info-glow) !important;
}
.lg-btn-blue .lg-btn-el:hover,
.lg-btn-el.lg-btn-blue:hover,
.btn-blue .lg-btn-el:hover,
.lg-btn-el.btn-blue:hover,
.cta.lg-btn-blue:hover,
.cta.btn-blue:hover {
  background: var(--gradient-blue) !important;
  background-image: var(--gradient-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(59,181,232,0.4) !important;
  transform: translateY(-2px);
}

/* === Mobile/tablet header nav — comfortable tap targets === */
.rey-mobileNav .rey-mainMenu-mobile > .menu-item > a {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  line-height: 1.3 !important;
}
.rey-mobileNav .rey-mainMenu-mobile .menu-item .menu-item > a,
.rey-mobileNav .rey-mainMenu-mobile .sub-menu .menu-item > a {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1.3 !important;
}
.rey-mobileNav .rey-mainMenu-mobile > .menu-item.menu-btn-orange {
  margin-top: 16px !important;
}
/* === End mobile nav tap-target spacing === */

@media (max-width:480px){.mix-specs{grid-template-columns:1fr;gap:14px}.mix-specs .item{align-items:flex-start}}

/* === Coupon discount ledger row === */
.js-rey-cartPanel .minicart-total-row--coupon{align-items:baseline;gap:8px;margin:6px 0}
.js-rey-cartPanel .minicart-total-row--coupon .minicart-total-row-head{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6a6a7a}
.js-rey-cartPanel .minicart-total-row--coupon .minicart-total-row-content,
.js-rey-cartPanel .minicart-total-row--coupon .minicart-total-row-content .woocommerce-Price-amount,
.js-rey-cartPanel .minicart-total-row--coupon .minicart-total-row-content bdi,
.js-rey-cartPanel .minicart-total-row--coupon .minicart-total-row-content span{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#1f9d55;line-height:1.4}
.js-rey-cartPanel .minicart-total-row--coupon .woocommerce-remove-coupon{font-size:11px;font-weight:400;color:#6a6a7a;margin-left:6px;text-decoration:underline}

/* === Dark theme: #lg-what-is === */

#lg-what-is .lg-stat-badge,#lg-what-is .lg-feature-card,#lg-what-is [class*="stat"],#lg-what-is [class*="tile"]{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff}
#lg-what-is .lg-stat-badge .num,#lg-what-is .lg-feature-card .num,#lg-what-is [class*="stat"] .num,#lg-what-is [class*="stat"] strong{color:#1377A0}

/* v1.7.9 — kill nested borders in #lg-what-is stat tiles */

/* v1.7.10 — kill broad [class*=stat] catch on .whatis-stats grid */

/* v1.7.11 — force big numbers on actual heading element */

/* v1.7.14 — mobile reorg + flavors tile */

@media(max-width:768px){
  #lg-what-is .whatis-stats{grid-template-columns:1fr!important;gap:12px}
  #lg-what-is .whatis-stats > .lg-con,#lg-what-is .mini-stat.full{padding:24px 22px}
  #lg-what-is .whatis-stats .lg-w-title{white-space:normal;font-size:clamp(40px,11vw,56px)!important}
  #lg-what-is .mini-stat.full{flex-direction:column;align-items:flex-start;gap:14px}
}

/* v1.7.15 — force 1col on mobile, override elementor inline grid */
@media(max-width:768px){
  .lg-full.whatis-stats,#lg-what-is .lg-con.whatis-stats,#lg-what-is .whatis-stats.lg-grid{grid-template-columns:1fr!important;--e-con-grid-template-columns:repeat(1,1fr)!important;--grid-template-columns:1fr!important}
  #lg-what-is .whatis-stats .lg-w-title{white-space:normal!important;font-size:clamp(40px,11vw,56px)!important}
}

/* v1.7.16 — mobile: switch to flex column to bypass Elementor grid var fight */
@media(max-width:768px){
  #lg-what-is .whatis-stats.lg-grid,#lg-what-is .whatis-stats{display:flex!important;flex-direction:column!important;gap:12px!important;grid-template-columns:none!important}
  #lg-what-is .whatis-stats > *{width:100%!important}
  #lg-what-is .whatis-stats .lg-w-title{white-space:normal!important;font-size:clamp(44px,12vw,64px)!important}
  #lg-what-is .whatis-stats > .lg-con{padding:24px 22px;min-height:auto}
  #lg-what-is .mini-stat.full{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 22px}
}

/* v1.7.17 — mobile mirror desktop: 2col stat grid + smaller numbers */
@media(max-width:768px){
  #lg-what-is .whatis-stats.lg-grid,#lg-what-is .whatis-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;flex-direction:row!important}
  #lg-what-is .whatis-stats > *{width:auto!important}
  #lg-what-is .whatis-stats > .lg-con{padding:20px 18px}
  #lg-what-is .whatis-stats .lg-w-title{white-space:nowrap!important;font-size:clamp(28px,7vw,36px)!important}
  #lg-what-is .whatis-stats > .lg-con p,#lg-what-is .whatis-stats > .lg-con .lg-w-text-editor{font-size:13px;line-height:1.4}
  #lg-what-is .mini-stat.full{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px}
  #lg-what-is .mini-stat.full .k{font-size:16px}
  #lg-what-is .mini-stat.full .flavor{font-size:12px;padding:5px 12px}
}

/* v1.7.18 — flavors widget spans 2 cols on mobile */
@media(max-width:768px){
  #lg-what-is .whatis-stats > .lg-w-html{grid-column:1/-1!important}
}

/* v1.7.19 — prevent overflow on narrow mobile */
@media(max-width:768px){
  #lg-what-is .whatis-stats .lg-w-title{font-size:clamp(20px,5.2vw,26px)!important;white-space:normal!important;word-break:keep-all;overflow-wrap:break-word}
  #lg-what-is .whatis-stats > .lg-con{padding:18px 14px;min-width:0;overflow:hidden}
}

/* v1.7.20 — mobile font hammer (beats post-2812.css) */
@media(max-width:768px){
  body #lg-what-is .whatis-stats .lg-stat-number .lg-w-title,
  body #lg-what-is .whatis-stats .lg-w-heading .lg-w-title,
  body #lg-what-is .whatis-stats h1.lg-w-title,
  body #lg-what-is .whatis-stats h2.lg-w-title,
  body #lg-what-is .whatis-stats h3.lg-w-title,
  body #lg-what-is .whatis-stats h4.lg-w-title{font-size:24px!important;line-height:1.05!important;white-space:nowrap!important}
}

/* ============================================================
   Ingredients page — mobile fixes (2026-05-10, v1.8.9)
   Applies to EN (14101) + BG (14185). Element IDs identical.
   ============================================================ */

/* Base food-grid (was missing — only mobile column rules existed) */
.food-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* 1. Stats bar 2x2 grid on mobile */
@media (max-width: 767px) {
  .lg-w.lg-w-24de213 > .lg-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 20px 16px !important;
    align-content: center !important;
    justify-content: center !important;
  }
  .lg-w.lg-w-24de213 > .lg-inner > .lg-w {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    min-width: 0 !important;
  }
  .lg-w.lg-w-24de213 .lg-counter-number-wrapper {
    justify-content: center !important;
  }
  body .lg-w.lg-w-24de213 .lg-counter .lg-counter-title {
    text-align: center !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
    font-size: 13px !important;
  }
}

/* 2. Food-comparison cards: 2 cols on mobile (override existing 3-col @768 rule) */
@media (max-width: 767px) {
  .food-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* 3. Food CTA button: full width + wrap on mobile, with breathing room inside dark card */
@media (max-width: 767px) {
  .lg-w.lg-w-fb7d116 {
    padding: 32px 20px !important;
  }
  .food-cta-box .lg-w-button { width: 100%; }
  .food-cta-box .lg-btn-el-wrapper { display: block; width: 100%; }
  .food-cta-box .lg-btn-el {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    padding-inline: 16px !important;
  }
  .food-cta-box .lg-btn-el .lg-btn-el-text {
    white-space: normal !important;
    display: inline-block;
  }
}

/* 4. Ingredients table -> stacked cards on mobile */
table.ing-table { width: 100%; border-collapse: collapse; }
table.ing-table th { text-align: left; font-weight: 700; padding: 12px 16px; border-bottom: 2px solid #0B1D2E; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: #6a6a7a; }
table.ing-table td { padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
table.ing-table td.ing-name { font-weight: 700; color: #0B1D2E; }
table.ing-table tr.ing-total td { background: #0B1D2E; color: #fff; font-weight: 700; }
table.ing-table tr.ing-total td.ing-name,
table.ing-table tr.ing-total td:first-child { background: #0B1D2E; color: #fff; }
@media (max-width: 767px) {
  table.ing-table, table.ing-table tbody { display: block; width: 100%; }
  table.ing-table thead { display: none; }
  table.ing-table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  table.ing-table tr.ing-total {
    background: #0B1D2E;
  }
  table.ing-table tr.ing-total td { background: transparent; color: #fff; }
  table.ing-table td {
    display: block;
    padding: 2px 0 !important;
    border: 0 !important;
    font-size: 15px;
  }
  table.ing-table td.ing-name,
  table.ing-table td:first-child {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  table.ing-table td:nth-of-type(2) {
    color: #1377A0;
    font-weight: 600;
  }
  table.ing-table td:nth-of-type(3) {
    color: #4a4a5a;
  }
}
/* 5. Ingredient stat-badge: smaller on mobile */
@media (max-width: 767px) {
  .lg-stat-badge { padding: 8px 14px !important; }
  body .lg-stat-badge .lg-heading-m .lg-w-title,
  body .lg-stat-badge .lg-heading-m {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  body .lg-stat-badge .lg-body-m .lg-w-title,
  body .lg-stat-badge .lg-body-m {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}
/* end ingredients page mobile fixes */

/* === Mobile nav — disable Rey's per-item text fade-up animation (keep panel slide-in) === */
.rey-mainMenu-mobile { --mm-translate-y: 0 !important; }
.rey-mainMenu-mobile > .menu-item > a span,
.rey-mainMenu-mobile > .menu-item.--is-regular .menu-item > a span,
.rey-mainMenu-mobile > .menu-item.--is-mega-cols .menu-item > a span {
  transition: none !important;
  transform: none !important;
}


/* === LiverGuard benefits page — enable sticky pill nav (override theme's overflow:hidden on .rey-siteWrapper) === */
body.page-id-14095 .rey-siteWrapper,
body.page-id-14184 .rey-siteWrapper { overflow: clip; }

/* === Checkout: pad the "Create an account" row === */
.woocommerce-checkout .form-row.create-account,
.woocommerce-checkout p.create-account,
.woocommerce-checkout .create-account label {
  padding-left:16px;
}

/* === Checkout: bigger Place Order button, tighter side padding === */
@media (max-width:1024px){
  body.woocommerce-checkout #payment {
    padding-left:8px !important;
    padding-right:8px !important;
  }
  body.woocommerce-checkout #place_order {
    font-size:17px !important;
    line-height:1.25 !important;
    padding:18px 28px !important;
    min-height:64px !important;
    letter-spacing:0.01em;
    white-space:normal !important;
    word-break:keep-all;
  }
}

/* === Sticky CTA (.lg-stk) + bottom-nav: swap, don't stack ===
   The Call/Buy bar (.lg-stk) slides in mid-scroll (body.lg-stk-active);
   while active the bottom nav slides out so bottom chrome never doubles.
   150% clears the buy-circle icon that protrudes above the nav. === */
@media (max-width:1024px){
  .hype-bottom-nav { transition: transform .3s ease; }
  body.lg-stk-active .hype-bottom-nav { transform: translateY(150%); }
  body:has(.hype-bottom-nav) #hype-cookie-banner {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

/* === PDP gallery — lock every slide to 1:1, crop tall images from the top === */
/* Reason: regulatory label (BABH) and similar portrait assets are 1654x2339,
   which makes Rey's gallery box auto-stretch and the page jump on slide change.
   We crop to a square showing the readable top of the label; customers click
   to open the PhotoSwipe lightbox for the full image. */
.woocommerce-product-gallery .woocommerce-product-gallery__image{
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  overflow: hidden;
  position: relative;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Also lock the carousel viewport so Rey's JS autoheight can't stretch it */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .__slidesWrapper{
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
/* Subtle hint that the image continues below the crop */
.woocommerce-product-gallery .woocommerce-product-gallery__image::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:has(img[src*="BABH"])::after,
.woocommerce-product-gallery .woocommerce-product-gallery__image:has(img[src*="Label"])::after{
  opacity: 1;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image{
  position: relative;
}


/* ============================================================ */
/* MINI-CART DRAWER FIXES                          2026-07-28   */
/* ============================================================ */

/* A. Drawer must never be wider than the phone.
   rey-core 3.2.0 writes the Panel-Width control's DESKTOP default
   (470px) into every breakpoint, including @media(max-width:767px),
   because that control has no `default_mobile`. That :root value
   overrides side-panel.css's own mobile default of 100vw, so the
   drawer renders 470px wide on a 390px screen and hangs ~80px off
   the left edge, clipping thumbnails, prices and the close button.
   Declared on `body` so it wins over :root by inheritance distance,
   regardless of stylesheet order. No-op on rey-core 3.1.9 (current
   prod); pre-empts the regression on the 3.2.0 update. */
@media (max-width: 767px) {
  body { --header-cart-width: 100vw; }
}

/* B. "Total" row (snippet 57) — the amount actually due after a
   coupon. Rey prints the subtotal and the discount but no final sum. */
.js-rey-cartPanel .minicart-total-row--grand {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.10);
}
.js-rey-cartPanel .minicart-total-row--grand .minicart-total-row-head {
  font-size: 12px; color: #0B1D2E;
}
.js-rey-cartPanel .minicart-total-row--grand .minicart-total-row-content,
.js-rey-cartPanel .minicart-total-row--grand .woocommerce-Price-amount {
  font-family:Manrope,"Manrope Fallback", sans-serif;
  font-size: 24px; font-weight: 800; color: #0B1D2E;
  text-align: right; line-height: 1.15;
}


/* ============================================================ */
/* LG STICKY CTA - universal landing-page module (2026-08-08)   */
/* Layout: call (left) - CTA (middle) - cart (right).            */
/* When a real order button (.lg-buy/.lg-atc) is on screen the   */
/* CTA collapses and the money-back guarantee takes its place,   */
/* leaving the buy form's own button as the only order action.   */
/* !important is required: the LP CSS sets these box properties  */
/* with !important, so plain declarations lose.                  */
/* Tagged by assets/js/lg-sticky-cta.js (class-agnostic).        */
/* ============================================================ */
.lg-stkcta-bar{
	justify-content:space-between !important;
}
.lg-stkcta-call{order:1 !important;}
.lg-stkcta-cta,
.lg-stkcta-note{order:2 !important;}
.lg-stkcta-cart{order:3 !important;}

.lg-stkcta-cta{
	max-width:70vw;
	opacity:1;
	overflow:hidden;
	white-space:nowrap;
	transition:opacity .3s cubic-bezier(.4,0,.2,1),
	           max-width .4s cubic-bezier(.4,0,.2,1),
	           padding .4s cubic-bezier(.4,0,.2,1),
	           margin .4s cubic-bezier(.4,0,.2,1),
	           transform .4s cubic-bezier(.4,0,.2,1);
}
.lg-stkcta-bar.lg-stkcta--yield .lg-stkcta-cta{
	opacity:0;
	max-width:0 !important;
	min-width:0 !important;
	width:0 !important;
	flex:0 0 0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
	margin-left:0 !important;
	margin-right:0 !important;
	border-left-width:0 !important;
	border-right-width:0 !important;
	transform:scale(.92);
	pointer-events:none;
}

/* Money-back guarantee - only while the order button is on screen */
.lg-stkcta-note{
	display:none;
	flex:1 1 auto;
	min-width:0;
	padding:0 8px;
	text-align:center;
	line-height:1.2;
	color:inherit;
	opacity:0;
	transition:opacity .3s cubic-bezier(.4,0,.2,1) .1s;
}
.lg-stkcta-note strong{
	display:block;
	font-size:13px;
	font-weight:700;
}
.lg-stkcta-note small{
	display:block;
	font-size:11px;
	font-weight:500;
	opacity:.7;
}
/* Page-specific extras (e.g. .lp-info) would be crushed and can repeat
   the guarantee - drop them while the guarantee note is showing. */
.lg-stkcta-bar.lg-stkcta--yield .lg-stkcta-extra{display:none !important;}
.lg-stkcta-bar.lg-stkcta--yield .lg-stkcta-note{
	display:block;
	opacity:1;
}
@media (prefers-reduced-motion:reduce){
	.lg-stkcta-cta,.lg-stkcta-note{transition:none;}
}

/* Cookie banner must never cover the sticky bar. Scoped to html.lg-stkcta-on
   so pages without this module keep the banner's own docking behaviour.
   !important is required to beat the inline bottom the banner writes. */
/* The LP's own inline script lifts the bar by the banner height to clear it,
   while this module lifts the banner to clear the bar - each clears the other
   and the whole stack floats off the bottom. This module is the sole owner of
   the bottom stack: pin the bar flush (beats the page's inline bottom) and let
   the banner dock above it. */
html.lg-stkcta-on .lg-stkcta-bar{
	bottom:0 !important;
}
html.lg-stkcta-on #hype-cookie-banner{
	bottom:var(--lg-stkcta-dock,10px) !important;
}

/* --- Unified sticky-bar chrome across all LPs (spec: liverguard-diagnoza) --- */
.lg-stkcta-bar{
	min-height:67px !important;
	padding:8px 12px !important;
	gap:10px !important;
	background:#fff !important;
	box-shadow:0 -6px 20px rgba(11,29,46,.08) !important;
	border-top:1px solid rgba(0,0,0,.06) !important;
	align-items:center !important;
}
/* Page-specific label blocks (.lp-info) never fit at 390px - drop them. */
.lg-stkcta-extra{display:none !important;}
.lg-stkcta-call,
.lg-stkcta-cart{
	width:54px !important;
	min-width:54px !important;
	height:50px !important;
	flex:0 0 54px !important;
	padding:0 !important;
	background:#fff !important;
	border:1px solid rgba(0,0,0,.06) !important;
	border-radius:12px !important;
	box-shadow:none !important;
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
	gap:2px !important;
}
.lg-stkcta-call i,
.lg-stkcta-cart i{font-size:22px !important;line-height:1 !important;}
.lg-stkcta-call svg,
.lg-stkcta-cart svg{width:22px !important;height:22px !important;}
.lg-stkcta-call small,
.lg-stkcta-cart small{
	font-size:10px !important;
	font-weight:700 !important;
	line-height:1 !important;
	color:#4A4A5A !important;
}
.lg-stkcta-cta{
	height:48px !important;
	padding:13px 16px !important;
	font-size:15px !important;
	font-weight:800 !important;
	border-radius:999px !important;
	background:linear-gradient(90deg,#F7941D,#F15A24) !important;
	color:#fff !important;
}

/* ── Anchor landing: clear the fixed header ──────────────────────────────
 * One scroll-padding-top on the scroll container covers every in-page anchor on
 * every page. Before this only blog article headings had an offset, so anchors
 * anywhere else landed underneath the header - the section-nav pills scrolled
 * the heading completely out of sight.
 *
 * Header measures 107px from 1025px up and 95/94px below it; the extra 25px is
 * breathing room. Note per-element scroll-margin-top ADDS to this, so any page
 * override must be expressed relative to it, not as an absolute offset.
 */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 132px);
}

@media (max-width: 1024px) {
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 120px);
	}
}

/*
 * Header height, published as a variable.
 *
 * The section-nav pill rails on the benefits pages need to park directly below
 * the fixed header. They referenced --hype-sticky-top, which snippet 7 used to
 * measure from .rey-siteHeader / header.site-header / #masthead - all three
 * left with the Rey theme, so it published 0 + 0 + 8 = 8px as an inline style
 * on <html> and the rail sat underneath the header.
 */
:root {
	--hype-header-h: 107px;
	--hype-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hype-header-h));
}

@media (max-width: 1024px) {
	:root { --hype-header-h: 95px; }
}

/* ============================================================
   HYPE sale badge — discount percentage, ported from the Rey original.
   WooCommerce core ships .onsale as an olive circle and its selectors are
   specific (.woocommerce ul.products li.product .onsale), so these need
   !important — the same reason the cross-sells rule above uses it.
   ============================================================ */
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale,
.woocommerce div.product span.onsale,
ul.products li.product span.onsale,
span.onsale {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 3 !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
  background: #CF2929 !important;
  background-color: #CF2929 !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
}
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product { position: relative; }

/* The sale badge sits lighter on mobile: two cards share a 390px row, so the
   desktop 12px chip reads heavy against a 174px thumbnail. Matches the size
   the Rey original used at this breakpoint. */
@media (max-width: 767px) {
  .woocommerce span.onsale,
  .woocommerce ul.products li.product span.onsale,
  .woocommerce div.product span.onsale,
  ul.products li.product span.onsale,
  span.onsale {
    top: 8px !important;
    right: 8px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
  }
}

/* ==== HYPE button size unification (managed) ==== */
/* ============================================================
   HYPE — orange button size unification (2026-08-15)
   ------------------------------------------------------------
   Audit before this block: 43 orange buttons across 9 pages
   rendering as 9 DIFFERENT shapes (35 / 40 / 47 / 48 / 52 / 56 /
   58 px tall, in two different typefaces).

   Root causes:
   1. `.lg-buy` (buy-form shortcode) was never in the unified
      button selector list, so it styled itself 16px Inter — and
      the PDP then patched it to 18px Jakarta. Same component,
      two looks.
   2. base-primitives ships `.lg-form .lg-btn-el.lg-size-md
      {min-height:47px}` — one pixel under the system's 48, and
      higher specificity, so it won.
   3. Heights were emergent (padding + line-height), so any font
      change drifted the box: 18px/1.2 + 2x18px padding = 57.6px,
      which is why `.cta.lg` measured 58 instead of its stated 56.

   The fix: ONE 3-step scale, and heights are now DETERMINISTIC —
   vertical padding is 0 and `min-height` sets the box while flex
   centring positions the label. A future font-size change can no
   longer drift the height.

     sm  40px / 14px  — nav chip, consent, .btn-sm
     md  48px / 16px  — default: .cta, .lg-btn-el, form submits
     lg  56px / 18px  — primary purchase: buy form, add-to-cart,
                        checkout, .cta.lg
   ============================================================ */

:root {
  --btn-h-sm: 40px; --btn-fs-sm: 14px; --btn-pad-sm: 0 20px;
  --btn-h-md: 48px; --btn-fs-md: 16px; --btn-pad-md: 0 28px;
  --btn-h-lg: 56px; --btn-fs-lg: 18px; --btn-pad-lg: 0 36px;
}

/* --- base: every orange CTA subscribes, md is the default step --- */
.lg-btn-el,
.cta,
.lg-buy-form .lg-buy.lg-buy,
.single_add_to_cart_button,
.button.alt,
.checkout-button,
.wc-block-components-button,
.rey-btn--primary,
.hype-cart-empty__btn,
.menu-btn-orange > a,
#hype-cookie-accept {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .3px !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--btn-fs-md) !important;
  min-height: var(--btn-h-md) !important;
  padding: var(--btn-pad-md) !important;
}

/* --- sm: compact chrome (nav CTA, cookie accept) + explicit .btn-sm --- */
.menu-btn-orange > a,
#hype-cookie-accept,
.lg-btn-el.btn-sm, .btn-sm .lg-btn-el, .cta.btn-sm {
  font-size: var(--btn-fs-sm) !important;
  min-height: var(--btn-h-sm) !important;
  padding: var(--btn-pad-sm) !important;
}

/* --- md: reclaim the strays that sat at 47px and 52px ---------------
   `.lg-size-sm` is an Elementor size token, not a design decision —
   these are main content CTAs and stay at the md step (48px), which is
   what they already measured. Only the odd 47px md and the 52px
   cart-empty button actually move. */
.lg-btn-el.lg-size-md, .lg-form .lg-btn-el.lg-size-md,
.lg-btn-el.lg-size-sm, .lg-form .lg-btn-el.lg-size-sm,
.hype-cart-empty__btn {
  font-size: var(--btn-fs-md) !important;
  min-height: var(--btn-h-md) !important;
  padding: var(--btn-pad-md) !important;
}

/* --- lg: primary purchase actions -------------------------------- */
.cta.lg, .cta.btn-lg, .lg-btn-el.btn-lg, .btn-lg .lg-btn-el,
.lg-btn-el.lg-size-lg, .lg-form .lg-btn-el.lg-size-lg,
.lg-buy-form .lg-buy.lg-buy,
.single_add_to_cart_button,
.checkout-button {
  font-size: var(--btn-fs-lg) !important;
  min-height: var(--btn-h-lg) !important;
  padding: var(--btn-pad-lg) !important;
}

/* --- deliberate exceptions ----------------------------------------
   The sticky CTA lives in a fixed three-up rail (call | order | cart)
   on narrow screens, so it keeps compact horizontal padding. It still
   takes the md height and the display face, so it reads as the same
   family rather than a different button. */
/* `.lg-stk` is a two-button bar (call | buy) whose buttons are flex siblings
   and stretch to a shared row height (50px, set by the taller one) — that is
   its own internal consistency and is left alone. BOTH must be listed here:
   restyling only the orange one left it in the display face beside an Inter
   sibling, which looked worse than the original. Only typography and box
   metrics are set, so the call button keeps its white/navy outline styling. */
.lg-stkcta-bar .cta.lg-stkcta-cta,
.lg-stk .lg-stk-buy,
.lg-stk .lg-stk-call {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  min-height: var(--btn-h-md) !important;
  padding: 0 18px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* `.btn-link` is a text link, not a button — it opts out of the box. */
.btn-link, .lg-btn-el.btn-link, .cta.btn-link {
  min-height: 0 !important;
  padding: 2px 0 !important;
  font-size: 15px !important;
}

/* Full-width buttons (buy form, checkout) must still fill their column. */
.lg-buy-form .lg-buy.lg-buy,
.checkout-button,
.lg-btn-el[class*="lg-w-full"] {
  width: 100%;
}

/* ==== end button size unification ==== */

/* <<< PHOSPHOR INLINE -- icons fix 2026-08-16 >>> */
/* The standalone phosphor-light.css link is emitted with media="print" by the
   async-CSS optimisation; LiteSpeed's combiner then bakes '@media print{...}'
   around the whole file, so every icon only rendered when printing. Keeping the
   rules here -- inside a stylesheet the combiner does not wrap -- makes icons
   independent of that pipeline. Re-run the generator if the icon set changes. */
































/* <<< CTA FULL-BLEED -- 2026-08-16 >>> */
/* The closing CTA is a shortcode. On most pages it is placed INSIDE the page
   rail (.lg-inner, max 1440px), so its dark gradient stops at the rail edges
   and leaves white bands on wide screens. cta-block.css is generated by
   scripts/gb-port-elementor-css.mjs (do not hand-edit), so the fix lives here:
   paint the full-width section wrapper and let the inner band go transparent.
   Pages that already place the shortcode outside the rail (polzi) match the
   :has() too but their wrapper is already the full-width element, so nothing
   changes there. Without :has() support the page simply looks as it does now. */
.wp-block-group.e-con-top:has(.lg-cta-block){background-image:linear-gradient(170deg,#0B1D2E 0%,#122B42 100%)}
.wp-block-group.e-con-top:has(.lg-cta-block) .lg-cta-block .lg-w.lg-e-e178c94:not(.lg-motion-effects-element-type-background),
.wp-block-group.e-con-top:has(.lg-cta-block) .lg-cta-block .lg-w.lg-e-e178c94 > .lg-motion-effects-container > .lg-motion-effects-layer{background-image:none;background-color:transparent}


/* ============================================================ */
/* LG STICKY COLUMN - restores the pre-Gutenberg sticky column. */
/* .lg-sticky markup survived the block migration but its rule  */
/* did not, so PDP gallery / post sidebar / home offer image    */
/* all scrolled away. align-self:start is required: the parent  */
/* grid/flex stretches the column to full height otherwise and  */
/* position:sticky has nothing to travel in.                    */
/* --lg-sticky-top lets a page add its own sub-nav height.      */
/* ============================================================ */
@media (min-width:1025px){
	.lg-sticky{
		position:sticky;
		align-self:start;
		top:var(--lg-sticky-top,127px);
	}
}


/* --- Footer legal line (trader identity + BABH reg) --- */
.site-legal-line{font-size:12px;line-height:1.55;opacity:.62;text-align:center;margin:10px auto 0;max-width:680px;}
.site-legal-line p{margin:0;font-size:inherit;line-height:inherit;}

/* --- PDP/LP: producer & registration block --- */
.lg-producer__in{text-align:center;max-width:620px;margin-inline:auto;}
.lg-producer__p{margin:0 0 12px;}
.lg-producer__fig{display:block;margin:20px auto 0;max-width:320px;text-decoration:none;}
.lg-producer__fig img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(0,0,0,.10);}
.lg-producer__cap{display:block;margin-top:8px;font-size:13px;line-height:1.45;opacity:.62;}

/* --- Contact: trader / company details card --- */
.lg-trader__card{max-width:520px;margin-inline:auto;text-align:center;padding:24px 20px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff;}
.lg-trader__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(11,29,46,.06);margin-bottom:12px;}
.lg-trader__icon i{font-size:22px;line-height:1;color:#0B1D2E;}
.lg-trader__h{margin:0 0 10px;}
.lg-trader__p{margin:0;line-height:1.7;}
.lg-trader__reg{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.06);font-size:13px;line-height:1.55;opacity:.7;}


/* ===== SHIMMER TEXT - CSS sweep =====
   Replaces a requestAnimationFrame loop that wrote background-position inline
   ~60x a second on every page. That forced a style recalc + repaint every
   frame and blocked the main thread even when the hero was off screen.
   The old loop stepped 0.12% per frame across a 200% track, so at ~60fps one
   full sweep took ~28s. Same speed here, and the browser stops painting it
   when the element is off screen. */
@keyframes hypeShimmerSweep {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}
.hype-shimmer {
  animation: hypeShimmerSweep 28s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .hype-shimmer {
    animation: none !important;
    background-position: 0% center !important;
  }
}


/* ============================================================
   HYPE in-content link colour  (added 2026-08-26, v2)
   Prose links inside content must read as links. Migrated lg-*
   pages had no link rule, so <a> inherited the paragraph colour.
   DESCENDANT selectors on purpose: links are often wrapped in
   <strong>, <em> or <span>, which a child combinator misses.
   Buttons, product cards and the TOC keep their own design.
   Rollback: design-system.css.bak-20260826-links
   ============================================================ */
.lg-content-area p a,
.lg-content-area li a,
.wp-block-post-content p a,
.wp-block-post-content li a {
  color: var(--blue-text, #1A8FBA);
}
.lg-content-area p a:hover,
.lg-content-area li a:hover,
.wp-block-post-content p a:hover,
.wp-block-post-content li a:hover {
  text-decoration: underline;
}
/* components keep their own colour */
.lg-content-area .products a,
.lg-content-area li.product a,
.lg-content-area a.woocommerce-LoopProduct-link,
.lg-content-area [class*="lg-toc"] a,
.wp-block-post-content [class*="lg-toc"] a,
.lg-content-area [class*="hype-toc"] a,
.wp-block-post-content [class*="hype-toc"] a,
.lg-content-area [class*="elementor-toc"] a,
.wp-block-post-content [class*="elementor-toc"] a,
.lg-content-area .wp-block-button a,
.wp-block-post-content .wp-block-button a,
.lg-content-area p a[class*="button"],
.lg-content-area p a[class*="btn"],
.lg-content-area li a[class*="button"],
.lg-content-area li a[class*="btn"] {
  color: inherit;
}


/* --- WCAG AA contrast overrides (gb-a11y-contrast.mjs) --- */
/* Buy-form + one-off elements whose colours arrive from snippets or inline
 * markup rather than the theme stylesheets. Same hues, moved to >=4.5:1. */
.lg-free-ship{color:#A55C06!important}
.lg-b-desc,.lg-b-old{color:#6E6E79!important}
button.lg-pill--malina.active{background:#E6175D!important}
button.lg-atc{color:#B7390C!important}
.lg-e-6c1b24c .lg-w-title,.lg-e-7ea89f6 .lg-w-title{color:#1377A0!important}
/* .lg-eyebrow-blue took its colour from --blue, which also paints borders:
 * pin the text here instead of moving the token. */
.lg-eyebrow-blue .lg-w-title,.lg-eyebrow-blue p,.lg-eyebrow-blue span{color:#1377A0!important}
/* WooCommerce price + small captions inherit greys set outside these files.
 * They were also faded with opacity, which blends the text back toward the
 * page and undoes the colour fix — the muting now lives in the colour itself. */
.woocommerce-Price-amount,.lg-producer__cap,.lg-trader__reg{color:#6E6E79!important;opacity:1!important}
/* Struck-through "was" price: the strikethrough already signals it; the extra
 * 70% fade only cost legibility. */
.price del{opacity:1!important}


/* ============================================
   HYPE - In-content article CTA (2026-08-29)
   --------------------------------------------
   The sidebar CTA panel (.hype-cta-block) is display:none below 1025px, so
   ~85% of article readers never see a call to action at all. This block lives
   in the reading column, so it works at every width.
   Typography comes from lg-heading-s / lg-body-m / lg-body-s and the button
   from the global .cta rule - nothing is hand-written here except layout.
   ============================================ */
.hype-incontent-cta{
  background-image:linear-gradient(170deg,#0B1D2E 0%,#122B42 100%);
  border-radius:var(--radius-card);
  padding:32px 24px;
  margin:40px 0;
  text-align:center;
}
.hype-incontent-cta > * + *{margin-top:14px}
/* The article body sets its own paragraph colour and wins on specificity,
   which rendered this card's copy grey on navy. Same failure mode as the
   in-content link colour fix above. */
.hype-incontent-cta .hype-incontent-cta__title,
.hype-incontent-cta p,
.hype-incontent-cta .lg-body-m,
.hype-incontent-cta .lg-body-m p{color:#fff !important}
.hype-incontent-cta .hype-incontent-cta__title{margin:0}
.hype-incontent-cta .hype-incontent-cta__note,
.hype-incontent-cta .hype-incontent-cta__note.lg-body-s{color:rgba(255,255,255,0.66) !important}
/* Internal Link Juicer auto-links the product name inside this card. Pre-empt it
   by linking the name ourselves (nested links are impossible, so ILJ skips it)
   and keep the anchor readable on the navy background. */
.hype-incontent-cta a:not(.cta){color:#fff !important;text-decoration:underline;text-underline-offset:3px}
.hype-incontent-cta .cta{margin-inline:auto}
@media (max-width:480px){
  .hype-incontent-cta{padding:26px 18px;margin:32px 0}
  .hype-incontent-cta .cta{display:flex !important;width:100%;white-space:normal}
}