/*
Theme Name:        Heartland Bio Labs v2
Theme URI:         https://heartlandbiolabs.com
Description:       Research-supply ecommerce theme for Heartland Bio Labs. WooCommerce compatible, mobile-first. Continues the 2.x line: adds analytical specification fields (CAS, molecular formula, molecular weight, sequence, storage), a per-lot Certificate of Analysis system, corrected category linking, and removal of non-substantiated rating output.
Version:           2.32.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
Author:            Heartland Bio Labs
Author URI:        https://heartlandbiolabs.com
License:           Proprietary
License URI:       https://heartlandbiolabs.com
Text Domain:       heartland-bio-labs
Tags:              e-commerce, woocommerce, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
  /* Brand Colors */
  --hbl-white:       #FFFFFF;
  --hbl-navy:        #0B3C5D;
  --hbl-slate:       #1C2E3A;
  --hbl-green:       #2E8B57;
  --hbl-teal:        #1FA3A3;
  --hbl-teal-dark:   #178b8b;
  --hbl-black:       #111111;
  --hbl-gray:        #6B7280;
  --hbl-border:      #E5E7EB;
  --hbl-bg-soft:     #F5F7FA;
  --hbl-navy-light:  rgba(11,60,93,0.06);

  /* Typography — Apple system font stack for native iOS/macOS feel */
  --hbl-font:        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --hbl-size-xs:     0.75rem;
  --hbl-size-sm:     0.875rem;
  --hbl-size-base:   1rem;
  --hbl-size-lg:     1.125rem;
  --hbl-size-xl:     1.25rem;
  --hbl-size-2xl:    1.625rem;
  --hbl-size-3xl:    2.125rem;
  --hbl-size-4xl:    2.75rem;
  --hbl-size-hero:   3.75rem;

  /* Spacing (8px grid) */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* Layout — Apple-style chunky radii */
  --hbl-container:   1200px;
  --hbl-container-p: var(--s6);
  --hbl-radius-sm:   8px;
  --hbl-radius:      14px;
  --hbl-radius-lg:   22px;
  --hbl-radius-xl:   28px;
  --hbl-radius-pill: 999px;

  /* Shadows — softer, more diffuse (Apple look) */
  --hbl-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05);
  --hbl-shadow:    0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --hbl-shadow-lg: 0 20px 40px -8px rgba(15,23,42,0.10), 0 8px 16px -4px rgba(15,23,42,0.06);
  --hbl-shadow-xl: 0 30px 60px -12px rgba(15,23,42,0.18), 0 14px 24px -8px rgba(15,23,42,0.08);

  /* Transitions — Apple's cubic-bezier for snappy but smooth motion */
  --hbl-transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --hbl-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--hbl-font);
  font-size: var(--hbl-size-base);
  color: var(--hbl-black);
  background-color: var(--hbl-white);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--hbl-navy); text-decoration: none; }
a:hover { color: var(--hbl-teal); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s4);
  z-index: 9999;
  background: var(--hbl-navy);
  color: #fff;
  padding: var(--s2) var(--s4);
  border-radius: var(--hbl-radius-sm);
  font-size: var(--hbl-size-sm);
  transition: top var(--hbl-transition);
}
.skip-link:focus { top: var(--s2); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--hbl-navy);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}
h1 { font-size: var(--hbl-size-4xl); letter-spacing: -0.03em; }
h2 { font-size: var(--hbl-size-3xl); letter-spacing: -0.028em; }
h3 { font-size: var(--hbl-size-2xl); }
h4 { font-size: var(--hbl-size-xl);  font-weight: 600; }
h5 { font-size: var(--hbl-size-lg);  font-weight: 600; }
h6 { font-size: var(--hbl-size-base); font-weight: 600; }

p { margin-bottom: var(--s4); }
p:last-child { margin-bottom: 0; }

.text-sm    { font-size: var(--hbl-size-sm); }
.text-xs    { font-size: var(--hbl-size-xs); }
.text-gray  { color: var(--hbl-gray); }
.text-navy  { color: var(--hbl-navy); }
.text-teal  { color: var(--hbl-teal); }
.text-green { color: var(--hbl-green); }
.text-white { color: #fff; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
  max-width: var(--hbl-container);
  margin: 0 auto;
  padding: 0 var(--hbl-container-p);
}

.section      { padding: var(--s16) 0; }
.section-sm   { padding: var(--s10) 0; }
.section-lg   { padding: var(--s24) 0; }
.section-soft { background-color: var(--hbl-bg-soft); }
.section-navy {
  background-color: var(--hbl-navy);
  color: #fff;
}
.section-navy h2,
.section-navy h3 { color: #fff; }
.section-slate {
  background-color: var(--hbl-slate);
  color: #fff;
}
.section-slate h2,
.section-slate h3 { color: #fff; }

.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s2); }
.gap-4 { gap: var(--s4); }
.gap-6 { gap: var(--s6); }

.text-center { text-align: center; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-size: var(--hbl-size-base);
  font-weight: 600;
  padding: 0.875rem 2rem;
  min-height: 48px;
  border-radius: var(--hbl-radius-pill);
  border: 1.5px solid transparent;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background-color var(--hbl-transition), color var(--hbl-transition), border-color var(--hbl-transition), transform var(--hbl-transition), box-shadow var(--hbl-transition);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible { outline: 3px solid rgba(31,163,163,0.4); outline-offset: 3px; }

.btn-primary {
  background-color: var(--hbl-teal);
  color: #fff;
  border-color: var(--hbl-teal);
  box-shadow: 0 1px 3px rgba(31,163,163,0.30), 0 4px 12px rgba(31,163,163,0.18);
}
.btn-primary:hover {
  background-color: var(--hbl-teal-dark);
  border-color: var(--hbl-teal-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(31,163,163,0.32), 0 10px 20px rgba(31,163,163,0.22);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background-color: rgba(11,60,93,0.04);
  color: var(--hbl-navy);
  border-color: rgba(11,60,93,0.18);
}
.btn-secondary:hover {
  background-color: var(--hbl-navy);
  color: #fff;
  border-color: var(--hbl-navy);
  transform: translateY(-1px);
  box-shadow: var(--hbl-shadow);
}
.btn-secondary:active { transform: translateY(0); }

.btn-ghost {
  background: none;
  border: none;
  color: var(--hbl-teal);
  font-weight: 600;
  padding: 0;
  font-size: var(--hbl-size-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--hbl-transition), color var(--hbl-transition);
}
.btn-ghost:hover { color: var(--hbl-teal-dark); gap: 8px; }

.btn-sm {
  font-size: var(--hbl-size-sm);
  padding: 0.625rem 1.25rem;
  min-height: 40px;
}

.btn-lg {
  font-size: var(--hbl-size-lg);
  padding: 1.125rem 2.25rem;
  min-height: 56px;
}

.btn-full { width: 100%; }

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--hbl-radius-pill);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.badge-purity {
  background-color: rgba(46,139,87,0.10);
  color: var(--hbl-green);
  border: 1px solid rgba(46,139,87,0.22);
}
.badge-research {
  background-color: rgba(28,46,58,0.06);
  color: var(--hbl-slate);
  border: 1px solid rgba(28,46,58,0.14);
}
.badge-navy {
  background-color: rgba(11,60,93,0.08);
  color: var(--hbl-navy);
  border: 1px solid rgba(11,60,93,0.16);
}

/* ==========================================================================
   SECTION MODIFIERS (BEM modifier style used by templates)
   ========================================================================== */

.section--soft  { background-color: var(--hbl-bg-soft); }
.section--navy  { background-color: var(--hbl-navy); color: #fff; }
.section--navy  h2, .section--navy h3  { color: #fff; }
.section--slate { background-color: var(--hbl-slate); color: #fff; }
.section--slate h2, .section--slate h3 { color: #fff; }

/* Grid columns (template uses grid-cols-N) */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Badge: research-only (template uses this name) */
.badge-research-only {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--hbl-radius-pill);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: rgba(28,46,58,0.06);
  color: var(--hbl-slate);
  border: 1px solid rgba(28,46,58,0.14);
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

.text-secondary { color: var(--hbl-gray); font-size: var(--hbl-size-sm); }
.text-disclaimer {
  font-size: var(--hbl-size-xs);
  color: var(--hbl-gray);
  line-height: 1.75;
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */

.disclaimer-banner {
  background: var(--hbl-slate);
  color: rgba(255,255,255,0.88);
  padding: 8px var(--s6);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background-color var(--hbl-transition), border-color var(--hbl-transition), box-shadow var(--hbl-transition), transform var(--hbl-transition);
  will-change: transform;
}
.site-header--scrolled {
  background-color: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.site-header--hidden   { transform: translateY(-100%); }

/* BEM inner wrapper */
.site-header__inner,
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: var(--s6);
}

/* Logo — full symbol + wordmark lockup, properly sized for legibility everywhere */
.site-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; min-height: 44px; }
.site-logo img,
.site-logo__img {
  height: 44px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .site-logo img,
  .site-logo__img { height: 38px; max-width: 220px; }
  .site-header__inner,
  .header-inner { height: auto; min-height: 64px; padding: 8px 0; }
}
@media (max-width: 480px) {
  .site-logo img,
  .site-logo__img { height: 34px; max-width: 190px; }
}
/* Mobile drawer header — give the dark-bg logo room too */
.mobile-nav__header .site-logo img,
.mobile-nav__header .site-logo__img { height: 38px; max-width: 200px; }
.site-logo__text,
.site-logo-text {
  font-size: var(--hbl-size-xl);
  font-weight: 700;
  color: var(--hbl-navy);
  letter-spacing: -0.02em;
}

/* Primary nav */
.primary-nav { display: flex; align-items: center; }
.primary-nav__menu,
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
  list-style: none;
}
.primary-nav__menu a,
.site-nav a {
  font-size: var(--hbl-size-sm);
  font-weight: 500;
  color: var(--hbl-black);
  padding: var(--s2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--hbl-transition), border-color var(--hbl-transition);
  text-decoration: none;
}
.primary-nav__menu a:hover,
.primary-nav__menu a.current-menu-item,
.site-nav a:hover,
.site-nav a.current-menu-item {
  color: var(--hbl-navy);
  border-bottom-color: var(--hbl-teal);
}

/* Dropdown */
.menu-item-has-children { position: relative; }
.menu-item-has-children .sub-menu {
  position: absolute;
  top: calc(100% + var(--s2));
  left: 0;
  min-width: 220px;
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  box-shadow: var(--hbl-shadow-lg);
  padding: var(--s2) 0;
  display: none;
  z-index: 200;
  list-style: none;
}
.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu { display: block; }
.menu-item-has-children .sub-menu a {
  display: block;
  padding: var(--s2) var(--s4);
  font-size: var(--hbl-size-sm);
  color: var(--hbl-black);
  border-bottom: none;
}
.menu-item-has-children .sub-menu a:hover { background-color: var(--hbl-bg-soft); color: var(--hbl-navy); }

/* Header utilities */
.header-utils { display: flex; align-items: center; gap: var(--s3); }

.header-utils__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--hbl-navy);
  padding: var(--s2);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--hbl-radius-sm);
  transition: background-color var(--hbl-transition);
}
.header-utils__search-btn:hover { background-color: var(--hbl-bg-soft); }

.header-utils__cart,
.header-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hbl-navy);
  padding: var(--s2);
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  border-radius: var(--hbl-radius-sm);
  transition: background-color var(--hbl-transition);
}
.header-utils__cart:hover { background-color: var(--hbl-bg-soft); color: var(--hbl-navy); }

.cart-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  background: var(--hbl-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Mobile menu toggle */
.mobile-menu-toggle,
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--s2);
  min-width: 44px;
  min-height: 44px;
  color: var(--hbl-navy);
  cursor: pointer;
}
.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--hbl-navy);
  border-radius: 2px;
  transition: transform var(--hbl-transition), opacity var(--hbl-transition);
}

/* Search drawer */
.search-drawer {
  max-height: 0;
  overflow: hidden;
  background: var(--hbl-bg-soft);
  border-top: 1px solid var(--hbl-border);
  transition: max-height 300ms ease, padding var(--hbl-transition);
}
.search-drawer--open { max-height: 100px; padding: var(--s4) 0; }
.search-drawer .search-form {
  display: flex;
  gap: var(--s2);
}
.search-drawer .search-field {
  flex: 1;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  font-size: var(--hbl-size-sm);
  font-family: inherit;
}
.search-drawer .search-field:focus {
  outline: none;
  border-color: var(--hbl-teal);
  box-shadow: 0 0 0 3px rgba(31,163,163,0.15);
}
.search-drawer .search-submit {
  padding: var(--s3) var(--s5);
  background: var(--hbl-navy);
  color: #fff;
  border: none;
  border-radius: var(--hbl-radius);
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--hbl-transition);
}
.search-drawer .search-submit:hover { background: var(--hbl-teal); }

/* Mobile nav overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
}
.mobile-nav-overlay--visible { display: block; }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 90vw);
  height: 100%;
  background: var(--hbl-navy);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms ease;
  overflow-y: auto;
}
.mobile-nav--open,
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.mobile-nav__header .site-logo__text,
.mobile-nav__header .site-logo-text { color: #fff; font-size: var(--hbl-size-lg); }
.mobile-nav__header .site-logo img { filter: brightness(0) invert(1); }

.mobile-nav__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  padding: var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hbl-radius-sm);
  transition: color var(--hbl-transition);
}
.mobile-nav__close:hover { color: #fff; }

.mobile-nav__body { flex: 1; padding: var(--s4) 0; }

.mobile-nav__menu { list-style: none; }
.mobile-nav__menu .menu-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-nav__menu .menu-item > a {
  display: block;
  color: rgba(255,255,255,0.9);
  font-size: var(--hbl-size-base);
  font-weight: 500;
  padding: var(--s3) var(--s5);
  text-decoration: none;
  transition: color var(--hbl-transition), padding-left var(--hbl-transition);
}
.mobile-nav__menu .menu-item > a:hover { color: #fff; padding-left: calc(var(--s5) + 4px); }
.mobile-nav__menu .menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mobile-nav__menu .menu-item-has-children > a { flex: 1; }
.mobile-nav__sub-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  transition: transform var(--hbl-transition);
}
.mobile-nav__sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mobile-nav__menu .sub-menu,
.mobile-nav__sub-menu {
  display: none;
  width: 100%;
  background: rgba(0,0,0,0.2);
  list-style: none;
  padding: var(--s2) 0;
}
.mobile-nav__menu .sub-menu--open,
.mobile-nav__sub-menu--open { display: block; }
.mobile-nav__menu .sub-menu a { padding-left: calc(var(--s5) + var(--s4)); font-size: var(--hbl-size-sm); }

.mobile-nav__cart-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: rgba(255,255,255,0.8);
  font-size: var(--hbl-size-sm);
  font-weight: 500;
  padding: var(--s3) var(--s5);
  margin: var(--s2) var(--s4);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--hbl-radius);
  text-decoration: none;
  transition: background-color var(--hbl-transition);
}
.mobile-nav__cart-link:hover { background-color: rgba(255,255,255,0.1); color: #fff; }

.mobile-nav__footer {
  padding: var(--s4) var(--s5);
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.mobile-nav__footer .text-disclaimer { color: rgba(255,255,255,0.4); }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */

.trust-bar {
  background-color: #fff;
  border-bottom: 1px solid var(--hbl-border);
  padding: var(--s6) 0;
}
.trust-bar__list,
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
  list-style: none;
}
.trust-bar__item,
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--hbl-size-sm);
  font-weight: 500;
  color: var(--hbl-slate);
  flex: 1;
  min-width: 180px;
  justify-content: center;
}
.trust-bar__item div { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.trust-bar__item strong { font-size: var(--hbl-size-sm); color: var(--hbl-navy); font-weight: 600; letter-spacing: -0.01em; }
.trust-bar__item span { font-size: 0.75rem; color: var(--hbl-gray); }
.trust-bar__icon,
.trust-item svg {
  width: 24px; height: 24px;
  color: var(--hbl-teal);
  flex-shrink: 0;
  stroke-width: 1.75;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, var(--hbl-navy) 0%, var(--hbl-slate) 100%);
  color: #fff;
  padding: var(--s24) 0 var(--s20);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(31,163,163,0.18) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(46,139,87,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
}

/* BEM inner */
.hero__inner,
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}

.hero__content { }

.hero__eyebrow,
.hero-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s5);
  padding: 6px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--hbl-radius-pill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: rgba(255,255,255,0.92);
}

.hero__headline,
.hero h1 {
  color: #fff;
  font-size: var(--hbl-size-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: var(--s5);
}
.hero__headline-accent { color: var(--hbl-teal); }
.hero h1 span { color: var(--hbl-teal); }

.hero__subheadline,
.hero-sub {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: var(--s8);
  line-height: 1.5;
  max-width: 480px;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.hero__actions,
.hero-ctas {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}
.hero__actions .btn-secondary,
.hero-ctas .btn-secondary {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hero__actions .btn-secondary:hover,
.hero-ctas .btn-secondary:hover {
  background-color: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}

.hero__disclaimer {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 16px;
  margin-bottom: 0;
}

.hero__visual,
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__image,
.hero-image img {
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.40)) drop-shadow(0 10px 20px rgba(31,163,163,0.15));
  border-radius: var(--hbl-radius-xl);
}

/* ==========================================================================
   CATEGORY CARDS
   ========================================================================== */

.category-cards,
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }

.category-card {
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s6);
  overflow: hidden;
  transition: box-shadow var(--hbl-transition), transform var(--hbl-transition), border-color var(--hbl-transition);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: relative;
}
.category-card:hover {
  box-shadow: var(--hbl-shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(31,163,163,0.30);
}

.category-card__icon,
.category-card-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, rgba(31,163,163,0.10) 0%, rgba(11,60,93,0.08) 100%);
  border-radius: var(--hbl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s2);
  flex-shrink: 0;
  transition: transform var(--hbl-transition);
}
.category-card:hover .category-card__icon { transform: scale(1.06); }
.category-card__icon svg,
.category-card-icon svg { color: var(--hbl-teal); stroke-width: 1.75; }

.category-card__name,
.category-card-header h3 {
  font-size: var(--hbl-size-lg);
  font-weight: 600;
  color: var(--hbl-navy);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.category-card__desc,
.category-card-compounds {
  font-size: var(--hbl-size-sm);
  color: var(--hbl-gray);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.category-card__link,
.category-card-link {
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  color: var(--hbl-teal);
  margin-top: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--hbl-transition);
}
.category-card:hover .category-card__link { gap: 8px; }

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

/* WooCommerce default grid reset */
ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); margin: 0; padding: 0; }
ul.products li.product { padding: 0; margin: 0; float: none; }

.product-card {
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--hbl-transition), transform var(--hbl-transition), border-color var(--hbl-transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--hbl-shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(11,60,93,0.16);
}
/* No image zoom on hover — cards lift only, image stays put. */

/* BEM image */
.product-card__image-link { display: block; }
.product-card__image,
.product-card-image {
  aspect-ratio: 1 / 1;
  background-color: var(--hbl-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}
.product-card__image img,
.product-card-image img { width: 100%; height: 100%; object-fit: cover; }

.product-card__image--placeholder,
.product-card-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  color: var(--hbl-gray);
  font-size: var(--hbl-size-sm);
  text-align: center;
  padding: var(--s8);
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--hbl-bg-soft);
}
.product-card__image--placeholder svg,
.product-card-image-placeholder svg { width: 40px; height: 40px; opacity: 0.2; }

/* BEM body */
.product-card__body,
.product-card-body {
  padding: var(--s4) var(--s5) var(--s5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.product-card__purity { margin-bottom: var(--s1); }

.product-card__name,
.product-card-name {
  font-size: var(--hbl-size-lg);
  font-weight: 600;
  color: var(--hbl-navy);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--hbl-teal); }

.product-card__descriptor,
.product-card-descriptor {
  font-size: var(--hbl-size-sm);
  color: var(--hbl-gray);
  line-height: 1.5;
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__research-badge { margin-top: var(--s1); }

.product-card__price,
.product-card-price {
  font-size: var(--hbl-size-xl);
  font-weight: 700;
  color: var(--hbl-black);
  letter-spacing: -0.025em;
  margin-top: var(--s2);
}
/* WooCommerce price inside cards */
.product-card .woocommerce-Price-amount { font-size: var(--hbl-size-xl); font-weight: 700; letter-spacing: -0.025em; }

.product-card__actions,
.product-card-footer {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--hbl-border);
}
.product-card__cta {
  flex: 1;
  text-align: center;
  min-height: 42px;
  padding: 0.625rem 1rem;
  font-size: var(--hbl-size-sm);
}
.product-card__coa-link {
  font-size: var(--hbl-size-xs);
  font-weight: 600;
  color: var(--hbl-gray);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--hbl-radius-sm);
  transition: background-color var(--hbl-transition), color var(--hbl-transition);
}
.product-card__coa-link:hover { background-color: var(--hbl-bg-soft); color: var(--hbl-navy); }

/* ==========================================================================
   SECTION HEADERS (shared pattern across homepage sections)
   ========================================================================== */

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--s10);
}
.section-header h2 { margin-bottom: var(--s3); }
.section-header__sub {
  font-size: var(--hbl-size-lg);
  color: var(--hbl-gray);
  margin: 0;
  line-height: 1.6;
}
.section-header--light h2,
.section-header--light .section-header__sub { color: rgba(255,255,255,0.9); }
.section-header--light .section-header__sub { color: rgba(255,255,255,0.65); }

.section-footer-cta {
  text-align: center;
  margin-top: var(--s10);
}

/* ==========================================================================
   SECTION: QUALITY / ANALYTICAL VERIFICATION
   ========================================================================== */

.quality-section { }
.quality-grid,
.quality-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

/* BEM quality cards (homepage three-step process) */
.quality-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s10) var(--s6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background-color var(--hbl-transition), border-color var(--hbl-transition), transform var(--hbl-transition);
}
.quality-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(31,163,163,0.30);
  transform: translateY(-2px);
}
.quality-card__step {
  font-size: var(--hbl-size-2xl);
  font-weight: 700;
  color: var(--hbl-teal);
  line-height: 1;
  margin-bottom: var(--s4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.quality-card__title {
  font-size: var(--hbl-size-xl);
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--s3);
  letter-spacing: -0.02em;
}
.quality-card p {
  font-size: var(--hbl-size-sm);
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
  margin: 0;
}
.quality-cta { text-align: center; margin-top: var(--s10); }

/* Legacy quality list (two-col layout) */
.quality-list { list-style: none; margin: var(--s6) 0; }
.quality-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hbl-border);
  font-size: var(--hbl-size-sm);
}
.quality-list li:last-child { border-bottom: none; }
.quality-list-icon { width: 16px; height: 16px; color: var(--hbl-green); flex-shrink: 0; margin-top: 2px; }

/* ==========================================================================
   SECTION: WHY CHOOSE US
   ========================================================================== */

.why-us-grid,
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

.why-us-card,
.why-item {
  padding: var(--s8) var(--s6);
  background: var(--hbl-white);
  border-radius: var(--hbl-radius-lg);
  border: 1px solid var(--hbl-border);
  transition: box-shadow var(--hbl-transition), transform var(--hbl-transition);
}
.why-us-card:hover,
.why-item:hover {
  box-shadow: var(--hbl-shadow);
  transform: translateY(-2px);
}

.why-us-card__icon,
.why-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(31,163,163,0.10) 0%, rgba(11,60,93,0.06) 100%);
  border-radius: var(--hbl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s5);
}
.why-us-card__icon svg,
.why-icon svg { width: 24px; height: 24px; color: var(--hbl-teal); stroke-width: 1.75; }
.why-us-card h3,
.why-item h4 {
  font-size: var(--hbl-size-lg);
  font-weight: 600;
  color: var(--hbl-navy);
  margin-bottom: var(--s3);
  letter-spacing: -0.02em;
}
.why-us-card p,
.why-item p { font-size: var(--hbl-size-sm); color: var(--hbl-gray); margin: 0; line-height: 1.6; }

/* ==========================================================================
   SECTION: RESEARCH-ONLY POSITIONING
   ========================================================================== */

.research-only-section { }

.research-only-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: start;
}

.research-only-section__content h2 { margin-bottom: var(--s4); }
.research-only-section__content p { font-size: var(--hbl-size-base); line-height: 1.75; margin-bottom: var(--s4); }
.research-only-section__content a { color: var(--hbl-teal); }
.research-only-section__badge { margin-bottom: var(--s4); display: block; }

.research-only-section__checklist { }
.research-only-section__checklist h3 {
  font-size: var(--hbl-size-base);
  font-weight: 700;
  margin-bottom: var(--s4);
  color: var(--hbl-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--hbl-size-xs);
}

/* Checklist components */
.checklist { list-style: none; display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s6); }
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--hbl-size-sm);
  padding: var(--s2) var(--s3);
  border-radius: var(--hbl-radius-sm);
}
.checklist--yes li {
  background: rgba(46,139,87,0.07);
  color: var(--hbl-black);
}
.checklist--yes li::before {
  content: '\2713';
  color: var(--hbl-green);
  font-weight: 700;
  flex-shrink: 0;
}
.checklist--no li {
  background: rgba(28,46,58,0.05);
  color: var(--hbl-gray);
}
.checklist--no li::before {
  content: '\2715';
  color: var(--hbl-gray);
  font-weight: 700;
  flex-shrink: 0;
}

/* Old research-only flat styles */
.research-only-list {
  display: flex;
  justify-content: center;
  gap: var(--s6);
  flex-wrap: wrap;
  margin: var(--s6) 0 var(--s8);
  font-size: var(--hbl-size-sm);
  color: rgba(255,255,255,0.7);
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq-list,
.accordion { max-width: 780px; margin: 0 auto; }

/* BEM accordion classes */
.accordion__item,
.faq-item { border-bottom: 1px solid var(--hbl-border); }
.accordion__item:first-child,
.faq-item:first-child { border-top: 1px solid var(--hbl-border); }

.accordion__question,
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--s5) 0;
  font-size: var(--hbl-size-base);
  font-weight: 600;
  color: var(--hbl-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  cursor: pointer;
  transition: color var(--hbl-transition);
}
.accordion__question:hover,
.faq-question:hover { color: var(--hbl-teal); }
.accordion__question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--hbl-teal);
  line-height: 1;
  transition: transform 200ms ease;
  font-weight: 300;
  display: inline-block;
}
.accordion__question[aria-expanded="true"]::after {
  content: '+';
  transform: rotate(45deg);
}

.accordion__answer,
.faq-answer {
  font-size: var(--hbl-size-base);
  color: var(--hbl-black);
  line-height: 1.75;
  padding-bottom: var(--s5);
}
.accordion__answer[hidden] { display: none; }
.faq-answer { display: none; }
.faq-answer.is-open { display: block; }

.faq-preview__cta { text-align: center; margin-top: var(--s8); }

/* FAQ preview homepage section */
.faq-preview { max-width: 780px; margin: 0 auto; }

/* ==========================================================================
   CATALOG CTA / EMAIL CAPTURE SECTION
   ========================================================================== */

.catalog-cta-section { }
.catalog-cta-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: center;
}
.catalog-cta-section__content h2 { color: #fff; margin-bottom: var(--s3); }
.catalog-cta-section__content p { color: rgba(255,255,255,0.7); margin: 0; line-height: 1.7; }
.catalog-cta-section__form { }

.email-capture-form,
.email-capture { }
.email-capture-form,
.email-capture-form form { display: flex; gap: var(--s2); flex-wrap: wrap; }
.email-capture-form__input,
.email-capture-input {
  flex: 1;
  min-width: 220px;
  padding: var(--s3) var(--s4);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--hbl-radius);
  font-size: var(--hbl-size-sm);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-family: inherit;
}
.email-capture-form__input::placeholder,
.email-capture-input::placeholder { color: rgba(255,255,255,0.45); }
.email-capture-form__input:focus,
.email-capture-input:focus {
  outline: none;
  border-color: var(--hbl-teal);
  background: rgba(255,255,255,0.15);
}
.email-capture-form__btn { white-space: nowrap; }
.email-capture-note {
  font-size: var(--hbl-size-xs);
  color: rgba(255,255,255,0.45);
  margin-top: var(--s2);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb-nav,
.breadcrumb-wrap {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hbl-border);
  background: var(--hbl-bg-soft);
  margin-bottom: 0;
}
.breadcrumb-nav .container { }
.breadcrumbs,
.woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--hbl-size-xs);
  color: var(--hbl-gray);
  flex-wrap: wrap;
  padding: var(--s3) 0;
}
.breadcrumbs a,
.woocommerce-breadcrumb a { color: var(--hbl-gray); text-decoration: none; }
.breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover { color: var(--hbl-navy); }
.breadcrumbs .sep { color: var(--hbl-border); }
.breadcrumbs .current { color: var(--hbl-black); font-weight: 500; }

/* ==========================================================================
   DISCLAIMER BANNERS & BLOCKS
   ========================================================================== */

.disclaimer-block {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s5);
  font-size: var(--hbl-size-xs);
  color: var(--hbl-gray);
  line-height: 1.75;
}
.disclaimer-block strong { color: var(--hbl-slate); }
.disclaimer-block__heading {
  display: block;
  font-size: var(--hbl-size-sm);
  font-weight: 700;
  color: var(--hbl-navy);
  margin-bottom: var(--s3);
}
.disclaimer-block a { color: var(--hbl-teal); text-decoration: underline; }

/* ==========================================================================
   PAGE TEMPLATES (page.php, archive.php, index.php)
   ========================================================================== */

.page-header {
  padding: var(--s10) 0 var(--s8);
  background: var(--hbl-bg-soft);
  border-bottom: 1px solid var(--hbl-border);
  margin-bottom: var(--s10);
}
.page-header__title { margin-bottom: var(--s2); }
.page-header__desc { color: var(--hbl-gray); max-width: 680px; font-size: var(--hbl-size-lg); margin: 0; }

.page-content { padding: var(--s12) 0; }
.page-content__inner { max-width: 780px; }
.page-content__inner h2 { margin-top: var(--s8); margin-bottom: var(--s4); }
.page-content__inner h3 { margin-top: var(--s6); margin-bottom: var(--s3); }
.page-content__inner p { line-height: 1.75; }
.page-content__inner ul, .page-content__inner ol { padding-left: var(--s5); margin-bottom: var(--s4); }
.page-content__inner li { margin-bottom: var(--s2); line-height: 1.6; }

.not-found, .catalog-empty {
  text-align: center;
  padding: var(--s20) var(--s6);
  color: var(--hbl-gray);
}
.not-found h1, .not-found h2,
.catalog-empty h2 { color: var(--hbl-navy); margin-bottom: var(--s4); }
.not-found svg, .catalog-empty svg { margin: 0 auto var(--s6); color: var(--hbl-gray); opacity: 0.3; }

/* ==========================================================================
   PRODUCT PAGE (SINGLE PRODUCT) — BEM
   ========================================================================== */

.single-product-main { padding: var(--s10) 0; }

.single-product-main__grid,
.product-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
  align-items: start;
}

/* Gallery column — scrolls naturally with the page (no sticky) */
.single-product-main__gallery,
.product-gallery { position: static; }

/* WooCommerce product images override */
.woocommerce div.product div.images { float: none; width: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child a img {
  border-radius: var(--hbl-radius-lg);
  border: 1px solid var(--hbl-border);
}

/* Product image column fallback */
.product-gallery-main {
  aspect-ratio: 1 / 1;
  background: var(--hbl-bg-soft);
  border-radius: var(--hbl-radius-lg);
  border: 1px solid var(--hbl-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--hbl-gray);
  width: 100%;
  height: 100%;
}
.product-gallery-placeholder svg { width: 64px; height: 64px; opacity: 0.15; }

/* Purchase column */
.single-product-main__purchase,
.product-purchase { }

.single-product__research-badge { margin-bottom: var(--s4); }

.single-product__title,
.product-title {
  font-size: var(--hbl-size-4xl);
  color: var(--hbl-navy);
  margin-bottom: var(--s4);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.single-product__meta-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.single-product__sku,
.single-product__lot { font-size: var(--hbl-size-xs); color: var(--hbl-gray); }
.single-product__purity { }

.single-product__short-desc {
  font-size: var(--hbl-size-base);
  color: var(--hbl-gray);
  line-height: 1.7;
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hbl-border);
}

.single-product__price,
.product-price {
  font-size: var(--hbl-size-4xl);
  font-weight: 700;
  color: var(--hbl-black);
  margin-bottom: var(--s6);
  letter-spacing: -0.035em;
  line-height: 1;
}

.single-product__add-to-cart { margin-bottom: var(--s5); }

/* COA block on single product */
.coa-block,
.single-product__coa-block {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
}
.coa-block__icon { color: var(--hbl-navy); flex-shrink: 0; }
.coa-block__label {
  display: block;
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  color: var(--hbl-navy);
}
.coa-block__lot { font-size: var(--hbl-size-xs); color: var(--hbl-gray); }
.coa-block__lot a { color: var(--hbl-teal); }
.coa-block__download { margin-left: auto; flex-shrink: 0; }

.single-product__disclaimer { margin-top: var(--s5); }

/* Tabs section */
.single-product-tabs-section { border-top: 1px solid var(--hbl-border); padding: var(--s2) 0; }

/* Related products */
.single-product-related { }
.related-heading { margin-bottom: var(--s8); }

/* Variant selector */
.variant-label {
  display: block;
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  color: var(--hbl-navy);
  margin-bottom: var(--s3);
}
.variant-pills { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.variant-pill {
  padding: var(--s2) var(--s4);
  border: 2px solid var(--hbl-border);
  border-radius: var(--hbl-radius-pill);
  font-size: var(--hbl-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--hbl-transition), background-color var(--hbl-transition), color var(--hbl-transition);
  background: var(--hbl-white);
  color: var(--hbl-black);
}
.variant-pill:hover { border-color: var(--hbl-navy); }
.variant-pill.selected,
.variant-pill--selected {
  background-color: var(--hbl-teal);
  border-color: var(--hbl-teal);
  color: #fff;
}

/* Quantity stepper — proper bottom spacing so Add to Cart doesn't touch it */
.quantity {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
/* WC variation form — vertical stack with breathing room */
.single-product__add-to-cart form.cart,
.single-product__add-to-cart .woocommerce-variation-add-to-cart,
form.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  align-items: stretch;
}
.single-product__add-to-cart .quantity,
form.variations_form .quantity {
  margin-bottom: var(--s2);
}
@media (max-width: 480px) {
  .single-product__add-to-cart .quantity,
  form.variations_form .quantity { margin-bottom: var(--s3); }
}
.qty-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  font-size: var(--hbl-size-lg);
  color: var(--hbl-navy);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--hbl-transition);
}
.qty-btn:hover { background: var(--hbl-border); }
.woocommerce .quantity input[type="number"] { width: 60px; text-align: center; }

/* WooCommerce button override */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background-color: var(--hbl-teal) !important;
  color: #fff !important;
  border-radius: var(--hbl-radius-pill) !important;
  font-size: var(--hbl-size-lg) !important;
  font-weight: 600 !important;
  padding: 1.125rem 2.25rem !important;
  min-height: 56px !important;
  width: 100% !important;
  border: none !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 12px rgba(31,163,163,0.22), 0 1px 3px rgba(31,163,163,0.30) !important;
  transition: background-color var(--hbl-transition), transform var(--hbl-transition), box-shadow var(--hbl-transition) !important;
  cursor: pointer !important;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--hbl-teal-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(31,163,163,0.26), 0 4px 8px rgba(31,163,163,0.32) !important;
}
.woocommerce .single_add_to_cart_button:active,
.woocommerce button.button.alt:active { transform: translateY(0) !important; }

.coa-link-block {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--hbl-size-sm);
  color: var(--hbl-green);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: var(--s4);
}
.coa-link-block svg { width: 14px; height: 14px; flex-shrink: 0; }

.product-trust-strip {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) 0;
  border-top: 1px solid var(--hbl-border);
  border-bottom: 1px solid var(--hbl-border);
  margin-bottom: var(--s5);
}
.product-trust-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--hbl-size-xs);
  color: var(--hbl-gray);
  font-weight: 500;
}
.product-trust-item svg { width: 13px; height: 13px; color: var(--hbl-green); flex-shrink: 0; }

/* ==========================================================================
   PRODUCT TABS
   ========================================================================== */

.product-tabs { border-top: 1px solid var(--hbl-border); }
.tabs-nav {
  display: flex;
  border-bottom: 2px solid var(--hbl-border);
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: var(--s4) var(--s5);
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  color: var(--hbl-gray);
  cursor: pointer;
  position: relative;
  transition: color var(--hbl-transition);
  white-space: nowrap;
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--hbl-teal);
  transform: scaleX(0);
  transition: transform var(--hbl-transition);
}
.tab-btn:hover { color: var(--hbl-navy); }
.tab-btn.active { color: var(--hbl-navy); }
.tab-btn.active::after { transform: scaleX(1); }

.tab-panel { display: none; padding: var(--s8) 0; }
.tab-panel.active { display: block; }
.tab-panel h4 { margin-bottom: var(--s4); }
.tab-panel p { font-size: var(--hbl-size-base); line-height: 1.75; color: var(--hbl-black); }
.tab-panel ul {
  list-style: disc;
  padding-left: var(--s5);
  margin-bottom: var(--s4);
}
.tab-panel ul li { margin-bottom: var(--s2); font-size: var(--hbl-size-base); line-height: 1.6; }

/* Specs table in tab */
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr:nth-child(even) td { background-color: var(--hbl-bg-soft); }
.specs-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hbl-border);
  font-size: var(--hbl-size-sm);
  vertical-align: top;
}
.specs-table td:first-child {
  font-weight: 600;
  color: var(--hbl-navy);
  width: 38%;
  min-width: 140px;
}

/* ==========================================================================
   COA SECTION
   ========================================================================== */

.coa-section {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s8);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  align-items: center;
  margin: var(--s10) 0;
}
.coa-icon {
  width: 60px; height: 60px;
  background: var(--hbl-navy-light);
  border-radius: var(--hbl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coa-icon svg { width: 28px; height: 28px; color: var(--hbl-navy); }
.coa-text h4 { margin-bottom: var(--s2); }
.coa-text p { font-size: var(--hbl-size-sm); color: var(--hbl-gray); margin: 0; }

/* ==========================================================================
   STICKY ADD TO CART (MOBILE)
   ========================================================================== */

.sticky-atc {
  display: none;
  position: fixed;
  bottom: 12px; left: 12px; right: 12px;
  background: rgba(28,46,58,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--hbl-radius-lg);
  border: 1px solid rgba(255,255,255,0.10);
  z-index: 500;
  box-shadow: 0 20px 50px rgba(0,0,0,0.30), 0 8px 20px rgba(0,0,0,0.18);
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
/* JS-toggled: shown on mobile when purchase block out of view */
.sticky-atc--visible { display: flex; }

.sticky-atc__info,
.sticky-atc-info { overflow: hidden; }

.sticky-atc__name,
.sticky-atc-name {
  display: block;
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-atc__price,
.sticky-atc-price { display: block; font-size: var(--hbl-size-xs); color: rgba(255,255,255,0.7); }

.sticky-atc__btn,
.sticky-atc-btn {
  background: var(--hbl-teal);
  color: #fff;
  border: none;
  padding: var(--s3) var(--s6);
  border-radius: var(--hbl-radius-pill);
  font-weight: 600;
  font-size: var(--hbl-size-sm);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  min-height: 44px;
  transition: background-color var(--hbl-transition), transform var(--hbl-transition);
}
.sticky-atc__btn:hover,
.sticky-atc-btn:hover { background-color: var(--hbl-teal-dark); transform: translateY(-1px); }

/* ==========================================================================
   CATALOG / ARCHIVE PAGE — BEM
   ========================================================================== */

.catalog-page { padding: var(--s8) 0 var(--s16); }

.catalog-page-header {
  background: var(--hbl-bg-soft);
  border-bottom: 1px solid var(--hbl-border);
  padding: var(--s10) 0 var(--s6);
}
.catalog-page-header__title { margin-bottom: var(--s2); }
.catalog-page-header__desc { color: var(--hbl-gray); max-width: 680px; font-size: var(--hbl-size-lg); margin-bottom: var(--s6); }

/* Category filter pills */
.category-filter-nav { margin-top: var(--s2); }
.category-filter-nav__list,
.category-filter {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  list-style: none;
}
.category-filter-nav__pill,
.category-filter-btn {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-pill);
  font-size: var(--hbl-size-sm);
  font-weight: 500;
  color: var(--hbl-black);
  background: var(--hbl-white);
  cursor: pointer;
  transition: border-color var(--hbl-transition), background-color var(--hbl-transition), color var(--hbl-transition);
  text-decoration: none;
}
.category-filter-nav__pill:hover,
.category-filter-btn:hover { border-color: var(--hbl-navy); color: var(--hbl-navy); }
.category-filter-nav__pill--active,
.category-filter-nav__pill[aria-current="page"],
.category-filter-btn.active {
  background: var(--hbl-navy);
  border-color: var(--hbl-navy);
  color: #fff;
}

/* Pill labels: show full on desktop, swap to short on mobile (in @media block below) */
.category-filter-nav__label--full { display: inline; }
.category-filter-nav__label--short { display: none; }

/* Catalog toolbar — desktop default, compact mobile via media query below */
.catalog-toolbar,
.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) 0 var(--s3);
  border-bottom: 1px solid var(--hbl-border);
  margin-bottom: var(--s5);
}
.catalog-toolbar__results,
.archive-result-count,
.woocommerce-result-count { font-size: var(--hbl-size-sm); color: var(--hbl-gray); margin: 0; }
.catalog-toolbar__sort select,
.archive-sort select,
.woocommerce-ordering select {
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--hbl-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hbl-navy);
  background: var(--hbl-white);
  cursor: pointer;
  font-family: inherit;
  min-height: 32px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B3C5D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Catalog page header: tight padding so products appear fast */
.catalog-page-header {
  padding: var(--s8) 0 var(--s4);
}
.catalog-page-header__title { margin-bottom: var(--s2); }
.catalog-page-header__desc { margin-bottom: var(--s4); }
.catalog-page { padding-top: var(--s4); }

/* MOBILE: remove "Showing X of Y results", compress sort to icon-style button */
@media (max-width: 720px) {
  .catalog-toolbar,
  .archive-toolbar {
    padding: 8px 0;
    margin-bottom: var(--s3);
    border-bottom: none;
    justify-content: flex-end;
  }
  /* Hide result-count entirely on mobile (per spec) */
  .catalog-toolbar__results,
  .archive-result-count,
  .woocommerce-result-count { display: none !important; }

  /* Sort dropdown becomes a tiny right-aligned icon-button */
  .catalog-toolbar__sort,
  .archive-sort,
  .woocommerce-ordering {
    margin: 0 0 0 auto;
  }
  .catalog-toolbar__sort select,
  .archive-sort select,
  .woocommerce-ordering select {
    padding: 6px 26px 6px 32px;
    font-size: 12px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B3C5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M7 12h10M11 18h2'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230B3C5D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 10px center, right 8px center;
    background-size: 14px 14px, 10px 10px;
    min-height: 36px;
    color: var(--hbl-navy);
    border-color: rgba(11,60,93,0.18);
  }

  /* Catalog header tighter on mobile */
  .catalog-page-header {
    padding: 16px 0 8px;
  }
  .catalog-page-header__desc {
    font-size: 13.5px;
    margin-bottom: var(--s3);
  }
  .catalog-page {
    padding: 6px 0 var(--s10);
  }
}

/* Catalog disclaimer */
.catalog-disclaimer { padding: var(--s8) 0; }
.catalog-pagination { padding-top: var(--s8); }

/* WooCommerce pagination */
.woocommerce-pagination { margin-top: var(--s10); text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: var(--s2); }
.woocommerce-pagination li a,
.woocommerce-pagination li span {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  font-size: var(--hbl-size-sm);
}
.woocommerce-pagination li.active span {
  background: var(--hbl-navy);
  border-color: var(--hbl-navy);
  color: #fff;
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.woocommerce-checkout h3 { color: var(--hbl-navy); font-size: var(--hbl-size-xl); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--hbl-size-sm);
  font-family: inherit;
  width: 100%;
  transition: border-color var(--hbl-transition);
}
.woocommerce form .form-row input.input-text:focus {
  outline: none;
  border-color: var(--hbl-teal);
  box-shadow: 0 0 0 3px rgba(31,163,163,0.15);
}

/* Research use checkbox */
.research-use-confirmation {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s5);
  margin-bottom: var(--s6);
}
.research-use-confirmation label {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  font-size: var(--hbl-size-sm);
  line-height: 1.6;
  color: var(--hbl-black);
}
.research-use-confirmation input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hbl-border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--hbl-teal);
}

/* Payment button */
#place_order,
.woocommerce #payment #place_order {
  background-color: var(--hbl-teal) !important;
  color: #fff !important;
  border-radius: var(--hbl-radius) !important;
  font-size: var(--hbl-size-lg) !important;
  font-weight: 600 !important;
  padding: var(--s4) var(--s6) !important;
  width: 100% !important;
  border: none !important;
  font-family: inherit !important;
}
#place_order:hover { background-color: var(--hbl-teal-dark) !important; }

/* ==========================================================================
   FOOTER — BEM + legacy aliases
   ========================================================================== */

.site-footer {
  background-color: var(--hbl-slate);
  color: rgba(255,255,255,0.75);
}

/* Footer main grid area */
.footer-main { padding: var(--s16) 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1.3fr 1fr;
  gap: var(--s8);
  padding-bottom: var(--s10);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Footer signup column */
.footer-signup-pitch { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.footer-signup-pitch strong { color: var(--hbl-teal); }
.footer-signup-form { display: flex; flex-direction: column; gap: 8px; }
.footer-signup-form input {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
}
.footer-signup-form input::placeholder { color: rgba(255,255,255,0.4); }
.footer-signup-form input:focus { outline: none; border-color: var(--hbl-teal); background: rgba(255,255,255,0.10); }
.footer-signup-form button {
  background: var(--hbl-teal);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--hbl-transition);
}
.footer-signup-form button:hover:not(:disabled) { background: var(--hbl-teal-dark); }
.footer-signup-form button:disabled { background: var(--hbl-green); cursor: default; }
.footer-signup-fineprint { color: rgba(255,255,255,0.4); font-size: 11px; margin: 8px 0 14px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: background var(--hbl-transition), color var(--hbl-transition);
}
.footer-social a:hover { background: var(--hbl-teal); color: #fff; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: auto; }
  .footer-col--signup { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--signup { grid-column: 1 / -1; }
}

/* Brand column */
.footer-col--brand { }

.footer-logo { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: var(--s4); }
.footer-logo img,
.footer-logo__img { height: 36px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); }

.footer-tagline,
.footer-brand-copy {
  font-size: var(--hbl-size-sm);
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 280px;
  margin-bottom: var(--s3);
}

/* Footer columns */
.footer-col h5,
.footer-col__heading {
  color: #fff;
  font-size: var(--hbl-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
  display: block;
}
.footer-col__heading--spaced { margin-top: var(--s6); }

.footer-nav-list,
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  list-style: none;
  margin-bottom: var(--s4);
}
.footer-col a,
.footer-nav-list a {
  font-size: var(--hbl-size-sm);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color var(--hbl-transition);
}
.footer-col a:hover,
.footer-nav-list a:hover { color: #fff; }

/* Footer trust badges */
.footer-trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s5);
}
.footer-badge {
  font-size: var(--hbl-size-xs);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

/* Footer disclaimer block (full-width, above bottom bar) */
.footer-disclaimer-block {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--s8) 0;
}
.footer-disclaimer-block .disclaimer-block {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
}
.footer-disclaimer-block .disclaimer-block strong { color: rgba(255,255,255,0.7); }

/* Footer bottom bar */
.footer-bottom {
  padding: var(--s5) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
}
.footer-bottom__copy,
.footer-copyright {
  font-size: var(--hbl-size-xs);
  color: rgba(255,255,255,0.35);
}

.footer-legal-nav { }
.footer-legal-nav__list {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  list-style: none;
}
.footer-legal-nav__list a,
.footer-legal-nav a {
  font-size: var(--hbl-size-xs);
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--hbl-transition);
}
.footer-legal-nav__list a:hover,
.footer-legal-nav a:hover { color: rgba(255,255,255,0.7); }

.footer-disclaimer {
  font-size: var(--hbl-size-xs);
  color: rgba(255,255,255,0.4);
  line-height: 1.75;
  max-width: 900px;
}

/* ==========================================================================
   WOOCOMMERCE GLOBAL OVERRIDES
   ========================================================================== */

.woocommerce-notices-wrapper { margin-bottom: var(--s4); }
.woocommerce-message,
.woocommerce-info {
  background: var(--hbl-bg-soft);
  border-left: 4px solid var(--hbl-green);
  padding: var(--s4) var(--s5);
  font-size: var(--hbl-size-sm);
  border-radius: 0 var(--hbl-radius-sm) var(--hbl-radius-sm) 0;
}
.woocommerce-error {
  background: #fff5f5;
  border-left: 4px solid #c53030;
  padding: var(--s4) var(--s5);
  font-size: var(--hbl-size-sm);
}
.woocommerce .star-rating { color: var(--hbl-green); }
.woocommerce-product-rating { display: none; } /* Hide ratings for clean presentation */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--hbl-border); }

/* Remove WooCommerce default sale badge */
.onsale { display: none !important; }

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s4); }
.mb-6 { margin-bottom: var(--s6); }
.mb-8 { margin-bottom: var(--s8); }

/* ==========================================================================
   RESPONSIVE — Mobile-first breakpoints, BEM + legacy aliases
   ========================================================================== */

/* ---- 1024px: tablets, smaller desktops ---- */
@media (max-width: 1024px) {
  :root { --hbl-size-hero: 2.5rem; }

  /* Hero */
  .hero__inner,
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero__actions,
  .hero-ctas { justify-content: center; }
  .hero__visual,
  .hero-image { display: none; }

  /* Category cards: 2 cols */
  .category-cards,
  .category-grid { grid-template-columns: repeat(2, 1fr); }

  /* Why us: 2 cols */
  .why-us-grid,
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  /* Quality: 2 cols */
  .quality-grid,
  .quality-cards-grid { grid-template-columns: repeat(2, 1fr); }

  /* Product grids: 3 cols */
  ul.products { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }

  /* Research-only: stack */
  .research-only-section__grid { grid-template-columns: 1fr; gap: var(--s8); }

  /* Catalog CTA: stack */
  .catalog-cta-section__inner { grid-template-columns: 1fr; gap: var(--s8); }

  /* Footer: 2 cols */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}

/* ---- 768px: mobile ---- */
@media (max-width: 768px) {
  :root {
    --hbl-size-hero: 2rem;
    --hbl-size-4xl: 1.875rem;
    --hbl-size-3xl: 1.5rem;
    --hbl-container-p: var(--s4);
  }

  /* Header */
  .primary-nav,
  .site-nav { display: none; }
  .mobile-menu-toggle,
  .menu-toggle { display: flex; }
  .site-header__inner,
  .header-inner { height: 60px; }

  /* Trust bar: condensed */
  .trust-bar__list,
  .trust-bar-inner { gap: var(--s4); justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 var(--s4); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .trust-bar__list::-webkit-scrollbar { display: none; }
  .trust-bar { padding: var(--s3) 0; }

  /* Hero */
  .hero { padding: var(--s16) 0; }

  /* Single product: stack columns */
  .single-product-main__grid,
  .product-main-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .single-product-main__gallery,
  .product-gallery { position: static; }
  .single-product__title,
  .product-title { font-size: var(--hbl-size-3xl); }

  /* Sticky ATC: mobile only — shown by JS .sticky-atc--visible */
  /* (display:none default; JS adds sticky-atc--visible to show) */

  /* Quality: 1 col */
  .quality-grid,
  .quality-cards-grid { grid-template-columns: 1fr; }

  /* COA section */
  .coa-section { grid-template-columns: 1fr; text-align: center; }

  /* Why us: 2 cols (readable on tablet/mobile) */
  .why-us-grid,
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  /* Category cards: 1 col */
  .category-cards,
  .category-grid { grid-template-columns: repeat(2, 1fr); }

  /* Product grids: 2 cols */
  ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 2 cols */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }

  /* Email form: stack */
  .email-capture-form,
  .email-capture-form form { flex-direction: column; }
  .email-capture-form__input,
  .email-capture-input { min-width: 0; }
  .email-capture-form__btn { width: 100%; }

  /* Catalog toolbar: stack */
  .catalog-toolbar,
  .archive-toolbar { flex-direction: column; align-items: flex-start; }

  /* Research only */
  .research-only-list { flex-direction: column; gap: var(--s2); }

  /* Headings */
  h2 { font-size: var(--hbl-size-2xl); }
}

/* ---- 480px: small phones ----
   Product grids stay at 2 cols (matches competitor mobile layouts).
   Card content tightens to remain legible at narrow widths. */
@media (max-width: 480px) {
  /* Product grids: stay at 2 cols on mobile */
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-cols-4,
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Container padding tighter so cards have more width */
  :root { --hbl-container-p: 12px; }

  /* Product card: tighter at 2-col mobile */
  .product-card,
  ul.products li.product {
    border-radius: 14px;
  }
  .product-card__body,
  .product-card-body {
    padding: 10px 10px 12px;
    gap: 6px;
  }
  .product-card__name,
  .product-card-name {
    font-size: 0.9375rem;
    line-height: 1.2;
  }
  .product-card__descriptor,
  .product-card-descriptor {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
  }
  .product-card__price,
  .product-card-price,
  .product-card .woocommerce-Price-amount {
    font-size: 1rem;
    margin-top: 2px;
  }
  .product-card__purity,
  .badge-purity {
    font-size: 0.625rem;
    padding: 2px 6px;
  }
  .product-card__actions,
  .product-card-footer {
    padding-top: 8px;
    margin-top: 6px;
    gap: 6px;
    flex-direction: column;
    align-items: stretch;
  }
  .product-card__cta {
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.8125rem;
  }
  .product-card__coa-link {
    width: 100%;
    text-align: center;
    font-size: 0.6875rem;
    padding: 4px 6px;
  }
  /* Hide research-use badge on mobile cards (too noisy at 2-col) */
  .product-card__research-badge { display: none; }
  /* Hide COA quick-link on mobile cards (lives on PDP already) */
  .product-card__coa-link { display: none; }

  /* Coming Soon badge: smaller on mobile cards */
  .product-card--coming-soon::before,
  li.product.product-card--coming-soon::before {
    top: 8px; left: 8px;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    padding: 4px 8px;
  }

  /* Category cards: 2 cols on mobile too */
  .category-cards,
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card { padding: var(--s4); }
  .category-card__name { font-size: 0.9375rem; }
  .category-card__desc { font-size: 0.75rem; line-height: 1.4; }
  .category-card__icon { width: 40px; height: 40px; margin-bottom: 4px; }
  .category-card__icon svg { width: 22px; height: 22px; }

  /* Footer: 1 col */
  .footer-grid { grid-template-columns: 1fr; }

  /* Trust bar: show only 3 items */
  .trust-bar__item:nth-child(n+4),
  .trust-item:nth-child(n+4) { display: none; }

  /* COA block: stack */
  .coa-block { flex-direction: column; align-items: flex-start; }
  .coa-block__download { width: 100%; }

  /* Category filter pills: horizontal scroll, single row, swipeable */
  .category-filter-nav { margin-top: var(--s3); }
  .category-filter-nav__list,
  .category-filter {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 12px 8px;
    margin: 0 -12px;
    scroll-snap-type: x mandatory;
  }
  .category-filter-nav__list::-webkit-scrollbar,
  .category-filter::-webkit-scrollbar { display: none; }
  .category-filter-nav__list li,
  .category-filter li { flex-shrink: 0; scroll-snap-align: start; }
  .category-filter-nav__pill,
  .category-filter-btn {
    font-size: 0.8125rem;
    padding: 7px 14px;
    white-space: nowrap;
    border-radius: 999px;
    line-height: 1.1;
    min-height: 32px;
  }
  /* Mobile pill nav: hide full label, show the short menu label instead */
  .category-filter-nav__label--full { display: none; }
  .category-filter-nav__label--short { display: inline; }

  /* Section padding: tighter on small phones */
  .section { padding: var(--s8) 0; }
  .section-header { margin-bottom: var(--s6); }
  .hero { padding: var(--s10) 0 var(--s8); }
  .hero__headline,
  .hero h1 { font-size: 1.875rem; line-height: 1.1; }
  .hero__subheadline,
  .hero-sub { font-size: 1rem; }
  .hero__actions { gap: 8px; }
  .hero__actions .btn-primary,
  .hero__actions .btn-secondary,
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    font-size: 0.9375rem;
  }

  /* Page header: tighter */
  .page-header,
  .hbl-page-header { padding: var(--s8) 0 var(--s5); }
  .hbl-page-title { font-size: 1.875rem; }
  .hbl-page .hbl-lead { font-size: 1rem; }
  .hbl-page-h2 { font-size: 1.5rem; }
  .hbl-page-body { padding: var(--s6) 0 var(--s10); }

  /* Section header h2 smaller */
  .section-header h2 { font-size: 1.5rem; }
  .section-header__sub { font-size: 0.9375rem; }

  /* Single product: tighter */
  .single-product__title,
  .product-title { font-size: 1.625rem; line-height: 1.1; }
  .single-product__price,
  .product-price { font-size: 1.875rem; }

  .sticky-atc {
    padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    bottom: 8px; left: 8px; right: 8px;
  }

  /* Why us: 2 cols on small phones (was 1, now 2 to match competitor density) */
  .why-us-grid,
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .why-us-card { padding: var(--s5) var(--s4); }
  .why-us-card h3 { font-size: 0.9375rem; }
  .why-us-card p { font-size: 0.8125rem; line-height: 1.5; }
  .why-us-card__icon { width: 40px; height: 40px; margin-bottom: var(--s3); }
  .why-us-card__icon svg { width: 20px; height: 20px; }

  /* Quality cards: keep 1 col on tiny phones (they have long body text) */
  .quality-grid,
  .quality-cards-grid { grid-template-columns: 1fr; }

  /* Tight up FAQ */
  details.hbl-faq > summary { font-size: 1rem; }
}

/* ---- 380px: very small phones — drop to 1 col only at extreme widths ---- */
@media (max-width: 360px) {
  ul.products,
  .products-grid,
  .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
  .category-cards,
  .category-grid { grid-template-columns: 1fr; }
  .why-us-grid, .why-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBILE NAV SCROLL LOCK
   ========================================================================== */

body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Mobile nav links — 44px touch targets */
.mobile-nav__body a,
.mobile-nav .primary-nav__menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   COA PORTAL PAGE
   ========================================================================== */

.coa-portal { }

.coa-portal__how-it-works { margin-bottom: var(--s12); }

.coa-step {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s6);
}
.coa-step__num {
  font-size: var(--hbl-size-3xl);
  font-weight: 700;
  color: var(--hbl-teal);
  line-height: 1;
  margin-bottom: var(--s3);
}
.coa-step__title { font-size: var(--hbl-size-base); margin-bottom: var(--s2); }
.coa-step p { font-size: var(--hbl-size-sm); color: var(--hbl-gray); margin: 0; line-height: 1.65; }

.coa-portal__search-section {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s8);
  margin-bottom: var(--s10);
}
.coa-portal__search-section h2 { margin-bottom: var(--s6); }

.coa-lookup-form__fields {
  display: flex;
  align-items: flex-end;
  gap: var(--s6);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.coa-lookup-form__field { flex: 1; min-width: 200px; }
.coa-lookup-form__label {
  display: block;
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  color: var(--hbl-navy);
  margin-bottom: var(--s2);
}
.coa-lookup-form__hint {
  display: block;
  font-size: var(--hbl-size-xs);
  font-weight: 400;
  color: var(--hbl-gray);
  margin-top: 2px;
}
.coa-lookup-form__input {
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  font-size: var(--hbl-size-base);
  font-family: inherit;
  background: var(--hbl-white);
  transition: border-color var(--hbl-transition);
}
.coa-lookup-form__input:focus {
  outline: none;
  border-color: var(--hbl-teal);
  box-shadow: 0 0 0 3px rgba(31,163,163,0.15);
}
.coa-lookup-form__divider {
  padding-bottom: var(--s5);
  display: flex;
  align-items: center;
  font-size: var(--hbl-size-sm);
  color: var(--hbl-gray);
  font-weight: 500;
}
.coa-lookup-form__actions { display: flex; align-items: center; gap: var(--s4); }

.coa-lookup-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: var(--hbl-radius);
  padding: var(--s4) var(--s5);
  font-size: var(--hbl-size-sm);
  color: #742a2a;
  margin-bottom: var(--s8);
}
.coa-lookup-error svg { flex-shrink: 0; margin-top: 2px; }

.coa-portal__results { margin-bottom: var(--s10); }
.coa-portal__results-heading { margin-bottom: var(--s6); }

.coa-results-list { display: flex; flex-direction: column; gap: var(--s4); }
.coa-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s5) var(--s6);
  flex-wrap: wrap;
}
.coa-result-card__info { flex: 1; }
.coa-result-card__name { font-size: var(--hbl-size-lg); margin-bottom: var(--s3); }
.coa-result-card__name a { color: var(--hbl-navy); text-decoration: none; }
.coa-result-card__name a:hover { color: var(--hbl-teal); }
.coa-result-card__meta { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.coa-result-card__meta-item { font-size: var(--hbl-size-sm); color: var(--hbl-gray); }
.coa-result-card__action { flex-shrink: 0; }

.coa-portal__info-grid { margin-top: var(--s12); }
.coa-info-box {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s6);
}
.coa-info-box h3 { font-size: var(--hbl-size-base); margin-bottom: var(--s3); }
.coa-info-box p, .coa-info-box li { font-size: var(--hbl-size-sm); color: var(--hbl-gray); line-height: 1.65; }

/* ==========================================================================
   CHECKOUT RESEARCH NOTICE
   ========================================================================== */

.checkout-research-notice {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-left: 4px solid var(--hbl-teal);
  border-radius: var(--hbl-radius);
  margin-bottom: var(--s6);
}
.checkout-research-notice__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
}
.checkout-research-notice__inner svg { color: var(--hbl-teal); flex-shrink: 0; margin-top: 2px; }
.checkout-research-notice__inner p { font-size: var(--hbl-size-sm); color: var(--hbl-black); margin: 0; line-height: 1.6; }
.checkout-research-notice__inner strong { color: var(--hbl-navy); }

/* ==========================================================================
   COA PORTAL RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .coa-lookup-form__fields { flex-direction: column; gap: var(--s4); }
  .coa-lookup-form__divider { padding-bottom: 0; }
  .coa-result-card { flex-direction: column; align-items: flex-start; }
  .coa-result-card__action { width: 100%; }
  .coa-result-card__action .btn-primary { width: 100%; justify-content: center; }
}

/* ==========================================================================
   APPLE-STYLE FINAL POLISH LAYER
   Refines spacing, motion, and conversion-critical UI.
   This block is intentionally last so it overrides earlier declarations.
   ========================================================================== */

/* --- Section rhythm: roomier vertical breathing room (Apple-style) --- */
.section      { padding: var(--s20) 0; }
.section-sm   { padding: var(--s12) 0; }
.section-lg   { padding: 7rem 0; }

/* --- Section header: tighter, more confident, less sub-copy weight --- */
.section-header { margin-bottom: var(--s12); max-width: 640px; }
.section-header h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  letter-spacing: -0.03em;
  font-weight: 700;
}
.section-header__sub {
  font-size: 1.0625rem;
  color: var(--hbl-gray);
  line-height: 1.55;
  margin: 0;
}

/* --- Hero container: tighter line-length on subhead --- */
.hero__inner,
.hero-inner { gap: var(--s16); }

/* --- Inputs: rounded, padded, focus glow --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select,
.search-drawer .search-field {
  border-radius: var(--hbl-radius) !important;
  border: 1px solid var(--hbl-border) !important;
  padding: 0.875rem 1.125rem !important;
  font-family: inherit;
  font-size: var(--hbl-size-base);
  transition: border-color var(--hbl-transition), box-shadow var(--hbl-transition), background-color var(--hbl-transition);
  background-color: #fff;
}
/* 2.24.1 — search inputs that carry a leading magnifier icon need clearance
   past it. The global !important padding above flattened them to 18px, so
   typed text started under the icon (owner bug report: header overlay +
   homepage search). Must also be !important to win against the rule above. */
input#hbl-search-input,
input[type="search"].hbl-search-overlay__input,
input[type="search"].hero__search-input,
form.search-form input[type=search],
.search-form input[type=search] {
  padding: 13px 14px 13px 42px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.search-drawer .search-field:focus {
  outline: none !important;
  border-color: var(--hbl-teal) !important;
  box-shadow: 0 0 0 4px rgba(31,163,163,0.12) !important;
}

/* Search drawer submit becomes a pill */
.search-drawer .search-submit {
  border-radius: var(--hbl-radius-pill);
  padding: 0.625rem 1.5rem;
  min-height: 44px;
}

/* --- Breadcrumb: lighter, less visual weight + proper padding --- */
.breadcrumb-nav,
.breadcrumb-wrap {
  background: transparent;
  border-bottom: none;
  padding: var(--s4) var(--hbl-container-p) 0;
}
.breadcrumb-nav.container { padding-left: var(--hbl-container-p); padding-right: var(--hbl-container-p); }
.breadcrumbs,
.woocommerce-breadcrumb {
  font-size: 0.8125rem;
  padding: var(--s2) 0;
}
@media (max-width: 768px) {
  .breadcrumb-nav,
  .breadcrumb-wrap { padding: var(--s3) 16px 0; }
  .breadcrumb-nav.container { padding-left: 16px; padding-right: 16px; }
  .woocommerce-breadcrumb { font-size: 0.75rem; }
}

/* --- COA block: refined card --- */
.coa-block,
.single-product__coa-block {
  border-radius: var(--hbl-radius);
  background: linear-gradient(135deg, rgba(31,163,163,0.04) 0%, rgba(11,60,93,0.03) 100%);
  border: 1px solid rgba(31,163,163,0.16);
  padding: var(--s4) var(--s5);
}
.coa-block__icon { color: var(--hbl-teal); }
.coa-block__download {
  min-height: 40px;
  padding: 0.5rem 1.25rem;
  font-size: var(--hbl-size-sm);
}

/* --- Hide WooCommerce's "Clear" reset link (we always allow re-picking a variant via pills) --- */
.reset_variations,
.woocommerce a.reset_variations,
.variations + .reset_variations,
.single_variation_wrap .reset_variations {
  display: none !important;
  visibility: hidden !important;
}

/* --- Variant pills: refined --- */
.variant-pill {
  padding: 0.625rem 1.125rem;
  border-radius: var(--hbl-radius-pill);
  border-width: 1.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-height: 40px;
}
.variant-pill:hover {
  border-color: var(--hbl-teal);
  color: var(--hbl-teal);
  background: rgba(31,163,163,0.04);
}
.variant-pill.selected,
.variant-pill--selected {
  background-color: var(--hbl-navy);
  border-color: var(--hbl-navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(11,60,93,0.22);
}
.variant-pill.selected:hover,
.variant-pill--selected:hover {
  background-color: var(--hbl-navy);
  border-color: var(--hbl-navy);
  color: #fff;
}

/* --- Quantity stepper: rounded, larger touch target --- */
.qty-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border-color: var(--hbl-border);
  font-size: var(--hbl-size-xl);
  font-weight: 500;
}
.woocommerce .quantity input[type="number"] {
  width: 64px;
  text-align: center;
  border-radius: 12px !important;
  padding: 0.625rem 0.5rem !important;
}

/* --- Disclaimer banner: subtler, with separator dot --- */
.disclaimer-banner {
  background: #0A1A26;
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
}

/* Top banner — free-shipping anchor + research disclaimer */
.hbl-top-banner {
  background: var(--hbl-navy);
  color: #fff;
}
.hbl-top-banner__inner {
  max-width: var(--hbl-container);
  margin: 0 auto;
  padding: 7px var(--s6);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  line-height: 1.35;
}
.hbl-top-banner__shipping strong { color: var(--hbl-teal); letter-spacing: 0.05em; }
.hbl-top-banner__sep { color: rgba(255,255,255,0.35); }
.hbl-top-banner__disclaimer { color: rgba(255,255,255,0.72); font-size: 11.5px; }
/* Phone in the banner — the always-visible home for the number now that the
   header nav hides its text version below 1280px (2.12.0 nav-crowding fix) */
.hbl-top-banner__phone { color: rgba(255,255,255,0.85); text-decoration: none; white-space: nowrap; }
.hbl-top-banner__phone:hover { color: #fff; }
.hbl-top-banner__phone strong { color: var(--hbl-teal); }
@media (max-width: 900px) {
  .hbl-top-banner__sep--phone,
  .hbl-top-banner__phone { display: none; }
}
@media (max-width: 720px) {
  .hbl-top-banner__inner {
    gap: 0;
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Drop separator + disclaimer on mobile — keeps banner one tight line */
  .hbl-top-banner__sep,
  .hbl-top-banner__disclaimer { display: none; }
  .hbl-top-banner__shipping {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Header phone link — stays as icon-only on mobile for click-to-call (high conversion on PDPs) */
.header-utils__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hbl-navy);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background-color var(--hbl-transition);
}
.header-utils__phone:hover { background: var(--hbl-bg-soft); color: var(--hbl-teal); }
.header-utils__phone-text strong { color: var(--hbl-teal); letter-spacing: -0.01em; margin-right: 4px; }
/* 2.12.0: raised from 900px to 1280px — the White Label nav tab made the menu
   wider, and at ~1030-1280px the phone text collided with the last nav item.
   Below 1280px the header shows the icon only (click-to-call preserved); the
   full number lives in the top banner and the footer. */
@media (max-width: 1280px) { .header-utils__phone-text { display: none; } }
@media (max-width: 480px) {
  /* Keep icon-only — click-to-call still works and trust signal stays visible */
  .header-utils__phone { padding: 8px; min-width: 44px; min-height: 44px; justify-content: center; }
}

/* Header cart with subtotal — visible on mobile too (conversion-critical to see cart value) */
.header-utils__cart-info,
.hbl-header-cart-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--hbl-navy);
  margin-left: 6px;
  letter-spacing: -0.01em;
  display: inline-block;
}
.header-utils__cart-info:empty,
.hbl-header-cart-info:empty { display: none; }
@media (max-width: 480px) {
  /* On tiny phones, subtotal text is tight — show inline only when ≥3 items or > $50 */
  .hbl-header-cart-info { font-size: 11.5px; margin-left: 4px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Cart drawer */
.hbl-cart-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(11,26,38,0.45);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.hbl-cart-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hbl-cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4,0,0.2,1);
  box-shadow: -20px 0 60px rgba(11,26,38,0.18);
}
.hbl-cart-drawer.is-open { transform: translateX(0); }

.hbl-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hbl-border);
  flex-shrink: 0;
}
.hbl-cart-drawer__header strong { font-size: 17px; color: var(--hbl-navy); letter-spacing: -0.02em; }
.hbl-cart-drawer__close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--hbl-gray);
  border-radius: 8px;
  transition: background-color var(--hbl-transition);
}
.hbl-cart-drawer__close:hover { background: var(--hbl-bg-soft); color: var(--hbl-navy); }

.hbl-cart-drawer__body { flex: 1; overflow-y: auto; padding: 0 20px; }

.hbl-cart-shipping-bar { background: var(--hbl-bg-soft); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.hbl-cart-shipping-bar p { margin: 0 0 8px; font-size: 13px; color: var(--hbl-navy); }
.hbl-cart-shipping-bar__track { background: rgba(11,60,93,0.12); height: 8px; border-radius: 999px; overflow: hidden; }
.hbl-cart-shipping-bar__fill { background: linear-gradient(90deg, var(--hbl-teal), var(--hbl-green)); height: 100%; transition: width 300ms ease; }

.hbl-cart-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(11,60,93,0.06);
}
.hbl-cart-line img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background: var(--hbl-bg-soft); }
.hbl-cart-line__info { flex: 1; }
.hbl-cart-line__info strong { display: block; font-size: 14px; color: var(--hbl-navy); margin-bottom: 4px; }
.hbl-cart-line__info span { font-size: 13px; color: var(--hbl-gray); }

.hbl-cart-empty { text-align: center; color: var(--hbl-gray); padding: 40px 0; }

.hbl-cart-drawer__footer {
  border-top: 1px solid var(--hbl-border);
  padding: 16px 20px 20px;
  flex-shrink: 0;
}
.hbl-cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 12px; }
.hbl-cart-drawer__subtotal strong { color: var(--hbl-navy); font-size: 18px; letter-spacing: -0.02em; }
.hbl-cart-drawer__checkout-btn {
  display: block;
  background: var(--hbl-teal);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(31,163,163,0.18);
  transition: background-color var(--hbl-transition), transform var(--hbl-transition);
}
.hbl-cart-drawer__checkout-btn:hover { background: var(--hbl-teal-dark); transform: translateY(-1px); color: #fff; }
.hbl-cart-drawer__view-cart { display: block; text-align: center; color: var(--hbl-gray); font-size: 13px; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; }

body.cart-drawer-open { overflow: hidden; }

/* Exit-intent popup */
.hbl-exit-overlay {
  position: fixed; inset: 0;
  background: rgba(11,26,38,0.55);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: hbl-fade-in 240ms ease;
}
@keyframes hbl-fade-in { from { opacity: 0; } to { opacity: 1; } }
.hbl-exit-modal {
  background: #fff;
  border-radius: 22px;
  padding: 32px 28px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.hbl-exit-modal h3 {
  font-size: 1.5rem;
  color: var(--hbl-navy);
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  line-height: 1.15;
}
.hbl-exit-modal p { color: var(--hbl-gray); font-size: 0.9375rem; line-height: 1.5; margin: 0 0 18px; }
.hbl-exit-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  font-size: 28px; color: var(--hbl-gray);
  cursor: pointer; line-height: 1;
  width: 36px; height: 36px;
  border-radius: 50%;
}
.hbl-exit-close:hover { background: var(--hbl-bg-soft); color: var(--hbl-navy); }
.hbl-exit-form { display: flex; gap: 8px; flex-direction: column; }
.hbl-exit-form input {
  padding: 14px 16px;
  border: 1.5px solid var(--hbl-border);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
}
.hbl-exit-form input:focus { outline: none; border-color: var(--hbl-teal); box-shadow: 0 0 0 4px rgba(31,163,163,0.12); }
.hbl-exit-form button {
  background: var(--hbl-teal);
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(31,163,163,0.22);
  transition: background-color var(--hbl-transition), transform var(--hbl-transition);
}
.hbl-exit-form button:hover { background: var(--hbl-teal-dark); transform: translateY(-1px); }
.hbl-exit-modal small { display: block; color: var(--hbl-gray); font-size: 11px; margin-top: 12px; }

/* --- Category filter pills (catalog page) — bigger touch, more padding --- */
.category-filter-nav__pill,
.category-filter-btn {
  padding: 0.5rem 1.125rem;
  font-weight: 500;
  border-width: 1.5px;
  letter-spacing: -0.005em;
}
.category-filter-nav__pill--active,
.category-filter-btn.active {
  background: var(--hbl-navy);
  box-shadow: 0 2px 8px rgba(11,60,93,0.18);
}

/* --- Catalog CTA section: refined sign-up area --- */
.catalog-cta-section { padding: var(--s24) 0; }
.email-capture-form__input,
.email-capture-input {
  padding: 0.875rem 1.125rem !important;
  border-radius: var(--hbl-radius) !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-size: var(--hbl-size-base) !important;
}
.email-capture-form__input:focus { background: rgba(255,255,255,0.12) !important; border-color: var(--hbl-teal) !important; }

/* --- FAQ accordion: more whitespace, refined toggle --- */
.accordion__item,
.faq-item { border-color: rgba(11,60,93,0.08); }
.accordion__question,
.faq-question {
  padding: var(--s6) var(--s2) var(--s6) 0;
  font-size: var(--hbl-size-lg);
  letter-spacing: -0.015em;
}
.accordion__question::after {
  width: 30px; height: 30px;
  background: var(--hbl-bg-soft);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.accordion__answer,
.faq-answer {
  font-size: var(--hbl-size-base);
  padding-bottom: var(--s6);
  color: var(--hbl-gray);
}

/* --- Footer: refined --- */
.site-footer { background: #0A1A26; }

/* --- Product card image: slightly softer placeholder --- */
.product-card__image,
.product-card-image {
  background-color: #FAFBFC;
}

/* --- Single product gallery: rounded XL image, no hover zoom --- */
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child a img {
  border-radius: var(--hbl-radius-xl);
  border: 1px solid var(--hbl-border);
  background: #FAFBFC;
}
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img { transform: none !important; transition: none !important; }
.woocommerce-product-gallery .zoomImg { display: none !important; }
.woocommerce-product-gallery__trigger { display: none !important; }

/* --- Section--navy heading color override + subtle gradient backgrounds --- */
.section--navy,
.section-navy {
  background: linear-gradient(180deg, var(--hbl-navy) 0%, #082E48 100%);
}
.section--slate,
.section-slate {
  background: linear-gradient(180deg, var(--hbl-slate) 0%, #15242F 100%);
}

/* --- Page header: roomier --- */
.page-header {
  padding: var(--s16) 0 var(--s10);
  background: transparent;
  border-bottom: 1px solid var(--hbl-border);
}
.page-header__title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; }

/* --- Improved focus-visible globally (accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(31,163,163,0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Smaller-screen refinements --- */
@media (max-width: 1024px) {
  .hero__headline,
  .hero h1 { font-size: 2.75rem; }
  .section-header h2 { font-size: 1.875rem; }
}
@media (max-width: 720px) {
  .hero { padding: var(--s16) 0 var(--s12); }
  .hero__inner,
  .hero-inner { grid-template-columns: 1fr; gap: var(--s8); }
  .hero__visual { display: none; }
  .hero__headline,
  .hero h1 { font-size: 2.25rem; letter-spacing: -0.03em; }
  .hero__subheadline,
  .hero-sub { font-size: 1.0625rem; }

  .trust-bar__list { gap: var(--s4); }
  .trust-bar__item { flex: 1 1 45%; min-width: 0; }

  .single-product__title { font-size: 2rem; }
  .single-product__price { font-size: 2.25rem; }
}

/* --- Subtle reveal animation for cards as they scroll into view --- */
@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .category-card,
  .why-us-card,
  .quality-card {
    opacity: 1;
    transition: opacity var(--hbl-transition), transform var(--hbl-transition), box-shadow var(--hbl-transition), border-color var(--hbl-transition);
  }
}

/* --- Selection color: brand teal --- */
::selection { background-color: rgba(31,163,163,0.22); color: var(--hbl-navy); }

/* --- Scrollbar (webkit): subtle, brand-tinted --- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11,60,93,0.18);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(11,60,93,0.32); background-clip: padding-box; }

/* ==========================================================================
   INSTITUTION TRUST STRIP + COMPARISON TABLE
   ========================================================================== */

.hbl-institution-strip {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--hbl-border);
  padding: 18px 0;
  text-align: center;
}
.hbl-institution-strip__text {
  margin: 0;
  color: var(--hbl-gray);
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.hbl-institution-strip__text strong { color: var(--hbl-navy); }

/* Comparison table */
.hbl-comparison-wrap { max-width: 880px; margin: 0 auto; overflow-x: auto; }
.hbl-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--hbl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--hbl-border);
  box-shadow: var(--hbl-shadow);
}
.hbl-comparison-table thead th {
  padding: 18px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  background: var(--hbl-bg-soft);
}
.hbl-comparison-table__us {
  color: var(--hbl-teal);
  letter-spacing: -0.01em;
}
.hbl-comparison-table__them {
  color: var(--hbl-gray);
  font-weight: 500;
}
.hbl-comparison-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  border-top: 1px solid var(--hbl-border);
}
.hbl-comparison-table tbody td:first-child {
  color: var(--hbl-navy);
  font-weight: 500;
}
.hbl-comparison-table .hbl-yes { color: var(--hbl-green); font-weight: 600; }
.hbl-comparison-table .hbl-no  { color: #b91c1c; font-weight: 500; }

@media (max-width: 640px) {
  .hbl-comparison-table thead th,
  .hbl-comparison-table tbody td { padding: 10px 12px; font-size: 12.5px; }
}

/* ==========================================================================
   TOP-5 BESTSELLERS GRID
   Custom responsive grid for the homepage "Top 5 bestsellers" row.
   ========================================================================== */

.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.hbl-top5-grid { gap: var(--s4); }

@media (max-width: 1200px) {
  .grid-cols-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .grid-cols-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   STICKY MOBILE BOTTOM NAV — Home / Shop / Search / Cart / Menu
   Hidden on desktop, fixed-bottom 5-icon nav on phones.
   ========================================================================== */

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(11,60,93,0.08);
  z-index: 400;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
}

.mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hbl-gray);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--hbl-transition);
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:active,
.mobile-bottom-nav__item.is-active {
  color: var(--hbl-teal);
}
.mobile-bottom-nav__item svg {
  stroke-width: 2;
  display: block;
}
.mobile-bottom-nav__item span {
  display: block;
  font-size: 10.5px;
  line-height: 1.1;
  margin-top: 2px;
}

.mobile-bottom-nav__icon-wrap {
  position: relative;
  display: inline-block;
}
.mobile-bottom-nav__badge {
  position: absolute;
  top: -4px; right: -8px;
  background: var(--hbl-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

/* Only show on mobile/small tablets */
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }
  /* Add bottom padding to body so content isn't covered by the sticky bar */
  body { padding-bottom: 68px; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  /* Also lift the existing single-product sticky-atc above the bottom nav */
  .sticky-atc { bottom: 76px !important; }
  /* And lift the catalog "Coming Soon" badge so it doesn't get cut by bottom nav */
}

/* ==========================================================================
   HIDE EMPTY GRID CELLS — prevents blank top-left slot on shop/category grids
   when a product article renders empty or a sibling pseudo-element fires.
   ========================================================================== */

ul.products::before,
ul.products::after,
.products-grid::before,
.products-grid::after,
.grid-cols-4::before,
.grid-cols-4::after,
.grid-cols-3::before,
.grid-cols-3::after,
.grid-cols-2::before,
.grid-cols-2::after { content: none !important; display: none !important; }

ul.products > li:empty,
ul.products > article:empty,
ul.products > .product-card:empty,
.products-grid > li:empty,
.products-grid > article:empty,
.grid > article:empty { display: none !important; }

/* If WC outputs an "empty" wrapper that has only whitespace, kill it */
ul.products > li:not(.product),
ul.products > div:not(.product-card):not(.product) { display: none !important; }

/* ==========================================================================
   WOOCOMMERCE TABS (Overview / Research Context / Specifications / Handling)
   Default WC tab classes — proper horizontal nav + clean panel content
   ========================================================================== */

.wc-tabs-wrapper { margin-top: var(--s10); padding-top: var(--s4); }

ul.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--s8);
  padding: 0;
  border-bottom: 2px solid var(--hbl-border);
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
ul.wc-tabs::-webkit-scrollbar { display: none; }
ul.wc-tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}
ul.wc-tabs li a {
  display: inline-block;
  padding: 14px 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hbl-gray);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  letter-spacing: -0.01em;
  transition: color var(--hbl-transition), border-color var(--hbl-transition);
  white-space: nowrap;
}
ul.wc-tabs li a:hover { color: var(--hbl-navy); }
ul.wc-tabs li.active a {
  color: var(--hbl-navy);
  border-bottom-color: var(--hbl-teal);
}

/* Tab panels — only the active one shows */
.woocommerce-Tabs-panel {
  padding: var(--s6) 0 var(--s10);
}
.woocommerce-Tabs-panel[hidden] { display: none !important; }

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 {
  color: var(--hbl-navy);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: var(--s6) 0 var(--s4);
  line-height: 1.2;
}
.woocommerce-Tabs-panel h2 { font-size: 1.625rem; margin-top: 0; }
.woocommerce-Tabs-panel h3 { font-size: 1.25rem; }
.woocommerce-Tabs-panel h4 { font-size: 1.0625rem; }
.woocommerce-Tabs-panel p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hbl-black);
  margin: 0 0 var(--s4);
}
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
  margin: 0 0 var(--s4) 0;
  padding-left: 1.5rem;
}
.woocommerce-Tabs-panel ul li,
.woocommerce-Tabs-panel ol li {
  margin-bottom: var(--s2);
  line-height: 1.65;
}
.woocommerce-Tabs-panel ul { list-style: disc; }

/* Specifications tab table */
.hbl-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s5) 0 var(--s4);
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  overflow: hidden;
}
.hbl-spec-table tr { border-bottom: 1px solid var(--hbl-border); }
.hbl-spec-table tr:last-child { border-bottom: none; }
.hbl-spec-table th,
.hbl-spec-table td {
  padding: 12px 18px;
  text-align: left;
  font-size: 0.9375rem;
  vertical-align: top;
}
.hbl-spec-table th {
  font-weight: 600;
  color: var(--hbl-navy);
  background: rgba(11,60,93,0.03);
  width: 40%;
  min-width: 140px;
}
.hbl-spec-table td { color: var(--hbl-black); }

.hbl-spec-characteristics { margin-bottom: var(--s6); }
.hbl-spec-characteristics h3:first-child { margin-top: 0; }

@media (max-width: 720px) {
  ul.wc-tabs li a { padding: 12px 16px; font-size: 0.875rem; }
  .woocommerce-Tabs-panel { padding: var(--s5) 0 var(--s8); }
  .woocommerce-Tabs-panel h2 { font-size: 1.375rem; }
  .hbl-spec-table th, .hbl-spec-table td { padding: 10px 14px; font-size: 0.875rem; }
  .hbl-spec-table th { min-width: 100px; }
}

/* ==========================================================================
   SINGLE PRODUCT TRUST STRIP — replaces the old purity pill
   Clean, refined credentials grid with checkmark icons
   ========================================================================== */

.single-product__trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2) var(--s4);
  list-style: none;
  margin: 0 0 var(--s5);
  padding: var(--s4) 0;
  border-top: 1px solid var(--hbl-border);
  border-bottom: 1px solid var(--hbl-border);
}
.single-product__trust-strip .trust-credential {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--hbl-gray);
  line-height: 1.2;
}
.single-product__trust-strip .trust-credential svg {
  color: var(--hbl-green);
  stroke-width: 2.5;
  flex-shrink: 0;
  background: rgba(46,139,87,0.10);
  border-radius: 50%;
  padding: 3px;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
}
.single-product__trust-strip .trust-credential strong {
  color: var(--hbl-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: 3px;
}

/* Meta row now only holds SKU/Lot — make it lighter */
.single-product__meta-row { gap: var(--s4); margin-bottom: var(--s4); }

@media (max-width: 480px) {
  .single-product__trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    padding: 10px 0;
  }
  .single-product__trust-strip .trust-credential { font-size: 0.75rem; }
  .single-product__trust-strip .trust-credential svg { width: 18px; height: 18px; padding: 2px; }
}

/* ==========================================================================
   HBL PAGE TEMPLATES (About, FAQ, Contact, Legal, COA Portal)
   High-quality typography + section rhythm for content pages.
   ========================================================================== */

.hbl-page-header {
  padding: var(--s16) 0 var(--s10);
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--hbl-border);
}
.hbl-page-header .breadcrumbs,
.hbl-page-header .woocommerce-breadcrumb {
  padding: 0 0 var(--s4);
  font-size: 0.8125rem;
}
.hbl-page-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-weight: 700;
  color: var(--hbl-navy);
  margin: 0;
}

.hbl-page-body { padding: var(--s12) 0 var(--s20); }
.hbl-page-body__inner { max-width: 820px; margin: 0 auto; }

/* Inner-page wrapper emitted by bundled .html content */
.hbl-page {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #1f2937;
}

.hbl-page-hero {
  padding: var(--s6) 0 var(--s10);
  border-bottom: 1px solid var(--hbl-border);
  margin-bottom: var(--s10);
}
.hbl-page .hbl-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hbl-teal);
  padding: 5px 12px;
  border: 1px solid rgba(31,163,163,0.25);
  border-radius: 999px;
  background: rgba(31,163,163,0.06);
  margin-bottom: var(--s5);
}
.hbl-page-h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--hbl-navy);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--s5);
}
.hbl-page .hbl-lead {
  font-size: 1.1875rem;
  color: var(--hbl-gray);
  margin: 0;
  max-width: 640px;
  line-height: 1.55;
}

.hbl-page-section {
  padding: var(--s8) 0;
  border-bottom: 1px solid rgba(11,60,93,0.06);
}
.hbl-page-section:last-child { border-bottom: 0; }
.hbl-page-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hbl-navy);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
}
.hbl-page-section h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--hbl-navy);
  margin: var(--s5) 0 var(--s2);
}
.hbl-page-section p { margin: 0 0 var(--s4); }
.hbl-page-section p:last-child { margin-bottom: 0; }
.hbl-page-section ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 var(--s4);
}
.hbl-page-section ul li {
  margin-bottom: var(--s2);
  line-height: 1.6;
}
.hbl-page-section a {
  color: var(--hbl-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.hbl-page-section a:hover {
  color: var(--hbl-teal-dark);
  text-decoration-thickness: 2px;
}

/* Quality 3-step grid (used on About + COA portal) */
.hbl-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin: var(--s5) 0 var(--s2);
}
.hbl-quality-cell {
  background: #fff;
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s6);
  transition: box-shadow var(--hbl-transition), transform var(--hbl-transition);
}
.hbl-quality-cell:hover {
  box-shadow: var(--hbl-shadow);
  transform: translateY(-2px);
}
.hbl-quality-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hbl-teal);
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
  line-height: 1;
}
.hbl-quality-cell h4 {
  font-size: 1.0625rem;
  margin: 0 0 var(--s2);
}
.hbl-quality-cell p {
  font-size: 0.9375rem;
  color: var(--hbl-gray);
  line-height: 1.55;
  margin: 0;
}

/* CTA section variant */
.hbl-page-section--cta {
  background: linear-gradient(135deg, rgba(31,163,163,0.06) 0%, rgba(11,60,93,0.03) 100%);
  border: 1px solid rgba(31,163,163,0.18);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s8);
  margin-top: var(--s6);
}
.hbl-page-section--cta h3 { margin-top: 0; }

/* In-page buttons (used in .hbl-page content) */
.hbl-page .hbl-btn,
.hbl-page-section .hbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  letter-spacing: -0.01em;
  min-height: 44px;
  transition: background-color var(--hbl-transition), border-color var(--hbl-transition), transform var(--hbl-transition), box-shadow var(--hbl-transition);
  margin-right: 8px;
}
.hbl-page .hbl-btn--primary {
  background: var(--hbl-teal);
  color: #fff !important;
  border-color: var(--hbl-teal);
  box-shadow: 0 4px 12px rgba(31,163,163,0.18);
}
.hbl-page .hbl-btn--primary:hover {
  background: var(--hbl-teal-dark);
  border-color: var(--hbl-teal-dark);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff !important;
}
.hbl-page .hbl-btn--secondary {
  background: transparent;
  color: var(--hbl-navy) !important;
  border-color: rgba(11,60,93,0.22);
}
.hbl-page .hbl-btn--secondary:hover {
  background: var(--hbl-navy);
  color: #fff !important;
  border-color: var(--hbl-navy);
  text-decoration: none;
}

/* Contact page two-column grid */
.hbl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s10);
  margin-top: var(--s4);
}
.hbl-contact-info,
.hbl-contact-form-wrap {
  background: #fff;
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s8);
}
.hbl-contact-info h3,
.hbl-contact-form-wrap h3 { margin-top: 0; }
.hbl-contact-item {
  padding: var(--s4) 0;
  border-bottom: 1px solid rgba(11,60,93,0.06);
}
.hbl-contact-item:last-of-type { border-bottom: 0; }
.hbl-contact-item strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hbl-gray);
  margin-bottom: 4px;
}
.hbl-contact-item a {
  color: var(--hbl-navy);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.0625rem;
}
.hbl-contact-item a:hover { color: var(--hbl-teal); }
.hbl-research-note {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--hbl-bg-soft);
  border-left: 3px solid var(--hbl-teal);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--hbl-gray);
  line-height: 1.55;
}

/* FAQ details/summary collapsibles (no JS needed) */
.hbl-faq-section { padding: var(--s6) 0; }
.hbl-faq-section h3 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hbl-teal);
  margin: 0 0 var(--s4);
}
details.hbl-faq {
  border-bottom: 1px solid rgba(11,60,93,0.08);
  padding: var(--s4) 0;
}
details.hbl-faq:last-of-type { border-bottom: 0; }
details.hbl-faq > summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--hbl-navy);
  padding-right: 40px;
  position: relative;
  transition: color var(--hbl-transition);
}
details.hbl-faq > summary::-webkit-details-marker { display: none; }
details.hbl-faq > summary:hover { color: var(--hbl-teal); }
details.hbl-faq > summary::after {
  content: '+';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hbl-bg-soft);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--hbl-teal);
  transition: transform var(--hbl-transition);
}
details.hbl-faq[open] > summary::after {
  content: '+';
  transform: translateY(-50%) rotate(45deg);
}
details.hbl-faq p {
  margin: var(--s3) 0 var(--s2);
  color: var(--hbl-gray);
  font-size: 1rem;
  line-height: 1.7;
}

/* Address block */
.hbl-address-block {
  font-family: var(--hbl-font);
  background: var(--hbl-bg-soft);
  border-left: 3px solid var(--hbl-teal);
  border-radius: 8px;
  padding: var(--s4) var(--s5);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--hbl-black);
  margin: var(--s4) 0;
}

/* Footer contact list (added in v2.6) */
.footer-contact-list { font-style: normal; }
.footer-contact-list li { margin-bottom: var(--s2); }
.footer-contact-list a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-contact-list a:hover { color: var(--hbl-teal); }

/* Responsive */
@media (max-width: 768px) {
  .hbl-quality-grid { grid-template-columns: 1fr; }
  .hbl-contact-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hbl-page-body { padding: var(--s8) 0 var(--s12); }
}


/* ============================================================
   12-SECTION HOMEPAGE — NEW SECTION STYLES (v2.2)
   ============================================================ */

/* --- 4. Social Proof Strip --- */
.hbl-social-proof-strip {
  background: #fff;
  border-bottom: 1px solid var(--hbl-border, #e5e7eb);
  padding: 22px 0;
}
.hbl-social-proof-strip__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.hbl-social-proof-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.hbl-social-proof-strip__num {
  font-family: var(--hbl-font-display, 'Sora', 'Inter', sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--hbl-navy, #0A2A4A);
  letter-spacing: -0.02em;
}
.hbl-social-proof-strip__label {
  font-size: 13px;
  color: var(--hbl-gray, #5b6470);
  font-weight: 500;
}
@media (max-width: 720px) {
  .hbl-social-proof-strip__list { gap: 18px; }
  .hbl-social-proof-strip__num { font-size: 20px; }
  .hbl-social-proof-strip__label { font-size: 11.5px; }
}

/* --- 6. Bundle and Save --- */
.hbl-bundles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hbl-bundle-card {
  background: #fff;
  border: 1px solid var(--hbl-border, #e5e7eb);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hbl-bundle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(10,42,74,0.18);
}
.hbl-bundle-card__tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--hbl-teal, #1AA6A6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.hbl-bundle-card__title {
  font-family: var(--hbl-font-display, 'Sora', 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--hbl-navy, #0A2A4A);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.hbl-bundle-card__desc {
  color: var(--hbl-gray, #5b6470);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.hbl-bundle-card__items {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px solid var(--hbl-border, #e5e7eb);
}
.hbl-bundle-card__items li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hbl-border, #e5e7eb);
  font-size: 14px;
  color: var(--hbl-navy, #0A2A4A);
  font-weight: 500;
  position: relative;
  padding-left: 22px;
}
.hbl-bundle-card__items li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--hbl-green, #16a34a);
  font-weight: 700;
}
.hbl-bundle-card__cta {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 720px) {
  .hbl-bundles__grid { grid-template-columns: 1fr; gap: 16px; }
  .hbl-bundle-card { padding: 22px; }
  .hbl-bundle-card__title { font-size: 19px; }
}

/* --- 7. Category card "Most Popular" tag --- */
.category-card { position: relative; }
.category-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--hbl-teal, #1AA6A6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}

/* --- 8. Verified Every Lot — Sample COA card --- */
.quality-coa-sample {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
}
.quality-coa-sample__thumb {
  filter: blur(1.5px);
  opacity: 0.7;
}
.quality-coa-sample__copy { text-align: left; }
.quality-coa-sample__caption {
  color: #fff;
  font-size: 15px;
  margin: 0 0 10px;
  font-weight: 500;
}
@media (max-width: 600px) {
  .quality-coa-sample { padding: 18px; gap: 16px; }
  .quality-coa-sample__copy { text-align: center; }
}

/* --- 9. Comparison table — green check vs gray dash --- */
.hbl-comparison-table .hbl-dash {
  color: var(--hbl-gray, #5b6470);
  font-weight: 500;
}
.hbl-comparison-table .hbl-dash-mark {
  display: inline-block;
  width: 18px;
  text-align: center;
  color: #9aa3ad;
  font-weight: 700;
  margin-right: 4px;
}
.hbl-comparison-table .hbl-check {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: var(--hbl-green, #16a34a);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}

/* --- 10. Risk Reversals band --- */
.hbl-risk-reversals {
  background: var(--hbl-soft, #f4f6f9);
  padding: 28px 0;
  border-top: 1px solid var(--hbl-border, #e5e7eb);
  border-bottom: 1px solid var(--hbl-border, #e5e7eb);
}
.hbl-risk-reversals__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hbl-risk-reversals__item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hbl-navy, #0A2A4A);
}
.hbl-risk-reversals__item svg {
  flex-shrink: 0;
  color: var(--hbl-teal, #1AA6A6);
}
.hbl-risk-reversals__item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.hbl-risk-reversals__item span {
  display: block;
  font-size: 13.5px;
  color: var(--hbl-gray, #5b6470);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .hbl-risk-reversals__list { grid-template-columns: 1fr; gap: 18px; }
}

/* --- 11. Referral & Loyalty band --- */
.hbl-referral-band {
  background: linear-gradient(135deg, var(--hbl-navy, #0A2A4A) 0%, #0e3961 100%);
  color: #fff;
}
.hbl-referral-band__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
.hbl-referral-band__copy h2 {
  color: #fff;
  font-size: 28px;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.hbl-referral-band__copy p {
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
}
.hbl-referral-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.hbl-referral-band__note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
@media (max-width: 768px) {
  .hbl-referral-band__inner { grid-template-columns: 1fr; gap: 20px; }
  .hbl-referral-band__copy h2 { font-size: 22px; }
}

/* --- 12. Compliance Footer --- */
.hbl-compliance-footer__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hbl-compliance-footer__inner .badge {
  margin-bottom: 14px;
}
.hbl-compliance-footer__inner h2 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.hbl-compliance-footer__inner p {
  color: rgba(255,255,255,0.8);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.hbl-compliance-footer__inner p strong { color: #fff; }
.hbl-compliance-footer__inner a {
  color: var(--hbl-teal, #1AA6A6);
  text-decoration: underline;
  text-underline-offset: 3px;
}




/* ============================================================
   v2.3 — DTC POLISH PASS
   ============================================================ */

/* Header micro-trust line under logo */
.site-logo-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.site-logo__microtrust {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--hbl-gray, #5b6470);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .site-logo__microtrust {
    font-size: 10px;
    letter-spacing: 0.02em;
    padding-left: 18px; /* nudge right under the symbol+wordmark on mobile */
  }
}
@media (max-width: 480px) {
  .site-logo__microtrust { padding-left: 14px; font-size: 9.5px; }
}

/* Hero: in-stock dot pill + Why labs switch pill button */
.hero__stockpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 12px 0 18px;
  border-radius: 999px;
  background: rgba(30, 157, 96, 0.18);
  border: 1px solid rgba(30, 157, 96, 0.45);
  color: #c9f7e0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero__stockpill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1E9D60;
  box-shadow: 0 0 0 3px rgba(30, 157, 96, 0.25);
  animation: hbl-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes hbl-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(30,157,96,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(30,157,96,0.10); }
}
.hero__why-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  transition: background 160ms ease, border-color 160ms ease;
}
.hero__why-pill:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.75);
}

/* Social Proof Strip — upgraded with icons, tappable */
a.hbl-social-proof-strip { display: block; text-decoration: none; color: inherit; }
a.hbl-social-proof-strip:hover { background: #f8fafc; }
.hbl-social-proof-strip__item { gap: 12px; }
.hbl-social-proof-strip__icon {
  color: var(--hbl-teal, #1AA6A6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hbl-social-proof-strip__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

/* Product cards — badges */
.product-card__image-link { position: relative; display: block; }
.product-card__badge {
  position: absolute;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  pointer-events: none;
  line-height: 1;
}
.product-card__badge--hplc {
  top: 10px; left: 10px;
  background: rgba(10, 42, 74, 0.94);
  color: #fff;
}
.product-card__badge--ships-today {
  top: 10px; right: 10px;
  background: #F5A623;
  color: #1f2937;
}
.product-card__badge--popular {
  bottom: 10px; left: 10px;
  background: var(--hbl-teal, #1AA6A6);
  color: #fff;
}

/* Stock pill */
.product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.product-card__stock .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.product-card__stock--in    { background: rgba(30,157,96,0.10); color: #1E9D60; }
.product-card__stock--in .dot { background: #1E9D60; }
.product-card__stock--low   { background: rgba(245,166,35,0.13); color: #B07300; }
.product-card__stock--low .dot { background: #F5A623; }
.product-card__stock--out   { background: #f1f5f9; color: #64748b; }
.product-card__stock--out .dot { background: #94a3b8; }
.product-card__stock--soon  { background: rgba(10,42,74,0.07); color: #0A2A4A; }
.product-card__stock--soon .dot { background: #0A2A4A; }

/* COA link — slightly stronger */
.product-card__coa-link {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hbl-teal, #1AA6A6);
  text-decoration: none;
  font-weight: 600;
}
.product-card__coa-link:hover { text-decoration: underline; }

/* Bundle: pricing math + urgency + trust */
.hbl-bundle-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.hbl-bundle-card__compare {
  font-size: 13.5px;
  color: var(--hbl-gray, #5b6470);
  text-decoration: line-through;
}
.hbl-bundle-card__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--hbl-navy, #0A2A4A);
}
.hbl-bundle-card__save {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(30,157,96,0.13);
  color: #1E9D60;
  padding: 3px 8px;
  border-radius: 999px;
}
.hbl-bundle-card__urgency {
  font-size: 12.5px;
  color: #B07300;
  margin: 0 0 14px;
  font-weight: 500;
}
.hbl-bundle-card__trust {
  font-size: 12px;
  color: var(--hbl-gray, #5b6470);
  margin: 10px 0 0;
  text-align: center;
}
.hbl-bundle-card__item-icon {
  display: inline-flex;
  width: 16px;
  align-items: center;
  color: var(--hbl-teal, #1AA6A6);
  vertical-align: -2px;
  margin-right: 4px;
}
.hbl-bundle-card__cta { width: 100%; text-align: center; }

/* Category cards: count + Supplies addon */
.category-card__count {
  display: inline-block;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hbl-teal, #1AA6A6);
}
.category-card__addon {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #B07300;
  font-style: italic;
}

/* Verified: 4-card grid + sample watermark */
@media (min-width: 900px) {
  .quality-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px) {
  .quality-grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
  .quality-grid.grid-cols-4 { grid-template-columns: 1fr; }
}
.quality-coa-sample__thumb { position: relative; }
.quality-coa-sample__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.65);
  border: 2px solid rgba(255,255,255,0.45);
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}

/* Comparison table: horizontal scroll + sticky first column on mobile + CTA */
.hbl-comparison-cta {
  text-align: center;
  margin-top: 24px;
}
@media (max-width: 720px) {
  .hbl-comparison-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--hbl-border, #e5e7eb);
    border-radius: 12px;
  }
  .hbl-comparison-table { min-width: 560px; }
  .hbl-comparison-table thead th:first-child,
  .hbl-comparison-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    box-shadow: 1px 0 0 rgba(0,0,0,0.06);
    z-index: 1;
  }
  .hbl-comparison-table thead th:first-child { background: #f1f5f9; }
}

/* Cart drawer: AOV add-on suggestions */
.hbl-cart-shipping-bar__success {
  color: #1E9D60;
  font-weight: 700;
  margin: 0 0 8px;
}
.hbl-cart-addons {
  padding: 12px;
  background: #f4f6f9;
  border-radius: 10px;
  margin: 12px 0;
}
.hbl-cart-addons__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hbl-navy, #0A2A4A);
  margin: 0 0 10px;
}
.hbl-cart-addon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 6px;
}
.hbl-cart-addon:last-child { margin-bottom: 0; }
.hbl-cart-addon__thumb img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.hbl-cart-addon__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hbl-cart-addon__info strong {
  font-size: 13px;
  color: var(--hbl-navy, #0A2A4A);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbl-cart-addon__info span {
  font-size: 12.5px;
  color: var(--hbl-gray, #5b6470);
  font-weight: 500;
}
.hbl-cart-addon__btn {
  background: var(--hbl-teal, #1AA6A6);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  flex-shrink: 0;
  border: none;
}
.hbl-cart-addon__btn:hover { background: #168d8d; }

/* Cart count badge — circular teal pill on header cart icon */
.header-utils__cart { position: relative; }
.header-utils__cart .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--hbl-teal, #1AA6A6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ============================================================
   v2.4 — DTC ACCELERATORS
   ============================================================ */

/* Delivery countdown — used in cards, PDP, cart */
.hbl-delivery-countdown,
.product-card__delivery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hbl-gray, #5b6470);
  margin: 8px 0 0;
  line-height: 1.4;
}
.hbl-delivery-countdown svg { color: var(--hbl-teal, #1AA6A6); flex-shrink: 0; }
.hbl-delivery-countdown__text { font-weight: 500; }
.hbl-delivery-countdown__text strong { color: #B07300; font-weight: 700; }
.product-card__delivery .hbl-delivery-countdown__text strong { color: #B07300; }

/* PDP sticky add-to-cart bar */
.hbl-pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 980;
  background: #fff;
  border-top: 1px solid var(--hbl-border, #e5e7eb);
  box-shadow: 0 -8px 24px -10px rgba(10,42,74,0.18);
  padding: 12px 16px;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 240ms ease, opacity 200ms ease;
  pointer-events: none;
}
.hbl-pdp-sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.hbl-pdp-sticky__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hbl-pdp-sticky__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}
.hbl-pdp-sticky__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hbl-navy, #0A2A4A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hbl-pdp-sticky__price {
  font-size: 14px;
  color: var(--hbl-navy, #0A2A4A);
  font-weight: 600;
  margin-top: 2px;
}
.hbl-pdp-sticky__price ins { background: transparent; text-decoration: none; }
.hbl-pdp-sticky__price del { color: #94a3b8; font-size: 12px; margin-right: 6px; }
.hbl-pdp-sticky__cta {
  background: var(--hbl-teal, #1AA6A6);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  min-height: 48px;
  flex-shrink: 0;
  transition: background 160ms ease;
}
.hbl-pdp-sticky__cta:hover { background: #168d8d; }
.hbl-pdp-sticky__cta--soon { background: #94a3b8; pointer-events: none; }
@media (min-width: 1024px) {
  .hbl-pdp-sticky { padding: 14px 24px; }
}

/* Cross-sell drawer (overlays on add to cart) */
.hbl-xsell-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px -16px rgba(10,42,74,0.28);
  transform: translateX(110%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hbl-xsell-drawer.is-open { transform: translateX(0); }
.hbl-xsell-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hbl-border, #e5e7eb);
}
.hbl-xsell-drawer__header strong { color: var(--hbl-navy, #0A2A4A); font-size: 16px; }
.hbl-xsell-drawer__close {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--hbl-gray, #5b6470);
  cursor: pointer;
  padding: 4px 8px;
}
.hbl-xsell-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}
.hbl-xsell-drawer__intro {
  font-size: 13.5px;
  color: var(--hbl-gray, #5b6470);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hbl-border, #e5e7eb);
}
.hbl-xsell-drawer__intro strong { color: var(--hbl-navy, #0A2A4A); }
.hbl-xsell-drawer__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hbl-navy, #0A2A4A);
  margin: 0 0 12px;
}
.hbl-xsell-drawer__loading {
  color: var(--hbl-gray, #5b6470);
  font-size: 13px;
  text-align: center;
  padding: 30px 0;
}
.hbl-xsell-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 8px;
}
.hbl-xsell-item__thumb img {
  width: 50px; height: 50px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.hbl-xsell-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hbl-xsell-item__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hbl-navy, #0A2A4A);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.hbl-xsell-item__name:hover { color: var(--hbl-teal, #1AA6A6); }
.hbl-xsell-item__price {
  font-size: 12.5px;
  color: var(--hbl-gray, #5b6470);
  font-weight: 500;
  margin-top: 2px;
}
.hbl-xsell-item__add {
  background: var(--hbl-teal, #1AA6A6);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  flex-shrink: 0;
  border: none;
}
.hbl-xsell-drawer__footer {
  padding: 16px 22px;
  border-top: 1px solid var(--hbl-border, #e5e7eb);
  display: flex;
  gap: 10px;
}
.hbl-xsell-drawer__view-cart {
  flex: 1;
  text-align: center;
  background: transparent;
  border: 1.5px solid var(--hbl-navy, #0A2A4A);
  color: var(--hbl-navy, #0A2A4A);
  padding: 12px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 13.5px;
}
.hbl-xsell-drawer__checkout {
  flex: 1;
  text-align: center;
  background: var(--hbl-teal, #1AA6A6);
  color: #fff !important;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 13.5px;
}

/* Hero mobile search bar */
.hero__search {
  display: none;
  position: relative;
  margin: 14px 0 6px;
  max-width: 420px;
}
.hero__search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  display: inline-flex;
}
.hero__search-input {
  width: 100%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 14.5px;
  padding: 13px 14px 13px 42px;
  border-radius: 12px;
  outline: none;
  transition: background 160ms ease, border-color 160ms ease;
  min-height: 48px;
}
.hero__search-input::placeholder { color: rgba(255,255,255,0.55); }
.hero__search-input:focus {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.55);
}
@media (max-width: 768px) {
  .hero__search { display: block; }
}
/* 2.25.3 — inline typeahead dropdown under the hero search bar */
.hero__search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(10, 31, 51, 0.22);
  overflow: hidden;
  z-index: 60;
}
.hero__search-results.is-open { display: block; }
.hero__search-results .hbl-search-overlay__result:last-child { border-bottom: 0; }
/* 2.25.4 — hero is text-align:center; without this, wrapped product names
   centered on their second line and read like category headers. One tidy
   left-aligned line per product keeps every result visible without scroll. */
.hero__search-results .hbl-search-overlay__result {
  text-align: left;
  padding: 12px 16px;
}
.hero__search-results .hbl-search-overlay__result span:first-child {
  flex: 1;
  min-width: 0;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__search-noresult {
  margin: 0;
  padding: 16px;
  color: #5A6B7B;
  font-size: 14px;
  text-align: center;
}

/* Avoid sticky ATC overlapping mobile bottom nav */
@media (max-width: 768px) {
  .hbl-pdp-sticky.is-visible { bottom: 64px; }
}


/* ============================================================
   v2.5 — NAV STATES + SEARCH OVERLAY + WAITLIST MODAL
   ============================================================ */

/* Bottom-nav: muted gray default, teal when active */
.mobile-bottom-nav__item {
  color: #5A6B7B;
  font-weight: 500;
  transition: color 160ms ease;
}
.mobile-bottom-nav__item svg {
  fill: none;
  stroke: currentColor;
  transition: fill 160ms ease, stroke 160ms ease;
}
.mobile-bottom-nav__item span {
  color: inherit;
  font-weight: inherit;
}
.mobile-bottom-nav__item.is-active {
  color: #1AA6A6;
  font-weight: 600;
}
.mobile-bottom-nav__item.is-active svg {
  fill: rgba(26, 166, 166, 0.18);
  stroke: #1AA6A6;
}
.mobile-bottom-nav__item.is-active span {
  color: #1AA6A6;
  font-weight: 600;
}
.mobile-bottom-nav__item:not(.is-active):hover,
.mobile-bottom-nav__item:not(.is-active):focus {
  color: #0A2A4A;
}
.mobile-bottom-nav__item:not(.is-active):hover svg,
.mobile-bottom-nav__item:not(.is-active):focus svg {
  stroke: #0A2A4A;
}

/* Bottom-nav cart count badge */
.mobile-bottom-nav__icon-wrap {
  position: relative;
  display: inline-block;
}
.mobile-bottom-nav__cart .cart-count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #1AA6A6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
}

/* Full-screen search overlay */
.hbl-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.hbl-search-overlay.is-open { pointer-events: auto; opacity: 1; }
.hbl-search-overlay__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1199;
  background: rgba(10, 42, 74, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.hbl-search-overlay__backdrop.is-open { pointer-events: auto; opacity: 1; }
.hbl-search-overlay__sheet {
  position: relative;
  z-index: 1201;
  background: #fff;
  width: 100%;
  max-width: 720px;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 24px 60px -20px rgba(10,42,74,0.35);
  transform: translateY(-20px);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hbl-search-overlay.is-open .hbl-search-overlay__sheet { transform: translateY(0); }
.hbl-search-overlay__handle {
  width: 44px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  margin: 8px auto 0;
}
.hbl-search-overlay__header {
  display: flex;
  align-items: center;
  padding: 12px 16px 14px;
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.hbl-search-overlay__form {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.hbl-search-overlay__icon {
  position: absolute;
  left: 14px;
  color: #5A6B7B;
  display: inline-flex;
}
.hbl-search-overlay__input {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  background: #f7f9fb;
  padding: 13px 14px 13px 42px;
  border-radius: 12px;
  font-size: 15.5px;
  outline: none;
  min-height: 48px;
  color: #0B1F33;
  transition: border-color 160ms ease, background 160ms ease;
}
.hbl-search-overlay__input:focus {
  background: #fff;
  border-color: #1AA6A6;
}
.hbl-search-overlay__close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #5A6B7B;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}
.hbl-search-overlay__close:hover { background: #f1f5f9; }
.hbl-search-overlay__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
}
.hbl-search-overlay__group { margin-bottom: 22px; }
.hbl-search-overlay__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5A6B7B;
  margin: 0 0 10px;
}
.hbl-search-overlay__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hbl-search-overlay__chip {
  background: #f7f9fb;
  border: 1px solid #e5e7eb;
  color: #0A2A4A;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.hbl-search-overlay__chip:hover {
  background: rgba(26, 166, 166, 0.10);
  border-color: rgba(26, 166, 166, 0.45);
  color: #1AA6A6;
}
.hbl-search-overlay__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: #0A2A4A;
  font-weight: 500;
  border-bottom: 1px solid #f1f5f9;
}
.hbl-search-overlay__result:hover { background: #f7f9fb; color: #1AA6A6; }
.hbl-search-overlay__result-arrow { color: #94a3b8; font-size: 16px; }
.hbl-search-overlay__empty {
  text-align: center;
  color: #5A6B7B;
  font-size: 14px;
  padding: 30px 0;
}
body.hbl-search-open { overflow: hidden; }

/* Waitlist modal */
.hbl-waitlist-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.hbl-waitlist-modal.is-open { pointer-events: auto; opacity: 1; }
.hbl-waitlist-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.hbl-waitlist-modal__card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 92%;
  max-width: 460px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 28px 26px 24px;
  box-shadow: 0 32px 80px -24px rgba(10,42,74,0.45);
  transform: translateY(20px) scale(0.97);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hbl-waitlist-modal.is-open .hbl-waitlist-modal__card { transform: translateY(0) scale(1); }
.hbl-waitlist-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #5A6B7B;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
}
.hbl-waitlist-modal__close:hover { background: #f1f5f9; }
.hbl-waitlist-modal__title {
  font-size: 19px;
  font-weight: 700;
  color: #0A2A4A;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  padding-right: 24px;
}
.hbl-waitlist-modal__subhead {
  font-size: 14px;
  color: #5A6B7B;
  line-height: 1.5;
  margin: 0 0 18px;
}
.hbl-waitlist-modal__field {
  display: block;
  margin-bottom: 10px;
}
.hbl-waitlist-modal__field-label {
  display: none; /* visual hidden — placeholder + aria provide label */
}
.hbl-waitlist-modal__field input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14.5px;
  color: #0B1F33;
  outline: none;
  min-height: 48px;
  transition: border-color 160ms ease;
}
.hbl-waitlist-modal__field input:focus { border-color: #1AA6A6; }
.hbl-waitlist-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 16px;
  font-size: 13px;
  color: #5A6B7B;
  cursor: pointer;
}
.hbl-waitlist-modal__check input { margin-top: 3px; }
.hbl-waitlist-modal__submit {
  width: 100%;
  background: #1AA6A6;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  min-height: 48px;
  transition: background 160ms ease;
}
.hbl-waitlist-modal__submit:hover:not(:disabled) { background: #168d8d; }
.hbl-waitlist-modal__submit:disabled { opacity: 0.6; cursor: wait; }
.hbl-waitlist-modal__trust {
  font-size: 11.5px;
  color: #94a3b8;
  text-align: center;
  margin: 8px 0 0;
}
.hbl-waitlist-modal__error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 10px 0 0;
}
.hbl-waitlist-modal__success {
  text-align: center;
  padding: 12px 0;
}
.hbl-waitlist-modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(26, 166, 166, 0.12);
  color: #1AA6A6;
  margin: 0 auto 14px;
}
.hbl-waitlist-modal__success h3 {
  font-size: 18px;
  color: #0A2A4A;
  margin: 0 0 6px;
}
.hbl-waitlist-modal__success p {
  color: #5A6B7B;
  font-size: 14px;
  margin: 0 0 18px;
}
body.hbl-modal-open { overflow: hidden; }

/* Coming Soon PDP — grayed image + red badge + inline email form */
body.hbl-product-coming-soon .woocommerce-product-gallery,
body.hbl-product-coming-soon .product-gallery,
body.hbl-product-coming-soon .product-card__image {
  opacity: 0.6;
  filter: grayscale(0.4);
}
body.hbl-product-coming-soon .woocommerce-product-gallery {
  position: relative;
}
body.hbl-product-coming-soon .woocommerce-product-gallery::after {
  content: 'COMING SOON';
  position: absolute;
  top: 14px;
  left: 14px;
  background: #C1272D;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 6px;
  z-index: 5;
  opacity: 1.6; /* counter the 0.6 from above */
}
.hbl-cs-pdp {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 22px 18px;
  margin: 20px 0;
}
.hbl-cs-pdp__badge {
  display: inline-block;
  background: #C1272D;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.hbl-cs-pdp__title {
  font-size: 19px;
  font-weight: 700;
  color: #0A2A4A;
  margin: 0 0 8px;
}
.hbl-cs-pdp__text {
  color: #5A6B7B;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.hbl-cs-pdp__form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.hbl-cs-pdp__input {
  flex: 1;
  padding: 13px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14.5px;
  outline: none;
  min-height: 48px;
}
.hbl-cs-pdp__input:focus { border-color: #1AA6A6; }
.hbl-cs-pdp__submit {
  background: #1AA6A6;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  min-height: 48px;
  white-space: nowrap;
}
.hbl-cs-pdp__submit:hover:not(:disabled) { background: #168d8d; }
.hbl-cs-pdp__msg { font-size: 13.5px; margin: 6px 0 0; }
.hbl-cs-pdp__trust {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 6px 0 12px;
}
.hbl-cs-pdp__browse {
  display: inline-block;
  color: #1AA6A6;
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
}
.hbl-cs-pdp__browse:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .hbl-cs-pdp__form { flex-direction: column; }
  .hbl-cs-pdp__submit { width: 100%; padding: 0; }
}

/* Header cart subtotal text — make sure it's visible/readable next to icon */
.header-utils__cart-info {
  font-size: 14px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--hbl-navy, #0A2A4A);
}


/* ============================================================
   v2.6 — STOCK STATUS PASS (product-only)
   Tokens: green #1E9D60 · amber #F5A623 · gray #9AA5B1
   ============================================================ */

/* Hero ship microcopy (replaces the in-stock pill) */
.hero__shipnote {
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
  margin: 14px 0 4px;
  font-weight: 500;
}

/* Generic stock badge: card / pdp / cart sizes */
.hbl-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hbl-stock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hbl-stock--card { font-size: 12px; color: #0B1F33; }
.hbl-stock--pdp  { font-size: 13px; color: #0B1F33; }
.hbl-stock--cart { font-size: 12px; color: #0B1F33; }

.hbl-stock--in-stock .hbl-stock__dot   { background: #1E9D60; }
.hbl-stock--low-stock .hbl-stock__dot  { background: #F5A623; }
.hbl-stock--low-stock                   { color: #B07300; }
.hbl-stock--out .hbl-stock__dot        { background: #9AA5B1; }
.hbl-stock--out                         { color: #5A6B7B; }
.hbl-stock--coming-soon .hbl-stock__dot{ background: #0A2A4A; }

/* Replace old card stock pill backgrounds with the new minimal dot+text */
.product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0;
  background: transparent !important;
  color: #0B1F33;
  margin: 8px 0 10px;
}
.product-card__stock .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.product-card__stock--in     { color: #0B1F33; }
.product-card__stock--in .dot   { background: #1E9D60; }
.product-card__stock--low    { color: #B07300; }
.product-card__stock--low .dot  { background: #F5A623; }
.product-card__stock--out    { color: #5A6B7B; }
.product-card__stock--out .dot  { background: #9AA5B1; }
.product-card__stock--soon   { color: #0A2A4A; }
.product-card__stock--soon .dot { background: #0A2A4A; }

/* Join Waitlist CTA on out-of-stock card */
.product-card__cta--waitlist {
  background: #fff !important;
  color: #1AA6A6 !important;
  border: 1.5px solid #1AA6A6 !important;
}
.product-card__cta--waitlist:hover {
  background: rgba(26, 166, 166, 0.08) !important;
}

/* PDP stock row directly above Add to Cart */
.hbl-pdp-stock-row {
  margin: 6px 0 14px;
  padding: 10px 12px;
  background: #f7f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.hbl-pdp-stock-row .hbl-stock--low-stock { color: #B07300; }
.hbl-pdp-stock-row .hbl-stock--out       { color: #5A6B7B; }

/* PDP inline waitlist when out of stock */
.hbl-pdp-waitlist {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px;
  margin: 8px 0 20px;
}
.hbl-pdp-waitlist__title {
  font-size: 17px;
  font-weight: 700;
  color: #0A2A4A;
  margin: 0 0 6px;
}
.hbl-pdp-waitlist__sub {
  color: #5A6B7B;
  font-size: 14px;
  margin: 0 0 14px;
}
.hbl-pdp-waitlist__form {
  display: flex;
  gap: 8px;
}
.hbl-pdp-waitlist__input {
  flex: 1;
  padding: 13px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14.5px;
  outline: none;
  min-height: 48px;
}
.hbl-pdp-waitlist__input:focus { border-color: #1AA6A6; }
.hbl-pdp-waitlist__submit {
  background: #1AA6A6;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  min-height: 48px;
  white-space: nowrap;
}
.hbl-pdp-waitlist__submit:hover:not(:disabled) { background: #168d8d; }
.hbl-pdp-waitlist__msg {
  font-size: 13px;
  margin: 8px 0 0;
}
@media (max-width: 480px) {
  .hbl-pdp-waitlist__form { flex-direction: column; }
}

/* Cart line stock badge + amber warning row */
.hbl-cart-line-stock {
  margin-top: 4px;
}
.hbl-cart-line-warning {
  margin-top: 6px;
  font-size: 12px;
  color: #7c2d12;
  background: #fff7ed;
  border-left: 3px solid #F5A623;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.4;
}


/* ============================================================
   v2.7 — MOBILE UI POLISH PASS
   ============================================================ */

/* --- Product card cleanup --- */

/* Image: remove old overlay badges, keep only Most Popular bottom-left */
.product-card__image-link .product-card__badge--hplc,
.product-card__image-link .product-card__badge--ships-today { display: none !important; }

/* Most Popular bottom-left, doesn't overlap vial top */
.product-card__badge--popular {
  position: absolute;
  bottom: 10px !important;
  left: 10px !important;
  top: auto !important;
  right: auto !important;
  background: #1AA6A6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}

/* HPLC pill below image, above name */
.product-card__pill--hplc {
  display: inline-block;
  background: #0B2A4A;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 12px;
  margin: 0 0 6px;
}

/* Price + strength stacked */
.product-card__price-block {
  margin: 6px 0 4px;
}
.product-card__price {
  font-size: 16px;
  font-weight: 700;
  color: #0A2A4A;
  line-height: 1.2;
}
.product-card__price ins { background: transparent; text-decoration: none; }
.product-card__price del { display: none; }
.product-card__strength {
  font-size: 12px;
  color: #5A6B7B;
  font-weight: 500;
  margin-top: 1px;
}

/* Inline stock row directly under price */
.product-card__stock {
  margin: 4px 0 10px;
}

/* Remove delivery text from cards entirely */
.product-card__delivery { display: none !important; }

/* --- Hero search bar — placeholder color + ensure icon size --- */
.hero__search-input::placeholder {
  color: #8A94A6;
  font-size: 15px;
}
.hero__search-input { font-size: 15px; }
.hero__search-icon svg { width: 18px; height: 18px; }

/* WP search form (search page) — give it style so it never renders empty white */
.search-drawer .search-form,
.woocommerce .wc-block-product-search,
form.search-form,
.search-results .search-form {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
form.search-form input[type=search],
.search-form input[type=search] {
  width: 100%;
  background: #f7f9fb;
  border: 1.5px solid #e5e7eb;
  padding: 13px 14px 13px 42px;
  border-radius: 12px;
  font-size: 15px;
  color: #0B1F33;
  outline: none;
  min-height: 48px;
}
form.search-form input[type=search]::placeholder,
.search-form input[type=search]::placeholder {
  color: #8A94A6;
  font-size: 15px;
}
form.search-form::before,
.search-form::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

/* --- Footer email signup restyle --- */
.footer-signup-form input[type=email] {
  background: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px !important;
  font-size: 15px !important;
  color: #0B1F33;
  min-height: 48px;
  width: 100%;
  outline: none;
}
.footer-signup-form input[type=email]::placeholder {
  color: #8A94A6;
  font-size: 15px;
}
.footer-signup-form button {
  margin-top: 10px;
  width: 100%;
  background: #1AA6A6;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  min-height: 48px;
}
.footer-signup-form button:hover { background: #168d8d; }

/* --- Social proof: 3 columns centered, big icons, 20/12 type --- */
.hbl-social-proof-strip { padding: 22px 0 18px; }
.hbl-social-proof-strip__list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  justify-items: center !important;
  flex-wrap: nowrap !important;
}
.hbl-social-proof-strip__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
}
.hbl-social-proof-strip__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 2px;
}
.hbl-social-proof-strip__icon--teal { color: #1AA6A6; }
.hbl-social-proof-strip__icon--star { color: #FFC107; }
.hbl-social-proof-strip__num {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0A2A4A;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hbl-social-proof-strip__label {
  font-size: 12px !important;
  color: #5A6B7B;
  font-weight: 500;
  line-height: 1.3;
  max-width: 120px;
}
@media (max-width: 480px) {
  .hbl-social-proof-strip__num { font-size: 17px !important; }
  .hbl-social-proof-strip__label { font-size: 11px !important; }
}

/* Reduce vertical padding between social proof and Top 5 bestsellers */
.hbl-social-proof-strip + .section,
section.hbl-social-proof-strip + #bestsellers,
#bestsellers { padding-top: 24px !important; }

/* Top 5 subhead one-line on mobile */
.section-header__sub--oneline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
@media (max-width: 480px) {
  .section-header__sub--oneline {
    white-space: normal;
    font-size: 13.5px;
  }
}

/* --- Shop page header: one-line title at 28px --- */
.catalog-page-header__title {
  font-size: 28px !important;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0A2A4A;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-page-header__desc {
  font-size: 14px;
  color: #5A6B7B;
  margin: 0;
}
@media (min-width: 769px) {
  .catalog-page-header__title { font-size: 34px !important; white-space: normal; }
}

/* --- Category pills: 36px, navy active, swipe affordance --- */
.category-filter-nav {
  position: relative;
  margin: 14px 0 12px;
}
.category-filter-nav__hint {
  display: none;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 4px;
  padding-left: 4px;
}
.category-filter-nav.is-hint-visible .category-filter-nav__hint { display: block; }

.category-filter-nav__list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: none;
  padding: 2px 24px 4px 0;
  margin: 0;
  list-style: none;
  scroll-snap-type: x mandatory;
}
.category-filter-nav__list::-webkit-scrollbar { display: none; }
.category-filter-nav__list > li { scroll-snap-align: start; flex-shrink: 0; }

.category-filter-nav__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: #fff;
  color: #0A2A4A;
  border: 1.5px solid #0A2A4A;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.category-filter-nav__pill:hover { background: rgba(10,42,74,0.06); }
.category-filter-nav__pill--active {
  background: #0A2A4A;
  color: #fff;
  border-color: #0A2A4A;
}

/* Right-edge fade gradient (24px wide) */
.category-filter-nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  width: 24px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  pointer-events: none;
  z-index: 1;
}

/* --- Sort dropdown: right-aligned, 44px, icon + label --- */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
}
.catalog-toolbar__results {
  font-size: 13px;
  color: #5A6B7B;
}
@media (max-width: 720px) {
  .catalog-toolbar__results { display: none !important; }
}
.catalog-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 10px 0 14px;
  height: 44px;
  white-space: nowrap;
}
.catalog-toolbar__sort-icon {
  color: #5A6B7B;
  display: inline-flex;
  align-items: center;
}
.catalog-toolbar__sort-label {
  font-size: 14px;
  font-weight: 600;
  color: #0A2A4A;
}
.catalog-toolbar__sort .orderby,
.catalog-toolbar__sort select.orderby {
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500;
  color: #0A2A4A;
  padding-right: 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 14px !important;
  padding-right: 22px !important;
}
.catalog-toolbar__sort form { display: inline; margin: 0; }


/* ============================================================
   v2.9 — COMPACT CARD + PDP PRICE + HEADER CART FIX
   ============================================================ */

/* --- COMPACT MOBILE PRODUCT CARD --- */

/* Tight grid: 2 cols, 12px gutter on mobile */
.products,
.hbl-top5-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 720px) {
  .products,
  .hbl-top5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1024px) {
  .products,
  .hbl-top5-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
.hbl-top5-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1023px) { .hbl-top5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

.product-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 0 0 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-card__image-link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #f7f9fb;
}
.product-card__image,
.product-card img.product-card__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Most Popular badge overlapping bottom of image */
.product-card__badge--popular {
  position: absolute !important;
  left: 50% !important;
  bottom: -12px !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%);
  background: #1AA6A6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 2px 8px -2px rgba(10,42,74,0.25);
}

.product-card__body {
  padding: 16px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-card__name {
  font-size: 15px;
  font-weight: 700;
  color: #0A2A4A;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}
.product-card__name a {
  color: inherit;
  text-decoration: none;
}
.product-card__name a:hover { color: #1AA6A6; }
@media (min-width: 720px) { .product-card__name { font-size: 16px; } }

/* Trust row: 3 micro-icons + text in one compact line */
.product-card__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: #5A6B7B;
}
.product-card__trust li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-weight: 500;
}
.product-card__trust svg { color: #1AA6A6; flex-shrink: 0; }
@media (min-width: 720px) { .product-card__trust { font-size: 12px; } }

/* Price + strength on ONE LINE */
.product-card__price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.product-card__price-line .product-card__price {
  font-size: 20px;
  font-weight: 800;
  color: #0A2A4A;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.product-card__price-line .product-card__price ins { background: transparent; text-decoration: none; }
.product-card__price-line .product-card__price del { display: none; }
.product-card__price-sep { color: #9AA5B1; font-weight: 500; font-size: 13px; }
.product-card__strength {
  font-size: 14px;
  color: #5A6B7B;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Inline stock + shipping urgency */
.product-card__stockline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: #0B1F33;
  line-height: 1.3;
}
.product-card__stockline .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.product-card__stockline--in .dot   { background: #1E9D60; }
.product-card__stockline--low       { color: #B07300; }
.product-card__stockline--low .dot  { background: #F5A623; }
.product-card__stockline--out       { color: #5A6B7B; }
.product-card__stockline--out .dot  { background: #9AA5B1; }
.product-card__stockline--soon      { color: #0A2A4A; }
.product-card__stockline--soon .dot { background: #0A2A4A; }

/* CTA: full-width teal, 48px tap target */
.product-card__actions {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card__cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: #1AA6A6;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 160ms ease, transform 80ms ease;
}
.product-card__cta:hover { background: #168d8d; }
.product-card__cta:active { transform: translateY(1px); background: #137575; }
.product-card__cta--coming-soon { background: #94a3b8; cursor: default; }
.product-card__cta--waitlist {
  background: #fff !important;
  color: #1AA6A6 !important;
  border: 1.5px solid #1AA6A6;
}
.product-card__cta--waitlist:hover { background: rgba(26, 166, 166, 0.08) !important; }
.product-card__microcopy {
  font-size: 11px;
  color: #9AA5B1;
  text-align: center;
  margin: 0;
  font-weight: 500;
}
.product-card__coa-link {
  display: block;
  text-align: center;
  margin-top: 2px;
  font-size: 11.5px;
  color: #1AA6A6;
  text-decoration: none;
  font-weight: 600;
}
.product-card__coa-link:hover { text-decoration: underline; }

/* Remove old descriptor styling — markup removed too but kill remnants */
.product-card__descriptor,
.product-card__pill--hplc,
.product-card__delivery,
.product-card__stock { display: none !important; }

/* --- PDP: hide WC's small inline variation price (top price has it) --- */
.woocommerce-variation-price,
.single_variation .price,
form.cart .woocommerce-variation-price,
form.cart .single_variation .price { display: none !important; }

/* --- HEADER CART ICON overflow fix --- */
.header-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-right: 4px;
  min-width: 0;
}
.header-utils__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.header-utils__cart .cart-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #1AA6A6;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.header-utils__cart-info {
  font-size: 13px;
  font-weight: 600;
  color: #0A2A4A;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .header-utils__phone,
  .header-utils__cart-info { display: none !important; }
  .header-utils { gap: 6px; padding-right: 8px; }
  .header-utils__cart { padding: 8px; }
}

/* Make sure the header inner row has room for the cart on the right */
.site-header__inner,
.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
}
.site-logo-block { flex: 0 1 auto; min-width: 0; }
.primary-nav { flex: 1 1 auto; min-width: 0; }


/* ============================================================
   v2.9.2 — HERO TIGHTEN + WHY-SWITCH LINK BELOW FOLD
   ============================================================ */

/* Removed hero shipnote class — neutralize any stragglers */
.hero__shipnote { display: none !important; }

/* Tighten the hero subhead → search → CTAs rhythm */
.hero__subheadline { margin-bottom: 18px; }
.hero__search { margin: 0 0 22px; }
.hero__actions { margin-top: 8px; margin-bottom: 12px; }
@media (max-width: 768px) {
  .hero__search { margin: 0 0 28px; }
  .hero__actions { margin-top: 4px; }
}

/* "Why labs switch →" link below social proof strip (replaces the hero pill) */
.hbl-social-proof-strip__more {
  text-align: center;
  margin: 14px 0 0;
}
.hbl-social-proof-strip__link {
  color: #1AA6A6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(26, 166, 166, 0.35);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.hbl-social-proof-strip__link:hover {
  color: #168d8d;
  border-color: #168d8d;
}


/* ============================================================
   v2.9.4 — PDP: TABS INLINE + HORIZONTAL SCROLL + COA COLLAPSE
   ============================================================ */

/* Inline tabs container (now sits inside the right purchase column) */
.single-product__inline-tabs {
  margin: 18px 0 6px;
}

/* Tab labels: single scrollable row, no wrap */
.woocommerce-tabs .tabs.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 0 0 2px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid #e5e7eb !important;
  list-style: none !important;
}
.woocommerce-tabs .tabs.wc-tabs::-webkit-scrollbar,
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs .tabs.wc-tabs > li,
.woocommerce-tabs ul.tabs > li,
.woocommerce-tabs ul.wc-tabs > li {
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce-tabs .tabs.wc-tabs > li a,
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a {
  display: inline-block;
  white-space: nowrap;
  padding: 11px 16px !important;
  font-size: 14px;
  font-weight: 600;
  color: #5A6B7B !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.woocommerce-tabs .tabs.wc-tabs > li.active a,
.woocommerce-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.wc-tabs > li.active a,
.woocommerce-tabs .tabs.wc-tabs > li[aria-selected="true"] a {
  color: #0A2A4A !important;
  border-bottom-color: #1AA6A6 !important;
}
.woocommerce-tabs .tabs.wc-tabs > li:hover a,
.woocommerce-tabs ul.tabs > li:hover a { color: #0A2A4A !important; }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }

/* Tab panel content padding tighten inside right column */
.single-product__inline-tabs .woocommerce-Tabs-panel,
.single-product__inline-tabs .panel {
  padding: 4px 0 12px !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: #0B1F33;
}
.single-product__inline-tabs .woocommerce-Tabs-panel > h2:first-child {
  display: none !important; /* WC's auto "Description" heading */
}

/* Remove the standalone tabs section if any cached page still has it */
.single-product-tabs-section { display: none !important; }


/* ============================================================
   v2.9.5 — PROOF → DIVIDER → PILL CTA → BESTSELLERS RHYTHM
   ============================================================ */

/* 24px hairline divider directly after the social proof strip */
.hbl-proof-divider {
  height: 1px;
  background: #e5e7eb;
  width: 100%;
  max-width: 1180px;
  margin: 24px auto 0;
}

/* Pill CTA centered with 32px above and 24px below before bestsellers */
.hbl-why-switch-cta {
  display: flex;
  justify-content: center;
  margin: 32px auto 24px;
  padding: 0 16px;
}
.hbl-why-switch-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  min-height: 48px;
  background: #fff;
  color: #0A2A4A !important;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border: 1.5px solid #0A2A4A;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.hbl-why-switch-cta__btn:hover {
  background: #0A2A4A;
  color: #fff !important;
  border-color: #0A2A4A;
}

/* Neutralize the older bestsellers extra padding rule so the new rhythm
   above doesn't get a double-gap before Top 5. */
#bestsellers { padding-top: 0 !important; }


/* ============================================================
   v2.9.7 — TRUST LINE + STAR RATING + ATC FEEDBACK + KEEP SHOPPING
   ============================================================ */

/* Hide the old trust UL — superseded by single-line trust-line */
.product-card__trust { display: none !important; }

/* Single-line trust */
.product-card__trust-line {
  font-size: 11.5px;
  color: #5A6B7B;
  font-weight: 500;
  margin: 4px 0 2px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 720px) { .product-card__trust-line { font-size: 12px; } }

/* Social proof: stars + count */
.product-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 2px;
  font-size: 12px;
}
.product-card__rating-stars {
  color: #FFC107;
  letter-spacing: 1px;
  font-size: 13px;
  line-height: 1;
}
.product-card__rating-stars .empty {
  color: #d1d5db;
}
.product-card__rating-text {
  color: #5A6B7B;
  font-weight: 500;
}

/* Button feedback: loading + added states */
.product-card__cta.is-loading {
  opacity: 0.7;
  cursor: wait;
}
.product-card__cta.is-added,
.product-card__cta.is-added:hover {
  background: #1AA6A6 !important;
  color: #fff !important;
  cursor: default;
}
.product-card__cta:disabled {
  cursor: not-allowed;
}

/* Cart drawer "Keep Shopping" button */
.hbl-cart-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hbl-cart-drawer__keep-shopping {
  background: #fff;
  color: #0A2A4A;
  border: 1.5px solid #0A2A4A;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  letter-spacing: 0.01em;
  width: 100%;
  transition: background 160ms ease, color 160ms ease;
}
.hbl-cart-drawer__keep-shopping:hover {
  background: #0A2A4A;
  color: #fff;
}
.hbl-cart-drawer__view-cart {
  text-align: center;
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #5A6B7B;
  text-decoration: none;
  padding: 4px 0;
}
.hbl-cart-drawer__view-cart:hover { color: #1AA6A6; }

/* Body lock when cart drawer open (in case theme styles don't already) */
body.hbl-cart-drawer-open { overflow: hidden; }


/* ============================================================
   v2.9.8 — BUY AGAIN PILL + MOST POPULAR REPOSITION
   ============================================================ */

/* Both badges: top-left, 8px inset, no overlap with the vial cap */
.product-card__badge--popular,
.product-card__badge--buy-again {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 3;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* Most Popular — smaller so it never overlaps the vial */
.product-card__badge--popular {
  background: #1AA6A6;
  color: #fff;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 4px -1px rgba(10,42,74,0.18);
}

/* Buy Again — 11px medium uppercase, teal background */
.product-card__badge--buy-again {
  background: #1AA6A6;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 4px -1px rgba(10,42,74,0.2);
}


/* ============================================================
   v2.9.9 — TABS HORIZONTAL SCROLL (aggressive) + SORT VERTICAL CENTER
   ============================================================ */

/* PDP tabs — force one-line horizontal scroll regardless of theme inherited rules */
.single-product__inline-tabs .woocommerce-tabs,
.woocommerce-tabs.wc-tabs-wrapper {
  width: 100%;
  overflow: visible;
}
.single-product__inline-tabs .wc-tabs,
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs,
.woocommerce-tabs .tabs.wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 2px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid #e5e7eb !important;
  list-style: none !important;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar,
.woocommerce-tabs ul.wc-tabs::-webkit-scrollbar,
.single-product__inline-tabs ul.tabs::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.woocommerce-tabs ul.tabs > li,
.woocommerce-tabs ul.wc-tabs > li,
.woocommerce div.product .woocommerce-tabs ul.tabs > li,
.single-product__inline-tabs ul.tabs > li {
  display: inline-block !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.woocommerce-tabs ul.tabs > li::before,
.woocommerce-tabs ul.tabs > li::after,
.woocommerce-tabs ul.wc-tabs > li::before,
.woocommerce-tabs ul.wc-tabs > li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs > li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs > li::after { display: none !important; content: none !important; border: 0 !important; }
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li a,
.single-product__inline-tabs ul.tabs > li a {
  display: inline-block !important;
  white-space: nowrap !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #5A6B7B !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  text-shadow: none !important;
}
.woocommerce-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.wc-tabs > li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li.active a {
  color: #0A2A4A !important;
  border-bottom-color: #1AA6A6 !important;
}

/* --- Sort dropdown vertical-center fix + 44px row --- */
.catalog-toolbar__sort {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  padding: 0 12px 0 14px !important;
}
.catalog-toolbar__sort form,
.catalog-toolbar__sort form.woocommerce-ordering {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
}
.catalog-toolbar__sort .orderby,
.catalog-toolbar__sort select.orderby,
.catalog-toolbar__sort form select {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 22px 0 6px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0A2A4A !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 14px !important;
}


/* ============================================================
   v2.9.10 — MOBILE PDP OVERFLOW HOTFIX
   Defensive containment for WC flexslider gallery + columns on mobile
   ============================================================ */

/* Hard horizontal-overflow lock at root level */
html, body { max-width: 100%; overflow-x: hidden; }

/* PDP main grid: single column on mobile, no negative gutters */
@media (max-width: 768px) {
  .single-product-main__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Gallery container + every descendant kept inside viewport */
.single-product-main__gallery,
.woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce-product-gallery__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.woocommerce-product-gallery__wrapper,
.flex-viewport,
.woocommerce-product-gallery .flex-viewport {
  overflow: hidden !important;
  position: relative !important;
}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  transform: none !important;
}
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

/* Kill flexslider's transform-based animation that pushes slides offscreen on
   single-image galleries (no actual slides to swap). */
.woocommerce-product-gallery .flex-direction-nav,
.woocommerce-product-gallery .flex-control-nav { display: none !important; }
.woocommerce-product-gallery ul.flex-slides,
.woocommerce-product-gallery .slides {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  transform: none !important;
}
.woocommerce-product-gallery ul.flex-slides > li,
.woocommerce-product-gallery .slides > li {
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Container/main: never let an inner element create horizontal scroll on mobile */
.site-main,
#main,
.container,
.single-product-main {
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
}


/* ============================================================
   v2.9.11 — TABS SCROLLABLE CONTAINMENT
   Root cause: grid-item min-width: auto lets the tabs UL expand the column
   (and the page) wider than the viewport instead of triggering its own
   horizontal scroll. Lock columns to min-width:0 + overflow:hidden so the
   inner UL can scroll without leaking width to ancestors.
   ============================================================ */

/* Both PDP columns must allow shrinking below content width */
.single-product-main__grid,
.single-product-main__grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.single-product-main__purchase {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important; /* contain the inline-tabs scroll inside */
  box-sizing: border-box !important;
}
.single-product-main__gallery {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Tabs wrapper: confine width + let inner UL scroll */
.single-product__inline-tabs,
.single-product__inline-tabs .woocommerce-tabs,
.single-product__inline-tabs .wc-tabs-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.single-product__inline-tabs .tabs.wc-tabs {
  /* Already display:flex from earlier — guarantee these dimensions */
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  scrollbar-width: none;
}
/* Tab panel content shouldn't expand the column either */
.single-product__inline-tabs .woocommerce-Tabs-panel,
.single-product__inline-tabs .panel {
  width: 100% !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}


/* ============================================================
   v2.9.12 — PDP TAB SCROLL AFFORDANCE
   Right-edge fade + peek-next-tab + smooth scroll-snap on mobile
   ============================================================ */

/* Wrapper holds the relative positioning for the fade overlay */
.single-product__inline-tabs,
.single-product__inline-tabs .woocommerce-tabs,
.single-product__inline-tabs .wc-tabs-wrapper {
  position: relative !important;
}

/* The actual scrolling row */
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: x proximity !important;
  gap: 24px !important;
  padding: 0 16px !important;
  margin: 0 0 14px !important;
  list-style: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.single-product__inline-tabs ul.tabs::-webkit-scrollbar,
.woocommerce-tabs ul.tabs::-webkit-scrollbar,
.woocommerce-tabs ul.wc-tabs::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* Individual tab — flex:0 0 auto so they keep natural width and don't compress */
.single-product__inline-tabs ul.tabs > li,
.woocommerce-tabs ul.tabs > li,
.woocommerce-tabs ul.wc-tabs > li,
.woocommerce div.product .woocommerce-tabs ul.tabs > li {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.single-product__inline-tabs ul.tabs > li::before,
.single-product__inline-tabs ul.tabs > li::after,
.woocommerce-tabs ul.tabs > li::before,
.woocommerce-tabs ul.tabs > li::after,
.woocommerce-tabs ul.wc-tabs > li::before,
.woocommerce-tabs ul.wc-tabs > li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs > li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs > li::after { display: none !important; content: none !important; border: 0 !important; }

/* Tab anchor — visual states */
.single-product__inline-tabs ul.tabs > li a,
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li a {
  display: inline-block !important;
  white-space: nowrap !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #6B7280 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  text-shadow: none !important;
  transition: color 200ms ease, border-color 200ms ease, font-weight 200ms ease;
}
.single-product__inline-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.wc-tabs > li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li.active a {
  color: #0A2540 !important;
  font-weight: 600 !important;
  border-bottom-color: #1AA6A6 !important;
}
.single-product__inline-tabs ul.tabs > li:hover a,
.woocommerce-tabs ul.tabs > li:hover a { color: #0A2540 !important; }

/* Right-edge fade overlay — hint that more content scrolls off-screen */
.single-product__inline-tabs .woocommerce-tabs::after,
.single-product__inline-tabs .wc-tabs-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 46px; /* tab row height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 2;
  transition: opacity 200ms ease;
}
/* Hidden when JS detects the bar is scrolled to its rightmost edge */
.single-product__inline-tabs.is-scrolled-end .woocommerce-tabs::after,
.single-product__inline-tabs.is-scrolled-end .wc-tabs-wrapper::after { opacity: 0; }
/* Also hide if the tabs fit without overflow (no scroll needed) */
.single-product__inline-tabs.no-overflow .woocommerce-tabs::after,
.single-product__inline-tabs.no-overflow .wc-tabs-wrapper::after { display: none; }


/* ============================================================
   v2.9.13 — DESKTOP PDP IMAGE SIZE + LOGO + GUARANTEE→TABS GAP
   ============================================================ */

/* --- 1. PDP gallery image — cap on desktop --- */
@media (min-width: 769px) {
  .single-product-main__gallery {
    max-width: 480px !important;
  }
  .single-product-main__gallery .woocommerce-product-gallery,
  .single-product-main__gallery .woocommerce-product-gallery__image,
  .single-product-main__gallery img,
  .single-product-main__gallery .woocommerce-product-gallery__image img {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (min-width: 1100px) {
  .single-product-main__gallery { max-width: 520px !important; }
}

/* --- 2. Logo: slightly smaller on desktop + smaller microtrust --- */
.site-logo { min-height: 40px; }
.site-logo img,
.site-logo__img {
  height: 40px !important;
  max-width: 240px !important;
}
@media (max-width: 768px) {
  .site-logo img,
  .site-logo__img { height: 36px !important; max-width: 210px !important; }
}
@media (max-width: 480px) {
  .site-logo img,
  .site-logo__img { height: 32px !important; max-width: 180px !important; }
}

/* Microtrust — quieter, slightly smaller across the board */
.site-logo__microtrust {
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  font-weight: 500;
  color: #5A6B7B;
}
@media (max-width: 768px) {
  .site-logo__microtrust { font-size: 9.5px !important; }
}
@media (max-width: 480px) {
  .site-logo__microtrust { font-size: 9px !important; padding-left: 12px !important; }
}

/* --- 3. Tighten gap: 100% Lot-Quality Guarantee → tabs --- */
.hbl-guarantee { margin: 0 0 10px !important; }
.single-product__inline-tabs { margin: 6px 0 4px !important; }
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs { margin-top: 0 !important; }


/* ============================================================
   v2.9.16 — CARD HALF-STAR (SVG gradient) sizing
   ============================================================ */
.product-card__rating-stars {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  color: inherit;
  letter-spacing: 0;
  line-height: 1;
}
.product-card__rating-stars svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}


/* ============================================================
   v2.9.17 — DESKTOP HEADER 3-COLUMN LAYOUT
   Logo left · Nav perfectly centered · Utilities right
   ============================================================ */
@media (min-width: 900px) {
  .site-header__inner,
  .header-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .site-logo-block,
  .site-logo { justify-self: start; }
  .primary-nav {
    justify-self: center;
    flex: 0 0 auto !important;
  }
  .primary-nav__menu {
    display: flex !important;
    align-items: center;
    gap: 28px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .primary-nav__menu > li > a {
    font-size: 14.5px;
    font-weight: 600;
    color: #0A2A4A;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 160ms ease;
    white-space: nowrap;
  }
  .primary-nav__menu > li > a:hover { color: #1AA6A6; }
  .header-utils { justify-self: end; }
}


/* ============================================================
   v2.9.18 — PDP TABS: GUARANTEED PEEK + STRONGER CONTRAST
   ============================================================ */

/* Stronger fade — wider + slightly denser so it reads from across the room */
.single-product__inline-tabs .woocommerce-tabs::after,
.single-product__inline-tabs .wc-tabs-wrapper::after {
  width: 56px !important;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 60%, #fff 100%) !important;
}

/* Boost active vs inactive contrast.
   Active: solid navy + bolder + teal 3px underline (was 2px).
   Inactive: muted slate. */
.single-product__inline-tabs ul.tabs > li a,
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
  border-bottom-width: 3px !important;
  padding: 14px 0 12px !important;
}
.single-product__inline-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.wc-tabs > li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li.active a {
  color: #0A2540 !important;
  font-weight: 700 !important;
  border-bottom-color: #1AA6A6 !important;
}
.single-product__inline-tabs ul.tabs > li:hover a,
.woocommerce-tabs ul.tabs > li:hover a { color: #0A2540 !important; }

/* Don't let any single tab compress — natural widths produce natural peek */
.single-product__inline-tabs ul.tabs > li,
.woocommerce-tabs ul.tabs > li,
.woocommerce-tabs ul.wc-tabs > li {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

/* Add scroll-padding so when programmatic peek scrolls, tab 4 lands cleanly */
.single-product__inline-tabs ul.tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  scroll-padding-inline-start: 16px !important;
}


/* ============================================================
   v2.9.19 — TIGHTEN GUARANTEE → TABS GAP (real this time)
   ============================================================ */
/* Beat the inline style margin and any later WC overrides */
.single-product-main__purchase .hbl-guarantee,
.hbl-guarantee {
  margin: 0 0 4px !important;
}
.single-product__inline-tabs,
.single-product__inline-tabs .woocommerce-tabs,
.single-product__inline-tabs .wc-tabs-wrapper {
  margin: 0 !important;
  padding-top: 0 !important;
}
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  margin: 0 0 10px !important;
}
/* Trim the tab anchor's top padding so the row sits closer to the guarantee */
.single-product__inline-tabs ul.tabs > li a,
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li a {
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}
/* Adjust the fade overlay height to match the new tighter row */
.single-product__inline-tabs .woocommerce-tabs::after,
.single-product__inline-tabs .wc-tabs-wrapper::after {
  height: 40px !important;
}


/* ============================================================
   v2.9.20 — SOCIAL PROOF: "Same-day shipping" longer headline
   ============================================================ */
/* Long-form num (Same-day shipping) — fits on one line at any width */
.hbl-social-proof-strip__num--long {
  white-space: nowrap !important;
  font-size: 16px !important;
  letter-spacing: -0.015em !important;
}
@media (max-width: 480px) {
  .hbl-social-proof-strip__num--long {
    font-size: 13px !important;
  }
}
@media (max-width: 360px) {
  .hbl-social-proof-strip__num--long {
    font-size: 12px !important;
  }
}


/* ============================================================
   v2.9.21 — TABS: TIGHTER GAP + CHEVRON SCROLL INDICATOR
   ============================================================ */

/* Tighter gap between tab labels */
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  gap: 14px !important;
  padding-right: 36px !important; /* leave room under the chevron/fade */
}

/* Chevron arrow that floats in the fade area — pulses to draw the eye */
.single-product__inline-tabs .woocommerce-tabs::before,
.single-product__inline-tabs .wc-tabs-wrapper::before {
  content: '\203A';
  position: absolute;
  top: 0;
  right: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #1AA6A6;
  z-index: 3;
  pointer-events: none;
  line-height: 1;
  padding: 0 4px;
  animation: hbl-tab-nudge 1.6s ease-in-out infinite;
  transition: opacity 200ms ease;
}
@keyframes hbl-tab-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(4px); opacity: 1; }
}
/* Hide chevron when scrolled to end OR when nothing to scroll */
.single-product__inline-tabs.is-scrolled-end .woocommerce-tabs::before,
.single-product__inline-tabs.is-scrolled-end .wc-tabs-wrapper::before,
.single-product__inline-tabs.no-overflow .woocommerce-tabs::before,
.single-product__inline-tabs.no-overflow .wc-tabs-wrapper::before {
  opacity: 0;
}

/* Thin scroll-progress hairline at the very bottom of the tab row.
   Shows what fraction of the tab strip is currently visible. */
.single-product__inline-tabs .hbl-tab-scrollbar {
  position: relative;
  height: 2px;
  width: 100%;
  background: #f1f5f9;
  border-radius: 2px;
  margin: -4px 0 12px;
  overflow: hidden;
}
.single-product__inline-tabs .hbl-tab-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #1AA6A6;
  border-radius: 2px;
  transition: transform 80ms ease, width 80ms ease;
  min-width: 24px;
}
.single-product__inline-tabs.no-overflow .hbl-tab-scrollbar { display: none; }


/* ============================================================
   v2.9.22 — CARD BADGES (smaller, breathing room) + IMAGE PADDING
   ============================================================ */

/* Give the vial room — 12px top padding inside image link */
.product-card__image-link {
  padding-top: 12px !important;
  box-sizing: border-box;
}

/* Unified subtle utility badge — single one per card */
.product-card__badge,
.product-card__badge--popular,
.product-card__badge--buy-again,
.product-card__badge--low-stock {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.product-card__badge--popular {
  background: #14B8A6 !important;
  color: #fff !important;
}
.product-card__badge--buy-again {
  background: #0A2540 !important;
  color: #fff !important;
}
.product-card__badge--low-stock {
  background: #F5A623 !important;
  color: #fff !important;
}


/* ============================================================
   v2.9.23 — 2-COLUMN COMPARISON TABLE
   ============================================================ */
.hbl-comparison-wrap--two-col {
  max-width: 760px;
  margin: 0 auto;
}
.hbl-comparison-table--two-col {
  width: 100%;
  border-collapse: collapse;
}
.hbl-comparison-table--two-col thead th,
.hbl-comparison-table--two-col tbody td {
  text-align: left;
  vertical-align: middle;
  padding: 14px 18px !important;
}
.hbl-comparison-table--two-col thead th {
  background: #f7f9fb;
  color: #0A2A4A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
}
.hbl-comparison-table--two-col tbody td {
  border-bottom: 1px solid #f1f5f9;
  font-size: 14.5px;
  color: #0B1F33;
}
.hbl-comparison-table--two-col tbody tr:last-child td { border-bottom: none; }
.hbl-comparison-table--two-col tbody td:first-child {
  font-weight: 500;
}
.hbl-comparison-table--two-col tbody td.hbl-yes {
  text-align: left;
  white-space: nowrap;
}
.hbl-comparison-table--two-col thead th:last-child {
  text-align: left;
}
/* Reusable nowrap span used in the table cells */
.hbl-nowrap { white-space: nowrap; }

/* Mobile: scrollable container becomes unnecessary with only 2 cols,
   so remove the horizontal scroll + sticky-first-col fallback from earlier */
@media (max-width: 720px) {
  .hbl-comparison-wrap--two-col {
    overflow: visible;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
  }
  .hbl-comparison-table--two-col { min-width: 0; }
  .hbl-comparison-table--two-col thead th:first-child,
  .hbl-comparison-table--two-col tbody td:first-child {
    position: static;
    box-shadow: none;
    background: transparent;
  }
  .hbl-comparison-table--two-col thead th,
  .hbl-comparison-table--two-col tbody td {
    padding: 12px 14px !important;
    font-size: 13.5px;
  }
}


/* ============================================================
   v2.9.26 — TABS: PILL FORMAT
   ============================================================ */

/* Remove the underline-style tab look and switch to pills */
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 0 !important;
  gap: 8px !important;
  padding: 4px 36px 6px 4px !important;
}

/* Pill anchor */
.single-product__inline-tabs ul.tabs > li a,
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: #5A6B7B !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.single-product__inline-tabs ul.tabs > li a:hover,
.woocommerce-tabs ul.tabs > li a:hover {
  color: #0A2540 !important;
  border-color: #cbd5e1 !important;
}

/* Active pill */
.single-product__inline-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.wc-tabs > li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li.active a {
  background: #0A2A4A !important;
  color: #fff !important;
  border-color: #0A2A4A !important;
  font-weight: 700 !important;
}

/* Active li itself shouldn't carry its own background */
.single-product__inline-tabs ul.tabs > li.active,
.woocommerce-tabs ul.tabs > li.active,
.woocommerce-tabs ul.wc-tabs > li.active {
  background: transparent !important;
}

/* Keep fade + chevron + scrollbar in place — adjust fade height to pill row */
.single-product__inline-tabs .woocommerce-tabs::after,
.single-product__inline-tabs .wc-tabs-wrapper::after,
.single-product__inline-tabs .woocommerce-tabs::before,
.single-product__inline-tabs .wc-tabs-wrapper::before {
  height: 44px !important;
}


/* ============================================================
   v2.9.27 — COMPACT FOOTER
   ============================================================ */

/* Nuke the old footer structure styles' visual contributions so nothing
   leaks through — they may still load with cached HTML, but they target
   different elements (.footer-main, .footer-grid, .footer-disclaimer-block,
   .footer-bottom, .footer-col, .footer-tagline, .footer-nav-list, etc.) */
.footer-main,
.footer-disclaimer-block,
.footer-bottom,
.footer-grid,
.footer-col,
.footer-col__heading,
.footer-tagline,
.footer-trust-badges,
.footer-badge,
.footer-legal-nav { /* legacy — superseded */ }

/* Modern compact footer */
.site-footer {
  background: #0A1A2F;
  color: #cbd5e1;
  padding: 32px 0 24px;
  margin-top: 48px;
}
.site-footer .container,
.site-footer__inner {
  max-width: 1180px;
  padding-left: 20px;
  padding-right: 20px;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 1. BRAND */
.site-footer__brand .footer-logo {
  display: inline-block;
  margin-bottom: 10px;
}
.site-footer__brand .footer-logo__img--light {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}
.site-footer__tagline {
  font-size: 14px;
  color: #9CA3AF;
  margin: 0;
  max-width: 460px;
  line-height: 1.5;
}

/* Shared section headings */
.site-footer__heading {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* Shared link lists */
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__list li { margin: 0; }
.site-footer__list a,
.site-footer__list li:not(:has(a)) {
  display: block;
  font-size: 15px;
  color: #9CA3AF;
  text-decoration: none;
  padding: 10px 0;
  min-height: 44px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: color 160ms ease;
}
.site-footer__list a:hover { color: #1AA6A6; }

/* 2. LINKS — 2 cols */
.site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

/* 4. SIGNUP */
.site-footer__signup-pitch {
  font-size: 14px;
  color: #9CA3AF;
  margin: 0 0 12px;
  line-height: 1.5;
}
.site-footer__signup-fineprint {
  font-size: 11.5px;
  color: #6B7280;
  margin: 8px 0 14px;
  line-height: 1.4;
}
.site-footer__social {
  display: flex;
  gap: 12px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  transition: background 160ms ease, color 160ms ease;
}
.site-footer__social a:hover {
  background: #1AA6A6;
  color: #fff;
}

/* 5. POLICIES ACCORDION */
.site-footer__policies {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 12px 0;
}
.site-footer__policies > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 0;
  user-select: none;
}
.site-footer__policies > summary::-webkit-details-marker { display: none; }
.site-footer__policies-chev {
  color: #9CA3AF;
  transition: transform 200ms ease;
}
.site-footer__policies[open] .site-footer__policies-chev {
  transform: rotate(180deg);
}
.site-footer__policies .site-footer__list {
  margin-top: 8px;
}

/* 6. TRUST ROW */
.site-footer__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: #9CA3AF;
}
.site-footer__trust span { white-space: nowrap; }

/* 7. SHORT RUO NOTICE */
.site-footer__ruo {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.site-footer__ruo-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.site-footer__ruo p {
  font-size: 12px;
  color: #9CA3AF;
  line-height: 1.55;
  margin: 0;
}
.site-footer__ruo a {
  color: #1AA6A6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 8. COPYRIGHT */
.site-footer__copy {
  font-size: 12px;
  color: #6B7280;
  margin: 0;
  padding-top: 4px;
}

/* Desktop layout: 4-col compact arrangement */
@media (min-width: 900px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    grid-template-areas:
      "brand    links    contact  signup"
      "policies policies policies policies"
      "trust    trust    trust    trust"
      "ruo      ruo      ruo      ruo"
      "copy     copy     copy     copy";
    gap: 24px 32px;
  }
  .site-footer__brand    { grid-area: brand; }
  .site-footer__links    { grid-area: links; grid-template-columns: 1fr; gap: 0; }
  .site-footer__contact  { grid-area: contact; }
  .site-footer__signup   { grid-area: signup; }
  .site-footer__policies { grid-area: policies; }
  .site-footer__trust    { grid-area: trust; justify-content: center; }
  .site-footer__ruo      { grid-area: ruo; }
  .site-footer__copy     { grid-area: copy; text-align: center; }
}

/* Legacy footer blocks: ensure they don't appear if cached HTML loads */
.footer-main,
.footer-disclaimer-block,
.footer-bottom { display: none !important; }


/* ============================================================
   v2.9.28 — TABS PANEL VISIBILITY GUARANTEE
   Belt-and-suspenders so the clicked tab panel always shows.
   ============================================================ */

/* Active panel ALWAYS visible (beats inline display:none + [hidden]) */
.woocommerce-Tabs-panel.active,
.single-product__inline-tabs .woocommerce-Tabs-panel.active,
.woocommerce-tabs .panel.active {
  display: block !important;
}

/* Non-active panels: hidden via class (so JS can toggle the class) */
.woocommerce-Tabs-panel:not(.active),
.single-product__inline-tabs .woocommerce-Tabs-panel:not(.active) {
  display: none;
}


/* ============================================================
   v2.9.30 — ALWAYS-VISIBLE PDP REVIEWS SECTION
   ============================================================ */
.hbl-pdp-reviews {
  margin: 24px 0 8px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}
.hbl-pdp-reviews__heading {
  font-size: 18px;
  font-weight: 700;
  color: #0A2A4A;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.hbl-pdp-reviews .hbl-reviews-summary,
.hbl-pdp-reviews .hbl-reviews-list,
.hbl-pdp-reviews .hbl-review {
  /* inherit existing seeded-review styles from the tab callback markup */
}


/* ============================================================
   v2.9.31 — TABS: WRAP, NO SCROLL (pill grid, all visible)
   ============================================================ */

/* Remove horizontal scroll + allow pills to wrap onto multiple lines */
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  gap: 8px !important;
  padding: 4px 0 6px !important;
}

/* Pills no longer need minimum-content forced */
.single-product__inline-tabs ul.tabs > li,
.woocommerce-tabs ul.tabs > li,
.woocommerce-tabs ul.wc-tabs > li,
.woocommerce div.product .woocommerce-tabs ul.tabs > li {
  min-width: 0 !important;
}

/* Kill the right-edge fade + pulsing chevron from the scroll affordance */
.single-product__inline-tabs .woocommerce-tabs::after,
.single-product__inline-tabs .wc-tabs-wrapper::after,
.single-product__inline-tabs .woocommerce-tabs::before,
.single-product__inline-tabs .wc-tabs-wrapper::before {
  display: none !important;
}

/* Hide the thin teal scroll-progress bar */
.single-product__inline-tabs .hbl-tab-scrollbar { display: none !important; }


/* ============================================================
   v2.9.32 — TABS: HIGH-CONTRAST ACTIVE STATE + SMALLER TEXT
   ============================================================ */

/* Inactive pill: muted gray, no border (recedes visually) */
.single-product__inline-tabs ul.tabs > li a,
.woocommerce-tabs ul.tabs > li a,
.woocommerce-tabs ul.wc-tabs > li a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li a {
  background: #f1f5f9 !important;
  color: #94A3B8 !important;
  border: 1px solid transparent !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 160ms ease, color 160ms ease, transform 80ms ease;
}
.single-product__inline-tabs ul.tabs > li a:hover,
.woocommerce-tabs ul.tabs > li a:hover {
  background: #e2e8f0 !important;
  color: #0A2540 !important;
}

/* Active pill: bright teal, white text, slight lift via shadow */
.single-product__inline-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.tabs > li.active a,
.woocommerce-tabs ul.wc-tabs > li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs > li.active a {
  background: #1AA6A6 !important;
  color: #fff !important;
  border-color: #1AA6A6 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px -2px rgba(26, 166, 166, 0.5) !important;
  transform: translateY(-0.5px);
}

/* Tighter gap so 2 rows fit on mobile */
.single-product__inline-tabs ul.tabs,
.single-product__inline-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
  gap: 6px !important;
}

@media (max-width: 480px) {
  .single-product__inline-tabs ul.tabs > li a,
  .woocommerce-tabs ul.tabs > li a,
  .woocommerce-tabs ul.wc-tabs > li a {
    font-size: 11.5px !important;
    padding: 7px 10px !important;
  }
}


/* ============================================================
   v2.9.35 — TAB SELECTOR FIX (target the actual rendered markup)
   Theme template renders <ul class="wc-tabs"> inside <div class="wc-tabs-wrapper">
   so any selector that required ul.tabs OR a .woocommerce-tabs parent missed.
   These rules target the actual structure with high specificity.
   ============================================================ */

/* CONTAINER — wrap, no scroll, no underline */
#product-tabs-wrapper ul.wc-tabs,
.wc-tabs-wrapper ul.wc-tabs,
.single-product__inline-tabs ul.wc-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 4px 0 6px !important;
  margin: 0 0 14px !important;
  gap: 6px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* LI — no list bullet/border */
#product-tabs-wrapper ul.wc-tabs > li,
.wc-tabs-wrapper ul.wc-tabs > li,
.single-product__inline-tabs ul.wc-tabs > li {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
#product-tabs-wrapper ul.wc-tabs > li::before,
#product-tabs-wrapper ul.wc-tabs > li::after,
.wc-tabs-wrapper ul.wc-tabs > li::before,
.wc-tabs-wrapper ul.wc-tabs > li::after {
  display: none !important;
  content: none !important;
}

/* INACTIVE PILL */
#product-tabs-wrapper ul.wc-tabs > li a,
.wc-tabs-wrapper ul.wc-tabs > li a,
.single-product__inline-tabs ul.wc-tabs > li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #f1f5f9 !important;
  color: #94A3B8 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transition: background 160ms ease, color 160ms ease, transform 80ms ease;
}
#product-tabs-wrapper ul.wc-tabs > li a:hover,
.wc-tabs-wrapper ul.wc-tabs > li a:hover {
  background: #e2e8f0 !important;
  color: #0A2540 !important;
}

/* ACTIVE PILL — bright teal, white text, lift */
#product-tabs-wrapper ul.wc-tabs > li.active a,
.wc-tabs-wrapper ul.wc-tabs > li.active a,
.single-product__inline-tabs ul.wc-tabs > li.active a {
  background: #1AA6A6 !important;
  color: #fff !important;
  border-color: #1AA6A6 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px -2px rgba(26, 166, 166, 0.5) !important;
  transform: translateY(-0.5px);
}

/* Mobile sizing */
@media (max-width: 480px) {
  #product-tabs-wrapper ul.wc-tabs > li a,
  .wc-tabs-wrapper ul.wc-tabs > li a {
    font-size: 11.5px !important;
    padding: 7px 10px !important;
  }
}

/* Kill any scrollbar/chevron leftovers from the old scroll-row design */
#product-tabs-wrapper::after,
#product-tabs-wrapper::before,
.wc-tabs-wrapper::after,
.wc-tabs-wrapper::before {
  display: none !important;
}
.hbl-tab-scrollbar { display: none !important; }


/* ============================================================
   v2.9.36 — TABS: bigger font + navy active (distinct from CTA teal)
   ============================================================ */

/* Bigger inactive pill */
#product-tabs-wrapper ul.wc-tabs > li a,
.wc-tabs-wrapper ul.wc-tabs > li a,
.single-product__inline-tabs ul.wc-tabs > li a {
  font-size: 14px !important;
  padding: 10px 14px !important;
}

/* Active pill — NAVY (brand trust color), distinct from teal CTA */
#product-tabs-wrapper ul.wc-tabs > li.active a,
.wc-tabs-wrapper ul.wc-tabs > li.active a,
.single-product__inline-tabs ul.wc-tabs > li.active a {
  background: #0A2A4A !important;
  color: #fff !important;
  border-color: #0A2A4A !important;
  box-shadow: 0 2px 6px -2px rgba(10, 42, 74, 0.4) !important;
}

@media (max-width: 480px) {
  #product-tabs-wrapper ul.wc-tabs > li a,
  .wc-tabs-wrapper ul.wc-tabs > li a {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }
}


/* ============================================================
   v2.9.37 — FOOTER POLICIES: flat list (no accordion)
   ============================================================ */
.site-footer__policies {
  border: 0 !important;
  padding: 0 !important;
}
.site-footer__policies > summary,
.site-footer__policies-chev { display: none !important; }
.site-footer__policies .site-footer__list { margin-top: 0 !important; }


/* ============================================================
   v2.9.38 — STICKY BOTTOM NAV: stronger active-vs-inactive contrast
   ============================================================ */

/* Inactive: lighter, more muted — recedes clearly */
.mobile-bottom-nav__item {
  color: #9CA3AF !important;
  font-weight: 500 !important;
  position: relative;
  transition: color 160ms ease;
}
.mobile-bottom-nav__item svg {
  stroke: currentColor !important;
  fill: none !important;
  transition: stroke 160ms ease, fill 160ms ease, transform 160ms ease;
}
.mobile-bottom-nav__item span {
  color: inherit !important;
  font-weight: inherit !important;
  font-size: 11px !important;
  letter-spacing: 0.01em;
}

/* Active: teal text + filled icon + lifted slightly + accent bar on top */
.mobile-bottom-nav__item.is-active {
  color: #1AA6A6 !important;
  font-weight: 700 !important;
}
.mobile-bottom-nav__item.is-active svg {
  stroke: #1AA6A6 !important;
  fill: rgba(26, 166, 166, 0.20) !important;
  transform: translateY(-1px);
}
.mobile-bottom-nav__item.is-active span {
  color: #1AA6A6 !important;
  font-weight: 700 !important;
}

/* Strong visual cue: 2.5px teal accent bar at the TOP of the active tab */
.mobile-bottom-nav__item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 2.5px;
  background: #1AA6A6;
  border-radius: 0 0 3px 3px;
}

/* Hover state for inactive items (desktop touch fallback) */
.mobile-bottom-nav__item:not(.is-active):hover,
.mobile-bottom-nav__item:not(.is-active):focus {
  color: #0A2A4A !important;
}
.mobile-bottom-nav__item:not(.is-active):hover svg,
.mobile-bottom-nav__item:not(.is-active):focus svg {
  stroke: #0A2A4A !important;
}


/* ============================================================
   v2.9.39 — SOCIAL PROOF: not clickable (was an <a>; now a div)
   ============================================================ */
div.hbl-social-proof-strip { cursor: default; }
div.hbl-social-proof-strip:hover { background: transparent !important; }


/* ============================================================
   v2.10.5 - CERTIFICATE OF ANALYSIS SYSTEM
   Styles for single-hbl_coa.php, archive-hbl_coa.php and the
   Certificates tab on the product page.

   The COA templates shipped in 2.10.4 with no styles whatsoever,
   so every certificate page rendered as unstyled browser default.
   ============================================================ */

/* Accessible-hide utility. The theme had no definition, so any
   screen-reader-only span rendered as visible body text. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- shared layout ---------- */

.hbl-coa-page,
.hbl-coa-archive {
  padding-top: var(--s8);
  padding-bottom: var(--s16);
}

.hbl-coa-page .breadcrumbs,
.hbl-coa-archive .breadcrumbs { margin-bottom: var(--s6); }

.hbl-coa-header,
.hbl-coa-archive__header { margin-bottom: var(--s8); }

.hbl-coa-header h1,
.hbl-coa-archive__header h1 {
  font-size: var(--hbl-size-3xl);
  color: var(--hbl-navy);
  line-height: 1.15;
  margin: 0 0 var(--s3);
}

.hbl-coa-parent,
.hbl-coa-archive__lede {
  font-size: var(--hbl-size-lg);
  color: var(--hbl-gray);
  max-width: 68ch;
  margin: 0;
}

.hbl-coa-parent a { color: var(--hbl-teal); }
.hbl-coa-parent a:hover { color: var(--hbl-teal-dark); }

.hbl-coa-section {
  margin-bottom: var(--s10);
  padding-top: var(--s8);
  border-top: 1px solid var(--hbl-border);
}
.hbl-coa-section:first-of-type { border-top: 0; padding-top: 0; }

.hbl-coa-section > h2 {
  font-size: var(--hbl-size-xl);
  color: var(--hbl-navy);
  margin: 0 0 var(--s5);
}

.hbl-coa-section > p {
  color: var(--hbl-gray);
  max-width: 68ch;
}

/* ---------- certificate values (single) ---------- */

.hbl-coa-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--s8);
  margin: 0;
}

.hbl-coa-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hbl-border);
}

.hbl-coa-row dt {
  color: var(--hbl-gray);
  font-size: var(--hbl-size-sm);
  margin: 0;
  flex-shrink: 0;
}

.hbl-coa-row dd {
  margin: 0;
  font-weight: 600;
  color: var(--hbl-slate);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hbl-coa-row dd a { color: var(--hbl-teal); font-weight: 600; }
.hbl-coa-row dd a:hover { color: var(--hbl-teal-dark); }

/* ---------- tables ---------- */

.hbl-coa-tablewrap { overflow-x: auto; }

/* The archive table carries eight columns. Below this width the wrapper
   scrolls rather than crushing lot numbers and purity figures together.
   Reset in the mobile block, where the table becomes stacked cards. */
.hbl-coa-table--archive { min-width: 860px; }

.hbl-coa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hbl-size-sm);
}

.hbl-coa-table th,
.hbl-coa-table td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--hbl-border);
  vertical-align: middle;
}

.hbl-coa-table thead th {
  background: var(--hbl-bg-soft);
  color: var(--hbl-navy);
  font-weight: 600;
  font-size: var(--hbl-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--hbl-border);
}

.hbl-coa-table tbody tr:hover { background: var(--hbl-navy-light); }
.hbl-coa-table td { font-variant-numeric: tabular-nums; }
.hbl-coa-table a { color: var(--hbl-teal); font-weight: 600; }
.hbl-coa-table a:hover { color: var(--hbl-teal-dark); }

/* ---------- source document ---------- */

.hbl-coa-embed {
  width: 100%;
  min-height: 700px;
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  margin-top: var(--s5);
  background: var(--hbl-bg-soft);
}

.hbl-coa-notes { color: var(--hbl-slate); max-width: 68ch; }
.hbl-coa-back { margin-top: var(--s8); }

/* ---------- archive: corpus summary ---------- */

.hbl-coa-stats {
  list-style: none;
  margin: 0 0 var(--s10);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
}

.hbl-coa-stats li {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s5) var(--s6);
}

.hbl-coa-stats__n {
  display: block;
  font-size: var(--hbl-size-2xl);
  font-weight: 700;
  color: var(--hbl-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hbl-coa-stats__l {
  display: block;
  margin-top: var(--s1);
  font-size: var(--hbl-size-sm);
  color: var(--hbl-gray);
}

/* ---------- archive: browse by product ---------- */

.hbl-coa-productlist {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s2) var(--s8);
}

.hbl-coa-productlist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hbl-border);
}

.hbl-coa-productlist a { color: var(--hbl-teal); font-weight: 600; }
.hbl-coa-productlist a:hover { color: var(--hbl-teal-dark); }

.hbl-coa-productlist__count {
  color: var(--hbl-gray);
  font-size: var(--hbl-size-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- archive: empty state ---------- */

.hbl-coa-empty {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s8);
  border-top: 1px solid var(--hbl-border);
}
.hbl-coa-empty h2 { margin-top: 0; }

/* ---------- pagination (the_posts_pagination) ---------- */

.hbl-coa-archive .navigation.pagination { margin-top: var(--s8); }

.hbl-coa-archive .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.hbl-coa-archive .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  color: var(--hbl-slate);
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  transition: var(--hbl-transition);
}

.hbl-coa-archive .page-numbers:hover {
  border-color: var(--hbl-teal);
  color: var(--hbl-teal);
}

.hbl-coa-archive .page-numbers.current {
  background: var(--hbl-navy);
  border-color: var(--hbl-navy);
  color: var(--hbl-white);
}

.hbl-coa-archive .page-numbers.dots { border-color: transparent; }

/* ---------- mobile: stack tables into labelled cards ---------- */

@media (max-width: 768px) {
  .hbl-coa-header h1,
  .hbl-coa-archive__header h1 { font-size: var(--hbl-size-2xl); }

  .hbl-coa-embed { min-height: 460px; }

  .hbl-coa-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .hbl-coa-table,
  .hbl-coa-table tbody,
  .hbl-coa-table tr,
  .hbl-coa-table td { display: block; width: 100%; }

  .hbl-coa-table--archive { min-width: 0; }

  .hbl-coa-table tr {
    border: 1px solid var(--hbl-border);
    border-radius: var(--hbl-radius-sm);
    padding: var(--s2) var(--s4);
    margin-bottom: var(--s4);
    background: var(--hbl-white);
  }

  .hbl-coa-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--hbl-border);
    text-align: right;
  }

  .hbl-coa-table tr td:last-child { border-bottom: 0; }

  /* Label each cell from its data-label so the stacked card stays readable
     once the header row is hidden. */
  .hbl-coa-table td[data-label]::before {
    content: attr(data-label);
    color: var(--hbl-gray);
    font-size: var(--hbl-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
  }

  /* A cell with no value would collapse to a bare label. */
  .hbl-coa-table td:empty { display: none; }
}

/* ---------- testing & analytical methods page ---------- */

.hbl-methods {
  padding-top: var(--s10);
  padding-bottom: var(--s16);
}

.hbl-methods__intro {
  max-width: 72ch;
  color: var(--hbl-slate);
}

.hbl-methods__glossary {
  margin: var(--s6) 0 0;
  display: grid;
  gap: var(--s5);
}

.hbl-methods__term {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s5) var(--s6);
}

.hbl-methods__term dt {
  font-weight: 700;
  color: var(--hbl-navy);
  margin: 0 0 var(--s2);
  font-size: var(--hbl-size-lg);
}

.hbl-methods__term dd {
  margin: 0;
  color: var(--hbl-slate);
  max-width: 72ch;
}

/* ---------- cart drawer body (native fallback, 2.10.7) ---------- */

.hbl-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hbl-cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s3);
  align-items: start;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hbl-border);
}

.hbl-cart-item__thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--hbl-radius-sm);
  border: 1px solid var(--hbl-border);
  display: block;
}

.hbl-cart-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.hbl-cart-item__name {
  font-weight: 600;
  font-size: var(--hbl-size-sm);
  color: var(--hbl-slate);
  line-height: 1.3;
}
.hbl-cart-item__name a { color: inherit; }
.hbl-cart-item__name a:hover { color: var(--hbl-teal); }

.hbl-cart-item__variation {
  font-size: var(--hbl-size-xs);
  color: var(--hbl-gray);
}
.hbl-cart-item__variation p { margin: 0; }

.hbl-cart-item__qty {
  font-size: var(--hbl-size-xs);
  color: var(--hbl-gray);
  font-variant-numeric: tabular-nums;
}

.hbl-cart-item__remove {
  color: var(--hbl-gray);
  font-size: var(--hbl-size-lg);
  line-height: 1;
  padding: var(--s1) var(--s2);
  border-radius: var(--hbl-radius-sm);
  text-decoration: none;
  transition: var(--hbl-transition);
}
.hbl-cart-item__remove:hover {
  color: var(--hbl-white);
  background: var(--hbl-slate);
}

.hbl-cart-empty {
  text-align: center;
  padding: var(--s10) var(--s4);
  color: var(--hbl-gray);
}
.hbl-cart-empty p { margin: 0 0 var(--s5); }

/* ---------- wholesale / B2B page (2.10.8) ---------- */

.hbl-wholesale { padding-top: var(--s10); padding-bottom: var(--s16); }
.hbl-wholesale__intro { max-width: 72ch; color: var(--hbl-slate); }

.hbl-wholesale__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
  margin-top: var(--s5);
}

.hbl-wholesale__card {
  background: var(--hbl-bg-soft);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius);
  padding: var(--s6);
}
.hbl-wholesale__card h3 {
  margin: 0 0 var(--s2);
  color: var(--hbl-navy);
  font-size: var(--hbl-size-lg);
}
.hbl-wholesale__card p { margin: 0; color: var(--hbl-slate); }
.hbl-wholesale__card a { color: var(--hbl-teal); font-weight: 600; }
.hbl-wholesale__card a:hover { color: var(--hbl-teal-dark); }

.hbl-wholesale__leadin,
.hbl-wholesale__consent { max-width: 72ch; color: var(--hbl-gray); }
.hbl-wholesale__consent { font-size: var(--hbl-size-sm); margin-top: var(--s5); }

/* Notices */
.hbl-wholesale__notice {
  border-radius: var(--hbl-radius-sm);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s6);
  border: 1px solid var(--hbl-border);
}
.hbl-wholesale__notice p { margin: 0; }
.hbl-wholesale__notice--ok  { background: rgba(46,139,87,0.08); border-color: var(--hbl-green); color: var(--hbl-slate); }
.hbl-wholesale__notice--err { background: rgba(180,35,35,0.06); border-color: #b42323; color: #7a1a1a; }

/* Form */
.hbl-wholesale__form { margin-top: var(--s5); }

.hbl-wholesale__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s5);
}
.hbl-wholesale__field { display: flex; flex-direction: column; gap: var(--s2); }
.hbl-wholesale__field--wide { grid-column: 1 / -1; }

.hbl-wholesale__field label {
  font-weight: 600;
  font-size: var(--hbl-size-sm);
  color: var(--hbl-slate);
}
.hbl-wholesale__field .req { color: #b42323; }

.hbl-wholesale__field input,
.hbl-wholesale__field select,
.hbl-wholesale__field textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  font-family: inherit;
  font-size: var(--hbl-size-base);
  color: var(--hbl-slate);
  background: var(--hbl-white);
  transition: var(--hbl-transition);
}
.hbl-wholesale__field input:focus,
.hbl-wholesale__field select:focus,
.hbl-wholesale__field textarea:focus {
  outline: none;
  border-color: var(--hbl-teal);
  box-shadow: 0 0 0 3px rgba(31,163,163,0.15);
}

.hbl-wholesale__form .btn-primary { margin-top: var(--s6); }

/* Honeypot — off-screen, never shown to humans */
.hbl-wholesale__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   TURNKEY WHITE-LABEL PROGRAM  (page-white-label.php)  — added 2.11.0
   Scoped to .hbl-wl so it can never collide with catalogue / wholesale styles.
   ========================================================================== */

.hbl-wl { --wl-max: 1120px; color: var(--hbl-black); }
.hbl-wl .container { max-width: var(--hbl-container); }

/* ---- Hero ---- */
.hbl-wl-hero {
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(31,163,163,0.18), transparent 60%),
    radial-gradient(900px 480px at 6% 8%, rgba(46,139,87,0.14), transparent 55%),
    linear-gradient(160deg, var(--hbl-navy) 0%, var(--hbl-slate) 100%);
  color: var(--hbl-white);
  padding: var(--s24) 0 var(--s20);
  overflow: hidden;
}
.hbl-wl-hero__inner { max-width: 860px; }
.hbl-wl-hero__eyebrow {
  display: inline-block;
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fe3e3;
  padding: var(--s2) var(--s4);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--hbl-radius-pill);
  margin-bottom: var(--s6);
}
.hbl-wl-hero__title {
  color: var(--hbl-white);
  font-size: clamp(2.1rem, 5vw, var(--hbl-size-hero));
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: var(--s6);
}
.hbl-wl-hero__lede {
  font-size: clamp(1.05rem, 2.2vw, 1.375rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  max-width: 720px;
  margin-bottom: var(--s10);
}
.hbl-wl-hero__lede em { font-style: normal; color: #a9ecec; font-weight: 600; }
.hbl-wl-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.hbl-wl-hero__btn { font-size: var(--hbl-size-lg); padding: var(--s4) var(--s8); }
.hbl-wl-hero__note { font-size: var(--hbl-size-sm); color: rgba(255,255,255,0.72); }

/* ---- Intro (optional editor content) ---- */
.hbl-wl-intro {
  max-width: var(--wl-max);
  padding-top: var(--s12);
  font-size: var(--hbl-size-lg);
  line-height: 1.65;
  color: var(--hbl-slate);
}

/* ---- Generic section ---- */
.hbl-wl-section { padding: var(--s20) 0; }
.hbl-wl-section--soft { background: var(--hbl-bg-soft); }
.hbl-wl-section__title {
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, var(--hbl-size-3xl));
  letter-spacing: -0.03em;
  margin-bottom: var(--s3);
  color: var(--hbl-navy);
}
.hbl-wl-section__sub {
  text-align: center;
  font-size: var(--hbl-size-lg);
  color: var(--hbl-gray);
  max-width: 640px;
  margin: 0 auto var(--s12);
  line-height: 1.55;
}

/* ---- How it works (numbered steps) ---- */
.hbl-wl-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  max-width: var(--wl-max);
  margin: 0 auto;
}
.hbl-wl-step {
  position: relative;
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s8) var(--s6) var(--s6);
  box-shadow: var(--hbl-shadow-sm);
  transition: transform var(--hbl-transition), box-shadow var(--hbl-transition);
}
.hbl-wl-step:hover { transform: translateY(-4px); box-shadow: var(--hbl-shadow-lg); }
.hbl-wl-step__num {
  position: absolute;
  top: calc(-1 * var(--s5));
  left: var(--s6);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--hbl-teal), var(--hbl-green));
  color: var(--hbl-white);
  font-weight: 700;
  font-size: var(--hbl-size-lg);
  border-radius: 50%;
  box-shadow: var(--hbl-shadow);
}
.hbl-wl-step h3 { font-size: var(--hbl-size-lg); margin: var(--s3) 0 var(--s2); color: var(--hbl-navy); }
.hbl-wl-step p { color: var(--hbl-gray); line-height: 1.55; font-size: var(--hbl-size-sm); }
.hbl-wl-step em { font-style: normal; color: var(--hbl-teal-dark); font-weight: 600; }

/* ---- What's handled (icon cards) ---- */
.hbl-wl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  max-width: var(--wl-max);
  margin: 0 auto;
}
/* 2.29.0: two-up variant for the "What you bring" block. */
.hbl-wl-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.hbl-wl-recos {
  max-width: 860px;
  margin: var(--s6) auto 0;
  text-align: center;
  color: var(--hbl-slate);
  font-size: 0.95rem;
}
.hbl-wl-card {
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s8);
  box-shadow: var(--hbl-shadow-sm);
  transition: transform var(--hbl-transition), box-shadow var(--hbl-transition);
}
.hbl-wl-card:hover { transform: translateY(-4px); box-shadow: var(--hbl-shadow-lg); }
.hbl-wl-card__ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--hbl-radius);
  background: var(--hbl-navy-light);
  color: var(--hbl-navy);
  margin-bottom: var(--s5);
}
.hbl-wl-card__ic svg { width: 26px; height: 26px; }
.hbl-wl-card h3 { font-size: var(--hbl-size-xl); margin-bottom: var(--s2); color: var(--hbl-navy); }
.hbl-wl-card p { color: var(--hbl-gray); line-height: 1.55; }

/* ---- Fulfilment paths ---- */
.hbl-wl-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  max-width: var(--wl-max);
  margin: 0 auto;
}
.hbl-wl-path {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s10) var(--s8) var(--s8);
  box-shadow: var(--hbl-shadow-sm);
}
.hbl-wl-path:first-child {
  border-color: rgba(31,163,163,0.45);
  box-shadow: 0 0 0 1px rgba(31,163,163,0.25), var(--hbl-shadow);
}
.hbl-wl-path__tag {
  position: absolute;
  top: calc(-1 * var(--s3));
  left: var(--s8);
  font-size: var(--hbl-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hbl-white);
  background: var(--hbl-navy);
  padding: var(--s1) var(--s3);
  border-radius: var(--hbl-radius-pill);
}
.hbl-wl-path:first-child .hbl-wl-path__tag { background: linear-gradient(135deg, var(--hbl-teal), var(--hbl-green)); }
.hbl-wl-path h3 { font-size: var(--hbl-size-2xl); color: var(--hbl-navy); margin-bottom: var(--s3); }
.hbl-wl-path > p { color: var(--hbl-gray); line-height: 1.6; margin-bottom: var(--s5); }
.hbl-wl-path em { font-style: normal; color: var(--hbl-teal-dark); font-weight: 600; }
.hbl-wl-path__list { list-style: none; margin-top: auto; display: grid; gap: var(--s2); }
.hbl-wl-path__list li {
  position: relative;
  padding-left: var(--s6);
  color: var(--hbl-slate);
  font-size: var(--hbl-size-sm);
  line-height: 1.45;
}
.hbl-wl-path__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 14px; height: 14px;
  background: var(--hbl-green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / contain no-repeat;
}

/* ---- Application section ---- */
.hbl-wl-section--apply { background: var(--hbl-bg-soft); scroll-margin-top: 90px; }
.hbl-wl-apply { max-width: 820px; }
.hbl-wl-apply__intro { text-align: center; }

.hbl-wl-notice {
  border-radius: var(--hbl-radius);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s6);
  font-size: var(--hbl-size-base);
  line-height: 1.5;
}
.hbl-wl-notice--ok  { background: rgba(46,139,87,0.10);  border: 1px solid rgba(46,139,87,0.35);  color: #1e5c39; }
.hbl-wl-notice--err { background: rgba(220,53,69,0.08);  border: 1px solid rgba(220,53,69,0.35);  color: #92242f; }

.hbl-wl-form {
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s10);
  box-shadow: var(--hbl-shadow);
}
.hbl-wl-form__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
}
.hbl-wl-field { display: flex; flex-direction: column; }
.hbl-wl-field--wide { grid-column: 1 / -1; }
.hbl-wl-field label {
  font-size: var(--hbl-size-sm);
  font-weight: 600;
  color: var(--hbl-slate);
  margin-bottom: var(--s2);
}
.hbl-wl-field .req { color: var(--hbl-teal-dark); }
.hbl-wl-field input,
.hbl-wl-field select,
.hbl-wl-field textarea {
  font-family: var(--hbl-font);
  font-size: var(--hbl-size-base);
  color: var(--hbl-black);
  background: var(--hbl-white);
  border: 1px solid var(--hbl-border);
  border-radius: var(--hbl-radius-sm);
  padding: var(--s3) var(--s4);
  width: 100%;
  transition: border-color var(--hbl-transition), box-shadow var(--hbl-transition);
}
.hbl-wl-field input:focus,
.hbl-wl-field select:focus,
.hbl-wl-field textarea:focus {
  outline: none;
  border-color: var(--hbl-teal);
  box-shadow: 0 0 0 3px rgba(31,163,163,0.16);
}
.hbl-wl-field textarea { resize: vertical; min-height: 108px; }
.hbl-wl-form__consent {
  font-size: var(--hbl-size-sm);
  color: var(--hbl-gray);
  line-height: 1.5;
  margin: var(--s6) 0;
}
.hbl-wl-form__submit { width: 100%; font-size: var(--hbl-size-lg); padding: var(--s4) var(--s8); }

/* Honeypot — off-screen, humans never see it */
.hbl-wl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .hbl-wl-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--s10); }
  .hbl-wl-grid  { grid-template-columns: repeat(2, 1fr); }
  .hbl-wl-paths { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 640px) {
  .hbl-wl-hero { padding: var(--s16) 0 var(--s12); }
  .hbl-wl-section { padding: var(--s16) 0; }
  .hbl-wl-steps { grid-template-columns: 1fr; }
  .hbl-wl-grid  { grid-template-columns: 1fr; }
  .hbl-wl-grid--two { grid-template-columns: 1fr; }
  .hbl-wl-form  { padding: var(--s6); }
  .hbl-wl-form__fields { grid-template-columns: 1fr; }
  .hbl-wl-hero__cta { gap: var(--s4); }
}

/* ===================================================================
   PARTNER PORTAL (2.30.0) — central branded dashboard at /partnerportal
   =================================================================== */
.hbl-pp { padding: 48px 0 72px; background: var(--hbl-bg, #f6f8fa); min-height: 60vh; }
.hbl-pp .container { max-width: 1080px; }
.hbl-pp__h1 { font-size: 1.9rem; margin: 0; color: var(--hbl-navy, #12242f); }
.hbl-pp__muted { color: var(--hbl-slate, #4a6b7a); }
/* login */
.hbl-pp-login { max-width: 420px; margin: 24px auto; background: var(--hbl-white, #fff); border: 1px solid var(--hbl-border, #e6ebef); border-radius: 16px; padding: 32px; }
.hbl-pp-login__title { margin: 0 0 6px; font-size: 1.6rem; color: var(--hbl-navy, #12242f); }
.hbl-pp-login__sub { margin: 0 0 18px; color: var(--hbl-slate, #4a6b7a); }
.hbl-pp-login p.login-username, .hbl-pp-login p.login-password { margin-bottom: 12px; }
.hbl-pp-login label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.hbl-pp-login input[type=text], .hbl-pp-login input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--hbl-border, #cdd6dd); border-radius: 8px; font-size: 1rem; }
.hbl-pp-login .login-submit input { width: 100%; background: var(--hbl-teal, #0f7b8a); color: #fff; border: 0; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 6px; }
.hbl-pp-login__forgot { text-align: center; margin: 14px 0 0; font-size: .9rem; }
/* dashboard head */
.hbl-pp-dash__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hbl-pp-dash__eyebrow { margin: 0 0 2px; text-transform: uppercase; letter-spacing: .6px; font-size: .72rem; color: var(--hbl-teal, #0f7b8a); font-weight: 700; }
.hbl-pp-dash__headactions { display: flex; gap: 8px; }
.hbl-pp-btn { display: inline-block; background: var(--hbl-navy, #12242f); color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.hbl-pp-btn--ghost { background: transparent; color: var(--hbl-navy, #12242f); border: 1px solid var(--hbl-border, #cdd6dd); }
/* stat cards */
.hbl-pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.hbl-pp-stat { background: var(--hbl-white, #fff); border: 1px solid var(--hbl-border, #e6ebef); border-radius: 14px; padding: 18px; }
.hbl-pp-stat--accent { background: var(--hbl-navy, #12242f); border-color: var(--hbl-navy, #12242f); }
.hbl-pp-stat--accent .hbl-pp-stat__label, .hbl-pp-stat--accent .hbl-pp-stat__sub { color: rgba(255,255,255,.72); }
.hbl-pp-stat--accent .hbl-pp-stat__val { color: #fff; }
.hbl-pp-stat__label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; color: var(--hbl-slate, #4a6b7a); font-weight: 600; }
.hbl-pp-stat__val { display: block; font-size: 1.7rem; font-weight: 800; color: var(--hbl-navy, #12242f); margin: 6px 0 2px; }
.hbl-pp-stat__val--sm { font-size: 1.15rem; }
.hbl-pp-stat__sub { display: block; font-size: .8rem; color: var(--hbl-slate, #4a6b7a); }
/* grid + cards */
.hbl-pp-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.hbl-pp-card { background: var(--hbl-white, #fff); border: 1px solid var(--hbl-border, #e6ebef); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.hbl-pp-card__title { margin: 0 0 14px; font-size: 1.05rem; color: var(--hbl-navy, #12242f); }
/* chart */
.hbl-pp-chart { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 8px; }
.hbl-pp-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hbl-pp-chart__bar { width: 70%; max-width: 34px; background: linear-gradient(180deg, var(--hbl-teal, #0f7b8a), var(--hbl-navy, #12242f)); border-radius: 5px 5px 0 0; min-height: 3px; }
.hbl-pp-chart__x { margin-top: 6px; font-size: .72rem; color: var(--hbl-slate, #4a6b7a); }
/* tools */
.hbl-pp-tools { display: flex; flex-direction: column; gap: 10px; }
.hbl-pp-tool { display: block; border: 1px solid var(--hbl-border, #e6ebef); border-radius: 10px; padding: 12px 14px; text-decoration: none; transition: border-color .15s, transform .15s; }
.hbl-pp-tool:hover { border-color: var(--hbl-teal, #0f7b8a); transform: translateY(-1px); }
.hbl-pp-tool strong { display: block; color: var(--hbl-navy, #12242f); }
.hbl-pp-tool span { display: block; font-size: .82rem; color: var(--hbl-slate, #4a6b7a); }
/* table */
.hbl-pp-tablewrap { overflow-x: auto; }
.hbl-pp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hbl-pp-table th, .hbl-pp-table td { padding: 10px 8px; border-bottom: 1px solid var(--hbl-border, #eef1f4); text-align: left; }
.hbl-pp-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--hbl-slate, #4a6b7a); }
.hbl-pp-table .ar { text-align: right; }
/* compliance rules list */
.hbl-pp-rules { margin: 8px 0 12px; padding-left: 20px; color: var(--hbl-slate, #4a6b7a); }
.hbl-pp-rules li { margin: 4px 0; }
/* misc */
.hbl-pp-card--soon { opacity: .9; }
.hbl-pp-badge { display: inline-block; background: var(--hbl-border, #e6ebef); color: var(--hbl-slate, #4a6b7a); font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px; vertical-align: middle; margin-left: 6px; font-weight: 700; }
.hbl-pp-picker__list { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hbl-pp-picker__list a { display: block; background: var(--hbl-white, #fff); border: 1px solid var(--hbl-border, #e6ebef); border-radius: 10px; padding: 14px; text-decoration: none; color: var(--hbl-navy, #12242f); font-weight: 600; }
.hbl-pp-empty { max-width: 520px; margin: 40px auto; text-align: center; background: var(--hbl-white, #fff); border: 1px solid var(--hbl-border, #e6ebef); border-radius: 16px; padding: 36px; }
@media (max-width: 860px) { .hbl-pp-stats { grid-template-columns: repeat(2, 1fr); } .hbl-pp-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .hbl-pp-stats { grid-template-columns: 1fr; } }


/* ============================================================
   2.12.1 — MID-WIDTH NAV FIT
   The centered 3-column header (v2.9.17) overflows into the logo between
   900-1280px now that the menu carries five items incl. White Label. Tighten
   gaps and type in that band only; desktop >1280px keeps the roomy layout.
   Below 900px the hamburger menu takes over, so nothing else changes.
   ============================================================ */
@media (min-width: 900px) and (max-width: 1280px) {
  .site-header__inner,
  .header-inner { gap: 10px !important; }
  .primary-nav__menu { gap: 13px !important; }
  .primary-nav__menu > li > a { font-size: 13px; }
  .site-logo__img { max-height: 38px; width: auto; }
}
@media (min-width: 900px) and (max-width: 1040px) {
  .primary-nav__menu { gap: 9px !important; }
  .primary-nav__menu > li > a { font-size: 12.25px; }
}


/* ==========================================================================
   2.15.0 — V9 "PROOF-INTERLEAVED COMMERCE" HOMEPAGE
   Layout study winner: product → proof → product cadence, one hero CTA,
   interactive COA lookup, turnkey band, corrected referral band.
   ========================================================================== */

/* Hero: certificates demoted to text link so the primary CTA owns the fixation */
.hero__cta-textlink {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.85);
  font-size: var(--hbl-size-base);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
  transition: color var(--hbl-transition), border-color var(--hbl-transition);
}
.hero__cta-textlink:hover { color: #fff; border-color: var(--hbl-teal); }

/* Interactive COA lookup inside the navy quality section */
.quality-portal-demo {
  max-width: 640px;
  margin: var(--s10) auto 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--hbl-radius-lg);
  padding: var(--s6) var(--s8);
  text-align: center;
}
.quality-portal-demo__lead {
  color: rgba(255,255,255,0.85);
  font-size: var(--hbl-size-base);
  margin-bottom: var(--s4);
}
.quality-portal-demo__lead strong { color: #8fe3e3; }
.quality-portal-demo__form {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
}
.quality-portal-demo__input {
  font-family: var(--hbl-font);
  font-size: var(--hbl-size-base);
  letter-spacing: 0.06em;
  padding: var(--s3) var(--s4);
  border-radius: var(--hbl-radius-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.95);
  color: var(--hbl-navy);
  min-width: 220px;
  text-align: center;
}
.quality-portal-demo__input:focus {
  outline: none;
  border-color: var(--hbl-teal);
  box-shadow: 0 0 0 3px rgba(31,163,163,0.35);
}

/* Guarantee-adjacent CTA */
.hbl-risk-reversals__cta { text-align: center; margin-top: var(--s8); }

/* Turnkey white-label band — dark, green-edged (Von Restorff: the ONE
   non-shopping moment on the page, and it must be the one that sticks) */
.hbl-turnkey-band {
  background: linear-gradient(150deg, var(--hbl-slate) 0%, #14242F 100%);
  border-top: 4px solid var(--hbl-green);
  color: var(--hbl-white);
}
.hbl-turnkey-band__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s10);
  align-items: center;
}
.hbl-turnkey-band__eyebrow {
  display: inline-block;
  font-size: var(--hbl-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7dd8a8;
  margin-bottom: var(--s3);
}
.hbl-turnkey-band__copy h2 {
  color: var(--hbl-white);
  font-size: var(--hbl-size-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s4);
}
.hbl-turnkey-band__copy p {
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  max-width: 56ch;
}
.hbl-turnkey-band__actions { text-align: center; }
.hbl-turnkey-band__note {
  margin-top: var(--s4);
  font-size: var(--hbl-size-sm);
  color: rgba(255,255,255,0.6);
}
@media (max-width: 860px) {
  .hbl-turnkey-band__inner { grid-template-columns: 1fr; gap: var(--s6); }
  .hbl-turnkey-band__actions { text-align: left; }
}

/* 2.15.1: extend the hamburger through the 769-899px band — desktop nav in
   that range wrapped awkwardly beside the logo (landscape phones / small
   tablets). Real desktop layout resumes at 900px where the 3-column header
   grid takes over. */
@media (max-width: 899px) {
  .primary-nav,
  .site-nav { display: none; }
  .mobile-menu-toggle,
  .menu-toggle { display: flex; }
}

/* 2.16.0: signup-first affiliate path — secondary link under the referral CTA */
.hbl-referral-band__alt { margin-top: var(--s3); font-size: var(--hbl-size-sm); opacity: .92; }
.hbl-referral-band__alt a { color: inherit; text-decoration: underline; font-weight: 600; }

/* 2.16.1: responsive 3-step variant for the affiliates page. The previous
   inline grid style overrode the stacking media queries and rendered three
   squeezed columns on phones. */
.hbl-wl-steps--three { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
@media (max-width: 980px) {
  .hbl-wl-steps--three { grid-template-columns: 1fr; max-width: 520px; row-gap: var(--s10); }
}

/* 2.18.2: platform attribution on partner-site footers */
.site-footer__powered { display: block; margin-top: var(--s2); font-size: var(--hbl-size-xs); opacity: .75; }
.site-footer__powered a { color: inherit; text-decoration: underline; }

/* ============================================================
   2.22.4 — de-duplicate the coming-soon treatment (owner report):
   cards showed BOTH the corner ribbon (::before "COMING SOON") and a
   "Coming soon" stockline. Ribbon wins; the stockline hides on those cards.
   ============================================================ */
.product-card--coming-soon .product-card__stockline--soon,
.hbl-product-coming-soon .product-card__stockline--soon {
  display: none;
}

/* 2.22.5 — the ribbon obeys the THEME's availability class only. The legacy
   plugin still stamps .hbl-product-coming-soon from its stale list; when the
   theme disagrees (product is sellable), that ribbon must not render. */
.hbl-product-coming-soon:not(.product-card--coming-soon)::before {
  display: none !important;
  content: none !important;
}

/* 2.26.0 - certificate page leads with the branded product render */
.hbl-coa-header--with-image {
  display: flex;
  align-items: center;
  gap: 26px;
}
.hbl-coa-header__vial { flex: 0 0 auto; }
.hbl-coa-header__img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  border-radius: 14px;
  background: #f7f9fb;
  border: 1px solid #eef2f6;
  display: block;
}
@media (max-width: 560px) {
  .hbl-coa-header--with-image { gap: 16px; }
  .hbl-coa-header__img { width: 96px; height: 96px; }
}

/* 2.27.2 - official tagline in header banner + footer */
.hbl-top-banner__motto { font-style: italic; opacity: 0.92; }
@media (max-width: 900px) {
  .hbl-top-banner__motto, .hbl-top-banner__sep--motto { display: none; }
}
.site-footer__motto {
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  margin: 14px 0 10px;
  opacity: 0.95;
}

/* 2.27.3 - 18+ age gate (AllayPay requirement; crawlers bypass server-side) */
html.hbl-age-gate-open { overflow: hidden; }
.hbl-age-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hbl-age-gate[hidden] { display: none; }
.hbl-age-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 30, 0.82);
  backdrop-filter: blur(6px);
}
.hbl-age-gate__card {
  position: relative;
  max-width: 460px;
  width: 100%;
  background: #fff;
  color: #0B1F33;
  border-radius: 16px;
  padding: 34px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.hbl-age-gate__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: #1AA6A6;
  margin: 0 0 8px;
}
.hbl-age-gate__card h2 { margin: 0 0 14px; font-size: 1.7rem; }
.hbl-age-gate__text { font-size: 15px; line-height: 1.55; color: #4A6B7A; margin: 0 0 22px; }
.hbl-age-gate__actions { display: flex; flex-direction: column; gap: 10px; }
.hbl-age-gate__actions .btn-primary { width: 100%; }
.hbl-age-gate__actions .btn-ghost { width: 100%; opacity: 0.8; }

/* ===== v2.23.0 — STICKY PDP BUY BOX ===== */
@media (min-width:1000px){
  .hbl-pdp__summary,.single-product div.product .summary{position:sticky;top:90px;align-self:start}
}