/**
 * Site chrome v2 — header v2 + footer v2, site-wide (ADR 0016).
 * Extracted from healing-paths.css (ADR 0014 chrome) so the chrome can load
 * on every page without dragging the pillar-page module styles along; the
 * theme-bleed counter-rules ride along rescoped body.hp-page ->
 * body.gg-chrome (inc/site-chrome.php adds gg-chrome to every front-end
 * body; hp pages keep hp-page too). Tokens from healing-tokens.css; fonts
 * from healing-fonts.css. Radius 0 throughout.
 */

/* ---------- header v2 ---------- */

/* Icon roundel — base. The solid berry disc is a NO-MARKUP fallback only (Phase 3
 * §2.3, 2026-09-03): gg_hp_icon_roundel() always adds --icon, so a path with no SVG
 * yet (C4, Adiba's set pending) renders the same pale tile, empty — never a berry disc
 * (R12/R20.3). Since round 9 a roundel that CARRIES a glyph is always a berry disc
 * with a white glyph (rule under .hp-roundel--icon below); the pale tile is what an
 * EMPTY one looks like, except on Hero B's light scheme and the P9 --solid cards,
 * whose rules in healing-paths.css paint even an empty roundel Berry. */
.hp-roundel {
    display: inline-block;
    background: var(--gg-berry);
    border-radius: 50%;
    flex: none;
}
.hp-roundel--hero { width: var(--gg-roundel-hero-phone); height: var(--gg-roundel-hero-phone); margin-bottom: 14px; }
.hp-roundel--card { width: var(--gg-roundel-card); height: var(--gg-roundel-card); }
.hp-roundel--nav { width: var(--gg-roundel-nav); height: var(--gg-roundel-nav); }
.hp-roundel--marker { width: var(--gg-roundel-marker); height: var(--gg-roundel-marker); }

/* Iconed roundel — one SVG per path, currentColor supplies the variant.
   Dark variant: berry line icon on a pale tile (white surfaces, mobile sheet).
   Light variant: white icon (photo heroes; berry disc on the light scheme). */
.hp-roundel--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gg-petal-mist);
    color: var(--gg-berry);
}
.hp-roundel--icon svg { width: 58%; height: 58%; display: block; }
/* ---------- icon mask (interim, until true vector icons land) ----------
 * The delivered "SVG" icons are rasters (see gg_hp_icon_markup). Each one is
 * shipped as a square ALPHA mask and painted with currentColor, so the disc
 * still inverts white-on-berry exactly as an inline <path> would. When a real
 * .svg lands for a slug, gg_hp_icon_markup prefers it and this rule stops
 * being reached for that icon. Lives here, not in healing-paths.css, because
 * header v4 prints these masks on every page that has the chrome. */
.hp-icon-mask {
    display: block;
    width: 58%;                       /* the same 58% the inline SVG uses */
    height: 58%;
    background-color: currentColor;
    -webkit-mask-image: var(--hp-icon);
    mask-image: var(--hp-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* A PILLAR ICON ALWAYS SITS ON GAIA BERRY (round 9, Adiba via Diego, 5 Oct: "if
 * we show a pillar icon, it should always be in a gaia berry background"). Every
 * roundel that actually carries a glyph (gg_hp_icon_roundel() adds --glyph) is a
 * Berry disc with a white glyph, in every context: cards on any section tint,
 * pillar heroes over a photo, the mega menus, the phone drawer. White on Berry is
 * 11.1:1. The tile overrides in healing-paths.css apply to EMPTY roundels only
 * (:not(.hp-roundel--glyph)); the more specific rules that do match a glyph
 * roundel (Hero B light scheme, P9 --solid) set the same Berry + white, and the
 * dark-scheme Hero B adds only an inner stroke. Home v4 draws its own
 * discs (.hp-v4-paths__roundel, .hp-v4-needs__roundel), held to the same rule in
 * healing-home-v4.css. Practice icons are a different family: Mauve
 * (.hp-practice-icon, round 8 C2). */
.hp-roundel--icon.hp-roundel--glyph {
    background: var(--gg-berry);
    color: var(--gg-text-on-dark);
}


.hp-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--gg-white);
    transition: box-shadow 0.2s ease;
}
.hp-header--compact { box-shadow: 0 2px 10px rgba(42, 42, 42, 0.08); }

.hp-header__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--gg-header-h-phone);
    padding: 0 var(--gg-gutter);
    /* Site container = Elementor kit boxed width (85vw on desktop); the
     * 1024px floor keeps the full menu row fitting where 85vw is narrower —
     * frame 1f verified the menu needs the full 1024px viewport (984px inner
     * after the 2x20px gutter), so the floor must not go below 1024. */
    max-width: max(85vw, 1024px);
    margin: 0 auto;
    transition: height 0.2s ease;
}
.hp-header--compact .hp-header__bar { height: var(--gg-header-h-compact); }

.hp-header__logo { display: flex; align-items: center; margin-right: auto; }
.hp-header__logo img { max-height: 40px; width: auto; display: block; }
.hp-header__logotext { font-family: var(--gg-font-heading); font-size: 1.125rem; color: var(--gg-berry); }

.hp-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--gg-tap-min);
    height: var(--gg-tap-min);
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.hp-header__burger span { display: block; height: 1.5px; background: var(--gg-text); }

.hp-header__nav { display: none; }

.hp-header__icons { display: flex; align-items: center; gap: 4px; }
.hp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gg-tap-min);
    height: var(--gg-tap-min);
    background: none;
    border: 0;
    color: var(--gg-text);
    cursor: pointer;
}
.hp-iconbtn:hover, .hp-iconbtn:focus-visible { color: var(--gg-berry); }
.hp-iconbtn--account { display: none; } /* account lives in the phone menu */

/* Desktop nav */
@media (min-width: 1024px) {
    .hp-header__bar { height: var(--gg-header-h-desktop); gap: 24px; }
    .hp-header__burger { display: none; }
    /* The logo never shrinks: before R17 the nav row was over budget and flexbox
     * paid for it by crushing the logo (174px natural -> 116px at 1024, 165 at 1440). */
    .hp-header__logo { margin-right: 0; flex: 0 0 auto; }
    .hp-header__nav { display: block; margin: 0 auto; }
    /* Nav labels — R17 (2026-09-03 request; designer fix 2): ABOUT US / HEALING PATHS /
     * GAIA'S GIFTS wrapped onto two lines at 1440 (caps + 0.06em tracking blew the width
     * budget once the roster reached seven items). Developer's pick of the designer's two
     * options: TITLE CASE as in frame 1e, white-space: nowrap, tracking 0.02em, and gaps
     * stepped by width: 30px (>=1440) / 24px (1320-1439) / 16px bar + 16px labels at 15px
     * with no tracking (1024-1319 — the bar has a 1024px floor, so the budget there is
     * fixed: 984 inner − logo 174 − icons 140). With the logo pinned and the labels
     * unwrappable, an over-budget row no longer wraps — it pushes the icons out of the
     * bar — so the fit is MEASURED, not assumed: icons.right <= bar content edge and no
     * label wraps at 1024/1100/1200/1280/1320/1440/1920 with the 7-item roster and all
     * 3 icons (see docs/ops/template-changes/2026-09-03-pillar-practice-iteration-2/). */
    .hp-header__nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
    .hp-nav__item a, .hp-nav__megatoggle {
        font-family: var(--gg-font-heading);
        font-size: 1rem;
        text-transform: none;
        letter-spacing: 0.02em;
        white-space: nowrap;
        color: var(--gg-text);
        background: none;
        border: 0;
        cursor: pointer;
        padding: 10px 0;
    }
    .hp-nav__item a:hover, .hp-nav__megatoggle:hover,
    .hp-nav__item a:focus-visible, .hp-nav__megatoggle:focus-visible { color: var(--gg-berry); text-decoration: none; }
    .hp-iconbtn--account { display: inline-flex; }
}
/* The width steps win on SPECIFICITY (.hp-header prefix), never on source order —
 * RUCSS re-orders concatenated CSS (the 76px header-gap lesson, 2026-08-31). */
@media (min-width: 1440px) {
    .hp-header .hp-header__nav ul { gap: 30px; } /* frame 1e spacing at the design base width */
}
@media (min-width: 1024px) and (max-width: 1319px) {
    /* frame 1f's spirit (tighter at 1024) with the seven-item roster: 15px labels, no
     * tracking, 16px between labels and 16px bar gaps ≈ 880px of 984 at the 1024 floor. */
    .hp-header .hp-header__bar { gap: 16px; }
    .hp-header .hp-header__nav ul { gap: 16px; }
    .hp-header .hp-nav__item a, .hp-header .hp-nav__megatoggle { font-size: 0.9375rem; letter-spacing: 0; }
}

/* Mega panel */
.hp-mega {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--gg-white);
    border-top: 1px solid var(--gg-dawn-pink);
    box-shadow: 0 12px 24px rgba(42, 42, 42, 0.10);
}
.hp-mega__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    max-width: max(85vw, 1024px);      /* tracks .hp-header__bar */
    margin: 0 auto;
    padding: 32px var(--gg-gutter) 20px;
}
/* Events & Retreats panel — two curated columns, same visual language. */
.hp-mega--duo .hp-mega__inner { grid-template-columns: repeat(2, minmax(0, 340px)); padding-bottom: 32px; }
.hp-mega__path {
    /* Round 3 §6.3: top-aligned so a two-line label (NSR) keeps the icon
     * centered on its FIRST line — the span offset re-centers one-liners
     * identically ((44px roundel − 24px line box) / 2). */
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--gg-font-heading);
    font-size: 1rem;
    color: var(--gg-text);
    margin-bottom: 10px;
}
.hp-mega__path > span { padding-top: 10px; }
.hp-mega__path .hp-roundel--nav { width: 44px; height: 44px; }
.hp-mega__practices { font-size: 0.875rem; margin: 0; color: var(--gg-title-secondary); }
.hp-mega__practices a { color: var(--gg-berry); }
/* Round 10 (R10-2): one practice per row. */
.hp-mega__practices--list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-mega__practices--list li { margin: 0; padding: 0; }
.hp-mega__practices--list li::before { content: none; }
.hp-mega__footer {
    max-width: max(85vw, 1024px);      /* tracks .hp-header__bar */
    margin: 0 auto;
    padding: 0 var(--gg-gutter) 28px;
}
.hp-mega__footer a { font-weight: 500; }

/* Scrim */
.hp-scrim {
    position: fixed;
    inset: 0;
    background: rgba(42, 42, 42, 0.35);
    z-index: 900;
}

/* Cart drawer — what the bag opens (2026-09-10, second pass).
 *
 * THESE VALUES ARE NOT DESIGN CHOICES. They are the measured computed styles of
 * Elementor's Menu Cart side-cart as it renders on every other page of the site,
 * read off staging /gaias-gifts/ with Playwright on 2026-09-10 at 1440 and 390:
 *
 *   .elementor-menu-cart__container  position:fixed; inset:0;
 *                                    background rgba(0,0,0,.25); z-index 9998
 *   .elementor-menu-cart__main       position:fixed; top/right/bottom 0;
 *                                    width 490px @1440, 370.5px @390 (= 95vw
 *                                    capped at 490px); background #fff;
 *                                    box-shadow 0 0 20px rgba(0,0,0,.2);
 *                                    padding 0; display:flex; column
 *
 * Diego, 2026-09-10: "the cart drawer MUST LOOK exactly the same as the drawer
 * in other pages." The first build wrapped the mini-cart in a bespoke 380px
 * dropdown with its own header and x, which doubled the chrome the template
 * already draws and read as a different component entirely.
 *
 * Elementor's own widget CSS is NOT on these pages — the widget does not render
 * here, and WP Rocket inlines only each page's used-CSS — so the rules have to
 * live in our stylesheet. They are scoped to #hp-cart so they cannot reach the
 * real widget on Elementor pages.
 *
 * If the client ever restyles the Menu Cart widget in Elementor, this drifts.
 * scripts/chrome/cart-drawer-parity.mjs compares the two live and fails on it.
 */
#hp-cart.elementor-menu-cart__container {
    position: fixed;
    inset: 0;
    display: block;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 9998;
}
/* An author `display` beats the UA [hidden] { display: none } rule, so without
 * this the drawer is laid out permanently and js/header-v2.js toggling `hidden`
 * has no visual effect — open from page load, Escape and the scrim apparently
 * dead. Caught on staging 2026-09-10 by scripts/chrome/video-release-check.mjs;
 * guard: scripts/chrome/hidden-display-check.py. Same trap the retired R16
 * overlay documented on .gg-video-cta[hidden]. */
#hp-cart[hidden] { display: none !important; }

#hp-cart .elementor-menu-cart__main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 95vw;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
/* Elementor hides the panel's own direct-child close button and lets the
 * mini-cart template's header x be the visible one; the site's live CSS does
 * the same (`.elementor-menu-cart__main > .elementor-menu-cart__close-button
 * { display: none }`). Matched here so the DOM shape can stay identical. */
#hp-cart .elementor-menu-cart__main > .elementor-menu-cart__close-button { display: none; }

/* Measured: overflow visible at 1440, hidden at 390. The mini-cart template
 * ships its own inner scrolling, so the panel itself does not scroll. */
@media (max-width: 1023px) {
    #hp-cart .elementor-menu-cart__main { overflow: hidden; }
}

/* TYPOGRAPHY PARITY — deliberate, and deliberately not our brand stack.
 *
 * The mini-cart template asks for `var(--e-global-typography-*-font-family)`,
 * an Elementor global that is UNDEFINED on this site. On an Elementor page the
 * text therefore lands on the browser's default sans at 18/14/15px in #5a5a5a.
 * On a v2 page the same template would instead inherit our chrome's Tenor Sans
 * / General Sans and near-black text — better looking, and visibly different
 * from every other page's drawer.
 *
 * Diego chose parity over prettiness (2026-09-10, asked explicitly with both
 * options rendered): the drawer must read as the same component everywhere,
 * and a QA pass comparing the two pages must find nothing. So we reproduce the
 * reference's values, measured on staging the same day:
 *
 *   title  .woocommerce-mini-cart__count        Tenor Sans 18px  #5a5a5a
 *   body   .woocommerce-mini-cart__empty-*      system sans 14px #5a5a5a
 *   button .woocommerce-mini-cart__empty-* a    system sans 15px w500
 *
 * !important is needed on the title and button: the template's own inline
 * <style> and the theme's `font-body-title-20` / `font-button` utility classes
 * would otherwise win. The utility classes exist on the v2 pages and not on
 * Elementor pages, which is the whole reason the two drifted apart.
 *
 * If the Elementor global typography is ever actually set, BOTH drawers gain
 * the brand fonts and this block should be deleted, not updated — at that
 * point it would be the thing causing the drift.
 * Guard: scripts/chrome/cart-drawer-parity.mjs checks these values live.
 */
#hp-cart .elementor-menu-cart__main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: rgb(90, 90, 90);
}
#hp-cart .woocommerce-mini-cart__count {
    font-size: 18px !important;
    color: rgb(90, 90, 90) !important;
}
#hp-cart .woocommerce-mini-cart__empty-container a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 15px !important;
}

/* Search overlay (desktop) */
.hp-search {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--gg-white);
    border-top: 1px solid var(--gg-dawn-pink);
    box-shadow: 0 12px 24px rgba(42, 42, 42, 0.10);
    padding: 28px var(--gg-gutter) 32px;
}
.hp-search__form {
    display: flex;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}
.hp-search__input, .hp-searchsheet__input {
    flex: 1;
    font-family: var(--gg-font-body);
    font-size: 1.125rem;
    padding: 12px 16px;
    border: 1px solid var(--gg-mulberry-haze);
    border-radius: var(--gg-radius);
    color: var(--gg-text);
    background: var(--gg-white);
}
.hp-search__submit {
    font-family: var(--gg-font-body);
    font-weight: 500;
    background: var(--gg-berry);
    color: var(--gg-text-on-dark);
    border: 0;
    padding: 0 24px;
    cursor: pointer;
}
.hp-search__submit:hover { background: var(--gg-mulberry); }
.hp-search__close, .hp-sheet__close {
    background: none;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gg-text);
    cursor: pointer;
    width: var(--gg-tap-min);
    height: var(--gg-tap-min);
}
.hp-search__chips, .hp-searchsheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px auto 0;
    max-width: 760px;
}
.hp-chip {
    display: inline-block;
    border: 1px solid var(--gg-mulberry-haze);
    background: var(--gg-petal-mist);
    color: var(--gg-berry);
    font-size: 0.875rem;
    padding: 9px 16px;
    min-height: 38px;
}
.hp-chip:hover, .hp-chip:focus-visible { background: var(--gg-dawn-pink); text-decoration: none; }

/* Phone menu sheet — full-screen berry */
.hp-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--gg-berry);
    color: var(--gg-text-on-dark);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.hp-sheet__bar { display: flex; align-items: center; gap: 12px; height: var(--gg-header-h-phone); padding: 0 var(--gg-gutter); }
.hp-sheet__close { color: var(--gg-text-on-dark); }
.hp-sheet__logo { max-height: 34px; filter: brightness(0) invert(1); }
.hp-sheet__nav { flex: 1; padding: 12px var(--gg-gutter); }
.hp-sheet__nav ul { list-style: none; margin: 0; padding: 0; }
.hp-sheet__link, .hp-sheet__grouptoggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-family: var(--gg-font-heading);
    font-size: 1.25rem;
    color: var(--gg-text-on-dark) !important;
    background: none;
    border: 0;
    padding: 14px 0;
    min-height: var(--gg-tap-min);
    cursor: pointer;
    text-align: left;
}
.hp-sheet__plus { font-size: 1.5rem; font-family: var(--gg-font-body); }
.hp-sheet__grouptoggle[aria-expanded="true"] .hp-sheet__plus { transform: rotate(45deg); }
.hp-sheet__inset {
    background: var(--gg-petal-mist); /* paths sub-panel: light inset — roundels never sit on berry */
    color: var(--gg-text);
    margin: 4px calc(-1 * var(--gg-gutter)) 8px;
    padding: 16px var(--gg-gutter);
}
.hp-sheet__path {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    min-height: var(--gg-tap-min);
    color: var(--gg-text) !important;
    font-family: var(--gg-font-heading);
}
.hp-sheet__viewall { display: block; padding: 12px 0 4px; font-weight: 500; }
.hp-sheet__footer {
    padding: 20px var(--gg-gutter) 32px;
    font-size: 0.875rem;
}
.hp-sheet__footer a { color: var(--gg-text-on-dark) !important; }

/* Phone search sheet */
.hp-searchsheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--gg-white);
    padding: 16px var(--gg-gutter);
    overflow-y: auto;
}
.hp-searchsheet__form { display: flex; gap: 10px; align-items: center; }
.hp-searchsheet__cancel { background: none; border: 0; color: var(--gg-berry); font-size: 1rem; cursor: pointer; padding: 10px; }
.hp-searchsheet__label {
    font-family: var(--gg-font-heading);
    font-size: var(--gg-eyebrow-size);
    letter-spacing: var(--gg-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--gg-title-secondary);
    margin: 28px 0 4px;
}
.hp-searchsheet__chips { justify-content: flex-start; }

body.hp-lock-scroll { overflow: hidden; }

/* ---------- theme-bleed counter-rules (chrome) ---------- */

body.gg-chrome .hp-header button,
body.gg-chrome .hp-sheet button,
body.gg-chrome .hp-search button,
body.gg-chrome .hp-searchsheet button {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: inherit;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    min-height: 0;
}
body.gg-chrome .hp-header__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: var(--gg-tap-min); height: var(--gg-tap-min); padding: 10px; }
@media (min-width: 1024px) {
    body.gg-chrome .hp-header__burger { display: none; }
    body.gg-chrome .hp-nav__megatoggle {
        font-family: var(--gg-font-heading);
        font-size: 1rem;
        text-transform: none;      /* R17: title case — must agree with the !important pin below */
        letter-spacing: 0.02em;
        color: var(--gg-text);
        padding: 10px 0;
        cursor: pointer;
    }
    body.gg-chrome .hp-nav__megatoggle:hover,
    body.gg-chrome .hp-nav__megatoggle:focus-visible { color: var(--gg-berry); }
}
body.gg-chrome .hp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--gg-tap-min); height: var(--gg-tap-min); color: var(--gg-text); cursor: pointer; }
body.gg-chrome .hp-iconbtn--account { display: none; }
@media (min-width: 1024px) { body.gg-chrome .hp-iconbtn--account { display: inline-flex; } }
body.gg-chrome .hp-search__submit {
    background: var(--gg-berry);
    color: var(--gg-text-on-dark);
    font-family: var(--gg-font-body);
    font-weight: 500;
    padding: 0 24px;
    cursor: pointer;
    min-height: var(--gg-tap-min);
}
body.gg-chrome .hp-search__submit:hover { background: var(--gg-mulberry); }
body.gg-chrome .hp-search__close,
body.gg-chrome .hp-sheet__close { font-size: 1.75rem; width: var(--gg-tap-min); height: var(--gg-tap-min); cursor: pointer; }
body.gg-chrome .hp-sheet__close { color: var(--gg-text-on-dark); }
body.gg-chrome .hp-searchsheet__cancel { color: var(--gg-berry); font-size: 1rem; padding: 10px; cursor: pointer; }
body.gg-chrome .hp-sheet__grouptoggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-family: var(--gg-font-heading);
    font-size: 1.25rem;
    color: var(--gg-text-on-dark);
    padding: 14px 0;
    min-height: var(--gg-tap-min);
    cursor: pointer;
    text-align: left;
}
body.gg-chrome .hp-search__input,
body.gg-chrome .hp-searchsheet__input {
    font-family: var(--gg-font-body);
    font-size: 1.125rem;
    padding: 12px 16px;
    border: 1px solid var(--gg-mulberry-haze);
    border-radius: 0;
    background: var(--gg-white);
    color: var(--gg-text);
    box-shadow: none;
    min-height: var(--gg-tap-min);
}

/* display:flex/grid on panels would defeat the [hidden] attribute the JS
 * toggles — make hidden always win */
body.gg-chrome .hp-sheet[hidden],
body.gg-chrome .hp-searchsheet[hidden],
body.gg-chrome .hp-mega[hidden],
body.gg-chrome .hp-search[hidden],
body.gg-chrome .hp-scrim[hidden] { display: none !important; }

/* Phone bar layout — frame 1d: burger left, logo dead-center, icons right */
.hp-header__bar { position: relative; }
@media (max-width: 1023px) {
    body.gg-chrome .hp-header__logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
    body.gg-chrome .hp-header__icons { margin-left: auto; }
    body.gg-chrome .hp-header__logo img { max-height: 34px; }
}

/* A theme sheet gives bare buttons flex-grow inside flex rows — pin ours */
body.gg-chrome .hp-header__burger,
body.gg-chrome .hp-iconbtn,
body.gg-chrome .hp-search__close,
body.gg-chrome .hp-sheet__close { flex: 0 0 auto; width: var(--gg-tap-min); max-width: var(--gg-tap-min); }
body.gg-chrome .hp-search__submit,
body.gg-chrome .hp-searchsheet__cancel { flex: 0 0 auto; width: auto; }

/* Elementor kit landmine (same one search-page-v2.css documents):
 * `.elementor-kit-7 button { min-width:227px; padding:10px !important }`.
 * min-width beats max-width, and the padding carries !important — counter
 * both explicitly on every healing-paths button. */
body.gg-chrome .hp-header__burger,
body.gg-chrome .hp-iconbtn,
body.gg-chrome .hp-search__close,
body.gg-chrome .hp-sheet__close {
    min-width: var(--gg-tap-min) !important;
    width: var(--gg-tap-min) !important;
    max-width: var(--gg-tap-min) !important;
    padding: 0 !important;
}
body.gg-chrome .hp-header__burger { padding: 10px !important; }
body.gg-chrome .hp-nav__megatoggle,
body.gg-chrome .hp-sheet__grouptoggle,
body.gg-chrome .hp-searchsheet__cancel {
    min-width: 0 !important;
    padding: 10px 0 !important;
}
/* QA 08-27: "Healing Paths" is the only nav item rendered as a <button>
 * (mega/accordion toggle) and the parent theme's global button styles were
 * out-specifying ours — it showed a different font, size and case than its
 * sibling <a> items on both breakpoints. Pin every text property, and make
 * each li a centering flexbox so <a> (inline) and <button> (inline-block)
 * land on the same vertical center instead of divergent baselines. */
@media (min-width: 1024px) {
    body.gg-chrome .hp-nav__item { display: flex; align-items: center; }
}
body.gg-chrome .hp-nav__megatoggle {
    font-family: var(--gg-font-heading) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: normal !important;
    text-transform: none !important;       /* R17: title case, same as the <a> siblings */
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    color: var(--gg-text) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
@media (min-width: 1024px) and (max-width: 1319px) {
    /* mirrors the <a> step for 1024-1319 (size + tracking), wins on specificity */
    body.gg-chrome .hp-header .hp-nav__megatoggle { font-size: 0.9375rem !important; letter-spacing: 0 !important; }
}
body.gg-chrome .hp-nav__megatoggle:hover,
body.gg-chrome .hp-nav__megatoggle:focus-visible { color: var(--gg-berry) !important; background: none !important; }
body.gg-chrome .hp-sheet__grouptoggle {
    font-family: var(--gg-font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--gg-text-on-dark) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.gg-chrome .hp-search__submit {
    min-width: 0 !important;
    padding: 0 24px !important;
}

/* Theme paints button focus/active with a light background — keep ours flat */
body.gg-chrome .hp-header button:focus,
body.gg-chrome .hp-header button:active,
body.gg-chrome .hp-sheet button:focus,
body.gg-chrome .hp-sheet button:active,
body.gg-chrome .hp-search button:focus,
body.gg-chrome .hp-searchsheet button:focus {
    background: transparent !important;
    box-shadow: none !important;
}
body.gg-chrome .hp-search__submit:focus,
body.gg-chrome .hp-search__submit:active { background: var(--gg-mulberry) !important; }

/* A theme ancestor carries overflow-x:hidden, which kills position:sticky —
 * pin the header with fixed positioning instead and pad the body */
body.gg-chrome .hp-header { position: fixed; top: 0; left: 0; right: 0; }
body.gg-chrome { padding-top: var(--gg-header-h-phone); }
@media (min-width: 1024px) {
    body.gg-chrome { padding-top: var(--gg-header-h-desktop); }
}

/* ---------- footer v2 (ADR 0016 D2) ---------- */
/* Visual language from Elementor footer 42's generated CSS: light surface,
 * near-black links (#262224), berry-outlined circular social icons (berry
 * fill + white glyph on hover), hairline divider above the base row. */

.gg-footer {
    background: var(--gg-white);
    color: var(--gg-text);
    font-family: var(--gg-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    border-top: 1px solid var(--gg-dawn-pink);
}
.gg-footer__inner {
    max-width: 1140px;                 /* sub-desktop; 85vw from 1024 below */
    margin: 0 auto;
    padding: 48px var(--gg-gutter) 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.gg-footer__logo { display: inline-block; }
.gg-footer__logo img { width: 300px; max-width: 100%; height: auto; display: block; }

.gg-footer__nav { display: flex; flex-direction: column; gap: 8px; }
.gg-footer__col { list-style: none; margin: 0; padding: 0; }
.gg-footer__col a {
    display: inline-block;
    color: #262224;
    text-decoration: none;
    padding: 9px 0;                    /* comfortable tap rows */
    min-height: 0;
}
.gg-footer__col a:hover,
.gg-footer__col a:focus-visible { color: var(--gg-berry); text-decoration: underline; }

.gg-footer__follow { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.gg-footer__social { display: flex; flex-wrap: wrap; gap: 12px; }
.gg-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gg-tap-min);
    height: var(--gg-tap-min);
    border: 1px solid var(--gg-berry);
    border-radius: 50%;
    color: var(--gg-berry);
    background: var(--gg-white);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.gg-footer__icon svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.gg-footer__icon:hover,
.gg-footer__icon:focus-visible { background: var(--gg-berry); color: var(--gg-white); }

.gg-footer__top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--gg-tap-min);
    font-family: var(--gg-font-heading);
    color: var(--gg-text);
    text-decoration: none;
}
.gg-footer__top:hover,
.gg-footer__top:focus-visible { color: var(--gg-berry); text-decoration: underline; }
.gg-footer__top svg { flex: none; }

.gg-footer__base { border-top: 1px solid rgba(0, 0, 0, 0.13); }   /* footer 42's #00000022 divider */
.gg-footer__baseinner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px var(--gg-gutter) 30px;
}
.gg-footer__copy {
    font-family: var(--gg-font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--gg-text);
    margin: 0;
}

/* --------------------------------------------------------------------------
 * FOOTER, PHONE AND TABLET — round 3, 2026-09-14 (Diego, item 7):
 * "footer in mobile SHOULD center the GaiaGoddess logo and mobile icons should
 *  use full width (minus padding) for their distribution. the rest is fine."
 *
 * Measured at 390 before the change: the logo lockup sat flush left inside a
 * 350px brand box, and the six social icons ran 20 -> 344 with
 * `justify-content: normal`, leaving 46px of dead space against the right
 * gutter — a ragged right edge under a left-aligned logo.
 *
 * NOTE THE SCOPE. This footer is the SITE's, not home v4's — footer-v2.php
 * renders on every gg-chrome page. Diego was looking at the v4 homepage when he
 * wrote it, but a footer that centred its logo on one template and not the
 * others would be a worse outcome than either, so this is deliberately
 * site-wide and below 1024 only. Desktop is untouched.
 *
 * EXCEPT the live video pages until launch (2026-10-15): production must not
 * change before then, so on a video page these rules wait for the video
 * extras (gg_video_extras adds body.gg-video-extras).
 *
 * The icon row is a GRID, not `justify-content: space-between`. Space-between
 * distributes the free space and looks right until the row wraps, at which
 * point the final row spreads two icons to opposite edges. `repeat(auto-fit,
 * minmax(44px, 1fr))` gives every icon an equal column across the full measure
 * and keeps doing so on a second row. 44px is --gg-tap-min, so the track can
 * never fall under the tap target.
 * -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    :is(body:not(.gg-video-page), body.gg-video-extras) .gg-footer .gg-footer__brand { text-align: center; }
    :is(body:not(.gg-video-page), body.gg-video-extras) .gg-footer .gg-footer__logo { display: block; }
    :is(body:not(.gg-video-page), body.gg-video-extras) .gg-footer .gg-footer__logo img { margin-left: auto; margin-right: auto; }

    :is(body:not(.gg-video-page), body.gg-video-extras) .gg-footer .gg-footer__social {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--gg-tap-min), 1fr));
        justify-items: center;
        gap: 12px;
        width: 100%;
    }
    :is(body:not(.gg-video-page), body.gg-video-extras) .gg-footer .gg-footer__follow { align-items: stretch; }
}

@media (min-width: 1024px) {
    /* Doubled class = higher specificity than the 1140px base rule: the
     * override must not depend on source order (RUCSS re-orders concatenated
     * CSS — the exact failure class behind the 76px header-gap bug). */
    .gg-footer .gg-footer__inner {
        flex-direction: row;
        flex-wrap: wrap;               /* squeeze safety at 1024-1300 */
        justify-content: space-between;
        gap: 48px;
        padding: 55px var(--gg-gutter) 50px;   /* footer 42 section padding */
        max-width: 85vw;               /* site container (Elementor boxed) */
    }
    .gg-footer .gg-footer__baseinner { max-width: 85vw; }
    .gg-footer__brand { flex: 0 1 auto; min-width: 0; }  /* logo may shrink */
    .gg-footer__nav { flex-direction: row; gap: 64px; }
}

/* Kit landmine counters for the footer on Elementor-body pages: the kit's
 * bare `a` colour and underline rules load earlier; ours win by order at the
 * same specificity, but pin the links that must never look like buttons. */
body.gg-chrome .gg-footer__icon { min-width: var(--gg-tap-min) !important; padding: 0 !important; }

/* ---------- chrome odds & ends (site-wide) ---------- */

/* Logged-in bar: the fixed header sits below the WP admin bar. */
body.admin-bar.gg-chrome .hp-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar.gg-chrome .hp-header { top: 46px; }
}

/* Focus ring on chrome controls everywhere (the page-wide ring stays an
 * hp-page/gg-video concern). */
.hp-header :focus-visible,
.hp-sheet :focus-visible,
.hp-search :focus-visible,
.hp-searchsheet :focus-visible,
.gg-footer :focus-visible { outline: var(--gg-focus-ring); outline-offset: 2px; }

/* Reduced motion (chrome copy of the healing-paths rule) */
@media (prefers-reduced-motion: reduce) {
    .hp-header, .hp-header__bar, .gg-footer__icon { transition: none; }
}

/* ==========================================================================
 * HEADER V3 — two-row header (Adiba homepage mockup). ADDITIVE BLOCK.
 * --------------------------------------------------------------------------
 * Everything below is scoped to `.hp-header--v3` / `body.gg-header-v3` and is
 * reachable ONLY when `wp option update gg_chrome_header v3` is set. Nothing
 * above this marker is modified — deleting this block from the marker to EOF
 * restores the file to its v2 state exactly.
 *
 * Specificity, not source order: RUCSS re-orders concatenated CSS (the 76px
 * header-gap lesson, 2026-08-31, cited at the width steps near line 138). Every
 * rule here that overrides a v2/chrome rule carries at least one more class than
 * its competitor — `body.gg-header-v3 .hp-header--v3 X` is (0,3,n) against the
 * chrome block's (0,2,n) worst case — and repeats `!important` wherever the
 * counter-rule it is beating already used it.
 *
 * Row heights are retargeted by REDEFINING the header tokens on the header
 * element itself. That needs no specificity at all: `:root` declares them on
 * <html>, `.hp-header--v3` redeclares them nearer the rules that read them, so
 * the v2 height rules resolve to v3 values inside this subtree and nowhere else
 * (the phone sheet's --gg-header-h-phone is a sibling and stays 64px).
 * ========================================================================== */

.hp-header--v3 {
    --gg-header-h-phone: 64px;
    --gg-header-h-desktop: 68px;    /* mockup .utility-row min-height */
    --gg-header-h-compact: 56px;
    --gg-v3-band-h: 48px;           /* mockup .site-tabs min-height */
    --gg-v3-rule: rgba(108, 29, 69, 0.12);
    --gg-v3-tab-rule: rgba(108, 29, 69, 0.08);
}

/* ---------- Row 1: utility row ---------- */

.hp-header--v3 .hp-header__bar {
    background: var(--gg-petal-mist);
    border-bottom: 1px solid var(--gg-v3-rule);
}

/* ---------- Row 2: nav band ---------- */

.hp-header--v3 .hp-header__navband {
    display: none;                  /* phone: the sheet is the nav */
    background: var(--gg-white);
    border-bottom: 1px solid var(--gg-v3-tab-rule);
}

/* Panels hang below BOTH rows. v2 leaves `top` unset and relies on the static
 * position under the single bar; with two rows that is ambiguous, so pin it. */
body.gg-header-v3 .hp-header--v3 .hp-mega,
body.gg-header-v3 .hp-header--v3 .hp-search { top: 100%; }

/* ---------- Utility-row contents ---------- */

/* The account icon is a utility-row fixture at every width in the mockup; v2
 * hides it below 1024 and defers to the phone sheet's "My Account" row. Beats
 * `body.gg-chrome .hp-iconbtn--account { display: none }` (0,2,0). */
body.gg-header-v3 .hp-header--v3 .hp-iconbtn--account { display: inline-flex; }

/* Trial pill — mockup `.trial-tab`. Desktop only: below 1024 the bar already
 * carries burger + centred logo + three icons, and the phone sheet takes it. */
body.gg-header-v3 .hp-header--v3 .hp-header__trial { display: none; }

body.gg-header-v3 .hp-header--v3 .hp-header__trial,
body.gg-header-v3 .hp-sheet__trial {
    align-items: center;
    justify-content: center;
    min-height: var(--gg-tap-min);
    padding: 10px 18px;
    border-radius: var(--gg-radius) !important;
    font-family: var(--gg-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: none !important;
}
body.gg-header-v3 .hp-header--v3 .hp-header__trial {
    background: var(--gg-berry) !important;
    color: var(--gg-text-on-dark) !important;
    border: 1px solid var(--gg-berry) !important;
}
body.gg-header-v3 .hp-header--v3 .hp-header__trial:hover,
body.gg-header-v3 .hp-header--v3 .hp-header__trial:focus-visible {
    background: var(--gg-mulberry) !important;
    border-color: var(--gg-mulberry) !important;
    color: var(--gg-text-on-dark) !important;
}
/* Phone sheet CTA — inverted, the sheet is a berry field. */
body.gg-header-v3 .hp-sheet__trial {
    display: flex;
    margin: 18px 0 4px;
    background: var(--gg-white) !important;
    color: var(--gg-berry) !important;
    border: 1px solid var(--gg-white) !important;
}
body.gg-header-v3 .hp-sheet__trial:hover,
body.gg-header-v3 .hp-sheet__trial:focus-visible {
    background: var(--gg-dawn-pink) !important;
    border-color: var(--gg-dawn-pink) !important;
    color: var(--gg-berry) !important;
}

/* ---------- Desktop: two rows ---------- */

@media (min-width: 1024px) {
    /* The logo reclaims the auto margin v2 removes at this width (v2 needs the
     * nav between logo and icons; v3's row 1 has nothing between them).
     * Beats `@media(min-width:1024px){.hp-header__logo{margin-right:0}}` (0,1,0). */
    body.gg-header-v3 .hp-header--v3 .hp-header__logo { margin-right: auto; flex: 0 0 auto; }

    body.gg-header-v3 .hp-header--v3 .hp-header__bar { gap: 10px; }
    body.gg-header-v3 .hp-header--v3 .hp-header__icons { gap: 8px; }
    body.gg-header-v3 .hp-header--v3 .hp-header__trial { display: inline-flex; margin-left: 8px; }

    body.gg-header-v3 .hp-header--v3 .hp-header__navband { display: block; }

    /* The nav tracks the bar's container so the two rows share a left edge. */
    body.gg-header-v3 .hp-header--v3 .hp-header__nav {
        display: block;
        max-width: max(85vw, 1024px);
        margin: 0 auto;
        padding: 0 var(--gg-gutter);
    }

    /* Tabs: no gap, hairline separators, centred — mockup `.site-tabs`.
     * Beats the 1440 and 1024-1319 gap steps (both 0,2,1) at (0,3,1). */
    body.gg-header-v3 .hp-header--v3 .hp-header__nav ul {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 0;
        min-height: var(--gg-v3-band-h);
        list-style: none;
        margin: 0;
        padding: 0;
    }
    body.gg-header-v3 .hp-header--v3 .hp-nav__item {
        display: flex;
        align-items: stretch;
        border-left: 1px solid var(--gg-v3-tab-rule);
    }
    body.gg-header-v3 .hp-header--v3 .hp-nav__item:last-child {
        border-right: 1px solid var(--gg-v3-tab-rule);
    }
    /* Hover lives on the LI so it fills the whole tab cell and works for the
     * <a> items and the <button> toggles alike — the chrome block pins
     * `background: none !important` on .hp-nav__megatoggle, so a background on
     * the button itself is unreachable by design. */
    body.gg-header-v3 .hp-header--v3 .hp-nav__item:hover,
    body.gg-header-v3 .hp-header--v3 .hp-nav__item:focus-within {
        background: var(--gg-dawn-pink);
    }
    /* Healing Paths is the lead tab in the mockup (`.healing-paths-tab`). */
    body.gg-header-v3 .hp-header--v3 .hp-nav__item--hp { background: var(--gg-soft-cream); }
    body.gg-header-v3 .hp-header--v3 .hp-nav__item--hp:hover,
    body.gg-header-v3 .hp-header--v3 .hp-nav__item--hp:focus-within { background: var(--gg-dawn-pink); }

    /* Full-height, horizontally padded tab cells. The megatoggle padding pin in
     * the chrome block carries !important, so this one must too. Typography is
     * NOT restated: R17's title case at 1rem is our system and already applies. */
    body.gg-header-v3 .hp-header--v3 .hp-nav__item > a {
        display: flex;
        align-items: center;
        padding: 10px 17px;
    }
    body.gg-header-v3 .hp-header--v3 .hp-nav__megatoggle {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 10px 17px !important;
    }
}

/* Tighter tab cells where the bar hits its 1024px floor, mirroring the v2 step. */
@media (min-width: 1024px) and (max-width: 1319px) {
    body.gg-header-v3 .hp-header--v3 .hp-nav__item > a { padding: 10px 12px; }
    body.gg-header-v3 .hp-header--v3 .hp-nav__megatoggle { padding: 10px 12px !important; }
}

/* ==========================================================================
 * END HEADER V3
 * ========================================================================== */

/* ==========================================================================
 * HEADER V4 — the DESIGNER's two-row header. ADDITIVE BLOCK.
 * Spec: docs/design/2026-09-14-designer-homepage-template/HEADER-V3.md
 * (the designer numbers their own header "v3"; ours was taken, so it ships
 * here as v4 — read v3 as v4 throughout that file).
 * --------------------------------------------------------------------------
 * Everything below is scoped to `.hp-header--v4` / `body.gg-header-v4` /
 * `.hp-v4-*` and is reachable ONLY when `wp option update gg_chrome_header v4`
 * is set. Nothing above this marker is modified — deleting this block from the
 * marker to EOF restores the file to its state before v4 exactly.
 *
 * ZERO HARD-CODED HEX. Every colour is a token from css/healing-tokens.css.
 * The one literal is the berry RGB TRIPLET, declared once below: the hairlines
 * and panel shadow the spec asks for are berry at 8-12% alpha and there is no
 * translucent-berry token. Same local-triplet pattern CLASS-CONTRACT.md
 * sanctions for the hero scrim, and the same values the HEADER V3 block spells
 * out inline.
 *
 * SPECIFICITY, NOT SOURCE ORDER: RUCSS re-orders concatenated CSS (the 76px
 * header-gap lesson, 2026-08-31). Every rule here that has to beat a chrome
 * rule carries more classes than its competitor. The three that matter:
 *   · `body.gg-chrome .hp-header { position:fixed; top:0 }`        (0,2,0)
 *     and `body.admin-bar.gg-chrome .hp-header { top:32px }`       (0,3,0)
 *     are both beaten by `body.gg-header-v4 .hp-header.hp-header--v4` (0,4,0),
 *     which is why the root selector repeats the base class.
 *   · `body.gg-chrome { padding-top: … }`                          (0,2,0)
 *     is beaten by `body.gg-chrome.gg-header-v4`                   (0,3,0).
 *   · `body.gg-chrome .hp-header button { padding:0; … }`          (0,2,1)
 *     is beaten by `body.gg-header-v4 .hp-header--v4 .hp-v4-x`     (0,3,0),
 *     which is why every in-header rule below repeats BOTH classes.
 * Where the counter-rule it has to beat already used `!important` — the
 * Elementor kit's `.elementor-kit-7 button { min-width:227px; padding:10px
 * !important }` — this block repeats it.
 *
 * CLS IS ZERO BY CONSTRUCTION (criterion 7). The announce bar and the header
 * are both position:fixed; the body reserves their FULL uncompacted height in
 * `padding-top`, computed from `--hpv4-announce-reserve`, which nothing but the
 * pre-paint dismissal class ever changes. The compact step (utility 68 -> 56,
 * band holds 48, announce collapses, header rises) only moves out-of-flow
 * boxes, so no page content shifts on scroll — and the dismissal is applied
 * before first paint, so it does not shift on a repeat view either.
 *
 * NO TRANSFORM ON THE HEADER ROOT, DELIBERATELY. The compact step animates the
 * header's `top`, not a translate: the cart drawer is a position:fixed
 * descendant of the header, and a transform on an ancestor would make that
 * ancestor its containing block — the full-viewport cart scrim would collapse
 * to the header's box the moment the page scrolled.
 * ========================================================================== */

/* ---------- the fixed stack, and the height it reserves ---------- */

:root {
    --hpv4-announce-h: 34px;        /* live height — collapses on scroll */
    --hpv4-announce-reserve: 34px;  /* reserved height — scroll NEVER touches it */
}
/* Set before first paint by the inline script in header-v4.php, from
 * localStorage or from an empty gg_v4_announce_text filter. */
html.hp-v4-no-announce {
    --hpv4-announce-h: 0px;
    --hpv4-announce-reserve: 0px;
}
html.hp-v4-no-announce body.gg-header-v4 .hp-v4-announce { display: none; }

body.gg-header-v4 {
    --hpv4-util-h: 64px;             /* utility row: 64 at 390 and 1024, 68 at 1440 */
    --hpv4-util-h-compact: 56px;     /* 68 -> 56 on scroll */
    --hpv4-band-h: 0px;              /* nav band is hidden below 800 */
    --hpv4-pad: 8px;                 /* row side padding: 8 / 24 / 40 */
    --hpv4-logo-h: 24px;             /* logotype HEIGHT: 24 / 26 / 28 */
    --hpv4-tab-size: 0.875rem;       /* v2 type since round 5: 14px (800-899) / 15 / 16 */
    --hpv4-tab-pad: 10px;            /* 10 (800-899) / 13 / 18 */
    --hpv4-glyph: 20px;
    --hpv4-top-offset: 0px;          /* the logged-in admin bar */

    /* Berry as an rgb triplet — hairlines and shadows only, never a surface. */
    --hpv4-berry-rgb: 108 29 69;
    --hpv4-rule: rgb(var(--hpv4-berry-rgb) / 0.10);
    --hpv4-tab-rule: rgb(var(--hpv4-berry-rgb) / 0.08);
    --hpv4-panel-shadow: 0 18px 45px rgb(var(--hpv4-berry-rgb) / 0.12);
    --hpv4-drawer-shadow: 0 0 40px rgb(var(--hpv4-berry-rgb) / 0.18);
}
/* The admin bar is fixed and WP pushes <html> down for it; the chrome answers
 * that with `body.admin-bar.gg-chrome .hp-header { top: 32px }`. v4 has two
 * fixed rows to offset, so it carries the value as a variable instead. */
body.admin-bar.gg-header-v4 { --hpv4-top-offset: 32px; }
@media (max-width: 782px) {
    body.admin-bar.gg-header-v4 { --hpv4-top-offset: 46px; }
}
@media (min-width: 800px) {
    body.gg-header-v4 {
        --hpv4-band-h: 48px;
        --hpv4-pad: 24px;
        --hpv4-logo-h: 26px;
        --hpv4-glyph: 19px;
    }
}
@media (min-width: 900px) {
    body.gg-header-v4 { --hpv4-tab-size: 0.9375rem; --hpv4-tab-pad: 13px; }
}
@media (min-width: 1200px) {
    body.gg-header-v4 {
        --hpv4-util-h: 68px;
        --hpv4-pad: 40px;
        --hpv4-logo-h: 28px;              /* = header-v2's shipped 122x28 */
        --hpv4-tab-size: 1rem;            /* 16px — header-v2's label size */
        --hpv4-tab-pad: 18px;
        --hpv4-glyph: 20px;
    }
}

/* The reserve. Listed twice on purpose: the bare `body.gg-header-v4` selector
 * covers the emergency-rollback state (page-open.php renders the selected
 * header with no gg-chrome class on the body), the compound one out-specifies
 * the chrome's own padding-top. Neither term reads a scroll-dependent value. */
body.gg-header-v4,
body.gg-chrome.gg-header-v4 {
    padding-top: calc(var(--hpv4-announce-reserve) + var(--hpv4-util-h) + var(--hpv4-band-h));
}

/* ---------- H0 — announce bar ---------- */

body.gg-header-v4 .hp-v4-announce {
    position: fixed;
    top: var(--hpv4-top-offset, 0px);
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    height: var(--hpv4-announce-h);
    overflow: hidden;
    background: var(--gg-mulberry);
    color: var(--gg-text-on-dark);
    transition: height 0.2s ease;
}
/* On scroll the strip collapses and the header rises into its place, so the
 * sticky total is the spec's 116 -> 104 and not 150 -> 138.
 * `--hpv4-announce-reserve` is untouched, so the body's padding does not move. */
body.gg-header-v4.hp-v4-compact { --hpv4-announce-h: 0px; }

body.gg-header-v4 .hp-v4-announce__inner {
    flex: 1 1 auto;
    min-width: 0;
    /* 44px of clearance each side so the centred copy never runs under the x. */
    padding: 0 var(--gg-tap-min);
    font-family: var(--gg-font-body);
    font-size: 0.84375rem;           /* 13.5px */
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.gg-header-v4 .hp-v4-announce__link,
body.gg-header-v4 .hp-v4-announce__text { color: var(--gg-text-on-dark); }
body.gg-header-v4 .hp-v4-announce__link { text-decoration: none; }
body.gg-header-v4 .hp-v4-announce__link:hover,
body.gg-header-v4 .hp-v4-announce__link:focus-visible {
    color: var(--gg-text-on-dark);
    text-decoration: underline;
}

/* 44 wide, but only as tall as the strip: a 34px bar cannot host a 44px-tall
 * target, so the tap area is the full height of the row it lives in. */
body.gg-header-v4 .hp-v4-announce__close {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: var(--gg-tap-min) !important;
    width: var(--gg-tap-min) !important;
    max-width: var(--gg-tap-min) !important;
    padding: 0 !important;
    background: none;
    border: 0;
    color: var(--gg-text-on-dark);
    cursor: pointer;
}
body.gg-header-v4 .hp-v4-announce :focus-visible { outline: var(--gg-focus-ring); outline-offset: -2px; }

/* ---------- H1 — header root ---------- */

body.gg-header-v4 .hp-header.hp-header--v4 {
    position: fixed;
    top: calc(var(--hpv4-top-offset, 0px) + var(--hpv4-announce-h));
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--gg-white);
    transition: top 0.2s ease, box-shadow 0.2s ease;
}
/* The compact shadow itself is the chrome's `.hp-header--compact` rule, and it
 * fades in over the 0.2s declared above — the spec's 200ms, unchanged. */

/* ---------- row 1 — utility ---------- */

body.gg-header-v4 .hp-header--v4 .hp-v4-util {
    height: var(--hpv4-util-h);
    background: var(--gg-white);
    transition: height 0.2s ease;
}
body.gg-header-v4.hp-v4-compact .hp-header--v4 .hp-v4-util { height: var(--hpv4-util-h-compact); }

body.gg-header-v4 .hp-header--v4 .hp-v4-util__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 var(--hpv4-pad);       /* full-bleed row, padded — no max-width */
}

/* Burger — below 800 only. */
body.gg-header-v4 .hp-header--v4 .hp-v4-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    height: var(--gg-tap-min);
    min-width: var(--gg-tap-min) !important;
    width: var(--gg-tap-min) !important;
    max-width: var(--gg-tap-min) !important;
    padding: 10px !important;
    background: none;
    border: 0;
    cursor: pointer;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-burger__bar {
    display: block;
    height: 1.5px;
    background: var(--gg-berry);
}

/* Logotype — the wordmark-only cut, no mark, at every width (Diego 2026-09-14,
 * and the no-mark half is the 2026-08-28 ruling header-v2 already ships).
 *
 * HEIGHT drives it and the width follows, because the asset is 317x73 and only
 * one of the two can be authoritative. The tag carries those intrinsics, so the
 * browser reserves the full box from the aspect ratio before the file arrives
 * — criterion 7 is a zero-CLS header and an unsized <img> is how that is lost.
 *
 * 28px at 1200+ is not a guess: it is exactly the 122x28 header-v2 has shipped
 * since 08-28, so the two headers wear the brand at the same size. It steps
 * down to 26/24 below that, where the util row is 64px rather than 68 and the
 * burger and the action icons are competing for the same row. */
body.gg-header-v4 .hp-header--v4 .hp-v4-wordmark {
    display: inline-flex;
    align-items: center;
    min-height: var(--gg-tap-min);
    margin-right: auto;
    min-width: 0;
    text-decoration: none !important;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-wordmark__img {
    display: block;          /* kills the inline-baseline gap under the image */
    height: var(--hpv4-logo-h);
    width: auto;
    max-width: 100%;
}
/* The old hover recoloured live text to mulberry. An <img> cannot be recoloured
 * from CSS, and a filter that approximates the berry->mulberry shift would be a
 * different colour on a different screen. A short opacity fade is the honest
 * substitute: it reads as "this is a link" without pretending to hit a token. */
body.gg-header-v4 .hp-header--v4 .hp-v4-wordmark__img { transition: opacity 160ms ease; }
body.gg-header-v4 .hp-header--v4 .hp-v4-wordmark:hover .hp-v4-wordmark__img,
body.gg-header-v4 .hp-header--v4 .hp-v4-wordmark:focus-visible .hp-v4-wordmark__img { opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
    body.gg-header-v4 .hp-header--v4 .hp-v4-wordmark__img { transition: none; }
}

body.gg-header-v4 .hp-header--v4 .hp-v4-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* Icons — borderless, berry, mulberry on hover. The client's boxed 44px chips
 * are dropped (spec §Row 1); the 44x44 hit area stays, which is criterion 6. */
body.gg-header-v4 .hp-header--v4 .hp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--gg-tap-min);
    height: var(--gg-tap-min);
    background: none;
    border: 0;
    color: var(--gg-berry);
    cursor: pointer;
}
body.gg-header-v4 .hp-header--v4 .hp-iconbtn:hover,
body.gg-header-v4 .hp-header--v4 .hp-iconbtn:focus-visible { color: var(--gg-mulberry); }
body.gg-header-v4 .hp-header--v4 .hp-v4-icon svg {
    display: block;
    width: var(--hpv4-glyph);
    height: var(--hpv4-glyph);
}
/* Account joins the row at the collapse point, not at the chrome's 1024: at 390
 * the designer's row is burger + wordmark + search/cart, and My Account moves
 * into the drawer. Beats `body.gg-chrome .hp-iconbtn--account` both ways. */
body.gg-header-v4 .hp-header--v4 .hp-iconbtn--account { display: none; }

/* Trial button — the header's MAIN CTA: Gaia Berry fill, white label, hover
 * Mulberry, the same pairing as .hp-btn and the drawer's trial button (round 9,
 * Adiba via Diego, 5 Oct; it was berry text on white with a hairline). White on
 * Berry is 11.1:1, on Mulberry 7.1:1. Tenor Sans, .03em. Hidden below 800: no
 * third copy of the CTA in a 390 header (spec §Responsive). */
body.gg-header-v4 .hp-header--v4 .hp-v4-trial {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: var(--gg-tap-min);
    margin-left: 6px;
    padding: 13px 16px;
    font-family: var(--gg-font-heading);
    font-size: 0.78125rem;            /* 12.5px; 13px from 1200 */
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    color: var(--gg-text-on-dark);
    background: var(--gg-berry);
    border: 1px solid var(--gg-berry);
    border-radius: var(--gg-radius);
    text-decoration: none !important;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-trial:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-trial:focus-visible {
    color: var(--gg-text-on-dark);
    background: var(--gg-mulberry);
    border-color: var(--gg-mulberry);
}
body.gg-header-v4 .hp-header--v4 .hp-v4-trial__long { display: none; }
body.gg-header-v4 .hp-header--v4 .hp-v4-trial__short { display: inline; }

/* ---------- row 2 — nav band ---------- */

body.gg-header-v4 .hp-header--v4 .hp-v4-band {
    display: none;                    /* below 800 the drawer is the nav */
    background: var(--gg-white);
    border-top: 1px solid var(--hpv4-rule);
}
body.gg-header-v4 .hp-header--v4 .hp-v4-nav { padding: 0 8px; }
body.gg-header-v4 .hp-header--v4 .hp-v4-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    min-height: var(--hpv4-band-h);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* ROUND 5 (2026-09-17): header-v2's STYLE on this header's LAYOUT. Diego:
 * "Style-wise: v2 wins: no arrows, no diving lines between level 1 items, no
 * background hover … The only thing 'style wise' I don't like from V2 is the
 * active state style (the border) … I'm fine with using today's v3's hover
 * state for the active state". So, against what shipped on 09-14:
 *   - no hairline between tabs (the border-left/-right pair is gone);
 *   - no chevron (the span is gone from header-v4.php);
 *   - labels in v2's type: Tenor Sans, title case, +0.02em, Soft Black,
 *     berry on hover — no fill on hover;
 *   - ACTIVE = the Dawn Pink cell that used to be the hover. It marks the tab
 *     whose panel is open (:hover / :focus-within on a panel tab — the same
 *     moment the panel appears, see the delay note below), the current section
 *     (--hp, which was the Soft Cream pill; Cream is retired) and the current
 *     page (--current). */
body.gg-header-v4 .hp-header--v4 .hp-v4-tab {
    position: relative;               /* the panel's containing block */
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 0;
    transition: background-color 0s linear 0.15s;   /* leaves with its panel */
}

body.gg-header-v4 .hp-header--v4 .hp-v4-tab__link {
    display: flex;
    align-items: center;
    padding: 0 var(--hpv4-tab-pad);
    min-height: var(--hpv4-band-h);
    font-family: var(--gg-font-heading);
    font-size: var(--hpv4-tab-size);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.1;
    color: var(--gg-text);
    white-space: nowrap;
    text-decoration: none !important;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-tab__link:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab__link:focus-visible { color: var(--gg-berry); }

body.gg-header-v4 .hp-header--v4 .hp-v4-tab--hp,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--current,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:focus-within {
    background: var(--gg-dawn-pink);
}
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:focus-within {
    transition-delay: 0.12s;          /* arrives with its panel */
}
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--hp > .hp-v4-tab__link,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--current > .hp-v4-tab__link,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:hover > .hp-v4-tab__link,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:focus-within > .hp-v4-tab__link { color: var(--gg-berry); }

/* v2's "border". It is the parent theme's bare `:focus { outline: 2px solid
 * #6c1d45 !important }`, which stays on a control after a MOUSE click — v2's
 * toggles are <button>s that keep focus while their panel is open, so the
 * outline reads as the open state. Here it is suppressed for pointer focus
 * only; a keyboard user still gets the ring (:focus-visible). !important
 * because the rule it has to beat carries one. */
body.gg-header-v4 .hp-header--v4 .hp-v4-tab__link:focus:not(:focus-visible),
body.gg-header-v4 .hp-header--v4 .hp-v4-panel a:focus:not(:focus-visible) { outline: none !important; }

/* ---------- dropdown panels ---------- */

/* Opened by CSS on hover AND :focus-within, so a keyboard reaches them with no
 * click and with no JS at all (criterion 4). Painting above the hero is
 * criterion 5: z-index 25 as specified, inside a header that is itself z-index
 * 1000, so the panel clears page content either way. */
/* HOVER INTENT, IN CSS (round 5). The panel is laid out all the time and
 * toggled with visibility + opacity instead of display, which is what lets
 * the switch carry a DELAY: 120ms before it opens, 150ms before it closes. That
 * matters now that an open panel also dims the page — without it, a pointer
 * crossing the band on its way to the content would flash the dim on and off.
 * visibility:hidden also takes the panel's links out of the tab order and out
 * of hit-testing, exactly as display:none did. Shadow: header-v2's
 * (.hp-mega, `0 12px 24px rgba(42,42,42,.10)`), per "we keep v2's shadow". */
body.gg-header-v4 .hp-header--v4 .hp-v4-panel {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.15s, opacity 0.12s ease 0.03s;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 25;
    min-width: 236px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--gg-white);
    border: 1px solid var(--gg-mulberry-haze);
    box-shadow: 0 12px 24px rgba(42, 42, 42, 0.10);
}
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:hover > .hp-v4-panel,
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:focus-within > .hp-v4-panel {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.12s, 0.12s;
}
/* Keyboard opens at once: visibility is still `hidden` during a delay, and a
 * fast Tab would skip straight past links that are not yet focusable. One
 * class heavier than the :hover rule (.hp-v4-nav), so it wins when both match
 * whatever order the sheet is concatenated in. */
body.gg-header-v4 .hp-header--v4 .hp-v4-nav .hp-v4-tab--panel:focus-within > .hp-v4-panel { transition-delay: 0s, 0s; }
/* Escape sets `is-dismissed` and returns focus to the label — which keeps the
 * tab matching :focus-within, so only a force-hide can close it. header-v4.js
 * clears the class the moment focus or the pointer leaves the tab. !important
 * because it has to beat an equal-specificity :hover / :focus-within rule
 * whatever order RUCSS concatenates them in. */
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel.is-dismissed > .hp-v4-panel { display: none !important; }

body.gg-header-v4 .hp-header--v4 .hp-v4-panel__item { margin: 0; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__link {
    display: block;
    padding: 13px 18px;
    font-family: var(--gg-font-heading);
    font-size: 0.9375rem;             /* 15px */
    line-height: 1.4;
    color: var(--gg-berry);
    white-space: nowrap;
    text-decoration: none !important;
    border-bottom: 1px solid var(--hpv4-tab-rule);
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__item:last-child .hp-v4-panel__link { border-bottom: 0; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__link:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__link:focus-visible {
    background: var(--gg-dawn-pink);
    color: var(--gg-berry);
}

/* ---------- v2's MEGA, in v4's band (round 3, 2026-09-14) ----------
 *
 * Diego: "the V2 header (used in pillar pages), with the 'mega menu' for
 * subitems, we should keep in this new version… when I asked you implement the
 * designer's proposal, I only referred to the two row treatment."
 *
 * So the designer's TREATMENT stays (band, tabs, dividers, Soft Cream
 * highlight) and v2's PANELS replace the designer's two-link dropdowns. Both
 * kinds are FULL-BAND-WIDTH, exactly as `.hp-mega` and `.hp-mega--duo` are in
 * v2 — which is not only fidelity: a 520px panel anchored under the last tab
 * would hang off the right edge of the viewport, and v2 had already solved
 * that by spanning.
 *
 * Spanning needs the panel's containing block to be the BAND, not the tab, so
 * the tab that owns a panel goes `position: static` and the band becomes the
 * positioned ancestor. `top: 100%` then resolves against the band's padding
 * box, whose bottom edge is where the panel belongs.
 *
 * The measurements are v2's own, deliberately: `max(85vw, 1024px)` tracks the
 * site container, 5 columns at 28px, the roundel at 44px, the practice line at
 * 14px. Two headers, one mega.
 * ------------------------------------------------------------------------- */

body.gg-header-v4 .hp-header--v4 .hp-v4-band { position: relative; }
body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel { position: static; }

body.gg-header-v4 .hp-header--v4 .hp-v4-panel--mega,
body.gg-header-v4 .hp-header--v4 .hp-v4-panel--duo {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--gg-dawn-pink);
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
    max-width: max(85vw, 1024px);
    margin: 0 auto;
    padding: 32px var(--gg-gutter) 20px;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel--duo .hp-v4-panel__inner {
    grid-template-columns: repeat(2, minmax(0, 340px));
    padding-bottom: 32px;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__col { min-width: 0; }

/* Top-aligned, so a two-line label (Nervous System Regulation) keeps its
 * roundel centred on the FIRST line; the 10px on the span re-centres a
 * one-liner identically ((44 - 24) / 2). v2 round 3 §6.3, unchanged. */
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--gg-font-heading);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--gg-text);            /* v2's .hp-mega__path (round 5) */
    text-decoration: none !important;
    margin-bottom: 8px;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path:focus-visible { color: var(--gg-berry); }
/* The label's 10px — and ONLY the label's. This used to be `> span`, and the
 * roundel is a <span> too: it got the same padding-top, which (box-sizing:
 * border-box, fixed 44px height) shrank its content box to 34px and pushed it
 * down by 10, so the glyph sat 5px below the disc's centre and rendered at
 * 58% of 34 instead of 44. Diego, round 5: "it seems that the icon is not
 * vertically centered in the circle, should move up a bit." */
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path > span:not(.hp-roundel) { padding-top: 10px; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path .hp-roundel--nav { width: 44px; height: 44px; flex: none; padding: 0; }
/* The glyph keeps the size it has always been seen at (the bug's 20px), now
 * centred; 58% of a full 44 would have grown it by a quarter as a side effect. */
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path .hp-roundel--nav .hp-icon-mask,
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__path .hp-roundel--nav svg { width: 20px; height: 20px; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel--duo .hp-v4-panel__path > span { padding-top: 0; }

body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    color: var(--gg-title-secondary);
}
/* Round 10 (R10-2): the mega's practices are a list, one per row. */
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices--list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices--list li { margin: 0; padding: 0; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices--list li::before { content: none; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices a {
    color: var(--gg-berry);
    text-decoration: none;            /* v2 (round 5): links in berry, underline on hover */
    text-underline-offset: 3px;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices a:hover,
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__practices a:focus-visible { text-decoration: underline; }
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__foot {
    max-width: max(85vw, 1024px);
    margin: 0 auto;
    padding: 0 var(--gg-gutter) 28px;
}
body.gg-header-v4 .hp-header--v4 .hp-v4-panel__foot a {
    font-weight: 500;
    color: var(--gg-berry);
}

/* The drawer's Healing Paths group carries the roundels too, so the phone is
 * not a lesser menu than the band (v2's sheet did the same). */
body.gg-header-v4 .hp-v4-drawer__sublink--path {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.gg-header-v4 .hp-v4-drawer__sublink--path .hp-roundel--nav {
    width: 32px;
    height: 32px;
    flex: none;
}
body.gg-header-v4 .hp-v4-drawer__sublink--all { font-weight: 500; }

/* ---------- search overlay (v2's component, repositioned) ---------- */

/* The header is position:fixed, so it is the containing block for this
 * absolutely positioned panel; with two rows, `top` has to be pinned. */
body.gg-header-v4 .hp-header--v4 .hp-search { top: 100%; z-index: 24; }
@media (max-width: 560px) {
    body.gg-header-v4 .hp-header--v4 .hp-search { padding: 16px var(--hpv4-pad) 20px; }
    body.gg-header-v4 .hp-header--v4 .hp-search__form { flex-wrap: wrap; }
    body.gg-header-v4 .hp-header--v4 .hp-search__input { flex: 1 1 100%; }
}

/* ---------- below 800 — the burger drawer ---------- */

body.gg-header-v4 .hp-v4-drawer {
    position: fixed;
    top: var(--hpv4-top-offset, 0px);
    bottom: 0;
    left: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 86vw;
    overflow-y: auto;
    background: var(--gg-white);
    box-shadow: var(--hpv4-drawer-shadow);
    animation: hp-v4-drawer-in 0.22s ease both;
}
/* An author `display` beats the UA `[hidden] { display: none }` rule, so
 * without this the drawer is laid out permanently and header-v4.js toggling
 * `hidden` has no visual effect — open from page load, Escape and the scrim
 * apparently dead. The exact trap scripts/chrome/hidden-display-check.py
 * exists to catch. */
body.gg-header-v4 .hp-v4-drawer[hidden] { display: none !important; }
@keyframes hp-v4-drawer-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

body.gg-header-v4 .hp-v4-drawer__head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--hpv4-util-h);
    padding: 0 12px 0 var(--gg-gutter);
    border-bottom: 1px solid var(--hpv4-rule);
}
/* Same asset in the drawer head, so the burger panel and the bar agree. It is
 * an <img> now, not text, so the type properties that shaped the old span are
 * gone rather than left behind to mean nothing. */
body.gg-header-v4 .hp-v4-drawer__wordmark {
    flex: 0 1 auto;
    min-width: 0;
    display: block;
    height: 24px;
    width: auto;
    max-width: 100%;
    margin-right: auto;
}
body.gg-header-v4 .hp-v4-drawer__close,
body.gg-header-v4 .hp-v4-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--gg-tap-min);
    min-width: var(--gg-tap-min) !important;
    width: var(--gg-tap-min) !important;
    max-width: var(--gg-tap-min) !important;
    padding: 0 !important;
    background: none;
    border: 0;
    color: var(--gg-berry);
    cursor: pointer;
}

body.gg-header-v4 .hp-v4-drawer__nav {
    flex: 1 1 auto;
    padding: 8px var(--gg-gutter) 24px;
}
body.gg-header-v4 .hp-v4-drawer__list { margin: 0; padding: 0; list-style: none; }
body.gg-header-v4 .hp-v4-drawer__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--hpv4-tab-rule);
}
body.gg-header-v4 .hp-v4-drawer__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: var(--gg-tap-min);
    padding: 10px 0;
    font-family: var(--gg-font-heading);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--gg-berry);
    text-decoration: none !important;
    border-bottom: 1px solid var(--hpv4-tab-rule);
}
body.gg-header-v4 .hp-v4-drawer__group > .hp-v4-drawer__link { border-bottom: 0; }
body.gg-header-v4 .hp-v4-drawer__chev {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
body.gg-header-v4 .hp-v4-drawer__toggle[aria-expanded="true"] .hp-v4-drawer__chev {
    margin-top: 3px;
    transform: rotate(225deg);
}
body.gg-header-v4 .hp-v4-drawer__sub {
    flex: 1 1 100%;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 2px solid var(--gg-mulberry-haze);   /* was Soft Cream — retired 2026-09-17 */
}
body.gg-header-v4 .hp-v4-drawer__sub[hidden] { display: none !important; }
body.gg-header-v4 .hp-v4-drawer__sublink {
    display: flex;
    align-items: center;
    min-height: var(--gg-tap-min);
    padding: 8px 0;
    font-family: var(--gg-font-body);
    font-size: 0.9375rem;
    color: var(--gg-berry);
    text-decoration: none !important;
}
body.gg-header-v4 .hp-v4-drawer__link:hover,
body.gg-header-v4 .hp-v4-drawer__sublink:hover,
body.gg-header-v4 .hp-v4-drawer__link:focus-visible,
body.gg-header-v4 .hp-v4-drawer__sublink:focus-visible { color: var(--gg-mulberry); }

/* The trial CTA the 390 header gives up. Gated by gg_is_gold_member() in the
 * partial, so a Gold member sees it nowhere. */
body.gg-header-v4 .hp-v4-drawer__trial {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--gg-tap-min);
    margin-top: 20px;
    padding: 13px 18px;
    font-family: var(--gg-font-heading);
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
    color: var(--gg-text-on-dark);
    background: var(--gg-berry);
    border: 1px solid var(--gg-berry);
    border-radius: var(--gg-radius);
    text-decoration: none !important;
}
body.gg-header-v4 .hp-v4-drawer__trial:hover,
body.gg-header-v4 .hp-v4-drawer__trial:focus-visible {
    color: var(--gg-text-on-dark);
    background: var(--gg-mulberry);
    border-color: var(--gg-mulberry);
}

body.gg-header-v4 .hp-v4-drawer__foot {
    padding: 16px var(--gg-gutter) 24px;
    font-family: var(--gg-font-body);
    font-size: 0.8125rem;
    color: var(--gg-text-muted);
    border-top: 1px solid var(--hpv4-rule);
}
body.gg-header-v4 .hp-v4-drawer__foot a { color: var(--gg-text-muted); }
body.gg-header-v4 .hp-v4-drawer :focus-visible { outline: var(--gg-focus-ring); outline-offset: 2px; }

/* ---------- the collapse point: 800, not 1180 ---------- */

@media (min-width: 800px) {
    body.gg-header-v4 .hp-header--v4 .hp-v4-burger { display: none !important; }
    body.gg-header-v4 .hp-v4-drawer { display: none !important; }
    body.gg-header-v4 .hp-header--v4 .hp-iconbtn--account { display: inline-flex; }
    body.gg-header-v4 .hp-header--v4 .hp-v4-trial { display: inline-flex; }
    body.gg-header-v4 .hp-header--v4 .hp-v4-band { display: block; }
}

/* 1440 artboard: the long trial label and its 13px type. */
@media (min-width: 1200px) {
    body.gg-header-v4 .hp-header--v4 .hp-v4-trial {
        margin-left: 8px;
        padding: 14px 20px;
        font-size: 0.8125rem;         /* 13px */
    }
    body.gg-header-v4 .hp-header--v4 .hp-v4-trial__long { display: inline; }
    body.gg-header-v4 .hp-header--v4 .hp-v4-trial__short { display: none; }
}

/* ---------- reduced motion ---------- */

/* The chrome's `@media (prefers-reduced-motion: reduce) { .hp-header … }` is
 * (0,1,0) and would lose to every rule above — restate it at this block's own
 * weight so the preference still wins. */
@media (prefers-reduced-motion: reduce) {
    body.gg-header-v4 .hp-header.hp-header--v4,
    body.gg-header-v4 .hp-header--v4 .hp-v4-util,
    body.gg-header-v4 .hp-v4-announce { transition: none !important; }
    body.gg-header-v4 .hp-v4-drawer { animation: none !important; }
    /* The open/close DELAYS stay (they are intent, not motion); the fade goes. */
    body.gg-header-v4 .hp-header--v4 .hp-v4-panel { transition: visibility 0s linear 0.15s !important; }
    body.gg-header-v4 .hp-header--v4 .hp-v4-tab--panel:hover > .hp-v4-panel { transition: visibility 0s linear 0.12s !important; }
    body.gg-header-v4 .hp-header--v4 .hp-v4-nav .hp-v4-tab--panel:focus-within > .hp-v4-panel { transition: none !important; }
}

/* ==========================================================================
 * FAVOURITES HEART — the filled state (round 5, 2026-09-17).
 * The pillar's P6 cards carry the gg-favorites button (template-parts/healing/
 * video-card.php; base styles in healing-paths.css). The plugin's script adds
 * `.active` at RUNTIME, so a rule keyed on it matches nothing in the served
 * HTML of a page nobody has favourited yet and WP Rocket's used-CSS would drop
 * it (lesson 2026-09-04). This sheet is on the RUCSS safelist, so it lives
 * here. The outline heart is a mask; the filled one is the same path, filled.
 * ========================================================================== */
.hp-vcard--fav .hp-vcard__fav.active .gg-favorites-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.hp-vcard--fav .hp-vcard__fav.gg-favorites-loading { opacity: 0.5; pointer-events: none; }
/* The kit's `.elementor-kit-7 button { min-width:227px; padding:10px !important }`
 * would turn the heart into a 227px block — same counter as every other
 * healing-paths button. Here, not in healing-paths.css: the <button> is only in
 * logged-in HTML, which a used-CSS pass over the anonymous page never sees. */
/* Round 10 (R10-3): on the library's Berry ground the heart is light. */
body.hp-page .gg-lib--berry .hp-vcard--fav button.hp-vcard__fav { color: var(--gg-dawn-pink) !important; }
body.hp-page .hp-vcard--fav button.hp-vcard__fav {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--gg-berry) !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* ==========================================================================
 * END HEADER V4
 * ========================================================================== */

/* Floating section navigator (healing-paths.css, .hp-secnav): Next moves focus to
 * the section it scrolled to, giving it tabindex="-1" at runtime. That section is
 * a focus target, not a control — the parent theme's bare `:focus` outline would
 * draw a berry frame round the whole band. Here because the attribute is set by
 * script, so only a safelisted sheet keeps the rule. */
/* Not on the live video pages until launch (body.gg-video-extras, 2026-10-15). */
:is(body:not(.gg-video-page), body.gg-video-extras) main.hp-main > [tabindex="-1"]:focus { outline: none !important; }

/* ==========================================================================
 * FLOATING SECTION NAVIGATOR / BACK TO TOP (.hp-secnav) — one shared component.
 * Markup: template-parts/healing/section-nav.php · behaviour: js/hp-section-nav.js
 * · where it shows: inc/section-nav.php (home v4 = Next + Top; hub, pillars,
 * practices, library, video index, video pages = Top only — round 10 feedback
 * F5, 13 Oct). It lives HERE, not in healing-paths.css, because this sheet is on
 * WP Rocket's used-CSS safelist on every environment and loads on every chrome
 * page: the button now appears on hundreds of /video/ pages whose used-CSS
 * snapshots predate it, and on the video index, which does not load
 * healing-paths.css. Selectors keep their old weight ((0,2,1)).
 * ========================================================================== */
/* ---------- floating section navigator (.hp-secnav) — home v4 first ----------
 * "a floating group of icons that scroll top or scroll to the next section …
 * something at the bottom right". Two stacked round buttons, bottom-right: NEXT
 * SECTION (chevron down) above BACK TO TOP (arrow to a bar). Previous-section is
 * deliberately not there: scrolling up is what a visitor already does, and two
 * up-pointing buttons side by side read as the same action. Markup:
 * template-parts/healing/section-nav.php; behaviour: js/hp-section-nav.js.
 *
 * Shown and hidden with the `hidden` ATTRIBUTE, which the server renders — a
 * class set only by JS would be stripped by RUCSS (lesson 2026-09-04). The fade
 * is a keyframe on the always-matched base rule, so it replays each time the
 * attribute comes off. z-index 890: over the page, under the header (1000) and
 * under the menu scrim (900), so an open menu dims it with everything else. */
.hp-secnav {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 890;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: hp-secnav-in 0.2s ease both;
}
.hp-secnav[hidden], .hp-secnav__btn[hidden] { display: none !important; }
@keyframes hp-secnav-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
body .hp-secnav .hp-secnav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gg-tap-min) !important;
    min-width: var(--gg-tap-min) !important;
    max-width: var(--gg-tap-min) !important;
    height: var(--gg-tap-min) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--gg-mulberry-haze) !important;
    border-radius: 50% !important;
    background: var(--gg-white) !important;
    color: var(--gg-berry) !important;
    box-shadow: 0 6px 18px rgba(42, 42, 42, 0.14) !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body .hp-secnav .hp-secnav__btn:hover,
body .hp-secnav .hp-secnav__btn:focus-visible {
    background: var(--gg-berry) !important;
    border-color: var(--gg-berry) !important;
    color: var(--gg-text-on-dark) !important;
}
.hp-secnav__btn svg { display: block; width: 20px; height: 20px; }
@media (min-width: 1024px) {
    .hp-secnav { right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-secnav { animation: none; }
    body .hp-secnav .hp-secnav__btn { transition: none; }
}