/* =================================================================
   HVB REDESIGN — page wrapper background
   Covers the theme's dark forest body so the cream design surface
   reads correctly. Scoped to the preview template only.
   ================================================================= */
.hvb-product-redesign {
    background: #f0eee9;
    min-height: 100vh;
    padding-top: 24px;
}

/* =================================================================
   HVB KRATOM PRODUCTS — HERITAGE
   Scoped under .hvb-product-container.
   Mirrors the design language used in the New Site Upgrade homepage
   (forest + gold + cream, Cinzel display, Montserrat body, gold
   dividers, editorial section cards, inline SVG icon cells).
   ================================================================= */

/* ---------------- TOKENS --------------------------------------- */
.hvb-product-container {
    --forest: #1a3a2e;
    --forest-mid: #2a5d3a;
    --forest-light: #3a6d4a;
    --forest-lighter: #85b67c;
    --forest-deep: #0f2a1f;

    --gold: #d4af37;
    --gold-light: #f4e061;
    --gold-dark: #b8960c;
    --gold-soft: #e8c873;

    --cream: #fff9e6;
    --cream-dark: #fff3cd;
    --bone: #f5ecd7;
    --paper: #ffffff;

    --text-dark: #1a1a1a;
    --text-muted: #555555;
    --text-light: #737373;
    --ink: #1b1b17;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-full: 100px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);

    --hp-transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --hp-transition-fast: 0.18s ease;

    --font-display: 'Cinzel', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --vein-color: var(--forest-mid);
}

/* Per-vein accents (apply with data-vein attribute on container) */
.hvb-product-container[data-vein="red"]    { --vein-color: #8c4a4a; }
.hvb-product-container[data-vein="green"]  { --vein-color: #5c8b5a; }
.hvb-product-container[data-vein="white"]  { --vein-color: #c9bfa5; }
.hvb-product-container[data-vein="gold"]   { --vein-color: #c9a227; }
.hvb-product-container[data-vein="yellow"] { --vein-color: #d4a84b; }
.hvb-product-container[data-vein="blend"]  { --vein-color: var(--gold); }

/* ---------------- BASE ----------------------------------------- */
.hvb-product-container {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.7;
    padding: 0;
    margin: 0 auto;
    max-width: 1100px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.hvb-product-container *,
.hvb-product-container *::before,
.hvb-product-container *::after { box-sizing: border-box; }

.hvb-product-container img { max-width: 100%; display: block; }

.hvb-product-container a {
    color: var(--gold-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 150, 12, 0.4);
    transition: color var(--hp-transition-fast), border-color var(--hp-transition-fast);
}
.hvb-product-container a:hover {
    color: var(--forest-mid);
    border-bottom-color: var(--forest-mid);
}
.hvb-product-container a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}

.hvb-product-container p {
    color: var(--text-dark);
    line-height: 1.7;
    margin: 0 0 16px;
    font-size: clamp(1rem, 1.4vw, 1.075rem);
}

.hvb-product-container h1,
.hvb-product-container h2,
.hvb-product-container h3,
.hvb-product-container h4 {
    font-family: var(--font-display);
    color: var(--forest);
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 14px;
    font-weight: 700;
}

.hvb-product-container h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.hvb-product-container h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 8px; }
.hvb-product-container h3 { font-size: clamp(1.2rem, 2.1vw, 1.45rem); margin-top: 4px; }
.hvb-product-container h4 { font-size: clamp(1.05rem, 1.7vw, 1.2rem); margin-top: 2px; }

/* ---------------- WRAPPER -------------------------------------- */
.hvb-main-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
@media (min-width: 768px) {
    .hvb-main-wrapper { padding: 40px 24px 64px; }
}

/* Strip the legacy gradient-border decoration that the original
   wrapper used. Heritage layout uses clean section cards instead. */
.hvb-main-wrapper::before { display: none; }

.hvb-clean-cards .hvb-main-wrapper {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* ---------------- HERO HEADER ---------------------------------- */
.hvb-hero-clean,
.hvb-hero-section {
    text-align: center;
    padding: 48px 24px 40px;
    background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    position: relative;
    overflow: hidden;
}
.hvb-hero-clean::before,
.hvb-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Eyebrow chip used above hero title — matches home page eyebrow */
.hvb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--forest-mid);
    background: rgba(42, 93, 58, 0.08);
    border: 1px solid rgba(42, 93, 58, 0.22);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 18px;
}
.hvb-eyebrow .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vein-color);
    box-shadow: 0 0 0 3px rgba(42, 93, 58, 0.12);
}

.hvb-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin: 0 0 14px;
    color: var(--forest);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.hvb-subtitle {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--forest-mid);
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 14px 0 0;
    font-weight: 600;
}

.hvb-divider-gold {
    height: 2px;
    width: 120px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-dark), var(--gold), transparent);
    margin: 18px auto;
    border: 0;
    border-radius: 2px;
}

/* In-section divider (left aligned, thinner) */
.hvb-divider {
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin: 4px 0 18px;
    border: 0;
    border-radius: 2px;
}
.hvb-section-card[data-align="center"] .hvb-divider,
.hvb-text-center .hvb-divider { margin-left: auto; margin-right: auto; }

/* ---------------- INTRO LEDE ----------------------------------- */
.hvb-intro-clean {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%);
    padding: 28px 28px;
    margin: 0 0 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hvb-intro-clean::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.10) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(133, 182, 124, 0.08) 0%, transparent 55%);
    pointer-events: none;
}
.hvb-intro-clean > * { position: relative; z-index: 1; }
.hvb-intro-clean .hvb-lead {
    color: #fff;
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.18rem);
    line-height: 1.65;
}
.hvb-intro-clean .hvb-lead strong { color: var(--gold-soft); font-weight: 700; }
.hvb-intro-clean .hvb-lead a {
    color: var(--gold-soft);
    border-bottom-color: rgba(232, 200, 115, 0.5);
}
.hvb-intro-clean .hvb-lead a:hover {
    color: #fff;
    border-bottom-color: #fff;
}
.hvb-intro-clean .hvb-lead a.gold {
    color: var(--gold-soft);
    border-bottom-color: rgba(232, 200, 115, 0.5);
}

/* ---------------- SECTION CARD --------------------------------- */
.hvb-section-card,
.hvb-clean-cards .hvb-content-section,
.hvb-content-section {
    background: var(--paper);
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    position: relative;
    overflow: visible;
    transition: transform var(--hp-transition), box-shadow var(--hp-transition);
}
.hvb-section-card:hover,
.hvb-clean-cards .hvb-content-section:hover,
.hvb-content-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.hvb-section-card::before,
.hvb-content-section::before { display: none; }

.hvb-section-card h2,
.hvb-section-card h3,
.hvb-content-section h2,
.hvb-content-section h3 {
    margin-top: 0;
    color: var(--forest);
    font-weight: 700;
}

/* Drop cap — subtle gold serif, no glow */
.dropcap::first-letter {
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.12em 0 0;
    color: var(--gold-dark);
    font-weight: 700;
}

/* Inline gold accent (legacy class kept for back-compat) */
.gold {
    color: var(--gold-dark);
    border-bottom: 1px solid rgba(184, 150, 12, 0.5);
    text-decoration: none;
}

/* ---------------- BATCH / FEATURE / DARK BOXES ----------------- */
/* Heritage replaces the old dark-green gradient with a forest panel
   that matches the home page's proof-bar aesthetic. */
.hvb-batch-box {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
    padding: 28px 24px;
    margin: 0 0 18px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hvb-batch-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hvb-batch-box h3,
.hvb-batch-box h4 {
    color: #fff;
    text-align: center;
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Feature box — softer green panel for sizes/quality grids */
.hvb-feature-box {
    background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest-mid) 100%);
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: #fff;
    margin: 0 0 18px;
    position: relative;
    overflow: hidden;
}
.hvb-feature-box h4 {
    color: #fff;
    text-align: center;
    margin: 0 0 14px;
    font-family: var(--font-display);
}

/* CTA box (cream variant, gold accent edge) */
.hvb-cta-box,
.hvb-cta-clean {
    background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
    padding: 28px;
    margin: 0 0 18px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(212, 175, 55, 0.22);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hvb-cta-box::before,
.hvb-cta-clean::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
}
.hvb-cta-box h4,
.hvb-cta-clean h4 {
    color: var(--forest);
    margin: 0 0 10px;
    font-family: var(--font-display);
}

/* ---------------- INFO GRID & CARDS ---------------------------- */
.hvb-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
@media (min-width: 768px) {
    .hvb-info-grid { gap: 14px; }
}

/* On dark batch/feature boxes: translucent white cards */
.hvb-batch-box .hvb-info-card,
.hvb-feature-box .hvb-info-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
}
.hvb-batch-box .hvb-info-card-label,
.hvb-feature-box .hvb-info-card-label {
    color: rgba(255, 255, 255, 0.72);
}
.hvb-batch-box .hvb-info-card-value,
.hvb-feature-box .hvb-info-card-value { color: #fff; }

/* On cream/light surfaces: bone cards */
.hvb-info-card {
    background: var(--bone);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: var(--radius-md);
    padding: 18px 14px;
    text-align: center;
    transition: transform var(--hp-transition), box-shadow var(--hp-transition);
    min-width: 0;
}
.hvb-info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.hvb-info-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    color: var(--gold);
    line-height: 1;
}
.hvb-info-card-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    stroke-width: 1.8;
}
.hvb-info-card-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: var(--text-muted);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.hvb-info-card-value {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.35;
    word-wrap: break-word;
}

/* Alkaloid card variant — multi-line readable list */
.hvb-info-card-alkaloids .hvb-info-card-value,
.hvb-alkaloid-values {
    font-size: 0.82rem;
    line-height: 1.6;
    font-weight: 600;
    text-align: left;
}
.hvb-alkaloid-row {
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    .hvb-alkaloid-row { white-space: normal; }
}
.hvb-alkaloid-name { font-weight: 500; opacity: 0.85; }

/* Size grid — fixed wider columns for size cards.
   Override per-template with data-cols="N" to match the number of items
   so the last row stays full (e.g. capsule sizes use data-cols="7"). */
.hvb-size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}
@media (min-width: 480px) {
    .hvb-size-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .hvb-size-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
    .hvb-size-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin: 0 auto; }
    .hvb-size-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .hvb-size-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
    .hvb-size-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
    .hvb-size-grid[data-cols="7"] { grid-template-columns: repeat(7, 1fr); gap: 10px; }
}
.hvb-size-grid .hvb-info-card { padding: 14px 8px; }
.hvb-size-grid .hvb-info-card-value { font-size: 0.85rem; }
.hvb-size-grid .hvb-info-card-label { font-size: 0.62rem; }

/* Subscription pricing tiers (monthly-subscription template) */
.hvb-subscription .hvb-intro-clean {
    background: var(--paper);
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(212, 175, 55, 0.18);
}
.hvb-subscription .hvb-intro-clean::before { display: none; }
.hvb-subscription .hvb-intro-clean .hvb-lead { color: var(--text-dark); }
.hvb-subscription .hvb-intro-clean .hvb-lead a,
.hvb-subscription .hvb-intro-clean .hvb-lead a.gold {
    color: var(--gold-dark);
    border-bottom-color: rgba(184, 150, 12, 0.4);
}
.hvb-subscription .hvb-intro-clean .hvb-lead strong { color: var(--forest); }

.hvb-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 18px;
}
.hvb-pricing-card {
    background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
    border-radius: var(--radius-lg);
    padding: 26px 18px;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: var(--shadow-sm);
    transition: transform var(--hp-transition), box-shadow var(--hp-transition);
    position: relative;
}
.hvb-pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.hvb-pricing-card.best-value {
    border: 2px solid var(--gold);
    background: linear-gradient(180deg, #fffaee 0%, var(--cream) 100%);
}
.hvb-pricing-card.best-value::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    letter-spacing: 0.18em;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}
.hvb-pricing-term {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--forest);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.hvb-pricing-total {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 4px;
    line-height: 1.1;
}
.hvb-pricing-perkg {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.hvb-pricing-footnote { margin-top: 18px; }

@media (max-width: 768px) {
    .hvb-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hvb-pricing-card { padding: 20px 14px; }
    .hvb-pricing-total { font-size: 1.6rem; }
    .hvb-pricing-term { font-size: 0.95rem; }
}

/* Strain pill — used in variety-pack lineups. A color dot indicates vein. */
.hvb-strain-pill { position: relative; padding-top: 22px; }
.hvb-strain-pill .hvb-vein-dot {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.hvb-strain-pill[data-vein="red"]    .hvb-vein-dot { background: #8c4a4a; box-shadow: 0 0 0 3px rgba(140, 74, 74, 0.18); }
.hvb-strain-pill[data-vein="green"]  .hvb-vein-dot { background: #5c8b5a; box-shadow: 0 0 0 3px rgba(92, 139, 90, 0.18); }
.hvb-strain-pill[data-vein="white"]  .hvb-vein-dot { background: #f4ecd8; box-shadow: 0 0 0 3px rgba(244, 236, 216, 0.30); border: 1px solid rgba(212, 175, 55, 0.4); }
.hvb-strain-pill[data-vein="gold"]   .hvb-vein-dot { background: #c9a227; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18); }
.hvb-strain-pill[data-vein="yellow"] .hvb-vein-dot { background: #d4a84b; box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.18); }

/* Capsule / size note inside a dark batch box (e.g. capsule specs row) */
.hvb-capsule-spec {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-top: 14px;
    text-align: center;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.6;
}
.hvb-capsule-spec strong {
    display: block;
    color: var(--gold-soft);
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}
.hvb-capsule-spec span { color: rgba(255, 255, 255, 0.85); }

/* ---------------- PROCESS GRID (5-step) ------------------------ */
.hvb-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
@media (max-width: 768px) {
    .hvb-process-grid { grid-template-columns: repeat(2, 1fr); }
    .hvb-process-grid .hvb-process-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}
.hvb-process-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 16px 10px;
    text-align: center;
    transition: transform var(--hp-transition), background var(--hp-transition);
}
.hvb-process-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
}
.hvb-process-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    color: var(--gold-soft);
}
.hvb-process-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}
.hvb-process-card-text {
    font-size: 0.78rem;
    color: #fff;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---------------- CHECKLIST ------------------------------------ */
.hvb-checklist {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}
.hvb-checklist li {
    position: relative;
    padding: 8px 0 8px 30px;
    font-size: clamp(1rem, 1.4vw, 1.075rem);
    line-height: 1.6;
}
.hvb-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.hvb-checklist li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 18px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.hvb-alkaloid-list {
    list-style: none;
    padding-left: 10px;
    margin: 10px 0;
}
.hvb-alkaloid-list li {
    margin-bottom: 8px;
    font-size: clamp(1rem, 1.4vw, 1.075rem);
}

/* ---------------- FOOTER LINKS --------------------------------- */
.hvb-product-container .hvb-footer-links {
    text-align: center;
    margin-top: 28px;
    padding: 24px 16px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    color: var(--text-dark);
}
.hvb-product-container .hvb-footer-links p {
    margin-bottom: 10px;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}
.hvb-product-container .hvb-footer-links p:last-child { margin-bottom: 0; }
.hvb-product-container .hvb-footer-links a {
    color: var(--gold-dark);
    font-weight: 700;
}
.hvb-product-container .hvb-footer-links a:hover {
    color: var(--forest-mid);
    border-bottom-color: var(--forest-mid);
}

/* ---------------- TABLES (legacy) ------------------------------ */
.hvb-product-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    margin: 14px 0;
}
.hvb-product-container table td {
    background: var(--bone);
    border: 1px solid rgba(212, 175, 55, 0.18);
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    transition: transform var(--hp-transition-fast);
}
.hvb-product-container table td:hover { transform: scale(1.02); }

/* ---------------- UTILITIES ------------------------------------ */
.hvb-text-center { text-align: center; }
.hvb-mb-0 { margin-bottom: 0 !important; }
.hvb-mt-0 { margin-top: 0 !important; }
.hvb-highlight { color: var(--gold-dark); font-weight: 700; }

/* Lazy / motion / contrast */
.hvb-lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
@media (prefers-reduced-motion: reduce) {
    .hvb-product-container *,
    .hvb-product-container *::before,
    .hvb-product-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media (prefers-contrast: high) {
    .hvb-section-card,
    .hvb-content-section,
    .hvb-hero-clean,
    .hvb-hero-section { border: 2px solid currentColor; }
}

/* ---------------- RESPONSIVE ----------------------------------- */
@media (max-width: 768px) {
    .hvb-hero-clean,
    .hvb-hero-section { padding: 36px 20px 32px; }
    .hvb-section-card,
    .hvb-content-section { padding: 24px 18px; }
    .hvb-batch-box { padding: 22px 16px; }
    .hvb-feature-box { padding: 20px 16px; }
    .hvb-intro-clean { padding: 22px 18px; }
    .hvb-cta-box,
    .hvb-cta-clean { padding: 22px 18px; }

    .hvb-info-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .hvb-info-card { padding: 14px 10px; }
    .hvb-info-card-icon { width: 32px; height: 32px; margin-bottom: 8px; }
    .hvb-info-card-icon svg { width: 20px; height: 20px; }
    .hvb-info-card-label { font-size: 0.62rem; }
    .hvb-info-card-value { font-size: 0.85rem; }
    .hvb-alkaloid-values,
    .hvb-info-card-alkaloids .hvb-info-card-value { font-size: 0.74rem; }

    .dropcap::first-letter { font-size: 3.2em; }
}

@media (max-width: 480px) {
    .hvb-info-grid { grid-template-columns: 1fr 1fr; }
    .hvb-info-card { padding: 12px 8px; }
    .hvb-info-card-value { font-size: 0.8rem; }
    .hvb-process-card { padding: 12px 8px; }
}

/* ---------------- PRINT ---------------------------------------- */
@media print {
    .hvb-product-container { color: #000; }
    .hvb-section-card,
    .hvb-content-section,
    .hvb-hero-clean,
    .hvb-hero-section,
    .hvb-cta-box,
    .hvb-cta-clean {
        box-shadow: none;
        border: 1px solid #ccc;
        background: #fff;
    }
    .hvb-batch-box,
    .hvb-feature-box,
    .hvb-intro-clean {
        background: #f5f5f5;
        color: #000;
        box-shadow: none;
    }
    .hvb-batch-box *,
    .hvb-feature-box *,
    .hvb-intro-clean * { color: #000 !important; }
    .hvb-product-container a {
        color: #000;
        text-decoration: underline;
        border-bottom: 0;
    }
}
/* =================================================================
   HVB Redesign — e-commerce additions to the heritage system
   All tokens inherit from .hvb-product-container.
   ================================================================= */

.hvb-product-container { max-width: 1180px; }

.hvb-mw-1180 { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---------------- TOP HERO LAYOUT (gallery + buy) -------------- */
.hvb-buy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 28px;
}
.hvb-buy-grid.is-mobile {
    grid-template-columns: 1fr;
    gap: 18px;
}

/* Breadcrumb */
.hvb-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 600;
}
.hvb-crumb a {
    color: var(--text-muted);
    border-bottom: 0;
    font-weight: 600;
}
.hvb-crumb a:hover { color: var(--forest-mid); }
.hvb-crumb-sep { opacity: 0.45; }

/* ---------------- GALLERY -------------------------------------- */
.hvb-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hvb-gallery-main {
    aspect-ratio: 1 / 1;
    background:
      repeating-linear-gradient(135deg, var(--bone) 0 14px, var(--cream) 14px 28px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(212, 175, 55, 0.22);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.hvb-gallery-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(26,58,46,0.05), transparent 55%);
    pointer-events: none;
}
.hvb-gallery-main .hvb-image-label {
    position: relative;
    z-index: 1;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--forest-mid);
    letter-spacing: 0.1em;
    background: rgba(255,255,255,0.72);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(212, 175, 55, 0.3);
}
.hvb-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.hvb-gallery-thumb {
    aspect-ratio: 1 / 1;
    background:
      repeating-linear-gradient(135deg, var(--bone) 0 8px, var(--cream) 8px 16px);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.22);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color var(--hp-transition-fast), transform var(--hp-transition-fast);
}
.hvb-gallery-thumb:hover { transform: translateY(-1px); }
.hvb-gallery-thumb.is-active {
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.18);
}

/* Floating ribbon on the main image */
.hvb-ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--forest);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.hvb-ribbon .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

/* ---------------- BUY CARD ------------------------------------- */
.hvb-buy {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.hvb-buy::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
}
.is-mobile .hvb-buy { padding: 22px 18px 18px; }

.hvb-buy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--forest-mid);
    margin-bottom: 10px;
}
.hvb-buy-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vein-color);
    box-shadow: 0 0 0 3px rgba(42,93,58,0.10);
}
.hvb-buy h1 {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.12;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}
.is-mobile .hvb-buy h1 { font-size: 1.55rem; }

.hvb-buy-sub {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 600;
}

/* Rating row */
.hvb-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    margin-bottom: 12px;
    color: var(--text-dark);
}
.hvb-stars {
    color: var(--gold-dark);
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}
.hvb-rating a {
    color: var(--text-muted);
    border-bottom: 0;
    font-weight: 600;
    font-size: 0.78rem;
}
.hvb-rating a:hover { color: var(--forest-mid); }

/* Price */
.hvb-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 4px;
    flex-wrap: wrap;
}
.hvb-price {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--forest);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}
.hvb-price-was {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-muted);
    text-decoration: line-through;
}
.hvb-price-save {
    background: rgba(46, 125, 50, 0.10);
    color: var(--forest-mid);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.hvb-price-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Label above a control group */
.hvb-buy-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 16px 0 8px;
}
.hvb-buy-label .picked {
    color: var(--forest);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.82rem;
}

/* Variant pills */
.hvb-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.hvb-pills.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hvb-pills.cols-5 { grid-template-columns: repeat(5, 1fr); }
.hvb-pills.cols-2 { grid-template-columns: repeat(2, 1fr); }
.is-mobile .hvb-pills { grid-template-columns: repeat(3, 1fr); }
.is-mobile .hvb-pills.cols-5 { grid-template-columns: repeat(3, 1fr); }

.hvb-pill {
    appearance: none;
    background: var(--paper);
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-md);
    padding: 10px 6px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-body);
    transition: all var(--hp-transition-fast);
    position: relative;
}
.hvb-pill .top {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--forest);
    line-height: 1.1;
}
.hvb-pill .sub {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.05em;
}
.hvb-pill:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}
.hvb-pill.is-active {
    border-color: var(--forest);
    background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
    box-shadow: 0 4px 12px rgba(26,58,46,0.10), inset 0 0 0 1px var(--forest);
}
.hvb-pill.is-active .top { color: var(--forest); }
.hvb-pills { overflow: visible; row-gap: 20px; }
.hvb-pills.cols-7 { grid-template-columns: repeat(7, 1fr); }
.is-mobile .hvb-pills.cols-7 { grid-template-columns: repeat(3, 1fr); }
.hvb-pill { overflow: visible; z-index: 1; }
.hvb-pill .badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.45);
    white-space: nowrap;
}

/* Vein swatch row */
.hvb-veins {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hvb-vein-swatch {
    appearance: none;
    background: var(--paper);
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-full);
    padding: 8px 12px 8px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: all var(--hp-transition-fast);
}
.hvb-vein-swatch:hover { border-color: var(--gold); }
.hvb-vein-swatch.is-active {
    border-color: var(--forest);
    background: var(--cream);
}
.hvb-vein-swatch .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.18);
}
.hvb-vein-swatch[data-vein="red"]   .dot { background: #8c4a4a; box-shadow: 0 0 0 2px rgba(140,74,74,0.18); }
.hvb-vein-swatch[data-vein="green"] .dot { background: #5c8b5a; box-shadow: 0 0 0 2px rgba(92,139,90,0.18); }
.hvb-vein-swatch[data-vein="white"] .dot { background: #f4ecd8; box-shadow: 0 0 0 2px rgba(212,175,55,0.30); border: 1px solid rgba(212,175,55,0.5); }
.hvb-vein-swatch[data-vein="gold"]  .dot { background: #c9a227; box-shadow: 0 0 0 2px rgba(201,162,39,0.18); }

/* Quantity stepper */
.hvb-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--paper);
}
.hvb-qty button {
    appearance: none;
    border: 0;
    background: transparent;
    width: 40px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--forest);
    font-weight: 700;
    transition: background var(--hp-transition-fast);
}
.hvb-qty button:hover { background: var(--cream); }
.hvb-qty input {
    width: 48px;
    border: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--forest);
    font-weight: 700;
    background: transparent;
}
.hvb-qty input:focus { outline: 0; }

/* Subscribe & save (radio cards) */
.hvb-ssave {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}
.hvb-ssave-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--hp-transition-fast);
    background: var(--paper);
}
.hvb-ssave-opt:hover { border-color: var(--gold); }
.hvb-ssave-opt.is-active {
    border-color: var(--forest);
    background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}
.hvb-ssave-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(26,58,46,0.3);
    flex-shrink: 0;
    background: #fff;
    position: relative;
}
.hvb-ssave-opt.is-active .hvb-ssave-radio {
    border-color: var(--forest);
}
.hvb-ssave-opt.is-active .hvb-ssave-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--forest);
    border-radius: 50%;
}
.hvb-ssave-body { flex: 1; min-width: 0; }
.hvb-ssave-title {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--forest);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hvb-ssave-title .saveBadge {
    background: var(--gold);
    color: var(--forest-deep);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}
.hvb-ssave-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.hvb-ssave-price {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--forest);
    text-align: right;
    flex-shrink: 0;
}

/* CTA */
.hvb-cta-row {
    display: flex;
    gap: 10px;
    margin: 16px 0 12px;
    align-items: stretch;
}
.hvb-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all var(--hp-transition-fast);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hvb-btn-primary {
    flex: 1;
    min-width: 0;
    background: var(--forest);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 14px rgba(26,58,46,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
    border-bottom: 0;
    white-space: nowrap;
}
.hvb-btn-primary .price-suffix {
    font-size: 0.92rem;
}
.hvb-btn-primary:hover {
    background: var(--forest-mid);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(26,58,46,0.30);
    color: #fff;
}
.hvb-btn-primary .price-suffix {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    font-size: 1rem;
    opacity: 0.9;
}
.hvb-btn-icon {
    width: 50px;
    background: var(--paper);
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-md);
    color: var(--forest);
    font-size: 1.2rem;
}
.hvb-btn-icon:hover { background: var(--cream); }

.hvb-btn-secondary {
    background: var(--paper);
    border: 1.5px solid var(--forest);
    color: var(--forest);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    font-size: 0.78rem;
}
.hvb-btn-secondary:hover { background: var(--cream); color: var(--forest); }

.hvb-btn-link {
    background: transparent;
    color: var(--forest-mid);
    border: 0;
    padding: 8px 4px;
    font-size: 0.74rem;
    text-decoration: underline;
    text-decoration-color: rgba(212,175,55,0.5);
    text-underline-offset: 3px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* Trust mini-strip inside buy box */
.hvb-trust-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px;
    margin-top: 14px;
    background: var(--bone);
    border-radius: var(--radius-md);
    border: 1px solid rgba(212, 175, 55, 0.18);
}
.hvb-trust-mini-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.hvb-trust-mini-item svg {
    width: 22px;
    height: 22px;
    color: var(--gold-dark);
    stroke-width: 1.8;
}
.hvb-trust-mini-item .l1 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--forest);
    font-weight: 700;
}
.hvb-trust-mini-item .l2 {
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Full-width trust strip (below hero) */
.hvb-trust-strip {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 18px;
}
.hvb-trust-strip-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
/* Desktop hides the duplicate set used for the mobile marquee loop. */
.hvb-trust-strip-track > div[aria-hidden="true"] { display: none; }

.is-mobile .hvb-trust-strip-track { grid-template-columns: repeat(2, 1fr); }
.hvb-trust-strip-track > div {
    padding: 18px 16px;
    text-align: center;
    border-right: 1px solid rgba(212, 175, 55, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.is-mobile .hvb-trust-strip-track > div:nth-child(even) { border-right: 0; }
.is-mobile .hvb-trust-strip-track > div:nth-child(-n+2) { border-bottom: 1px solid rgba(212, 175, 55, 0.18); }
.hvb-trust-strip-track > div:nth-child(4) { border-right: 0; }
.hvb-trust-strip svg,
.hvb-trust-strip-track svg { width: 26px; height: 26px; color: var(--gold-dark); stroke-width: 1.7; }
.hvb-trust-strip .l1,
.hvb-trust-strip-track .l1 { font-family: var(--font-display); color: var(--forest); font-size: 0.95rem; font-weight: 700; }
.hvb-trust-strip .l2,
.hvb-trust-strip-track .l2 { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; }

/* ---------------- BUILDER (variety pack) ----------------------- */
.hvb-builder {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 60%, var(--forest-mid) 100%);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    color: #fff;
    margin-bottom: 18px;
    position: relative;
    overflow: visible;
    box-shadow: var(--shadow-md);
}
.hvb-slots { position: relative; }
.is-mobile .hvb-builder { padding: 22px 18px 20px; }
.hvb-builder::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hvb-builder-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.hvb-builder-head h2 {
    color: #fff;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}
.hvb-builder-head .sub {
    color: var(--gold-soft);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}
.hvb-builder-total {
    background: rgba(212,175,55,0.12);
    border: 1px solid rgba(212,175,55,0.30);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    text-align: right;
    min-width: 180px;
}
.hvb-builder-total .lbl {
    font-size: 0.62rem;
    color: var(--gold-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.hvb-builder-total .val {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: #fff;
    line-height: 1.1;
    font-weight: 700;
}
.hvb-builder-total .save {
    font-size: 0.72rem;
    color: var(--gold-light);
    font-weight: 600;
}

.hvb-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.is-mobile .hvb-slots { grid-template-columns: 1fr 1fr; gap: 8px; }

.hvb-slot {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    cursor: pointer;
    transition: all var(--hp-transition-fast);
    text-align: left;
    position: relative;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hvb-slot:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(212,175,55,0.4);
}
.hvb-slot.filled {
    background: rgba(255,255,255,0.10);
    border-color: rgba(212,175,55,0.4);
}
.hvb-slot-num {
    font-size: 0.62rem;
    color: var(--gold-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.hvb-slot-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}
.hvb-slot.empty .hvb-slot-name {
    color: rgba(255,255,255,0.5);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 500;
}
.hvb-slot-weight {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    margin-top: 6px;
}
.hvb-slot-vein {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}
.hvb-slot-vein .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
}
.hvb-slot-vein[data-vein="red"] .dot { background: #c97a7a; }
.hvb-slot-vein[data-vein="green"] .dot { background: #85b67c; }
.hvb-slot-vein[data-vein="white"] .dot { background: #f4ecd8; }
.hvb-slot-vein[data-vein="gold"] .dot { background: var(--gold-light); }

.hvb-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.hvb-preset-chip {
    appearance: none;
    background: rgba(212,175,55,0.10);
    border: 1px solid rgba(212,175,55,0.30);
    color: var(--gold-soft);
    border-radius: var(--radius-full);
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hp-transition-fast);
    letter-spacing: 0.04em;
}
.hvb-preset-chip:hover {
    background: rgba(212,175,55,0.20);
    color: #fff;
    transform: translateY(-1px);
}
.hvb-presets-label {
    color: var(--gold-soft);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    width: 100%;
}

/* Strain picker dropdown panel — wider 2-column layout */
.hvb-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    color: var(--text-dark);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0,0,0,0.32);
    padding: 14px;
    z-index: 30;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid rgba(212, 175, 55, 0.25);
}
.is-mobile .hvb-picker { width: auto; left: 0; right: 0; }

/* Right-side slots flip the picker so it doesn't run off the edge */
.hvb-slots > .hvb-slot:nth-child(3) .hvb-picker,
.hvb-slots > .hvb-slot:nth-child(4) .hvb-picker {
    left: auto;
    right: 0;
}

.hvb-picker > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin-bottom: 6px;
}
.hvb-picker > div:last-child { margin-bottom: 0; }

.hvb-picker-group {
    grid-column: 1 / -1;
    font-family: var(--font-body);
    font-size: 0.64rem;
    color: var(--gold-dark);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 4px 4px;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    margin-top: 4px;
}
.hvb-picker > div:first-child .hvb-picker-group {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.hvb-picker-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--forest);
    background: transparent;
    transition: background var(--hp-transition-fast), transform var(--hp-transition-fast);
    border: 1px solid transparent;
}
.hvb-picker-opt:hover {
    background: var(--cream);
    border-color: rgba(212, 175, 55, 0.3);
}
.hvb-picker-opt .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}
.hvb-picker-opt[data-vein="red"]   .dot { background: #8c4a4a; }
.hvb-picker-opt[data-vein="green"] .dot { background: #5c8b5a; }
.hvb-picker-opt[data-vein="white"] .dot { background: #e6dfc9; }
.hvb-picker-opt[data-vein="gold"]  .dot { background: var(--gold); }

/* ---------------- REVIEWS ------------------------------------- */
.hvb-reviews-summary {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 32px;
    align-items: center;
}
.is-mobile .hvb-reviews-summary { grid-template-columns: 1fr; gap: 18px; }
.hvb-reviews-score {
    text-align: center;
    padding: 18px;
    background: var(--bone);
    border-radius: var(--radius-md);
    border: 1px solid rgba(212,175,55,0.18);
}
.hvb-reviews-score .big {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--forest);
    font-weight: 700;
    line-height: 1;
}
.hvb-reviews-score .stars { color: var(--gold-dark); font-size: 1.1rem; margin: 4px 0; }
.hvb-reviews-score .count {
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.hvb-reviews-bars { display: flex; flex-direction: column; gap: 6px; }
.hvb-reviews-bar {
    display: grid;
    grid-template-columns: 56px 1fr 40px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.hvb-reviews-bar .track {
    height: 8px;
    background: var(--bone);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.hvb-reviews-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    border-radius: var(--radius-full);
}
.hvb-reviews-bar .count { text-align: right; font-variant-numeric: tabular-nums; }

.hvb-review-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.is-mobile .hvb-review-cards { grid-template-columns: 1fr; }
.hvb-review-card {
    background: var(--bone);
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(212,175,55,0.18);
}
.hvb-review-card .stars { color: var(--gold-dark); font-size: 0.95rem; margin-bottom: 8px; }
.hvb-review-card .quote {
    font-family: var(--font-body);
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 12px;
}
.hvb-review-card .who {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hvb-review-card .verified {
    color: var(--forest-mid);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(46,125,50,0.10);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 700;
}

/* Empty / form gate copy */
.hvb-reviews-empty,
.hvb-review-gate {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* Inline submit form (replaces WC Reviews tab) */
.hvb-review-form-wrap {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(212,175,55,0.22);
}
.hvb-review-form-title {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: var(--forest);
    margin: 0 0 14px;
    letter-spacing: 0.02em;
}
.hvb-review-form-wrap #review_form .comment-form,
.hvb-review-form-wrap #respond .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.is-mobile .hvb-review-form-wrap #review_form .comment-form,
.is-mobile .hvb-review-form-wrap #respond .comment-form {
    grid-template-columns: 1fr;
}
.hvb-review-form-wrap .comment-form-author,
.hvb-review-form-wrap .comment-form-email { margin: 0; }
.hvb-review-form-wrap .comment-form-rating,
.hvb-review-form-wrap .comment-form-comment,
.hvb-review-form-wrap .form-submit { grid-column: 1 / -1; margin: 0; }
.hvb-review-form-wrap label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--forest);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.hvb-review-form-wrap .required { color: var(--gold-dark); }
.hvb-review-form-wrap input[type="text"],
.hvb-review-form-wrap input[type="email"],
.hvb-review-form-wrap select,
.hvb-review-form-wrap textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(212,175,55,0.32);
    border-radius: 10px;
    background: #fffdf6;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--forest);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hvb-review-form-wrap input:focus,
.hvb-review-form-wrap select:focus,
.hvb-review-form-wrap textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.hvb-review-form-wrap textarea { min-height: 130px; resize: vertical; }
.hvb-review-form-wrap .form-submit { margin-top: 4px; }
.hvb-review-form-wrap input[type="submit"] {
    background: var(--forest);
    color: #fff;
    border: 0;
    padding: 12px 28px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}
.hvb-review-form-wrap input[type="submit"]:hover {
    background: var(--forest-mid);
}
.hvb-review-form-wrap input[type="submit"]:active {
    transform: translateY(1px);
}
.hvb-review-form-wrap .logged-in-as,
.hvb-review-form-wrap .comment-notes,
.hvb-review-form-wrap .comment-form-cookies-consent { grid-column: 1 / -1; font-size: 0.82rem; color: var(--text-muted); margin: 0; }

/* ---------------- LAB COA ------------------------------------- */
.hvb-coa {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}
.is-mobile .hvb-coa { grid-template-columns: 1fr; gap: 14px; }
.hvb-coa-head { display: flex; align-items: center; gap: 16px; }
.hvb-coa-seal {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--cream);
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1;
}
.hvb-coa h3 {
    margin: 0 0 4px;
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 1.1rem;
}
.hvb-coa p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.hvb-coa-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- STRAIN DROPDOWN ---------------------------- */
.hvb-strain-picker {
    position: relative;
}
.hvb-strain-select {
    appearance: none;
    width: 100%;
    background: var(--paper);
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-md);
    padding: 12px 44px 12px 14px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--hp-transition-fast);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--text-dark);
}
.hvb-strain-select:hover { border-color: var(--gold); }
.hvb-strain-select.is-open {
    border-color: var(--forest);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.hvb-strain-select .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(212,175,55,0.18);
}
.hvb-strain-select[data-vein="red"]   .dot { background: #8c4a4a; box-shadow: 0 0 0 2px rgba(140,74,74,0.18); }
.hvb-strain-select[data-vein="green"] .dot { background: #5c8b5a; box-shadow: 0 0 0 2px rgba(92,139,90,0.18); }
.hvb-strain-select[data-vein="white"] .dot { background: #f4ecd8; box-shadow: 0 0 0 2px rgba(212,175,55,0.3); border: 1px solid rgba(212,175,55,0.4); }
.hvb-strain-select[data-vein="gold"]  .dot { background: #c9a227; box-shadow: 0 0 0 2px rgba(201,162,39,0.18); }
.hvb-strain-select .body { flex: 1; min-width: 0; }
.hvb-strain-select .name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--forest);
    line-height: 1.2;
}
.hvb-strain-select .meta {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}
.hvb-strain-select .chev {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--forest);
    font-family: var(--font-display);
    font-size: 1.1rem;
    transition: transform var(--hp-transition-fast);
}
.hvb-strain-select.is-open .chev { transform: translateY(-50%) rotate(180deg); }

.hvb-strain-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border: 1.5px solid var(--forest);
    border-top: 0;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    z-index: 30;
    max-height: 360px;
    overflow-y: auto;
}
.hvb-strain-menu-group {
    font-family: var(--font-body);
    font-size: 0.66rem;
    color: var(--gold-dark);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 14px 6px;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    background: var(--bone);
}
.hvb-strain-menu-group:first-child { border-top: 0; }
.hvb-strain-menu-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--hp-transition-fast);
    font-family: var(--font-body);
}
.hvb-strain-menu-opt:hover { background: var(--cream); }
.hvb-strain-menu-opt.is-active {
    background: var(--cream);
    box-shadow: inset 3px 0 0 var(--forest);
}
.hvb-strain-menu-opt.is-oos {
    opacity: 0.55;
    cursor: not-allowed;
}
.hvb-strain-menu-opt.is-oos:hover { background: transparent; }
.hvb-strain-menu-opt .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}
.hvb-strain-menu-opt[data-vein="red"]   .dot { background: #8c4a4a; }
.hvb-strain-menu-opt[data-vein="green"] .dot { background: #5c8b5a; }
.hvb-strain-menu-opt[data-vein="white"] .dot { background: #f4ecd8; border: 1px solid rgba(212,175,55,0.4); }
.hvb-strain-menu-opt[data-vein="gold"]  .dot { background: #c9a227; }
.hvb-strain-menu-opt .body { flex: 1; min-width: 0; }
.hvb-strain-menu-opt .name {
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: var(--forest);
    font-weight: 600;
    line-height: 1.2;
}
.hvb-strain-menu-opt .sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.hvb-strain-menu-opt .pill-tag {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.hvb-strain-menu-opt .pill-tag.oos {
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
}
.hvb-strain-menu-opt .pill-tag.preorder {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-dark);
}
.hvb-strain-menu-opt .pill-tag.new {
    background: rgba(46, 125, 50, 0.10);
    color: var(--forest-mid);
}

/* Sale tag above title (matches the garuda_sale_tag_above_title PHP hook) */
.hvb-sale-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #a93e3e 0%, #c54545 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(169, 62, 62, 0.28);
}
.hvb-sale-tag::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 2px rgba(244, 224, 97, 0.35);
}

/* Pre-Order availability badge */
.hvb-preorder-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 175, 55, 0.16);
    color: var(--gold-dark);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(212, 175, 55, 0.3);
    margin-left: 8px;
}
.hvb-preorder-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-dark);
}

/* ---------------- SUBSCRIPTION SCHEDULE ---------------------- */
.hvb-sched-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bone);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 8px 0 16px;
}
.hvb-sched-toggle .lbl {
    flex: 1;
    font-size: 0.86rem;
    color: var(--forest);
    font-weight: 600;
}
.hvb-sched-toggle .lbl .sub {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}
.hvb-switch {
    width: 38px;
    height: 22px;
    background: rgba(0,0,0,0.18);
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background var(--hp-transition-fast);
}
.hvb-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: transform var(--hp-transition-fast);
}
.hvb-switch.is-on { background: var(--forest); }
.hvb-switch.is-on::after { transform: translateX(16px); }

.hvb-schedule {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}
.hvb-schedule-head {
    padding: 10px 14px;
    background: var(--cream);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    font-size: 0.7rem;
    color: var(--gold-dark);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hvb-schedule-head .copy-row {
    appearance: none;
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--forest);
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-transform: uppercase;
    transition: all var(--hp-transition-fast);
}
.hvb-schedule-head .copy-row:hover { background: var(--cream); border-color: var(--gold); }

.hvb-schedule-month {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
    position: relative;
}
.hvb-schedule-month:last-child { border-bottom: 0; }
.is-mobile .hvb-schedule-month { grid-template-columns: 60px 1fr; gap: 10px; }
.hvb-schedule-month .when {
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: var(--forest);
    font-weight: 600;
    line-height: 1.15;
}
.hvb-schedule-month .when .delivery-num {
    display: block;
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
.hvb-schedule-month .pick {
    appearance: none;
    width: 100%;
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-sm);
    padding: 8px 32px 8px 10px;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: all var(--hp-transition-fast);
}
.hvb-schedule-month .pick:hover { border-color: var(--gold); }
.hvb-schedule-month .pick .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}
.hvb-schedule-month .pick[data-vein="red"]   .dot { background: #8c4a4a; }
.hvb-schedule-month .pick[data-vein="green"] .dot { background: #5c8b5a; }
.hvb-schedule-month .pick[data-vein="white"] .dot { background: #f4ecd8; border: 1px solid rgba(212,175,55,0.4); }
.hvb-schedule-month .pick[data-vein="gold"]  .dot { background: #c9a227; }
.hvb-schedule-month .pick .name {
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--forest);
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hvb-schedule-month .pick .chev {
    position: absolute;
    right: 10px;
    color: var(--forest);
    font-size: 0.9rem;
}

.hvb-schedule-month .pick-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border: 1px solid var(--forest);
    border-top: 0;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.hvb-schedule-month .pick.is-open {
    border-color: var(--forest);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* "Same every month" mode shows a single picker */
.hvb-sched-single {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 16px;
}
.hvb-sched-single-label {
    font-size: 0.7rem;
    color: var(--gold-dark);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}
.hvb-coaplug {
    margin: 0 0 18px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--cream);
    border: 1px solid rgba(212, 175, 55, 0.22);
}
.hvb-coaplug-compliance {
    background: rgba(212, 175, 55, 0.06);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    padding: 14px 22px;
    font-size: 0.86rem;
    color: var(--text-dark);
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.hvb-coaplug-compliance strong {
    color: var(--gold-dark);
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.hvb-coaplug-head {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
    color: #fff;
    padding: 22px 24px 24px;
    border-bottom: 2px solid var(--gold);
    position: relative;
}
.hvb-coaplug-head::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-soft), var(--gold));
}
.hvb-coaplug-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--gold-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.hvb-coaplug-meta .lbl {
    color: var(--gold-light);
    font-weight: 700;
    letter-spacing: 0.14em;
}
.hvb-coaplug-meta strong {
    font-family: 'Courier New', monospace;
    color: var(--gold-light);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}
.hvb-coaplug-meta .sep { opacity: 0.4; }
.hvb-coaplug-strain {
    font-family: var(--font-display);
    color: var(--gold-light);
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
}
.hvb-coaplug-vein {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(133, 182, 124, 0.15);
    border: 1px solid rgba(133, 182, 124, 0.35);
    color: #c8eab8;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 14px 6px 12px;
    border-radius: var(--radius-full);
}
.hvb-coaplug-vein .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--forest-lighter);
}
.hvb-coaplug-vein.vein-red { background: rgba(201, 122, 122, 0.15); border-color: rgba(201, 122, 122, 0.35); color: #ecb6b6; }
.hvb-coaplug-vein.vein-red .dot { background: #c97a7a; }
.hvb-coaplug-vein.vein-white { background: rgba(244, 236, 216, 0.15); border-color: rgba(244, 236, 216, 0.35); color: #f4ecd8; }
.hvb-coaplug-vein.vein-white .dot { background: #f4ecd8; }
.hvb-coaplug-vein.vein-gold { background: rgba(212, 175, 55, 0.18); border-color: rgba(212, 175, 55, 0.4); color: var(--gold-light); }
.hvb-coaplug-vein.vein-gold .dot { background: var(--gold); }

.hvb-coaplug-body { padding: 22px 24px 26px; }
.hvb-coaplug-section-label {
    display: inline-block;
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}
.hvb-coaplug-alk {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 14px;
    border: 1px solid rgba(212, 175, 55, 0.18);
}
.is-mobile .hvb-coaplug-alk { grid-template-columns: 1fr; gap: 16px; }
.hvb-coaplug-alk-cell .name {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--forest);
    font-weight: 700;
    margin-bottom: 4px;
}
.hvb-coaplug-alk-cell .big {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.hvb-coaplug-alk-cell .num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--gold-dark);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.hvb-coaplug-alk-cell .pct {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold-dark);
    font-weight: 700;
    opacity: 0.7;
}
.hvb-coaplug-alk-cell .method {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-top: 6px;
    text-transform: uppercase;
}

.hvb-coaplug-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.is-mobile .hvb-coaplug-pills { grid-template-columns: 1fr; }
.hvb-coaplug-pill {
    background: #fff;
    border: 1px solid rgba(46, 125, 50, 0.25);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}
.hvb-coaplug-pill .t {
    font-size: 0.7rem;
    color: var(--forest);
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}
.hvb-coaplug-pill .v {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--forest-mid);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.hvb-coaplug-pill .v .dot.ok {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--forest-mid);
}

.hvb-coaplug-row {
    background: #fff;
    border-radius: var(--radius-full);
    border: 1px solid rgba(212, 175, 55, 0.18);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-radius var(--hp-transition-fast);
}
.hvb-coaplug-row.open,
.hvb-coaplug-row[open] { border-radius: var(--radius-md); }
details.hvb-coaplug-row > summary { list-style: none; }
details.hvb-coaplug-row > summary::-webkit-details-marker { display: none; }
details.hvb-coaplug-row > summary::marker { content: ''; }
details.hvb-coaplug-row .plus::before { content: '+'; }
details.hvb-coaplug-row[open] .plus::before { content: '\2212'; }

/* <details>-based FAQ items: hide native marker so the CSS arrow rendered
   via .hvb-faq-q::after (defined elsewhere in this file) takes over. Open
   state is mirrored from [open] -> .open so the existing .hvb-faq-item.open
   rule keeps working. */
details.hvb-faq-item > summary { list-style: none; cursor: pointer; }
details.hvb-faq-item > summary::-webkit-details-marker { display: none; }
details.hvb-faq-item > summary::marker { content: ''; }
.hvb-coaplug-row-head {
    width: 100%;
    background: none;
    border: 0;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--font-body);
}
.hvb-coaplug-row-head .left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hvb-coaplug-row-head .bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hvb-coaplug-row-head .lbl {
    font-family: var(--font-display);
    color: var(--forest);
    font-weight: 600;
    font-size: 1rem;
}
.hvb-coaplug-row-head .plus {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--gold-dark);
    font-weight: 400;
    width: 22px;
    text-align: center;
}
.hvb-coaplug-row-body {
    padding: 0 22px 16px 44px;
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.65;
}

.hvb-coaplug-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.25);
    margin: 14px 0 12px;
}
.hvb-coaplug-reports-label {
    font-size: 0.7rem;
    color: var(--gold-dark);
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
}
.hvb-coaplug-reports {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.hvb-coaplug-report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 14px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-bottom: 0;
    transition: transform var(--hp-transition-fast);
}
.hvb-coaplug-report:hover { transform: translateY(-1px); }
.hvb-coaplug-report svg { width: 16px; height: 16px; }
.hvb-coaplug-report-green {
    background: rgba(133, 182, 124, 0.18);
    color: var(--forest);
    border: 1px solid rgba(133, 182, 124, 0.4);
}
.hvb-coaplug-report-blue {
    background: rgba(184, 207, 229, 0.4);
    color: #2c5282;
    border: 1px solid rgba(44, 82, 130, 0.25);
}
.hvb-coaplug-report-green:hover { color: var(--forest); }
.hvb-coaplug-report-blue:hover { color: #2c5282; }

.hvb-coaplug-info {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(212, 175, 55, 0.18);
    padding: 14px 18px;
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.hvb-coaplug-info .info-mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--forest-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.hvb-coaplug-info a {
    color: var(--gold-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-bottom: 0;
}

/* ---------------- CATALOG PAGE -------------------------------- */
.hvb-cat-intro {
    background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
    border-radius: var(--radius-lg);
    padding: 48px 40px 44px;
    margin-bottom: 22px;
    text-align: left;
    border: 1px solid rgba(212, 175, 55, 0.18);
    position: relative;
    overflow: hidden;
}
.is-mobile .hvb-cat-intro { padding: 32px 22px 26px; }
.hvb-cat-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hvb-cat-intro h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    color: var(--forest);
    margin: 18px 0 14px;
    letter-spacing: 0.01em;
    line-height: 1.05;
    max-width: 22ch;
}
.hvb-cat-intro h1 em {
    color: var(--gold-dark);
    font-style: italic;
    font-weight: 700;
}
.hvb-cat-intro .sub {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--text-dark);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 0 22px;
}
.hvb-trust-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hvb-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-full);
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--forest);
    letter-spacing: 0.02em;
}
.hvb-trust-chip svg {
    width: 16px;
    height: 16px;
    color: var(--gold-dark);
    stroke-width: 1.8;
}

/* Toolbar */
.hvb-toolbar {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-lg);
    padding: 16px 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 12px;
    z-index: 5;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.92);
}
.hvb-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.hvb-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hvb-filters-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 10px;
}
.hvb-filter-btn {
    appearance: none;
    background: var(--paper);
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-full);
    padding: 8px 14px 8px 12px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--hp-transition-fast);
}
.hvb-filter-btn .vein-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
}
.hvb-filter-btn[data-vein="red"] .vein-dot { background: #8c4a4a; }
.hvb-filter-btn[data-vein="green"] .vein-dot { background: #5c8b5a; }
.hvb-filter-btn[data-vein="white"] .vein-dot { background: #e6dfc9; border: 1px solid rgba(212,175,55,0.5); }
.hvb-filter-btn[data-vein="gold"] .vein-dot { background: var(--gold); }
.hvb-filter-btn[data-vein="all"] .vein-dot { background: linear-gradient(135deg, #8c4a4a, #5c8b5a, #e6dfc9, var(--gold)); }
.hvb-filter-btn .count {
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    margin-left: 2px;
}
.hvb-filter-btn:hover { border-color: var(--gold); }
.hvb-filter-btn.is-active {
    background: var(--forest);
    color: #fff;
    border-color: var(--forest);
}
.hvb-filter-btn.is-active .count { background: rgba(255,255,255,0.18); color: #fff; }

.hvb-sort {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hvb-sort .results {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.hvb-sort .results strong { color: var(--forest); font-weight: 700; }
.hvb-sort select {
    appearance: none;
    background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231a3a2e' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center;
    background-size: 10px;
    border: 1.5px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--radius-full);
    padding: 8px 36px 8px 16px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--forest);
    cursor: pointer;
}
.hvb-sort select:hover { border-color: var(--gold); }

/* Section kicker — matches the existing template */
.hvb-sec-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.hvb-sec-num {
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: var(--gold-dark);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}
.hvb-sec-rule {
    flex: 0 0 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.hvb-sec-kind {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--forest-mid);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
}

.hvb-sec-head {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: end;
    margin-bottom: 22px;
}
.is-mobile .hvb-sec-head { grid-template-columns: 1fr; gap: 14px; }
.hvb-sec-head h2 {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.hvb-sec-head h2 em { color: var(--gold-dark); font-style: italic; }
.hvb-sec-head > p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Product grid */
.hvb-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}
.is-mobile .hvb-product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

.hvb-pcard {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border-bottom: 0;
    transition: all var(--hp-transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.hvb-pcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(212, 175, 55, 0.4);
    color: inherit;
}
.hvb-pcard-thumb {
    aspect-ratio: 1 / 1;
    background:
      repeating-linear-gradient(135deg, var(--bone) 0 12px, var(--cream) 12px 24px);
    position: relative;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    overflow: hidden;
}
.hvb-pcard-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.5), transparent 55%);
}
.hvb-pcard-thumb .placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest-mid);
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 8px;
    z-index: 1;
}
.hvb-pcard-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--forest);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.hvb-pcard-badge.badge-gold {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: var(--forest-deep);
}
.hvb-pcard-badge.badge-red {
    background: linear-gradient(135deg, #6b3535, #8c4a4a);
}
.hvb-pcard-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.hvb-pcard-vein {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.hvb-pcard-vein .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
}
.hvb-pcard-vein[data-vein="red"] .dot { background: #8c4a4a; }
.hvb-pcard-vein[data-vein="green"] .dot { background: #5c8b5a; }
.hvb-pcard-vein[data-vein="white"] .dot { background: #e6dfc9; border: 1px solid rgba(212,175,55,0.5); }
.hvb-pcard-vein[data-vein="gold"] .dot { background: var(--gold); }
.hvb-pcard-vein[data-vein="other"] .dot { background: linear-gradient(135deg, #8c4a4a, var(--gold)); }

.hvb-pcard h3 {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.hvb-pcard-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}
.hvb-pcard-rating .stars { color: var(--gold-dark); font-size: 0.78rem; letter-spacing: 0.05em; }
.hvb-pcard-rating .count {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}
.hvb-pcard-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 14px;
    flex: 1;
}
.hvb-pcard-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
}
.hvb-pcard-price {
    font-family: var(--font-display);
    color: var(--gold-dark);
    font-size: 1.05rem;
    font-weight: 700;
}
.hvb-pcard-price .from {
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
    margin-bottom: -2px;
}
.hvb-pcard-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--forest);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hvb-pcard-cta svg { width: 14px; height: 14px; transition: transform var(--hp-transition-fast); }
.hvb-pcard:hover .hvb-pcard-cta svg { transform: translateX(3px); }

/* Sold out card variant */
.hvb-pcard.is-soldout { opacity: 0.85; }
.hvb-pcard.is-soldout .hvb-pcard-thumb { filter: grayscale(0.6); }
.hvb-pcard.is-soldout .hvb-pcard-badge { background: #6b6b6b; }
.hvb-pcard.is-soldout .hvb-pcard-cta { color: var(--text-muted); }

/* Sold-out toggle */
.hvb-soldout-toggle {
    text-align: center;
    margin: 8px 0 22px;
}
.hvb-soldout-toggle button {
    appearance: none;
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-full);
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--forest);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--hp-transition-fast);
}
.hvb-soldout-toggle button:hover { background: var(--cream); }
.hvb-soldout-toggle button .chev {
    transition: transform var(--hp-transition);
    font-family: var(--font-display);
}
.hvb-soldout-toggle button.is-open .chev { transform: rotate(180deg); }

/* Catalog section divider (H · V · B) */
.hvb-section-divider {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 36px 0 28px;
    color: var(--gold-dark);
}
.hvb-section-divider .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hvb-section-divider .mark {
    font-family: var(--font-display);
    font-size: 0.92rem;
    letter-spacing: 0.4em;
    color: var(--gold-dark);
    font-weight: 700;
}

/* Lab reassurance block */
.hvb-cat-lab {
    background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
    color: #fff;
    padding: 44px 40px;
    border-radius: var(--radius-lg);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.is-mobile .hvb-cat-lab { padding: 30px 22px; }
.hvb-cat-lab::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hvb-cat-lab h2 {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 14px 0 18px;
    letter-spacing: 0.01em;
    max-width: 24ch;
}
.hvb-cat-lab h2 em { color: var(--gold-soft); font-style: italic; }
.hvb-cat-lab .lead {
    color: rgba(255,255,255,0.82);
    margin: 0 0 26px;
    max-width: 60ch;
    font-size: 1rem;
}
.hvb-cat-lab .lead a { color: var(--gold-soft); border-bottom-color: rgba(232,200,115,0.5); }
.hvb-cat-lab .lead a:hover { color: #fff; }
.hvb-cat-lab-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}
.is-mobile .hvb-cat-lab-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.hvb-cat-lab-metric {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-md);
    padding: 18px;
}
.hvb-cat-lab-metric svg {
    width: 26px;
    height: 26px;
    color: var(--gold-soft);
    stroke-width: 1.7;
    margin-bottom: 10px;
}
.hvb-cat-lab-metric .t {
    font-family: var(--font-display);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.hvb-cat-lab-metric .d {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}

/* Final CTA block */
.hvb-final-cta {
    background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.22);
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
}
.is-mobile .hvb-final-cta { padding: 32px 22px; }
.hvb-final-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
}
.hvb-final-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--forest);
    margin: 16px 0 12px;
}
.hvb-final-cta h2 em { color: var(--gold-dark); font-style: italic; }
.hvb-final-cta .lead {
    max-width: 50ch;
    margin: 0 auto 22px;
    color: var(--text-muted);
}
.hvb-cta-row-center {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------- FAQ ----------------------------------------- */
.hvb-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hvb-faq-item {
    background: linear-gradient(180deg, #ffffff 0%, var(--bone) 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
    transition: border-color var(--hp-transition-fast),
                box-shadow var(--hp-transition-fast),
                transform var(--hp-transition-fast);
}
.hvb-faq-item:hover {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: var(--shadow-sm);
}
.hvb-faq-item.open,
.hvb-faq-item[open] {
    border-color: var(--gold);
    background: linear-gradient(180deg, #fffaee 0%, var(--cream) 100%);
    box-shadow: var(--shadow-sm);
}
.hvb-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    background: none;
    border: 0;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--forest);
    text-align: left;
    font-weight: 600;
    line-height: 1.35;
    transition: color var(--hp-transition-fast);
}
.hvb-faq-q:hover,
.hvb-faq-item.open .hvb-faq-q,
.hvb-faq-item[open] .hvb-faq-q {
    color: var(--forest-deep);
}
.hvb-faq-q::after {
    content: '+';
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold-dark);
    margin-left: 0;
    font-weight: 400;
    line-height: 1;
    transition: background var(--hp-transition-fast),
                transform var(--hp-transition-fast);
}
.hvb-faq-item.open .hvb-faq-q::after,
.hvb-faq-item[open] .hvb-faq-q::after {
    content: '\2212';
    background: var(--gold);
    color: #fff;
}
.hvb-faq-a {
    padding: 0 22px 20px 22px;
    margin-top: -2px;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.7;
    max-width: 72ch;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    padding-top: 14px;
}
.hvb-faq-a p:first-child { margin-top: 0; }
.hvb-faq-a p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .hvb-faq-q { padding: 15px 16px; font-size: 1rem; }
    .hvb-faq-a { padding: 12px 16px 16px; }
}

/* ---------------- RELATED PRODUCTS ---------------------------- */
.hvb-related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.is-mobile .hvb-related { grid-template-columns: 1fr 1fr; gap: 10px; }
.hvb-related-card {
    background: var(--paper);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--hp-transition);
    cursor: pointer;
}
.hvb-related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.hvb-related-card .img {
    aspect-ratio: 1 / 1;
    background:
      repeating-linear-gradient(135deg, var(--bone) 0 10px, var(--cream) 10px 20px);
    position: relative;
}
.hvb-related-card .img .vein-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    color: var(--forest);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}
.hvb-related-card .info { padding: 12px 14px 16px; }
.hvb-related-card .name {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.25;
}
.hvb-related-card .price {
    font-family: var(--font-display);
    color: var(--gold-dark);
    font-size: 0.95rem;
    font-weight: 700;
}
.hvb-related-card .stars {
    color: var(--gold-dark);
    font-size: 0.72rem;
    margin-top: 4px;
}

/* ---------------- ALKALOID PROFILE PANEL ---------------------- */
.hvb-alkaloid-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.is-mobile .hvb-alkaloid-panel { grid-template-columns: 1fr; gap: 16px; }
.hvb-alkaloid-bars { display: flex; flex-direction: column; gap: 14px; }
.hvb-alkaloid-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.hvb-alkaloid-bar .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.hvb-alkaloid-bar .name {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--forest);
    font-weight: 600;
    font-style: italic;
}
.hvb-alkaloid-bar .val {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--gold-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hvb-alkaloid-bar .track {
    height: 8px;
    background: var(--bone);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}
.hvb-alkaloid-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    border-radius: var(--radius-full);
}
.hvb-alkaloid-bar .desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Collapsed extra alkaloids ----------------------------------- */
.hvb-alkaloid-more {
    margin-top: 4px;
    border-top: 1px solid rgba(212,175,55,0.20);
    padding-top: 14px;
}
.hvb-alkaloid-more > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.28);
    color: var(--forest, #1a3a2e);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.hvb-alkaloid-more > summary::-webkit-details-marker { display: none; }
.hvb-alkaloid-more > summary:hover {
    background: rgba(212,175,55,0.14);
    border-color: rgba(212,175,55,0.42);
}
.hvb-alkaloid-more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold, #d4af37);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.25s ease;
}
.hvb-alkaloid-more[open] > summary .hvb-alkaloid-more-icon {
    transform: rotate(45deg);
}
.hvb-alkaloid-more-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

/* ---------------- DOSING CARD --------------------------------- */
.hvb-dosing {
    background: var(--paper);
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 12px 0 18px;
}
.is-mobile .hvb-dosing { grid-template-columns: 1fr; gap: 10px; text-align: left; }
.hvb-dosing-cell {
    text-align: center;
    padding: 6px;
    border-right: 1px solid rgba(212,175,55,0.20);
}
.hvb-dosing-cell:last-child { border-right: 0; }
.is-mobile .hvb-dosing-cell { border-right: 0; border-bottom: 1px solid rgba(212,175,55,0.20); padding-bottom: 10px; text-align: left; display: flex; justify-content: space-between; align-items: baseline; }
.is-mobile .hvb-dosing-cell:last-child { border-bottom: 0; }
.hvb-dosing-cell .lbl {
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
.hvb-dosing-cell .val {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--forest);
    font-weight: 700;
    margin-top: 4px;
}

/* ---------------- TIMELINE / STORY ---------------------------- */
.hvb-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 14px;
}
/* Each step is now a <details> element. On desktop the disclosure
   marker is hidden and the body content is forced visible so it
   behaves like a regular column. On mobile the same element acts
   as a tap-to-expand accordion row. */
.hvb-timeline-step {
    position: relative;
    padding-top: 28px;
}
.hvb-timeline-step > summary {
    list-style: none;
    cursor: default;
}
.hvb-timeline-step > summary::-webkit-details-marker { display: none; }
.hvb-timeline-chevron { display: none; }

/* Force details body visible on desktop regardless of [open] state */
@media (min-width: 901px) {
    .hvb-timeline-step:not([open]) > .hvb-timeline-body { display: block; }
}

.hvb-timeline-step::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
}
.hvb-timeline-step::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(212,175,55,0.3);
}
.hvb-timeline-step .yr {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold-dark);
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}
.hvb-timeline-title {
    display: block;
    text-align: center;
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-family: var(--font-display);
    color: var(--forest);
    font-weight: 700;
}
.hvb-timeline-step p {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.hvb-timeline-body { display: block; }

/* ---------------- STICKY MOBILE BAR --------------------------- */
.hvb-sticky-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--paper);
    border-top: 1px solid rgba(212,175,55,0.30);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 5;
}
.hvb-sticky-bar .price {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 1.2rem;
    font-weight: 700;
}
.hvb-sticky-bar .price-sub {
    font-size: 0.66rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.hvb-sticky-bar .hvb-btn-primary {
    flex: 1;
    padding: 12px 16px;
    font-size: 0.78rem;
}

/* ---------------- SECTION HEADER PATTERN ---------------------- */
.hvb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.hvb-section-head h2 { margin: 0; }
.hvb-section-head .meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Subscription-specific */
.hvb-sub-tier {
    background: linear-gradient(180deg, var(--cream) 0%, var(--bone) 100%);
    border-radius: var(--radius-lg);
    padding: 24px 18px 20px;
    text-align: center;
    border: 1.5px solid rgba(212,175,55,0.22);
    cursor: pointer;
    position: relative;
    transition: all var(--hp-transition);
}
.hvb-sub-tier:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.hvb-sub-tier.is-active {
    border-color: var(--forest);
    background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
    box-shadow: 0 8px 24px rgba(26,58,46,0.12);
}
.hvb-sub-tier.is-active::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
}
.hvb-sub-tier .term {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.hvb-sub-tier .per {
    font-family: var(--font-display);
    color: var(--gold-dark);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0 4px;
}
.hvb-sub-tier .per-sub { font-size: 0.74rem; color: var(--text-muted); }
.hvb-sub-tier .save {
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--forest-mid);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hvb-sub-tier.best-value::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(212,175,55,0.4);
}

/* ---------------- DENSITY / TWEAK MODIFIERS ------------------- */
.hvb-density-compact .hvb-section-card,
.hvb-density-compact .hvb-content-section { padding: 22px 22px; margin-bottom: 12px; }
.hvb-density-compact .hvb-hero-clean,
.hvb-density-compact .hvb-hero-section { padding: 32px 20px 28px; margin-bottom: 14px; }
.hvb-density-compact .hvb-buy { padding: 22px 22px 20px; }
.hvb-density-compact .hvb-buy-grid { gap: 28px; margin-bottom: 18px; }

.hvb-density-spacious .hvb-section-card,
.hvb-density-spacious .hvb-content-section { padding: 44px 36px; margin-bottom: 28px; }
.hvb-density-spacious .hvb-hero-clean { padding: 64px 28px 56px; margin-bottom: 28px; }
.hvb-density-spacious .hvb-buy { padding: 36px 32px 30px; }
.hvb-density-spacious .hvb-buy-grid { gap: 56px; margin-bottom: 36px; }

/* No drop cap variant */
.hvb-no-dropcap .dropcap::first-letter {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    float: none;
    margin: 0;
    color: inherit;
    font-weight: inherit;
}

/* ---------------- DEVICE FRAMING ------------------------------ */
.hvb-frame {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(26,58,46,0.10);
    position: relative;
}
.hvb-frame .hvb-browser-bar {
    background: linear-gradient(180deg, #f3eee0 0%, #ece5d0 100%);
    border-bottom: 1px solid rgba(212,175,55,0.25);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hvb-browser-bar .dots {
    display: flex;
    gap: 6px;
}
.hvb-browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #d0c4a4; }
.hvb-browser-bar .dot.r { background: #d59b8b; }
.hvb-browser-bar .dot.y { background: #d8b962; }
.hvb-browser-bar .dot.g { background: #8aa57c; }
.hvb-browser-bar .url {
    flex: 1;
    background: rgba(255,255,255,0.6);
    border-radius: var(--radius-full);
    padding: 5px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    border: 1px solid rgba(212,175,55,0.18);
}

.hvb-frame .hvb-mobile-bar {
    background: var(--forest);
    color: var(--gold-soft);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.hvb-frame .hvb-mobile-bar .dots { display: flex; gap: 3px; }
.hvb-frame .hvb-mobile-bar .dots span {
    width: 4px; height: 4px; border-radius: 50%; background: var(--gold-soft);
}

.hvb-frame .hvb-nav {
    background: var(--paper);
    border-bottom: 1px solid rgba(212,175,55,0.18);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.hvb-nav .logo {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.hvb-nav .logo .amp {
    color: var(--gold-dark);
    font-style: italic;
    font-weight: 400;
    margin: 0 2px;
}
.hvb-nav nav {
    display: flex;
    gap: 22px;
}
.is-mobile .hvb-nav nav { display: none; }
.hvb-nav nav a {
    color: var(--forest);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 0;
}
.hvb-nav nav a:hover { color: var(--gold-dark); }
.hvb-nav .right {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--forest);
    font-size: 0.86rem;
}
.hvb-nav .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest);
    font-size: 0.88rem;
    cursor: pointer;
}
.is-mobile .hvb-nav { padding: 12px 16px; }
.is-mobile .hvb-nav .logo { font-size: 0.95rem; }
.is-mobile .hvb-nav .icon-btn { width: 28px; height: 28px; }

/* ---------------- CONTENT WRAP FIX FOR ARTBOARDS -------------- */
.hvb-product-container { padding-top: 0; }
.hvb-product-container .hvb-main-wrapper { padding: 24px 24px 60px; }
.is-mobile .hvb-product-container .hvb-main-wrapper { padding: 14px 14px 80px; }

/* Footer bar (mini) */
.hvb-mini-footer {
    background: var(--forest-deep);
    color: rgba(255,255,255,0.7);
    padding: 28px 24px;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    border-top: 3px solid var(--gold);
}
.hvb-mini-footer .links {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.hvb-mini-footer a {
    color: var(--gold-soft);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 0;
}
.hvb-mini-footer a:hover { color: #fff; }
.hvb-mini-footer .legal {
    font-size: 0.7rem;
    opacity: 0.6;
    letter-spacing: 0.06em;
}

/* =================================================================
   VIEWPORT-BASED MOBILE FALLBACKS

   The existing .is-mobile rules above depend on a JS class. These
   media queries mirror the critical stacking + font-size shrink
   rules so the layout still responds correctly when JS is slow,
   blocked, or the class isn't applied on a given page.
   ================================================================= */

@media (max-width: 900px) {
    /* Defensive: if any container puts two .hvb-coaplug cards in a
       flex/grid row (e.g. a WC description wrapper or a Heritage
       redesign layout), force each card to claim full width on
       mobile so they wrap to their own line. */
    .hvb-coaplug {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        grid-column: 1 / -1 !important;
        margin-bottom: 14px !important;
        display: block !important;
    }
    .hvb-coaplug + .hvb-coaplug { margin-top: 0 !important; }

    /* Defeat any parent grid/flex container holding multiple COA card
       elements — force it to a single-column flow. Targets both the
       hvb plugin's own .hvb-coaplug and the coa-lab-dashboard React
       frontend's .coa-fe-card / .coa-lab-frontend-root wrappers. */
    *:has(> .hvb-coaplug),
    *:has(> .coa-fe-card),
    *:has(> .coa-lab-frontend-root),
    *:has(.hvb-coaplug + .hvb-coaplug),
    *:has(.coa-lab-frontend-root + .coa-lab-frontend-root) {
        display: block !important;
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 0 !important;
        column-count: 1 !important;
    }
    .hvb-coaplug,
    .coa-fe-card,
    .coa-lab-frontend-root {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        grid-column: 1 / -1 !important;
        display: block !important;
        float: none !important;
    }

    /* If the cards are in a Gutenberg Columns block, force its columns
       to stack regardless of the "Stack on mobile" setting. */
    .wp-block-columns,
    .wp-block-columns.are-vertically-aligned-center,
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        display: block !important;
        flex-direction: column !important;
    }
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 14px !important;
    }

    /* Trust strip — AUTO-SCROLLING MARQUEE on mobile.
       Track contains two copies of the 4 items (rendered server-side);
       translateX 0 -> -50% lands the second set at the visual
       position of the first set, so the loop looks seamless. Pauses
       on tap/hover so users can read static. */
    .hvb-trust-strip {
        overflow: hidden !important;
        position: relative;
        border-radius: var(--radius-lg) !important;
        background: var(--paper, #fffdf6) !important;
        border: 1px solid rgba(212, 175, 55, 0.22) !important;
        padding: 0 !important;
    }
    /* Soft gradient fades on each edge to hint at motion */
    .hvb-trust-strip::before,
    .hvb-trust-strip::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        width: 28px;
        z-index: 2;
        pointer-events: none;
    }
    .hvb-trust-strip::before {
        left: 0;
        background: linear-gradient(to right, var(--paper, #fffdf6), transparent);
    }
    .hvb-trust-strip::after {
        right: 0;
        background: linear-gradient(to left, var(--paper, #fffdf6), transparent);
    }

    .hvb-trust-strip-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: max-content !important;
        grid-template-columns: none !important;
        animation: hvb-trust-marquee 28s linear infinite;
        will-change: transform;
    }
    /* Show BOTH the original and the duplicate set on mobile so the
       marquee can loop seamlessly. */
    .hvb-trust-strip-track > div[aria-hidden="true"] { display: flex !important; }

    .hvb-trust-strip-track > div {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 18px !important;
        border-right: 1px solid rgba(212, 175, 55, 0.18) !important;
        border-bottom: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    .hvb-trust-strip-track > div > svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0;
    }
    .hvb-trust-strip-track .l1,
    .hvb-trust-strip-track .l2 {
        display: inline !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        font-family: var(--font-body) !important;
        white-space: nowrap !important;
        max-width: none !important;
        word-break: normal !important;
    }
    .hvb-trust-strip-track .l1 {
        font-weight: 700 !important;
        color: var(--forest, #1a3a2e) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
    }
    .hvb-trust-strip-track .l1::after {
        content: " \00B7 ";
        color: var(--gold-dark);
        margin: 0 3px;
    }
    .hvb-trust-strip-track .l2 {
        color: var(--text-muted, #5a5a5a) !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /* Pause when the user taps or hovers so they can read */
    .hvb-trust-strip:hover .hvb-trust-strip-track,
    .hvb-trust-strip:focus-within .hvb-trust-strip-track,
    .hvb-trust-strip:active .hvb-trust-strip-track {
        animation-play-state: paused;
    }

    @keyframes hvb-trust-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* Respect reduced-motion preference: pause completely. */
    @media (prefers-reduced-motion: reduce) {
        .hvb-trust-strip-track {
            animation: none !important;
            transform: translateX(0) !important;
        }
    }

    /* Alkaloid bars: value + unit was wrapping awkwardly ("0.0053w/"
       on line 1, "w%" on line 2). Shrink the value font on mobile
       and allow the name to wrap so 7-Hydroxymitragynine doesn't
       push the value off the right edge. */
    .hvb-alkaloid-bar .row { gap: 8px !important; flex-wrap: wrap !important; }
    .hvb-alkaloid-bar .name {
        font-size: 0.88rem !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        max-width: 60% !important;
    }
    .hvb-alkaloid-bar .val {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .hvb-alkaloid-bar .desc { font-size: 0.74rem !important; }

    /* Capsule alkaloid card heading shouldn't wrap to 2 lines */
    .hvb-section-head h2 { font-size: 1.1rem !important; line-height: 1.2 !important; }

    /* Product Specifications: 2 compact cells per row instead of 1
       big-card-per-row. Tighter padding and smaller type. */
    .hvb-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .hvb-info-card { padding: 12px 10px !important; min-height: 0 !important; }
    .hvb-info-card svg { width: 18px !important; height: 18px !important; }
    .hvb-info-card-label { font-size: 0.6rem !important; margin: 6px 0 2px !important; letter-spacing: 0.08em !important; }
    .hvb-info-card-value { font-size: 0.85rem !important; line-height: 1.2 !important; word-break: break-word; }

    /* Dropcap: shrink and demote on phones. The 3.2em first-letter
       was eating ~70px of space on small screens for not much gain. */
    .dropcap::first-letter {
        font-size: 2.2em !important;
        line-height: 0.95 !important;
        padding: 4px 6px 0 0 !important;
        margin-right: 2px !important;
    }

    /* FAQ accordion: questions in display font at 1.05rem wrapped to
       3+ lines per row. Drop to body font 0.9rem, tighter padding,
       smaller +/- icons so the section reads as a scan-able list. */
    .hvb-faq-q {
        font-family: var(--font-body) !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        padding: 14px 16px !important;
        text-transform: none !important;
        letter-spacing: 0.01em !important;
    }
    .hvb-faq-q::after {
        width: 28px !important;
        height: 28px !important;
        font-size: 1.1rem !important;
    }
    .hvb-faq-a {
        padding: 0 16px 14px !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* Customer Reviews summary: stack score above bars instead of
       side-by-side. Score block more compact, distribution bars
       shorter and narrower so they don't run off the right edge. */
    .hvb-reviews-summary { gap: 14px !important; padding: 0 !important; }
    .hvb-reviews-score {
        padding: 12px !important;
        max-width: 200px;
        margin: 0 auto;
    }
    .hvb-reviews-score .big { font-size: 2.2rem !important; }
    .hvb-reviews-score .stars { font-size: 0.95rem !important; }
    .hvb-reviews-score .count { font-size: 0.65rem !important; }
    .hvb-reviews-bars { gap: 4px !important; }
    .hvb-reviews-bar {
        grid-template-columns: 44px 1fr 36px !important;
        gap: 8px !important;
        font-size: 0.7rem !important;
    }
    .hvb-reviews-bar .track { height: 6px !important; }

    /* From Leaf to Mill on mobile: collapse into a tap-to-expand
       accordion. Each step is a closed <details> by default, just
       one short row showing the number + title + plus icon. Tap to
       reveal the description. */
    .hvb-timeline {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        margin-top: 6px !important;
    }
    .hvb-timeline-step {
        padding: 0 !important;
        background: var(--paper, #fffdf6);
        border: 1px solid rgba(212, 175, 55, 0.24);
        border-radius: 12px;
        overflow: hidden;
    }
    /* Hide the desktop horizontal connector + dot decorations */
    .hvb-timeline-step::before,
    .hvb-timeline-step::after { display: none !important; }

    .hvb-timeline-step > summary,
    .hvb-timeline-summary {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        cursor: pointer !important;
        user-select: none;
    }
    .hvb-timeline-step .yr {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        margin: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
        color: var(--gold-dark) !important;
        text-align: left !important;
    }
    .hvb-timeline-title {
        flex: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 0.86rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        font-weight: 700 !important;
        color: var(--forest, #1a3a2e) !important;
        font-family: var(--font-body) !important;
        line-height: 1.2 !important;
    }
    .hvb-timeline-chevron {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(212, 175, 55, 0.18);
        color: var(--gold-dark);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        flex-shrink: 0;
        transition: transform 0.25s ease, background 0.25s ease;
    }
    .hvb-timeline-step[open] .hvb-timeline-chevron {
        transform: rotate(45deg);
        background: var(--gold-dark, #b8941f);
        color: #fff;
    }
    .hvb-timeline-body {
        padding: 0 16px 14px 56px !important;
        animation: hvb-timeline-fade 0.25s ease-out;
    }
    .hvb-timeline-step p {
        text-align: left !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        color: var(--text-muted) !important;
        margin: 0 !important;
        max-width: none !important;
    }

    @keyframes hvb-timeline-fade {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Two-column panels collapse to one column */
    .hvb-alkaloid-panel { grid-template-columns: 1fr !important; gap: 16px !important; }
    .hvb-timeline       { grid-template-columns: 1fr !important; gap: 12px !important; }
    .hvb-process-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    .hvb-reviews-summary { grid-template-columns: 1fr !important; gap: 18px !important; }
    .hvb-review-cards    { grid-template-columns: 1fr !important; }
    .hvb-coa             { grid-template-columns: 1fr !important; gap: 14px !important; }
    .hvb-info-grid       { grid-template-columns: repeat(2, 1fr) !important; }

    /* Trust strip — keep 2x2 grid AND swap each cell to icon-left/text-right
       so cells are short rows instead of tall stacks */
    .hvb-trust-strip     { grid-template-columns: repeat(2, 1fr) !important; }
    .hvb-trust-strip > div {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        padding: 12px 12px !important;
        gap: 10px !important;
    }
    .hvb-trust-strip > div:nth-child(even) { border-right: 0 !important; }
    .hvb-trust-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important; }
    .hvb-trust-strip svg  { width: 20px !important; height: 20px !important; flex-shrink: 0; }
    .hvb-trust-strip .l1  { font-size: 0.78rem !important; line-height: 1.1; }
    .hvb-trust-strip .l2  { font-size: 0.64rem !important; line-height: 1.1; }

    /* Pricing grid + dosing card */
    .hvb-pricing-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .hvb-dosing       { grid-template-columns: 1fr !important; gap: 10px !important; }

    /* Reviews bars: keep two-column score+bars stack as 1 col */
    .hvb-reviews-bars { width: 100%; }
    .hvb-reviews-bar  { grid-template-columns: 48px 1fr 36px; font-size: 0.74rem; }

    /* Review form: stack name/email */
    .hvb-review-form-wrap #review_form .comment-form,
    .hvb-review-form-wrap #respond .comment-form { grid-template-columns: 1fr !important; }

    /* Section padding tightened so cards don't crowd the viewport edges */
    .hvb-section-card, .hvb-batch-box { padding: 22px 18px !important; }
    .hvb-section-head h2 { font-size: 1.25rem !important; }

    /* Section heads stack the meta beneath the title */
    .hvb-section-head { grid-template-columns: 1fr !important; gap: 6px !important; }

    /* COA plug card — shrink AGGRESSIVELY on mobile.
       The dark green header was eating 40% of viewport height. */
    .hvb-coaplug-head { padding: 14px 16px 12px !important; }
    .hvb-coaplug-body { padding: 14px 14px 16px !important; }
    .hvb-coaplug-strain { font-size: 1.15rem !important; margin-bottom: 6px !important; letter-spacing: 0.03em !important; line-height: 1.1 !important; }
    .hvb-coaplug-meta { font-size: 0.64rem !important; gap: 4px !important; flex-wrap: wrap; margin-bottom: 6px !important; }
    .hvb-coaplug-meta .lbl { font-size: 0.6rem !important; }
    .hvb-coaplug-vein { font-size: 0.6rem !important; padding: 3px 9px 3px 8px !important; letter-spacing: 0.1em !important; }
    .hvb-coaplug-vein .dot { width: 6px !important; height: 6px !important; }
    .hvb-coaplug-alk { grid-template-columns: 1fr !important; gap: 10px !important; padding: 12px 14px !important; margin-bottom: 10px !important; }
    .hvb-coaplug-alk-cell .name { font-size: 0.8rem !important; margin-bottom: 2px !important; }
    .hvb-coaplug-alk-cell .num { font-size: 1.5rem !important; }
    .hvb-coaplug-alk-cell .pct { font-size: 0.85rem !important; }
    .hvb-coaplug-alk-cell .method { font-size: 0.6rem !important; margin-top: 3px !important; }
    .hvb-coaplug-section-label { font-size: 0.6rem !important; padding: 4px 10px !important; margin-bottom: 6px !important; }
    .hvb-coaplug-pills { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .hvb-coaplug-pill { padding: 8px 10px !important; font-size: 0.72rem !important; }
    .hvb-coaplug-compliance { font-size: 0.7rem !important; padding: 8px 12px !important; flex-direction: column; align-items: flex-start; gap: 2px; }
    .hvb-coaplug-compliance strong { font-size: 0.62rem !important; }
}

@media (max-width: 540px) {
    /* Process grid collapses to one column on small phones */
    .hvb-process-grid { grid-template-columns: 1fr !important; }

    /* Pricing tiers stack on small phones */
    .hvb-pricing-grid { grid-template-columns: 1fr !important; }

    /* Spec grid: keep 2 cols even at narrow widths so each card stays compact */

    /* Trust strip stays 2x2 even at tight widths — single column was
       eating too much vertical real estate */

    /* COA pills can still stack one-up on very tight phones */
    .hvb-coaplug-pills { grid-template-columns: 1fr !important; }

    /* Smaller body padding for tight phones */
    .hvb-section-card, .hvb-batch-box { padding: 18px 14px !important; }
}

/* =====================================================================
   CENTERED CREST OVERRIDES — direction 1A "Crest Cards"
   Appended layer: restyles every strain section below the buy area to
   match the shipped top section. Flat cream cards, 1px gold hairlines,
   centered numbered eyebrows, Cinzel display, Inter body, dotted
   leaders. No gradients, shadows, hover lifts, or icon circles.
   Pills (radius 999px) for CTAs only; everything else radius 0.
   ===================================================================== */

/* ---- Section card shell ---- */
.hvb-product-container .hvb-section-card,
.hvb-product-container .hvb-batch-box,
.hvb-product-container .hvb-trust-strip,
.hvb-product-container .hvb-reviews,
.hvb-product-container .hvb-faq-wrap,
.hvb-product-container .hvb-timeline-wrap,
.hvb-product-container .hvb-related-wrap {
    background: #fff9e6 !important;
    border: 1px solid #d4af37 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 44px 48px;
    margin: 0 0 22px;
    transition: none !important;
    transform: none !important;
}
.hvb-product-container .hvb-section-card:hover,
.hvb-product-container .hvb-batch-box:hover {
    box-shadow: none !important;
    transform: none !important;
    border-color: #d4af37 !important;
}

/* ---- Card headers: centered eyebrow + Cinzel H2 + 44px rule ---- */
.hvb-product-container .hvb-section-head,
.hvb-product-container .hvb-batch-box > h3,
.hvb-product-container .hvb-section-card > h2,
.hvb-product-container .hvb-section-card > h3 {
    text-align: center;
}
.hvb-product-container .hvb-crest-eyebrow {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: #8a7430; margin: 0 0 10px;
}
.hvb-product-container .hvb-section-head h2,
.hvb-product-container .hvb-section-card h2,
.hvb-product-container .hvb-batch-box h3,
.hvb-product-container .hvb-reviews h2,
.hvb-product-container .hvb-faq h2 {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 26px !important; font-weight: 600 !important;
    color: #1a3a2e !important; letter-spacing: 0 !important;
    margin: 0 0 12px !important;
    background: none !important; -webkit-text-fill-color: initial;
}
.hvb-product-container .hvb-section-head .meta,
.hvb-product-container .hvb-batch-box .meta {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #8a8267; margin: 10px 0 0;
}
/* 44x1 gold rule replaces the gradient divider */
.hvb-product-container .hvb-divider-gold {
    width: 44px !important; height: 1px !important;
    background: #b8960c !important;
    border: 0 !important; border-radius: 0 !important;
    margin: 14px auto 22px !important;
    box-shadow: none !important;
}

/* ---- About: centered column, no dropcap ---- */
.hvb-product-container .hvb-section-card p {
    font-family: 'Inter', sans-serif;
    font-size: 14px; line-height: 1.8; color: #43402f;
    max-width: 680px; margin-left: auto; margin-right: auto;
    text-align: left;
}
.hvb-product-container .dropcap::first-letter {
    font-size: inherit !important; font-family: inherit !important;
    float: none !important; color: inherit !important;
    margin: 0 !important; padding: 0 !important;
    font-weight: inherit !important; line-height: inherit !important;
}

/* ---- Trust strip: 4 text columns, vertical hairlines, no icons ---- */
.hvb-product-container .hvb-trust-strip { padding: 18px 24px; }
.hvb-product-container .hvb-trust-strip svg,
.hvb-product-container .hvb-trust-strip .hvb-ic { display: none !important; }
.hvb-product-container .hvb-trust-strip-track > div {
    border-right: 1px solid rgba(184, 150, 12, 0.22);
    background: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.hvb-product-container .hvb-trust-strip-track > div:last-child { border-right: 0; }
.hvb-product-container .hvb-trust-strip-track > div strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: #1a3a2e;
}
.hvb-product-container .hvb-trust-strip-track > div span {
    font-family: 'Inter', sans-serif; font-size: 11px; color: #8a8267;
}

/* ---- Alkaloid profile: ledger rows + flat 3px bars ---- */
.hvb-product-container .hvb-alkaloid-bar {
    border-top: 1px solid rgba(184, 150, 12, 0.22);
    background: none !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 12px 0;
}
.hvb-product-container .hvb-alkaloid-bar .row .name {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important; font-weight: 600 !important; color: #1a3a2e !important;
}
.hvb-product-container .hvb-alkaloid-bar .row .val {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 15px !important; font-weight: 700 !important; color: #8a7430 !important;
}
.hvb-product-container .hvb-alkaloid-bar .track {
    height: 3px !important; border-radius: 0 !important;
    background: rgba(184, 150, 12, 0.15) !important;
    box-shadow: none !important;
}
.hvb-product-container .hvb-alkaloid-bar .track .fill {
    background: #d4af37 !important;
    border-radius: 0 !important; box-shadow: none !important;
    height: 3px !important;
}
.hvb-product-container .hvb-alkaloid-bar .desc, .hvb-product-container .hvb-alkaloid-bar .note {
    font-family: 'Inter', sans-serif; font-size: 11.5px; color: #8a8267;
}
.hvb-product-container details.hvb-alkaloid-more summary {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: #2a5d3a;
    border-top: 1px solid rgba(184, 150, 12, 0.22);
    padding: 12px 0; cursor: pointer; list-style: none;
    background: none !important; border-radius: 0 !important;
}
/* The plugin renders its own +/- icon (.hvb-alkaloid-more-icon);
   flatten it instead of adding a second marker */
.hvb-product-container .hvb-alkaloid-more-icon {
    background: none !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    color: #b8960c !important;
    font-family: 'Cinzel', Georgia, serif !important;
    width: auto !important; height: auto !important;
}

/* ---- Specifications: hairline strip, centered cells, no icons ---- */
.hvb-product-container .hvb-batch-box { background: #fff9e6 !important; color: #43402f !important; }
.hvb-product-container .hvb-info-grid {
    border-top: 1px solid rgba(184, 150, 12, 0.28);
    border-bottom: 1px solid rgba(184, 150, 12, 0.28);
    gap: 0 !important;
}
.hvb-product-container .hvb-info-card {
    background: none !important; border: 0 !important;
    border-right: 1px solid rgba(184, 150, 12, 0.22) !important;
    border-radius: 0 !important; box-shadow: none !important;
    text-align: center; padding: 18px 12px;
}
.hvb-product-container .hvb-info-card:last-child { border-right: 0 !important; }
.hvb-product-container .hvb-info-card svg,
.hvb-product-container .hvb-info-card .hvb-ic { display: none !important; }
.hvb-product-container .hvb-info-card-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px !important; font-weight: 700 !important;
    letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #8a8267 !important;
}
.hvb-product-container .hvb-info-card-value {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #1a3a2e !important;
    overflow-wrap: anywhere;
}

/* ---- Timeline: columns under a hairline, square gold markers ---- */
.hvb-product-container .hvb-timeline-step,
.hvb-product-container .hvb-tl-step {
    background: none !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    text-align: center;
}
.hvb-product-container .hvb-timeline-marker,
.hvb-product-container .hvb-tl-dot {
    width: 7px !important; height: 7px !important;
    border-radius: 0 !important;
    background: #b8960c !important;
    border: 0 !important; box-shadow: none !important;
}
.hvb-product-container .hvb-timeline-num { font-family: 'Cinzel', Georgia, serif; font-size: 14px; color: #8a7430; }
.hvb-product-container .hvb-timeline-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10.5px !important; font-weight: 700 !important;
    letter-spacing: 0.16em !important; text-transform: uppercase !important;
    color: #1a3a2e !important;
}
.hvb-product-container .hvb-timeline-desc { font-family: 'Inter', sans-serif; font-size: 12px; color: #7d795f; }

/* ---- Reviews (CSS-only over WC markup) ---- */
.hvb-product-container .hvb-reviews-score { font-family: 'Cinzel', Georgia, serif !important; font-size: 44px !important; color: #1a3a2e !important; }
/* Bar ROW is a grid (label / track / percent); only the track is 4px */
.hvb-product-container .hvb-reviews-bar {
    display: grid !important;
    grid-template-columns: 56px 1fr 44px;
    gap: 10px; align-items: center;
    height: auto !important; padding: 5px 0;
    background: none !important; border-radius: 0 !important; box-shadow: none !important;
    font-family: 'Inter', sans-serif; font-size: 11.5px; color: #7d795f;
}
.hvb-product-container .hvb-reviews-bar .track {
    height: 4px !important; border-radius: 0 !important;
    background: rgba(184, 150, 12, 0.15) !important; box-shadow: none !important;
}
.hvb-product-container .hvb-reviews-bar .track .fill,
.hvb-product-container .hvb-reviews-bars .fill {
    background: #d4af37 !important; border-radius: 0 !important;
    height: 4px !important; display: block;
}
.hvb-product-container .hvb-review-card {
    background: none !important; border: 0 !important;
    border-top: 1px solid rgba(184, 150, 12, 0.22) !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 18px 0 !important;
}
.hvb-product-container .hvb-review-card .hvb-verified,
.hvb-product-container .hvb-review-verified {
    background: none !important;
    border: 1px solid #b8960c !important; border-radius: 0 !important;
    color: #8a7430 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 8.5px !important; letter-spacing: 0.14em !important;
    padding: 2px 7px !important;
}
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea,
#review_form select {
    border: 1px solid #c9b97a !important; border-radius: 0 !important;
    background: #fff !important; box-shadow: none !important;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}
#review_form input:focus, #review_form textarea:focus, #review_form select:focus {
    outline: 2px solid rgba(26, 58, 46, 0.25) !important; border-color: #1a3a2e !important;
}
#review_form .form-submit input[type="submit"],
#review_form .form-submit .submit {
    background: #1a3a2e !important; color: #fff9e6 !important;
    border: 1px solid #1a3a2e !important; border-radius: 999px !important;
    padding: 14px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 0.2em !important; text-transform: uppercase !important;
    box-shadow: none !important; transform: none !important;
}
#review_form .form-submit input[type="submit"]:hover { background: #0f2a1f !important; }

/* ---- FAQ: hairline rows, +/- markers, no boxes ---- */
.hvb-product-container .hvb-faq-item,
.hvb-product-container details.hvb-faq-item {
    background: none !important; border: 0 !important;
    border-top: 1px solid rgba(184, 150, 12, 0.22) !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
}
.hvb-product-container .hvb-faq-item:last-of-type { border-bottom: 1px solid rgba(184, 150, 12, 0.22) !important; }
.hvb-product-container .hvb-faq-q {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important; font-weight: 600 !important; color: #1a3a2e !important;
    padding: 16px 40px 16px 0 !important;
    background: none !important; list-style: none; cursor: pointer;
    position: relative;
}
.hvb-product-container .hvb-faq-q::-webkit-details-marker { display: none; }
.hvb-product-container .hvb-faq-q::after {
    content: '+'; position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    font-family: 'Cinzel', Georgia, serif; color: #b8960c; font-size: 18px;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    width: auto !important; height: auto !important;
}
.hvb-product-container details.hvb-faq-item[open] > .hvb-faq-q::after { content: '\2212'; }
.hvb-product-container details.hvb-faq-item[open] { background: none !important; }
.hvb-product-container .hvb-faq-a,
.hvb-product-container .hvb-faq-item > div,
.hvb-product-container .hvb-faq-item p {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important; line-height: 1.7 !important; color: #5b5744 !important;
    max-width: 66ch; padding-right: 40px;
}

/* ---- Related products: flat white cards, outline pill action ---- */
.hvb-product-container .hvb-related-card,
.hvb-product-container .hvb-related-item {
    background: #ffffff !important;
    border: 1px solid rgba(184, 150, 12, 0.35) !important;
    border-radius: 0 !important; box-shadow: none !important;
    transform: none !important;
}
.hvb-product-container .hvb-related-card:hover { box-shadow: none !important; transform: none !important; }
.hvb-product-container .hvb-related-card img { border-radius: 0 !important; border-bottom: 1px solid rgba(184,150,12,0.22); }
.hvb-product-container .hvb-related-card .name,
.hvb-product-container .hvb-related-name { font-family: 'Cinzel', Georgia, serif !important; font-size: 14.5px !important; color: #1a3a2e !important; }
.hvb-product-container .hvb-related-card a.button,
.hvb-product-container .hvb-related-actions a {
    background: none !important;
    border: 1px solid #1a3a2e !important; border-radius: 999px !important;
    color: #1a3a2e !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important; font-weight: 700 !important;
    letter-spacing: 0.16em !important; text-transform: uppercase !important;
    box-shadow: none !important; transition: background 0.15s ease !important;
}
.hvb-product-container .hvb-related-card a.button:hover { background: #f6efd8 !important; }

/* ---- Footer links: quiet, hairline top ---- */
.hvb-product-container .hvb-footer-links {
    border-top: 1px solid rgba(184, 150, 12, 0.22);
    font-family: 'Inter', sans-serif; font-size: 12px; text-align: center;
    background: none !important; box-shadow: none !important;
}

/* ---- Mobile: keep mechanics, recolor ---- */
@media (max-width: 900px) {
    .hvb-product-container .hvb-section-card,
    .hvb-product-container .hvb-batch-box { padding: 28px 20px; }
}

/* =====================================================================
   CENTERED CREST — PHASE 2
   Centered numbered headers, flattened timeline/reviews/COA using the
   real rendered classnames (verified against the live DOM).
   ===================================================================== */

/* Headers: stack + center (was flex space-between) */
.hvb-product-container .hvb-section-head {
    display: block !important;
    text-align: center !important;
    margin-bottom: 12px;
}
.hvb-product-container .hvb-section-head .meta {
    display: block;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #8a8267;
}
/* Kill any long rule under headings; the 44px divider-gold is the rule */
.hvb-product-container .hvb-section-head h2::after,
.hvb-product-container .hvb-section-card h2::after,
.hvb-product-container .hvb-batch-box h3::after { display: none !important; }
.hvb-product-container .hvb-section-head {
    border-bottom: 0 !important;
}
.hvb-product-container .hvb-section-head h2 { border-bottom: 0 !important; }

/* Numbered eyebrows (01 · Provenance ...) — CSS-injected so templates
   stay untouched; degrades to no eyebrow without :has() support */
.hvb-product-container .hvb-section-head::before,
.hvb-product-container .hvb-batch-box > h3::before {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: #8a7430; margin: 0 0 10px;
}
.hvb-product-container .hvb-section-card:has(.dropcap) .hvb-section-head::before { content: '01 \00B7 Provenance'; }
.hvb-product-container .hvb-section-card:has(.hvb-alkaloid-bars) .hvb-section-head::before { content: '02 \00B7 Lab Analysis'; }
.hvb-product-container .hvb-batch-box > h3::before { content: '03 \00B7 Specifications'; }
.hvb-product-container .hvb-section-card:has(.hvb-timeline) .hvb-section-head::before { content: '04 \00B7 Process'; }
.hvb-product-container .hvb-section-card:has(.hvb-reviews-summary) .hvb-section-head::before,
.hvb-product-container .hvb-section-card:has(.hvb-review-gate) .hvb-section-head::before { content: '05 \00B7 Reviews'; }
.hvb-product-container .hvb-section-card:has(.hvb-faq) .hvb-section-head::before { content: '07 \00B7 Questions'; }

/* Timeline: flatten dots/line pseudo-elements, quiet numbers */
.hvb-product-container .hvb-timeline-step::before,
.hvb-product-container .hvb-timeline-step::after,
.hvb-product-container .hvb-timeline::before,
.hvb-product-container .hvb-timeline::after,
.hvb-product-container .hvb-timeline-summary::before,
.hvb-product-container .hvb-timeline-summary::after {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.hvb-product-container .hvb-timeline-step .yr {
    font-family: 'Cinzel', Georgia, serif !important;
    color: #8a7430 !important;
    background: none !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
}
.hvb-product-container .hvb-timeline-chevron {
    background: none !important; border: 0 !important; border-radius: 0 !important;
    color: #b8960c !important;
    font-family: 'Cinzel', Georgia, serif !important;
    box-shadow: none !important;
}

/* Reviews score: no card chrome, Cinzel figure */
.hvb-product-container .hvb-reviews-score {
    background: none !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.hvb-product-container .hvb-reviews-score .big {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 44px !important; font-weight: 700 !important;
    color: #1a3a2e !important;
}
.hvb-product-container .hvb-reviews-score .count {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #8a8267 !important;
}

/* Desktop timeline: steps are server-rendered open; chevron hidden,
   body shown as the column description */
@media (min-width: 901px) {
    .hvb-product-container .hvb-timeline-chevron { display: none !important; }
    .hvb-product-container .hvb-timeline-summary { pointer-events: none; }
    .hvb-product-container .hvb-timeline-body p {
        font-family: 'Inter', sans-serif;
        font-size: 12px; line-height: 1.6; color: #7d795f;
        text-align: center; margin: 6px 0 0;
    }
}