/* BTE Plant Sales — Main CSS
   Compiled from: style.css (tokens/base) + component CSS below.
   In production, concatenate style.css + this file or use a build step.
   Component CSS files are enqueued individually via functions.php.
   ------------------------------------------------------------------ */

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

.bte-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    transition:
        background-color var(--dur-mid) var(--ease-out),
        box-shadow var(--dur-mid) var(--ease-out),
        transform var(--dur-mid) var(--ease-out);
}

.admin-bar .bte-header { top: 32px; }

/* Utility bar — top strip: DEPOTS | CAREERS | NEWS + search */
.bte-header__utility {
    background-color: transparent;
    border-bottom: none;
    max-height: 60px;
    overflow: hidden;
    transition:
        background-color var(--dur-mid) var(--ease-out),
        backdrop-filter var(--dur-mid),
        max-height var(--dur-mid) var(--ease-out),
        opacity var(--dur-mid) var(--ease-out);
}

/* Collapses out of the way once scrolled/sticky, to reclaim vertical
   space — the main nav row below moves up to fill the gap, rather
   than just visually sliding on top of it, since this shrinks the
   utility bar's own layout height (not just a transform). Reverses
   automatically once scrolled back to the top, same continuously-
   reactive .is-scrolled toggle as the header's own glass effect. */
.bte-header.is-scrolled .bte-header__utility {
    max-height: 0;
    opacity: 0;
}

@media (min-width: 1024px) {
    .bte-header__utility { display: block; }
}

.bte-utility-nav .bte-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    padding-block: var(--space-2);
    padding-inline: var(--gutter);
}

.bte-utility-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bte-utility-nav__list li {
    display: flex;
    align-items: center;
}

.bte-utility-nav__list li + li::before {
    content: '|';
    color: rgba(255,255,255,0.25);
    padding-inline: var(--space-2);
    font-size: 0.75rem;
}

/* Selector fixed (2026-07-12) — was .bte-utility-nav__link, but
   neither wp_nav_menu() (used when the "Utility Bar" menu location
   has a menu assigned) nor the hardcoded fallback links in header.php
   ever actually add that class to the <a> tags. This rule was
   matching nothing at all; the links were rendering with zero styling
   from this file the whole time, just whatever they inherited (body's
   font-family at its default weight, link color reset to `inherit`)
   — explains why they were hard to see, and why an earlier attempt to
   bump the weight on the old selector had no visible effect. Targeting
   the list itself as a descendant selector covers both the menu and
   fallback cases without needing markup changes anywhere. */
.bte-utility-nav__list a {
    /* Confirmed via live devtools (2026-07-12) that font-weight: 900
       IS being applied correctly (nothing overriding it) — the body
       font's 900 cut just isn't visually distinct enough from lighter
       weights at this small, uppercase, letter-spaced size to read as
       "bold". Rather than fight the font's own weight axis further, a
       text-stroke is added below to reliably thicken the letterforms
       regardless of what the active font actually supports, plus the
       colour is bumped to full white for maximum contrast. */
    color: var(--bte-white);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 900;
    -webkit-text-stroke: 0.4px var(--bte-white);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-block: var(--space-1);
    transition: color var(--dur-fast);
}

.bte-utility-nav__list a:hover { color: var(--bte-teal); -webkit-text-stroke-color: var(--bte-teal); }

.bte-header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
    transition: all var(--dur-fast);
    flex-shrink: 0;
}

.bte-header__search-toggle:hover {
    border-color: var(--bte-white);
    color: var(--bte-white);
    background: rgba(255,255,255,0.08);
}

.bte-header__search-toggle svg { width: 14px; height: 14px; }

/* Main header bar */
.bte-header__main {
    background-color: rgba(7, 9, 58, 0.97);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    padding-block: var(--space-4);
    transition:
        background-color var(--dur-mid) var(--ease-out),
        padding var(--dur-mid) var(--ease-out),
        backdrop-filter var(--dur-mid);
}

/* Home + product + shop + news + aftersales + search pages: transparent initially */
.bte-page--home .bte-header__main,
.bte-page--product .bte-header__main,
.bte-page--shop .bte-header__main,
.bte-page--news .bte-header__main,
.bte-page--aftersales .bte-header__main,
.bte-page--search .bte-header__main,
.bte-page--inner-hero .bte-header__main {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Sticky header state — subtle liquid glass, echoing the nav bar's
   own glass technique (see .bte-nav__list) but at meaningfully lower
   opacity/blur, so the nav's own parallelogram glass still reads as
   visually distinct against it rather than the two blending
   together. This exists specifically to help the BTE logo stay
   visible once scrolled, against whatever content is behind it.
   Applied to the shared parent (.bte-header), not the two rows
   separately — two adjacent elements each with their own backdrop-
   filter created a visible seam at the boundary between them, even
   with no actual gap; one unified glass region on the parent
   removes that seam entirely. Applies across every page (including
   shop, previously excluded) and reverts automatically once
   scrolled back to the top, since .is-scrolled itself is
   continuously re-evaluated on every scroll (see bte-nav.js) rather
   than a one-time flag. */
.bte-page--home.is-scrolled-past-hero .bte-header,
.bte-page--news.is-scrolled-past-hero .bte-header,
.bte-header.is-scrolled {
    background-color: rgba(7, 9, 58, 0.34);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.bte-page--home.is-scrolled-past-hero .bte-header__main,
.bte-page--news.is-scrolled-past-hero .bte-header__main,
.bte-header.is-scrolled .bte-header__main {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: var(--space-3);
}

/* The utility bar (top strip — DEPOTS | CAREERS | NEWS + search)
   sits within the same glass parent now, so the whole header reads
   as one continuous glass panel from top to bottom. */
.bte-header.is-scrolled .bte-header__utility {
    border-bottom: none;
}

.bte-header.is-hidden { transform: translateY(-100%); }

.bte-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    justify-content: space-between;
}

.bte-header__logo { flex-shrink: 0; margin-right: auto; }

.bte-header__logo img,
.bte-header__logo svg { height: 44px; width: auto; }

.bte-header__logo-text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--bte-white);
    letter-spacing: -0.02em;
}

.bte-header__nav {
    flex: 1 1 0%;
    display: none;
    justify-content: flex-end;
}

.bte-header__actions { display: flex; align-items: center; gap: var(--space-4); }

.bte-header__cta { display: none; }

/* Phone-only "> CONTACT" text link (see header.php). Hidden by default;
   revealed under 768px, where it stands in for the desktop red CTA. */
.bte-header__contact-link { display: none; }

.bte-header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.7);
    transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}

.bte-header__search-toggle:hover {
    color: var(--bte-white);
    border-color: rgba(255,255,255,0.6);
    background-color: rgba(255,255,255,0.08);
}

.bte-header__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 2.2rem;
    padding: var(--space-2);
    cursor: pointer;
}

.bte-burger-bar {
    height: 2px;
    background: var(--bte-white);
    border-radius: 2px;
    transition: transform var(--dur-fast), opacity var(--dur-fast);
}

.nav-open .bte-header__burger .bte-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .bte-header__burger .bte-burger-bar:nth-child(2) { opacity: 0; }
.nav-open .bte-header__burger .bte-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
    .bte-header__nav { display: flex; }
    .bte-header__cta { display: flex; }
    /* Burger has no business showing once the full nav is visible —
       it had no responsive rule at all before, so it displayed
       unconditionally at every viewport width, redundantly sitting
       next to the already-fully-visible desktop nav links. */
    .bte-header__burger { display: none; }
}

/* ============================================================
   MOBILE HEADER (phones, <768px) — matches the supplied mobile
   design: clean bar with logo left, "> CONTACT" text link + burger
   right, transparent over the hero at the top, SOLID navy once
   scrolled (sticky). Scoped to max-width:767px so desktop/tablet
   layouts and all the desktop animations are untouched.
   ============================================================ */
@media (max-width: 767px) {
    /* No top utility strip on phones */
    .bte-header__utility { display: none; }

    /* Tighter bar */
    .bte-header__main { padding-block: var(--space-3); }
    .bte-header__inner { gap: var(--space-3); }
    .bte-header__logo img,
    .bte-header__logo svg { height: 24px; } /* 2026-07-24 — smaller still per client */

    /* "> CONTACT" as a plain white text link (design), replacing the
       red pill button on phones. */
    .bte-header__contact-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        color: var(--bte-white);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: var(--text-sm);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }
    .bte-header__contact-link::before {
        content: '>';
        font-weight: 900;
        color: var(--bte-white);
    }
    .bte-header__contact-link:hover { color: var(--bte-teal); }
    .bte-header__contact-link:hover::before { color: var(--bte-teal); }

    /* 2026-07-24 — client now wants the mobile sticky bar to be the same
       liquid glass as desktop on every page (was a solid navy bar). Same
       translucent navy + backdrop blur used by the desktop scrolled state
       above, so all pages read consistently. */
    body.is-scrolled-past-hero .bte-header,
    .bte-header.is-scrolled {
        background-color: rgba(7, 9, 58, 0.34);
        backdrop-filter: blur(8px) saturate(1.4);
        -webkit-backdrop-filter: blur(8px) saturate(1.4);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    }
    body.is-scrolled-past-hero .bte-header__main,
    .bte-header.is-scrolled .bte-header__main {
        border-bottom: none;
    }
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* ---- Main nav list — parallelogram with liquid glass ---- */
.bte-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    /* Semi-transparent liquid glass. !important beats the edsb-style-overrides
       inline <style> tag that a plugin injects overriding this background.
       The backdrop-filter blurs everything visible through the nav bar. */
    background: rgba(7, 9, 58, 0.28) !important;
    border-top: 1px solid rgba(255,255,255,0.30) !important;
    border-left: 1px solid rgba(255,255,255,0.20) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 13px;
    padding: var(--space-2) var(--space-3);
    /* blur(20px) blurs the hero image showing through the transparent background */
    backdrop-filter: blur(11px) saturate(1.8) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.8) brightness(0.9) !important;
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.22),
        inset 1px 0 0 rgba(255,255,255,0.10),
        0 8px 40px rgba(0,0,0,0.40),
        0 2px 8px rgba(0,0,0,0.20);
    transform: skewX(30deg);
    list-style: none;
    margin: 0;
}

.bte-nav__item {
    transform: skewX(-30deg);
    position: relative;
    display: flex;
    align-items: center;
}

.bte-nav__link {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: rgba(255,255,255,0.90);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--dur-fast);
    white-space: nowrap;
}

.bte-nav__link:hover,
.bte-nav__item.is-open > .bte-nav__link,
.bte-nav__item--active > .bte-nav__link,
.bte-nav__item.is-active > .bte-nav__link { color: var(--bte-red); }

/* ---- Dropdown — blur overlay, see-through ---- */
.bte-nav__dropdown {
    position: absolute;
    top: calc(100% + var(--space-4));
    left: 0;
    /* 2026-07-16 — was a fixed 620px regardless of content, which is
       exactly why short menus (e.g. 3 items) left a big block of empty
       space after the text: the panel never got any narrower than
       620px no matter how short the actual titles were. Content now
       sizes the panel itself (see .bte-nav__dropdown-list's max-content
       columns below); this is just a floor so a very short single word
       doesn't render a cramped, oddly-narrow panel. */
    min-width: 260px;
    background-color: rgba(7, 9, 58, 0.55);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    backdrop-filter: blur(16px) saturate(1.8) brightness(0.85);
    -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(0.85);
    box-shadow:
        0 16px 48px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(255,255,255,0.10);
    padding: var(--space-4) 0 0;
    z-index: 100;
    overflow: hidden;
    /* 2026-07-16 — bte-nav.js nudges this left via an inline transform
       when it would otherwise overflow the right edge of the viewport
       (see initDropdowns()'s open()) — transitioning it keeps that
       correction from reading as an abrupt snap. */
    transition: transform var(--dur-fast);
}

.bte-nav__dropdown[hidden] { display: none; }

/* Two-column grid — 2026-07-16 rework, per request. Previously used
   fixed 44%/56% percentage columns (of a fixed 620px panel), which
   caused both problems reported live: a long title got squeezed into
   whatever ~44% of 620px worked out to and wrapped awkwardly across
   the divider, while a short-titled menu left a big dead gap because
   the columns never got any narrower than that fixed split. Columns
   are now max-content — each sized exactly to its own widest item, no
   more, no less — with a dedicated 1px middle track (column 2) for the
   divider line, so the whole panel and both columns now hug the real
   content in every menu.
   Column-major placement (down column one, then down column two) is
   now assigned explicitly per item by bte-nav.js — grid-column (1 or
   3, skipping the divider track) and grid-row are set inline per
   <li> — rather than via grid-auto-flow, specifically because
   grid-auto-flow's auto-placement has no way to skip over the middle
   divider column on its own. */
.bte-nav__dropdown-list {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0 var(--space-2);
    display: grid;
    grid-template-columns: max-content 1px max-content;
    column-gap: var(--space-6);
    position: relative;
}

/* Single item — collapse to one full-width column, no divider.
   Uses :has() for modern browsers + .has-single-item class (added by JS)
   as a fallback for older ones. */
.bte-nav__dropdown-list:has(.bte-nav__sub-item:only-child),
.bte-nav__dropdown-list.has-single-item {
    grid-template-columns: 1fr;
}

.bte-nav__dropdown-list:has(.bte-nav__sub-item:only-child)::before,
.bte-nav__dropdown-list.has-single-item::before {
    display: none;
}

.bte-nav__dropdown-list:has(.bte-nav__sub-item:only-child) .bte-nav__sub-item,
.bte-nav__dropdown-list.has-single-item .bte-nav__sub-item {
    grid-column: 1;
}

/* Narrow the dropdown panel itself for single-column — fit content width */
.bte-nav__item--has-dropdown:has(.has-single-item) .bte-nav__dropdown,
.bte-nav__item--has-dropdown:has(.bte-nav__sub-item:only-child) .bte-nav__dropdown,
.bte-nav__dropdown.has-single-item {
    min-width: 0;
    width: auto;
}

/* Dotted divider — 2026-07-16, now a real grid item placed in the
   dedicated 1px middle track (grid-template-columns above) and
   stretched down every row (grid-row: 1 / -1), instead of an
   absolutely-positioned line at a guessed left:44%. This is what
   actually makes the divider track correctly with max-content columns
   whose width isn't known ahead of time -- a fixed percentage can't
   do that, since the true midpoint moves with every menu's own
   longest title.
   grid-row:1/-1 only spans the grid's own row TRACKS though, which sit
   inside this list's padding-block (var(--space-1) top, var(--space-2)
   bottom) -- reported live as the line "stopping too short" of the
   actual menu items' full depth. The negative margin-block below
   stretches the divider back out through that padding on both ends, so
   it runs the complete visible height of the item list (not into the
   separate "View All Products" footer below, which is deliberately a
   different section). */
.bte-nav__dropdown-list::before {
    content: '';
    grid-column: 2;
    grid-row: 1 / -1;
    margin-block: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    border-left: 1px dashed rgba(255,255,255,0.25);
    pointer-events: none;
}

/* 2026-07-16 — removed the old :nth-child(odd)/:nth-child(even) rules
   that used to force items to alternate columns explicitly (1,2,1,2...
   the original cause of the "across, then down" reading order).
   Column-major placement (down column one, then down column two) is
   now assigned explicitly per item -- bte-nav.js sets each <li>'s own
   grid-column (1 or 3, skipping the divider's middle track) and
   grid-row inline, rather than relying on grid-auto-flow, which has no
   way to skip over that middle track on its own. */

.bte-nav__sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Tighter vertical padding for less leading between rows */
    padding: 5px var(--space-5);
    color: rgba(255,255,255,0.90);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--dur-fast);
    white-space: nowrap;
}

.bte-nav__sub-link:hover { color: var(--bte-red); }
.bte-nav__sub-item.is-active .bte-nav__sub-link { color: var(--bte-red); }

/* Arrow — larger, right-aligned, consistent */
.bte-nav__sub-arrow {
    font-style: normal;
    font-size: 1.4em;
    line-height: 1;
    opacity: 0.70;
    flex-shrink: 0;
    margin-left: var(--space-4);
}

.bte-nav__sub-link:hover .bte-nav__sub-arrow {
    opacity: 1;
}

/* View all footer */
.bte-nav__dropdown-footer {
    border-top: 1px solid rgba(255,255,255,0.10);
    margin-top: 0;
}

.bte-nav__view-all {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-6);
    color: var(--bte-white);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    transition: color var(--dur-fast), background-color var(--dur-fast);
}

.bte-nav__view-all:hover {
    color: var(--bte-white);
    background-color: rgba(255,255,255,0.06);
}

/* Mobile nav */
.bte-mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) + 1);
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 92px);
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-out);
    overflow-y: auto;
    /* Patterned navy backdrop, matching the rest of the site. */
    background-color: rgb(7, 9, 58);
    background-image:
        linear-gradient( rgba(7, 9, 58, 0.90), rgba(7, 9, 58, 0.90) ),
        url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
}
.nav-open .bte-mobile-nav-overlay { transform: translateX(0); }

/* ---- Header row (logo + X close) ---- */
.bte-mobile-nav-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}
.bte-mobile-nav-overlay__logo img,
.bte-mobile-nav-overlay__logo svg { height: 34px; width: auto; }
.bte-mobile-nav-overlay__logo .bte-header__logo-text { font-size: var(--text-xl); }
.bte-mobile-nav-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--dur-fast);
}
.bte-mobile-nav-overlay__close:hover { color: var(--bte-white); }

/* ---- Body ---- */
.bte-mobile-nav-overlay__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--space-6);
}

/* ---- Primary nav ---- */
.bte-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.bte-mobile-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.bte-mobile-nav__link {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--bte-white);
    text-decoration: none;
    padding: 4px 0;
}
.bte-mobile-nav__item.is-active > .bte-mobile-nav__row .bte-mobile-nav__link { color: var(--bte-red); }
.bte-mobile-nav__link:active { color: var(--bte-red); }

/* Dotted-circle chevron toggle (submenu items) */
.bte-mobile-nav__toggle {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: var(--bte-white);
    cursor: pointer;
    transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.bte-mobile-nav__toggle svg circle { display: none; }  /* dashed border is the ring */
.bte-mobile-nav__toggle svg { width: 16px; height: 16px; }
.bte-mobile-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); border-color: var(--bte-white); }

/* Submenu — accordion (JS animates max-height) */
.bte-mobile-nav__sub {
    list-style: none;
    margin: 0;
    padding-left: var(--space-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease-out);
}
.bte-mobile-nav__sub-link {
    display: block;
    padding: var(--space-2) 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
}

/* ---- Divider ---- */
.bte-mobile-nav__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    width: 100%;
    margin: 0;
}

/* ---- Utility (Depots / Careers / News) ---- */
.bte-mobile-nav__utility-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.bte-mobile-nav__utility-list a {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bte-white);
    text-decoration: none;
}

/* ---- Search (dotted pill) ---- */
.bte-mobile-nav__search .bte-search-form {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    border: 1.5px dashed rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 0 6px 0 24px;
    background: transparent;
}
.bte-mobile-nav__search .bte-search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--bte-white);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-sm);
}
.bte-mobile-nav__search .bte-search-form__input::placeholder { color: rgba(255, 255, 255, 0.6); }
.bte-mobile-nav__search .bte-search-form__submit {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--bte-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.bte-mobile-nav__search .bte-search-form__submit svg { width: 18px; height: 18px; }

/* ---- Foot: legal links + socials ---- */
.bte-mobile-nav__foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-4);
}
.bte-mobile-nav__legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.bte-mobile-nav__legal-list a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    text-decoration: none;
}
.bte-mobile-nav__legal-list a:hover { color: var(--bte-white); }
.bte-mobile-nav__social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ============================================================
   WOOCOMMERCE / SHOP
   ============================================================ */

.bte-has-cat-hero .woocommerce-products-header,
.bte-has-cat-hero .bte-breadcrumb { display: none; }

.bte-woo-main { background-color: #07093a; min-height: 60vh; }

.bte-woo-inner {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--space-16);
}

.bte-subcats { position: relative; overflow: hidden; }

.bte-subcats__track {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.bte-subcats__track::-webkit-scrollbar { display: none; }

.bte-subcat__item {
    flex: 0 0 20%;
    min-width: 180px;
    position: relative;
    height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
}

.bte-subcat__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.bte-subcat__item:hover img { transform: scale(1.05); }

.bte-subcat__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,9,58,0.85) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
}

.bte-subcat__name {
    color: var(--bte-white);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.bte-subcat__num {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.5);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

.bte-subcat__arrow {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bte-white);
    font-size: 0.75rem;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.bte-subcat__item:hover .bte-subcat__arrow {
    background-color: var(--bte-red);
    border-color: var(--bte-red);
}

/* ---- Single shared carousel/nav arrow button ----
   This is now the ONE style every prev/next control on the site draws
   from: Services, Brands Carousel, Manufacturers, News, Team Directory
   (via bte_arrow_nav()), plus New/Used Plant subcategories, Product
   Categories cards, the product gallery carousel and the image
   lightbox (migrated onto this class directly). Any future size,
   colour or icon change made here applies everywhere at once — that's
   the point of the consolidation. Restored 2026-07-16 to the original
   dashed-blue-circle, red-chevron look per client reference image. */
.bte-arrow-btn {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    border: none; /* the dashed ring is now drawn by the rotating pseudo-element below, not a real border, so it can spin independently of the chevron */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    flex-shrink: 0;
    font-size: 0; /* hides any glyph or entity a caller still has as button text -- the icon comes from the ::before pseudo-element below */
    transition: background-color var(--dur-fast);
}

/* Rotating dashed ring — a separate layer from the chevron so the dashes
   can spin clockwise without dragging the icon around with them. Speed
   controlled in one place here for every arrow button on the site. */
.bte-arrow-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed var(--bte-blue);
    animation: bte-arrow-btn-spin 8s linear infinite;
    pointer-events: none;
}
@keyframes bte-arrow-btn-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .bte-arrow-btn::after { animation: none; }
}

/* Chevron icon — direction is read off the button's own "prev"/"next" hook
   class, so no extra markup is needed. Size/weight controlled in one place;
   bump font-size here to make every arrow button on the site larger. */
.bte-arrow-btn::before {
    font-family: var(--font-display, inherit);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bte-red);
}
.bte-arrow-btn[class*="prev"]::before { content: '\2039'; } /* left chevron */
.bte-arrow-btn[class*="next"]::before { content: '\203A'; } /* right chevron */

.bte-arrow-btn:hover {
    background-color: rgba(28, 117, 212, 0.15);
}

.bte-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* .bte-arrow-nav is a normal flex row by default — used inline within
   header rows (Services, Product Categories, Manufacturers, News).
   For viewport-overlay arrows (rare — e.g. positioned over an image
   slider), add the --overlay modifier instead. */
.bte-arrow-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Overlay variant — for arrows that sit centred over a viewport/image,
   absolutely positioned at the edges. Opt-in only. */
.bte-arrow-nav--overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
}

.bte-arrow-nav--overlay .bte-arrow-btn {
    pointer-events: auto;
}

.bte-breadcrumb {
    padding-block: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
}

.bte-breadcrumb a {
    color: rgba(255,255,255,0.6);
    transition: color var(--dur-fast);
}

.bte-breadcrumb a:hover { color: var(--bte-white); }



/* ============================================================
   SUBCATEGORY CAROUSEL
   ============================================================ */

.bte-subcat-carousel {
    position: relative;
    /* Needs to be higher than .bte-cat-hero's z-index:2 — that
       establishes its own stacking context, so its background
       extending behind this carousel (see .bte-cat-hero__bg) would
       otherwise still render on top of this element regardless of
       the background's own z-index:-1 *within* that context, since
       stacking-context comparison happens at the whole-context level
       for siblings in different contexts. */
    z-index: 3;
    overflow-x: clip;
    overflow-y: visible;
}

.bte-subcat-carousel__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 540px;
    align-items: stretch;
    padding-block: 24px;
    margin-block: -24px;
}

.bte-subcat-carousel__track::-webkit-scrollbar { display: none; }

.bte-subcat-card {
    flex: 0 0 20%;
    min-width: 180px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    cursor: pointer;
    border-radius: 14px;
    transition: flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}


.bte-subcat-card--featured {
    flex: 0 0 26%;
    border: 2px solid rgba(0, 210, 200, 0.7);
    box-shadow: 0 0 40px rgba(0, 210, 200, 0.35), 0 0 80px rgba(0, 210, 200, 0.12), inset 0 0 40px rgba(0, 210, 200, 0.04);
    border-radius: 14px;
}

.bte-subcat-card--featured .bte-subcat-card__view {
    opacity: 1;
    background-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    width: 80px;
    height: 80px;
}

.bte-subcat-card--featured .bte-subcat-card__view::after {
    content: 'VIEW';
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bte-white);
}

.bte-subcat-card--featured .bte-subcat-card__name {
    font-size: var(--text-2xl);
}

.bte-subcat-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--dur-slow) var(--ease-out);
}

.bte-subcat-card:hover .bte-subcat-card__bg { transform: scale(1.06); }

.bte-subcat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(7,9,58,0.85) 0%,
        rgba(7,9,58,0.3)  40%,
        rgba(7,9,58,0.1)  70%,
        transparent       100%
    );
}

.bte-subcat-card__num {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.08em;
    z-index: 2;
}

.bte-subcat-card__num::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: rgba(255,255,255,0.25);
    display: block;
}

.bte-subcat-card__view {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--bte-white);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--dur-fast), background-color var(--dur-fast);
}

.bte-subcat-card:hover .bte-subcat-card__view { opacity: 1; background-color: var(--bte-red); }

.bte-subcat-card__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5) var(--space-4);
    padding-right: calc(2.2rem + var(--space-6));
    z-index: 2;
}

.bte-subcat-card__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--bte-white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin: 0;
}


.bte-subcat-card__arrow {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 2.2rem;
    height: 2.2rem;
    border: 1px dashed rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bte-white);
    font-size: 1.1rem;
    z-index: 2;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.bte-subcat-card--featured .bte-subcat-card__arrow {
    border-color: rgba(0, 210, 200, 0.7);
    border-style: dashed;
}

.bte-subcat-card:hover .bte-subcat-card__arrow {
    color: var(--bte-white);
    transform: translateX(3px);
}

/* Hover: shrink non-hovered, grow hovered */
.bte-subcat-carousel__track:has(.bte-subcat-card:hover) .bte-subcat-card {
    flex-basis: 15%;
}
.bte-subcat-carousel__track:has(.bte-subcat-card:hover) .bte-subcat-card:hover {
    flex-basis: 32%;
}

/* Carousel controls */
.bte-subcat-carousel__controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    /* 2026-07-16 fix — arrows sat flush against the browser's right
       edge, reported live. This carousel deliberately breaks out of
       .bte-container for a full-bleed card track (see the PHP comment
       in inc/woocommerce.php), but the controls row inherited that same
       edge-to-edge width with no gutter of its own — same horizontal
       gutter as the rest of the site's containers now applied here. */
    padding: var(--space-3) var(--gutter) 0;
}

/* Subcategory carousel prev/next now use the shared .bte-arrow-btn
   class directly (see main.css consolidated arrow-button rules above) —
   bespoke sizing/colour removed here to avoid duplicate styling. */



/* ============================================================
   LEAF CATEGORY: Product grid styled to match subcategory cards
   ============================================================ */

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0 0 var(--space-16);
    margin: 0;
}

/* Product card — mirrors the subcategory card style */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: rgba(7, 9, 58, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    margin: 0;
    transition: box-shadow 0.35s ease;
    cursor: pointer;
}

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product:hover {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Product link fills the entire card */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product a.woocommerce-loop-product__link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
}

/* Product image fills the card */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease-out);
}

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product:hover img {
    transform: scale(1.06);
}

/* Gradient overlay */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product a.woocommerce-loop-product__link::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Opacity reduced (was 0.92/0.40/0.10/0) — same reasoning as the
       category hero fix above: this was covering most of the image
       with a fairly heavy navy wash, making the product photos look
       dark/flat rather than showing them clearly. Still dark enough
       at the very bottom to keep the title and tech specs legible. */
    background: linear-gradient(
        to top,
        rgba(7, 9, 58, 0.65) 0%,
        rgba(7, 9, 58, 0.25) 45%,
        rgba(7, 9, 58, 0.05) 70%,
        transparent          100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Shared wrapper for title + tech specs — positioned once at the
   bottom of the card, with its contents stacking normally inside it
   (rather than each being independently absolutely-positioned with
   a fixed offset, which collided whenever either one wrapped to more
   lines than expected). */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product .bte-card-info-wrap {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 56px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product h2.woocommerce-loop-product__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--bte-white);
    margin: 0;
}

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product .bte-card-tech-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Changed from flex-wrap (which let multiple specs sit side by
       side, wrapping only once they ran out of horizontal room) to a
       simple column stack — one spec per line, as requested. */
    display: flex;
    flex-direction: column;
    gap: var(--space-1) 0;
}

.bte-card-tech-specs li {
    font-size: var(--text-sm);
    color: var(--bte-white);
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.bte-card-tech-specs__label {
    font-weight: 700;
    color: var(--bte-white);
    font-synthesis: weight;
}

.bte-card-tech-specs__dash {
    font-weight: 700;
    color: var(--bte-white);
    font-synthesis: weight;
}

.bte-card-tech-specs__value {
    font-weight: 800;
    color: var(--bte-white);
    font-synthesis: weight;
}

/* Price — de-emphasised or hidden if quote-only */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product .price {
    position: absolute;
    bottom: 22px;
    left: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-xs);
    z-index: 2;
    display: block;
}

/* "Get A Quote" button — dashed circle arrow to match card style */
.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product .button {
    position: absolute;
    bottom: 14px;
    right: 16px;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
    padding: 0;
}

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product .button::after {
    content: '›';
    font-size: 1.1rem;
    color: var(--bte-white);
    line-height: 1;
}

.bte-has-cat-hero:not(.bte-has-sub-cats) ul.products .product:hover .button {
    background: var(--bte-red);
    border-color: var(--bte-red);
}

/* Pagination on leaf category pages */
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-pagination {
    display: flex !important;
    justify-content: center;
    padding: var(--space-8) 0 var(--space-16);
}

.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-pagination a,
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-pagination span {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.2);
}

/* ============================================================
   LEAF CATEGORY: Sort bar + result count
   ============================================================ */

/* Controls row: result count left, sorting right */
.bte-has-cat-hero:not(.bte-has-sub-cats) .bte-container > .woocommerce-result-count,
.bte-has-cat-hero:not(.bte-has-sub-cats) .bte-container > .woocommerce-ordering {
    display: block;
}

.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-result-count {
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-2) 0;
    padding: 0;
}

/* Sort dropdown wrapper */
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-ordering {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--space-5) 0;
}

/* The select element */
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(7, 9, 58, 0.85);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 36px 8px 14px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
    outline: none;
    min-width: 180px;
}

.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-ordering select.orderby:hover,
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-ordering select.orderby:focus {
    border-color: rgba(0, 210, 200, 0.6);
    background-color: rgba(7, 9, 58, 0.95);
}

/* ============================================================
   FOOTER
   ============================================================ */

.bte-footer {
    position: relative;
    background-color: #07093a;
}

/* ============================================================
   CONTACT ROW — left column (form + widgets, stacked) + depots
   (right). 2026-07-13: replaced the previous "sticky grid" that
   pinned depots across the ENTIRE footer (contact form, widgets,
   tagline, bottom bar all scrolling past underneath a GSAP-pinned
   depots column) with a much simpler, more robust pairing: depots is
   height-matched to the WHOLE left column (via bte-core.js
   bteInitFooterDepotsScroll(), which measures .bte-footer__left-col's
   rendered height and applies it as this column's max-height) and
   scrolls internally if its own content is taller. The old approach
   used a GSAP ScrollTrigger pin (native CSS position:sticky doesn't
   work here — this site's Lenis smooth-scroll wrapper has
   overflow:hidden, which breaks sticky's required unbroken
   scroll-container chain), which was disabled after mis-firing
   (pinning at the top of the page instead of at the footer) — see
   bteInitFooterStickyDepots() in bte-core.js, left in place but
   dead/unused rather than deleted outright.
   Widgets moved into this left column, alongside the form, later the
   same day (2026-07-13) — they'd briefly been their own full-width
   row below, but even width-matched to this column that still read
   as "full width" since it was a separate row; nesting them here
   makes it structurally impossible for them to be wider than the
   form. Tagline/bottom bar remain their own full-width rows below,
   each with its own max-width wrapper (see FOOTER WIDGET COLUMNS etc.
   further down), so the bottom bar in particular can still run the
   full page width (2026-07-13, per client request).
   ============================================================ */

.bte-footer__contact-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-20);
    align-items: start;
}

/* The left column — form, then widgets, stacked. min-width:0 stops
   the grid track stretching to fit wide content rather than staying
   within its fair-share 1fr width (a common grid-blowout gotcha);
   the gap gives the widgets block some breathing room below the
   form. */
.bte-footer__left-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* Height is set inline by bte-core.js (bteInitFooterDepotsScroll),
   matched to .bte-footer__left-col's own rendered height (form +
   widgets combined), so the two columns read as the same depth.
   overflow-y:auto means depot content taller than that scrolls
   internally within its own box rather than pushing the footer
   taller or getting clipped. Scrollbar itself is restyled below to a
   slim, on-brand bar instead of the bulky default OS one. */
.bte-footer__depots-scroll {
    overflow-y: auto;
    padding-right: var(--space-3);
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent; /* Firefox */
}

.bte-footer__depots-scroll::-webkit-scrollbar {
    width: 5px;
}

.bte-footer__depots-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.bte-footer__depots-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
    border-radius: 3px;
}

.bte-footer__depots-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1023px) {
    /* Height-matching is a desktop, side-by-side-columns pattern —
       on a narrow, stacked mobile layout depots naturally follows on
       below at its own full natural height instead. */
    .bte-footer__contact-grid {
        display: block;
    }
    .bte-footer__depots-scroll {
        max-height: none !important;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* Contact form section */
.bte-footer__contact {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    overflow: hidden;
    padding-bottom: var(--space-16);
    /* Clearance above the heading so it clears the sticky header when
       this section pins. 2026-07-23 — was a hardcoded 190px, which read
       as a large empty gap after a short preceding section (reported on
       the Our Team page). Tied to the real measured header height now
       (--bte-header-h) plus a little breathing room, so it only reserves
       what the header actually needs instead of a fixed oversize block. */
    padding-top: calc( var(--bte-header-h, 137px) + var(--space-6) );
}

/* 2026-07-14 — pin-and-slow-scroll (bteInitFooterContactPin,
   bte-core.js). This class is only ever added by that JS, which is
   already desktop-only-gated (matchMedia max-width:1023px), so no
   extra @media guard is needed here — on mobile the class simply
   never gets added and this section keeps its normal auto-height
   flow. Constrains the section to exactly one viewport tall while
   pinned; the existing overflow:hidden above (already present for
   other reasons) then clips the inner .bte-footer__contact-grid,
   which the JS translates upward in sync with scroll to reveal the
   rest of the form/widgets/depots — the classic pin-and-scrub
   pattern, as opposed to the plain hold-and-release pin used on
   Services/Testimonials/Why Choose Us (those are each roughly one
   viewport tall already, so a plain hold works there; this section
   is several viewports tall, which is why a plain hold "didn't seem
   to be working" — most of it sat below the fold, frozen, until the
   page skipped straight past it). */
.bte-footer__contact.is-pin-scrub {
    height: 100vh;
}

.bte-footer__form-col {
    display: flex;
    flex-direction: column;
}

/* The form itself grows to fill all remaining space after the
   heading (no gap above it — see .bte-footer__form-col), then
   stretches its own children apart so the whole form genuinely
   reaches from right under the heading down to the bottom. */
.bte-contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* GET IN TOUCH heading */
.bte-footer__heading {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--bte-white);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--space-8);
}

.bte-footer__heading span:first-child { color: var(--bte-red); }

/* Contact form */
.bte-contact-form {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: var(--space-8) var(--space-8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bte-contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
    .bte-contact-form__grid { grid-template-columns: 1fr; }
}

.bte-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bte-field__label {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--bte-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bte-field__input,
.bte-field__textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-radius: 0;
    color: var(--bte-white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-2) 0;
    transition: border-color var(--dur-fast);
    width: 100%;
}

.bte-field__input:focus,
.bte-field__textarea:focus {
    outline: none;
    border-bottom-color: var(--bte-teal);
}

.bte-field__input::placeholder,
.bte-field__textarea::placeholder { color: rgba(255,255,255,0.25); }

.bte-contact-form__hear    { margin-bottom: var(--space-4); }
.bte-contact-form__message { margin-bottom: var(--space-4); }

.bte-field__textarea {
    min-height: 120px;
    resize: vertical;
}

.bte-contact-form__gdpr {
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}

.bte-contact-form__gdpr-text { display: block; margin-bottom: var(--space-2); }

.bte-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
}

.bte-checkbox input { accent-color: var(--bte-red); }

.bte-contact-form__actions { }

.bte-contact-form__response {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    display: none;
}

.bte-contact-form__response.is-success {
    display: block;
    background-color: rgba(0,200,100,0.1);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00c864;
}

.bte-contact-form__response.is-error {
    display: block;
    background-color: rgba(220,0,0,0.1);
    border: 1px solid rgba(220,0,0,0.3);
    color: #e00;
}

/* Depots column — sits inside the internally-scrollable
   .bte-footer__depots-scroll (see CONTACT ROW rules above). */
.bte-footer__depots-col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-left: var(--space-10);
    padding-bottom: var(--space-16);
    padding-top: var(--space-8);
}

.bte-depot {
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.bte-depot:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bte-depot__name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--bte-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed rgba(255,255,255,0.4);
}

.bte-depot__address {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: var(--space-4);
    font-style: normal;
}

.bte-depot__address a {
    color: rgba(255,255,255,0.6);
    transition: color var(--dur-fast);
}

.bte-depot__address a:hover { color: var(--bte-white); }

.bte-depot__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

/* Depot buttons — parallelogram at 30deg matching all other site buttons.
   style.css (plugin) sets skewX via --btn-skew-deg variable, so we
   set that variable AND force transform with !important.
   CALL AFTERSALES = red keyline, DIRECTIONS = cyan keyline.
   Width: 75% of column (3/4 width). */
.bte-depot__actions .bte-btn {
    --btn-skew-deg: 30deg !important;
    transform: skewX(30deg) !important;
    padding: 13px 34px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    border-width: 1.5px !important;
}

/* Force 30deg skew — the plugin's style.css excludes outline-teal/white
   from its skew calc, so we need maximum specificity here */
.bte-footer__depots-col .bte-depot__actions .bte-btn.bte-btn--outline-teal {
    transform: skewX(30deg) !important;
}

.bte-footer__depots-col .bte-depot__actions .bte-btn.bte-btn--outline-teal .bte-btn__inner {
    transform: skewX(-30deg) !important;
}

.bte-footer__depots-col .bte-depot__actions .bte-btn.bte-btn--outline-teal::before {
    transform: skewX(-30deg) !important;
}

/* Counter-skew inner text fully upright at -30deg.
   Also suppress the ::before pseudo arrow (plugin adds it via style.css)
   since the depot buttons use their own > prefix in the label. */
.bte-depot__actions .bte-btn .bte-btn__inner {
    transform: skewX(-30deg) !important;
    display: inline-flex;
    align-items: center;
}

/* Arrow in depot button inner text — keep it upright/normal */
.bte-footer__depots-col .bte-depot__actions .bte-btn::before {
    transform: skewX(-30deg) !important;
    display: inline-flex;
    align-self: center;
}

/* First button (Call Aftersales) — red keyline */
.bte-depot__actions .bte-btn:first-child {
    border-color: var(--bte-red) !important;
    color: var(--bte-white) !important;
    background: transparent !important;
}

.bte-depot__actions .bte-btn:first-child:hover {
    background: var(--bte-red) !important;
}

/* Second button (Directions) — cyan keyline */
.bte-depot__actions .bte-btn:last-child {
    border-color: #00cfff !important;
    color: var(--bte-white) !important;
    background: transparent !important;
}

.bte-depot__actions .bte-btn:last-child:hover {
    background: #00cfff !important;
    color: #07093a !important;
}

/* Footer bar (bottom strip) — now expanded to also contain the
   newsletter signup as its own row above the logo/legal/copyright
   row, so the blue background covers both. */
/* 2026-07-13: runs the full page width now, per client request —
   previously nested inside the old sticky-grid's narrower 1fr
   column (see CONTACT ROW comment above), so it only ever spanned
   the same width as the contact form, not the true page width. Now
   a plain full-width block with its own background — no longer
   needs the old ::before bleed trick that stretched a background
   through the (now-removed) grid gap out to the depots column's
   edge, since there's no sibling grid column to bleed past any
   more. */
.bte-footer__bar {
    position: relative;
    width: 100%;
    background-color: rgba(7, 9, 58, 0.8);
}

.bte-footer__bar-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-block: var(--space-10);
    padding-inline: var(--gutter);
}

/* Newsletter sits right-aligned at the top of the bar, per design */
.bte-footer__bar-inner > .bte-footer__newsletter {
    align-self: flex-end;
    width: 100%;
    max-width: 420px;
}

.bte-footer__bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.bte-footer__bar-logo img,
.bte-footer__bar-logo svg {
    height: 52px;
    width: auto;
}

.bte-footer__bar-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    text-align: right;
}

.bte-footer__copyright {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.04em;
}

.bte-footer__credit-line {
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
}

.bte-footer__credit {
    color: var(--bte-teal);
    text-decoration: none;
    transition: color 0.2s;
}

.bte-footer__credit:hover {
    color: var(--bte-white);
}

/* Back to top button */
.bte-footer__back-top {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: var(--bte-white);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.bte-footer__back-top:hover {
    border-color: var(--bte-teal);
    background: rgba(0, 175, 255, 0.1);
    color: var(--bte-teal);
}

/* ============================================================
   FOOTER WIDGET COLUMNS
   ============================================================ */

/* 2026-07-13 (later same day): now nested inside .bte-footer__left-col
   (see CONTACT ROW comment above), directly below the form, rather
   than being its own full-width row — so it inherits that column's
   width automatically and can't read as wider than the form. No
   max-width/centring of its own needed any more; the divider line
   just spans the left column's own width, which is the point. */
.bte-footer__widgets {
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-block: var(--space-8) 0;
    overflow: hidden;
}

.bte-footer__widgets-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 200px));
    gap: var(--space-12);
    justify-content: start;
    padding-top: var(--space-8);
}

@media (max-width: 1023px) {
    .bte-footer__widgets-inner {
        grid-template-columns: repeat(2, minmax(0, 200px));
        gap: var(--space-8);
    }
}

@media (max-width: 599px) {
    .bte-footer__widgets-inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Vertical side tab — matches testimonials section treatment */
.bte-footer__side-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background-color: var(--bte-red);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-3);
}

.bte-footer__side-tab span {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bte-white);
    transform: rotate(180deg);
}

@media (max-width: 599px) {
    .bte-footer__side-tab {
        padding: var(--space-4) var(--space-2);
    }
}

/* Widget title — red uppercase label matching screenshot */
.bte-footer-widget__title {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bte-red);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
}

/* Widget link lists — covers Navigation Menu widget, Custom HTML, and core list block markup */
.bte-footer-widget ul,
.bte-footer-widget .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bte-footer-widget ul li a,
.bte-footer-widget .menu li a,
.bte-footer-widget .menu-item a,
.bte-footer-widget a {
    /* !important here is deliberate: the Connect column's content is
       admin-entered widget HTML (Custom HTML / a social-icons plugin
       widget, not a plain Navigation Menu widget like Services/Quick
       Links), which can carry its own inline style or a more specific
       plugin class setting a smaller font-size — exactly what was
       still overriding this rule and causing the size mismatch. */
    font-size: var(--text-lg) !important;
    font-weight: 700 !important;
    color: var(--bte-white);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Broader net: if the Connect column's actual visible text sits on a
   nested element (a span/label/p inside or beside the link, e.g. a
   social-icons plugin that wraps an icon in the <a> and puts the
   text next to it, or on a caption underneath) rather than directly
   on the <a> itself, the rule above alone wouldn't reach it — this
   catches that regardless of the exact markup shape. */
.bte-footer-widget a *,
.bte-footer-widget li,
.bte-footer-widget li *,
.bte-footer-widget p,
.bte-footer-widget span {
    font-size: var(--text-lg) !important;
    font-weight: 700 !important;
}

/* Normalizes any icon markup inside footer widget links (SVG, icon
   fonts, or <img>) — e.g. the Connect column's social icons — to
   scale with the surrounding text size rather than carrying its own
   fixed size, which was making that column's items look a different
   size to the plain text links in Services/Quick Links. */
.bte-footer-widget a svg,
.bte-footer-widget a i,
.bte-footer-widget a img {
    width: 1em;
    height: 1em;
    font-size: inherit;
}

.bte-footer-widget ul li a:hover,
.bte-footer-widget .menu li a:hover,
.bte-footer-widget a:hover {
    color: var(--bte-teal);
}

/* ============================================================
   FOOTER MID — rule + tagline + newsletter
   ============================================================ */

.bte-footer__mid {
    padding-block: var(--space-8);
}

/* Own max-width/centring now (2026-07-13) — same reasoning as
   .bte-footer__widgets-inner above. */
.bte-footer__mid-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bte-footer__mid-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}

/* Tagline — uppercase small caps text, left side */
.bte-footer__tagline {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    line-height: 1.8;
    max-width: 52ch;
    flex: 1;
}

/* Newsletter — right side */
.bte-footer__newsletter {
    flex-shrink: 0;
    min-width: 260px;
}

.bte-footer__newsletter-label {
    font-size: var(--text-xl);
    color: var(--bte-white);
    margin-bottom: var(--space-3);
    font-weight: 500;
}

.bte-footer__newsletter-field {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    margin-bottom: var(--space-3);
}

.bte-footer__newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--bte-white);
    font-family: var(--font-body);
    font-size: var(--text-md);
    padding: var(--space-2) 0;
    outline: none;
    min-width: 0;
}

.bte-footer__newsletter-input::placeholder {
    color: var(--bte-teal);
}

.bte-footer__newsletter-btn {
    background: transparent;
    border: none;
    color: var(--bte-white);
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--space-2) var(--space-2);
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    flex-shrink: 0;
}

.bte-footer__newsletter-btn:hover {
    opacity: 1;
    color: var(--bte-teal);
}

.bte-footer__newsletter-legal {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    line-height: 1.6;
    max-width: none;
}

.bte-footer__newsletter-legal a {
    color: rgba(255,255,255,0.5);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .bte-footer__mid-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    .bte-footer__bar-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    .bte-footer__bar-meta {
        align-items: flex-start;
        text-align: left;
    }
    .bte-footer__newsletter,
    .bte-footer__bar-inner > .bte-footer__newsletter {
        min-width: 0;
        width: 100%;
        max-width: none;
        align-self: stretch;
    }
}

/* Hex / section utilities */
.bte-section {
    position: relative;
}

/* Fixed site background — see header.php for why this exists as a
   genuine fixed-position element rather than background-attachment:
   fixed (which breaks under any ancestor transform, and this site
   uses GSAP transforms for page transitions). Sits behind everything
   at all times; individual sections layer their own content and any
   opaque background color on top of it as needed. */
.bte-fixed-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: rgb(var(--bte-overlay-navy-rgb, 7, 9, 58)); /* fallback */
    background-image:
        linear-gradient( rgba(var(--bte-overlay-navy-rgb, 7, 9, 58), var(--bte-overlay-navy-opacity, 0.90)), rgba(var(--bte-overlay-navy-rgb, 7, 9, 58), var(--bte-overlay-navy-opacity, 0.90)) ),
        var(--bte-overlay-bg-url, url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Blue-toned variant of the same fixed layer, for the brighter
   --bte-blue sections (e.g. the product detail split panels) — a
   separate element since it needs a different overlay tint, but the
   same underlying idea: one continuous fixed image rather than each
   section positioning its own independent copy. */
.bte-fixed-bg--blue {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: rgb(var(--bte-overlay-blue-rgb, 14, 62, 116)); /* fallback */
    background-image:
        linear-gradient( rgba(var(--bte-overlay-blue-rgb, 14, 62, 116), var(--bte-overlay-blue-opacity, 0.93)), rgba(var(--bte-overlay-blue-rgb, 14, 62, 116), var(--bte-overlay-blue-opacity, 0.93)) ),
        var(--bte-overlay-bg-url, url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Hidden unless a blue-toned section is actually present on the
       page — toggled visible via body class, see functions.php */
    display: none;
}

body.bte-has-blue-panel .bte-fixed-bg--blue {
    display: block;
}

/* No longer renders its own background — the fixed layer above
   shows through instead, so the pattern is one continuous image
   across every hex section on the page rather than each one
   independently centring its own copy (which is what caused the
   visible seam between stacked sections). */
.bte-section--hex {
    background: transparent;
}

.bte-hex-bg::before {
    /* Hex pattern replaced by BTE background image on parent */
    content: '';
    display: none;
}

.bte-hex-bg > * { position: relative; z-index: 1; }

/* Heading section utility */
.bte-heading-section {
    margin-bottom: var(--space-6);
}

/* ============================================================
   BUTTONS
   Moved entirely to style.css, which is the single source of truth
   for .bte-btn — this used to be a separate, simpler duplicate
   definition here (unconditional skewX with no outline exclusions,
   no chevron counter-skew handling), which conflicted with style.css's
   own, more complete version. Because this file loads after style.css,
   its unconditional skew was winning over style.css's outline-teal/
   outline-white exclusion, and its own missing chevron counter-skew
   logic meant the ::before arrow never got treated to match — the two
   together caused a mismatched, skewed-looking chevron and clipped
   corner on every outline-teal/outline-white button site-wide.
   ============================================================ */

/* Eyebrow label */
.bte-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bte-red);
    margin-bottom: var(--space-2);
}



/* Hide product list on parent category pages only — leaf pages show product grid */
.bte-has-sub-cats ul.products,
.bte-has-sub-cats .woocommerce-pagination,
.bte-has-sub-cats .woocommerce-result-count,
.bte-has-sub-cats .woocommerce-ordering { display: none !important; }

/* Category SEO description */
.bte-cat-description {
    max-width: 65ch;
    padding-block: var(--space-8);
    padding-inline: var(--gutter);
    margin-inline: auto;
    color: rgba(255,255,255,0.6);
    font-size: var(--text-base);
    line-height: 1.7;
    text-align: center;
}

/* ============================================================
   Category page: hero image extends behind the carousel
   ============================================================ */

/* Strip solid navy from main so the injected bg image shows */
.bte-has-cat-hero .bte-woo-main {
    background-color: transparent !important;
    position: relative;
    /* Needs to be higher than .bte-cat-hero's z-index:2 — confirmed
       live that without this, the product grid/filter controls on
       leaf category pages (no explicit z-index of their own, so they
       default to auto) rendered behind the hero's extended background
       instead of in front of it, since z-index comparison between
       elements in different stacking contexts happens at the whole-
       context level regardless of any z-index set on descendants. */
    z-index: 3;
}

/* NOTE: previously this used negative margin-top to pull the
   following content up to overlap the hero's own bottom portion —
   that was a workaround for the hero not fading at its own edge. Now
   that .bte-cat-hero::after provides a genuine vertical fade to fully
   opaque at the hero's own bottom, this overlap is no longer needed —
   it was actively cropping product images/carousel cards by pulling
   them up underneath that now-opaque portion. Content below the hero
   now just starts normally. */

.bte-has-cat-hero .bte-container {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Category/shop hero — background image lives directly on
   .bte-cat-hero itself (set inline via PHP, see inc/woocommerce.php)
   and scrolls away naturally like the homepage hero slider, rather
   than covering the whole page as a fixed body background. The
   site's own triangle-pattern fixed background shows through for
   the rest of the page below this hero, same as every other page.
   ============================================================ */

/* Hero on leaf category pages (sub-cats without children) */
.bte-has-cat-hero .bte-cat-hero {
    min-height: 52vh;
    display: flex;
    align-items: center;
}

/* Leaf category product grid - keep it readable */
.bte-has-cat-hero .bte-woo-main ul.products .product {
    background: rgba(10,13,74,0.85);
    border-radius: 12px;
    padding: 1rem;
}


/* Leaf category pages - product grid below hero */
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-result-count,
.bte-has-cat-hero:not(.bte-has-sub-cats) .woocommerce-ordering {
    color: rgba(255,255,255,0.7);
}


/* ============================================================
   Product page: gallery thumbnail strip
   ============================================================ */
.bte-product-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.bte-product-gallery-thumb {
    width: 68px;
    height: 68px;
    border: 2px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.bte-product-gallery-thumb:hover,
.bte-product-gallery-thumb.is-active {
    border-color: var(--bte-red);
    transform: scale(1.08);
}
.bte-product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s;
}

/* Smooth swap on the main product image */
.bte-product-video__thumb {
    transition: opacity 0.2s ease;
}
.bte-product-video__thumb.is-swapping {
    opacity: 0;
}


/* ============================================================
   Product Image Gallery Carousel (.bte-pgc)
   Sits above the feature-blocks section; same card language
   as the category page carousel.
   ============================================================ */

.bte-pgc {
    /* Break out of the section to run full-width */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--bte-navy);
    overflow: hidden;
    padding-top: 1.5rem;
}

.bte-pgc__track {
    display: flex;
    gap: 1.25rem;
    padding: 0 var(--gutter, 2rem) 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bte-pgc__track::-webkit-scrollbar { display: none; }

/* ---- Cards ---- */
.bte-pgc__card {
    position: relative;
    /* 2026-07-24 — smaller base size (was 360x240): frees vertical space so
       the product title above clears the sticky header, and makes the
       hover grow below more pronounced. */
    flex: 0 0 260px;
    height: 168px;
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 2px solid rgba(255,255,255,0.1);
    cursor: pointer;
    padding: 0;
    background: transparent;
    transition: border-color 0.25s, transform 0.25s;
}
.bte-pgc__card:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-4px) scale(1.08); z-index: 2; }
.bte-pgc__card--active,
.bte-pgc__card.is-active { border-color: var(--bte-red) !important; transform: translateY(-4px); }

.bte-pgc__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.bte-pgc__card:hover .bte-pgc__card-bg,
.bte-pgc__card.is-active .bte-pgc__card-bg { transform: scale(1.04); }

.bte-pgc__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,9,58,0.75) 0%, rgba(7,9,58,0.15) 60%, rgba(7,9,58,0.0) 100%);
}

.bte-pgc__card-num {
    position: absolute;
    top: 0.75rem;
    left: 0.875rem;
    font-size: 0.6rem;
    font-family: var(--font-display);
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    z-index: 2;
}

.bte-pgc__card-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bte-white);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}
.bte-pgc__card-view::before {
    content: '';
    position: absolute;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
}
.bte-pgc__card:hover .bte-pgc__card-view,
.bte-pgc__card.is-active .bte-pgc__card-view { opacity: 1; }

/* ---- Nav ---- */
.bte-pgc__nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 var(--gutter, 2rem) 1.25rem;
}

/* Product gallery carousel prev/next now use the shared .bte-arrow-btn
   class directly — bespoke sizing/colour removed here to avoid duplicate
   styling. */


/* ============================================================
   Product gallery carousel INSIDE white features section
   ============================================================ */

/* Allow the carousel to wrap below the feature content row */
.bte-product-features {
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Feature inner container spans the full row */
.bte-product-features .bte-product-features__inner {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Gallery carousel: full-width row below the feature content */
.bte-product-features .bte-pgc {
    flex: 0 0 100%;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    overflow: visible;
    padding-bottom: 4rem;
    background: transparent;
}

/* Let the track scroll horizontally within the white section */
.bte-product-features .bte-pgc__track {
    padding: 0.5rem var(--gutter, 2rem) 1rem;
    overflow-x: auto;
}

/* Cards inside white section keep their dark navy look for contrast */
.bte-product-features .bte-pgc__card {
    border: 1px solid rgba(7,9,58,0.12);
    /* 2026-07-14 fix — was the shared 240px .bte-pgc__card height
       (main.css above). This gallery strip sits at the bottom of a
       section that's height-locked to 100vh while pinned on desktop
       (see .bte-product-features's own fix comment in product.css) —
       shrinking the cards here, alongside the product image cap and
       reduced section padding, helps keep the whole thing within one
       viewport so the strip is never pushed below the fold. */
    height: 190px;
}
.bte-product-features .bte-pgc__card--active {
    border-color: var(--bte-red);
}

/* Scroll indicator and scroll indicator stay on their own row */
.bte-product-features .bte-product-features__scroll {
    flex: 0 0 100%;
    order: 99;
}


/* ============================================================
   PGC Card: bigger hover grow + centred track + lightbox nav
   ============================================================ */

/* Bigger card grow on hover */
.bte-pgc__card:hover {
    transform: scale(1.1) translateY(-8px) !important;
    z-index: 2;
}
.bte-pgc__card:hover .bte-pgc__card-bg,
.bte-pgc__card.is-active .bte-pgc__card-bg {
    transform: scale(1.12) !important;
}

/* Centre the cards when they all fit in the viewport */
.bte-product-features .bte-pgc__track {
    justify-content: center;
    padding: 1rem var(--gutter, 2rem) 2rem;
}

/* Lightbox prev/next now use the shared .bte-arrow-btn class for their
   box styling (circle/border/colour/hover/disabled) — this block only
   handles absolute positioning within the lightbox, which .bte-arrow-btn
   doesn't provide by default. (Previously this rule was duplicated
   further down the file with a conflicting 48px size — removed.) */
.bte-image-lightbox__prev,
.bte-image-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.bte-image-lightbox__prev { left: 1.5rem; }
.bte-image-lightbox__next { right: 1.5rem; }
/* Ensure lightbox inner is position:relative for absolute nav positioning */
.bte-image-lightbox__inner {
    position: relative;
}


/* ============================================================
   PGC gallery: bigger hover, centred images
   ============================================================ */

/* Bigger, more dramatic card hover grow */
.bte-pgc__card:hover {
    transform: scale(1.07) translateY(-10px);
    box-shadow: 0 24px 60px rgba(7,9,58,0.25), 0 4px 16px rgba(7,9,58,0.12);
    z-index: 2;
}
.bte-pgc__card {
    transition: transform 0.32s cubic-bezier(.34,1.56,.64,1), border-color 0.25s, box-shadow 0.32s;
    position: relative;
}

/* Centre the gallery cards in the section */
.bte-product-features .bte-pgc__track {
    justify-content: center;
}

/* Lightbox prev/next box styling now comes entirely from the shared
   .bte-arrow-btn class + the positioning-only rule further up this file —
   this was a second, conflicting copy of the same rule (48px vs the other
   copy's 52px) and has been removed as dead/duplicate CSS. */


/* ============================================================
   Category page: blue ribbon, left-aligned text
   ============================================================ */

/* 3. Left-align hero content to match homepage (remove auto-centering).
   max-width was previously a hardcoded 600px — far too narrow for the
   .bte-cat-hero__title (clamp up to 5rem, weight 900, uppercase)
   below it, which forced category names like "New Plant Sales" /
   "Used Plant Sales" to wrap across 3 lines. Widened so the title has
   enough room to sit on one (or at most two) line(s) at desktop
   widths; narrower viewports are unaffected since the column is
   already narrower than this cap there. */
.bte-cat-hero .bte-container {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 950px !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* 4. Overlay still covers the hero section */
.bte-cat-hero {
    position: relative;
    z-index: 2;
    /* Changed from hidden to visible — .bte-cat-hero__bg below now
       deliberately extends past this element's own bottom edge, to
       reach behind the sub-category card carousel that follows.
       overflow:hidden would clip that extension off entirely. */
    overflow: visible;
}

.bte-cat-hero__bg {
    position: absolute;
    /* This 160% height (bottom-only overhang, top:0) is a DESIGN
       feature, not a parallax safety buffer — it existed before
       parallax was ever added here, so the image + its fade
       physically reaches down behind the sub-category card carousel
       that sits right after this section, rather than fading out
       entirely before the cards even begin. Stays exactly like this
       when parallax is off (per-category "Disable Parallax" checkbox
       ticked, or JS/GSAP unavailable) — the [data-edae-parallax] rule
       below adds an ADDITIONAL top-only overhang on top of this base
       when parallax is actually active. */
    top: 0;
    left: 0;
    right: 0;
    height: 160%;
    z-index: -1;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    /* Image now stays fully opaque (100%, no fade) through most of
       this extended height, only fading over a short stretch right
       before the products/cards begin, rather than fading gradually
       across the whole extended area — per request, the picture
       itself should read as full strength right up until just above
       where the products start. */
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 92%);
    mask-image: linear-gradient(to bottom, black 78%, transparent 92%);
}

.bte-cat-hero__bg[data-edae-parallax] {
    /* 2026-07-15 — added a 20% overhang ABOVE the hero (top:-20%,
       height bumped 160% -> 180%) so the parallax shift has somewhere
       to go on its upward stroke too — top:0 (the base rule above)
       means zero buffer above, so any upward parallax shift would
       immediately reveal a gap. The downward overhang (behind the
       card carousel, a pre-existing design feature — see base rule)
       is unaffected. Mask stops nudged 78/92 -> 80/93 to compensate
       so the fade still lands in the same physical spot despite the
       taller box. */
    top: -20%;
    height: 180%;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 93%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 93%);
    will-change: transform;
}

/* .bte-cat-hero__overlay removed per request (the diagonal navy
   gradient) — it was also the source of a visible hard-edge seam
   just above the product filter: this overlay stayed at the hero's
   own un-extended height while .bte-cat-hero__bg's fade now extends
   well past it, so the overlay's own bottom edge created a sudden
   brightness change against the image's own, longer fade continuing
   underneath it. The element itself is left in the markup (rendered
   unconditionally in inc/woocommerce.php) but is hidden here rather
   than requiring a PHP change. */
.bte-cat-hero__overlay {
    display: none;
}

/* 2026-07-20 — optional triangle/hex overlay on the category header
   (opt-in via the category's "Triangle Pattern Overlay" toggle). Sits
   over the background image (z-index:-1, same as __bg but later in the
   DOM so it layers on top) and below the header content. */
.bte-cat-hero__triangles {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    mix-blend-mode: overlay;
}
.bte-cat-hero__inner {
    position: relative;
    z-index: 1;
}

/* Separate vertical fade at the hero's own bottom edge — the
   gradient above runs left-to-right and never darkens toward the
   bottom, meaning the photo showed at full brightness right up to
   where it meets the next section regardless of any margin/overlap
   applied there. This is what actually creates a seamless transition,
   same technique already proven on the homepage's Aftersales hero. */
/* NOTE: the vertical fade is now handled by a mask directly on
   .bte-cat-hero__bg (see above/below), which fades the image itself
   to transparent — letting the triangle pattern show through, rather
   than fading to a solid navy colour that just created a hard edge
   one layer further down. */

/* Hero title */
.bte-cat-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 4.5vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--bte-white);
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 0 var(--space-4);
}

/* Hero CTA row */
.bte-cat-hero__ctas {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}



/* ============================================================
   LARGE SCREEN RESPONSIVE WIDTHS (all pages via main.css)
   ============================================================ */

@media ( min-width: 1600px ) {
    :root {
        --container-max:   1680px;
        --container-wide:  1500px;
    }
}

@media ( min-width: 1920px ) {
    :root {
        --container-max:   1900px;
        --container-wide:  1720px;
    }
}

@media ( min-width: 2200px ) {
    :root {
        --container-max:   2100px;
        --container-wide:  1900px;
    }
}

/* ============================================================
   NEWS ARCHIVE — category-page-style hero + card grid
   Self-contained: doesn't rely on body.bte-has-cat-hero since
   this isn't a WooCommerce product category page.
   ============================================================ */

/* ============================================================
   NEWS ARCHIVE — full-bleed background image runs behind the
   fixed header, the heading, and the post grid. A single vignette
   gradient darkens progressively toward the bottom of the image.
   ============================================================ */

.bte-news-archive__wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--bte-navy);
}

/* Background image — starts at the very top of the document,
   ignoring the fixed header so it visually runs behind it.
   Sized to the wrap's own height (image + vignette inherit the
   full extent of hero + grid content via absolute inset). */
.bte-news-archive__bg {
    /* 2026-07-15 — base/default sizing (parallax OFF — News/Media
       page "Disable Parallax" checkbox ticked, or JS/GSAP
       unavailable). Plain, non-oversized framing, matching what this
       looked like before parallax existed here. The oversized buffer
       lives in the [data-edae-parallax] rule below. */
    position: absolute;
    inset: 0;
    min-height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
}

.bte-news-archive__bg[data-edae-parallax] {
    /* Oversized 25% top/bottom so the scroll shift has room to move
       without revealing a gap — .bte-news-archive__wrap has
       overflow:hidden. */
    top: -25%;
    bottom: -25%;
    min-height: 150%;
    will-change: transform;
}

/* Blue vignette — lighter at the top (where the image is most visible
   behind the header/heading), progressively darker toward the bottom
   so the card grid sits on solid navy */
.bte-news-archive__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(7, 9, 58, 0.35) 0%,
        rgba(7, 9, 58, 0.55) 20%,
        rgba(7, 9, 58, 0.8)  40%,
        var(--bte-navy)      60%,
        var(--bte-navy)      100%
    );
}

/* Heading block — sits above the image, pushed down to clear the
   fixed header using the standard --bte-header-h offset */
.bte-news-archive__hero-inner {
    position: relative;
    z-index: 2;
    padding-top: calc( var(--bte-header-h, 100px) + clamp(var(--space-16), 8vw, var(--space-24)) );
    padding-bottom: clamp(var(--space-12), 6vw, var(--space-20));
}

/* The actual markup (archive.php, search.php) uses .bte-cat-hero__inner
   directly, not .bte-news-archive__hero-inner above — that rule has
   therefore never actually applied to either template, leaving their
   hero content without the top spacing needed to clear the fixed
   header. archive.php's own hero has enough natural content height
   (eyebrow + title + description + CTA) to clear the header anyway,
   which is why this went unnoticed there — search.php's much shorter
   hero (just eyebrow + title) doesn't, exposing it. Scoped as a
   descendant selector so it only affects these two templates, not
   other .bte-cat-hero__inner usages elsewhere (e.g. WooCommerce
   category pages, which already have their own correct spacing). */
.bte-news-archive__hero .bte-cat-hero__inner {
    padding-top: calc( var(--bte-header-h, 100px) + clamp(var(--space-16), 8vw, var(--space-24)) );
}

.bte-cat-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 4.5vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--bte-white);
    letter-spacing: -0.01em;
    line-height: 1;
    margin: var(--space-2) 0 0;
}

.bte-cat-hero__desc {
    color: rgba(255,255,255,0.75);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 50ch;
    margin: var(--space-3) 0 0;
}

/* Post grid section — sits on top of the same continuous background,
   no separate background colour of its own (vignette handles it) */
.bte-news-archive {
    position: relative;
    z-index: 2;
    padding-bottom: var(--space-20);
}

.bte-news-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1023px) {
    .bte-news-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
    .bte-news-archive__grid { grid-template-columns: 1fr; }
}

.bte-news-archive__card {
    aspect-ratio: 4 / 3;
}

.bte-news-archive__card-bg--placeholder {
    background: linear-gradient(135deg, #1c2060, #2c3380);
}

.bte-news-archive__card-title {
    font-size: var(--text-md);
}

/* Pagination */
.bte-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-12);
}

.bte-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-3);
    border: 1.5px solid var(--bte-blue);
    border-radius: 999px;
    color: var(--bte-blue);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.bte-pagination .page-numbers:hover,
.bte-pagination .page-numbers.current {
    background-color: var(--bte-blue);
    color: var(--bte-white);
}

.bte-pagination .page-numbers.dots {
    border: none;
    color: rgba(255,255,255,0.4);
}

/* ============================================================
   SINGLE POST — full-bleed featured image behind header,
   same vignette treatment as the News archive, two-column
   content (article + sidebar) below.
   ============================================================ */

.bte-single-post__wrap {
    position: relative;
    background-color: var(--bte-navy);
}

/* Hero banner — fixed, page-width height. Image + vignette are scoped
   to this element only, not the full article + sidebar height below. */
.bte-single-post__hero-banner {
    position: relative;
    overflow: hidden;
    min-height: 46vh;
}

.bte-single-post__bg {
    /* 2026-07-15 — base/default sizing (parallax OFF — this post's
       "Disable Parallax" checkbox ticked, or JS/GSAP unavailable).
       Plain, non-oversized framing, matching what this looked like
       before parallax existed here. The oversized buffer lives in
       the [data-edae-parallax] rule below. */
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
}

.bte-single-post__bg[data-edae-parallax] {
    /* Oversized 25% top/bottom so the scroll shift has room to move
       without revealing a gap — .bte-single-post__hero-banner has
       overflow:hidden. */
    top: -25%;
    bottom: -25%;
    will-change: transform;
}

.bte-single-post__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(7, 9, 58, 0.35) 0%,
        rgba(7, 9, 58, 0.55) 35%,
        rgba(7, 9, 58, 0.85) 70%,
        var(--bte-navy)      100%
    );
}

.bte-single-post__hero-inner {
    position: relative;
    z-index: 2;
    padding-top: calc( var(--bte-header-h, 100px) + clamp(var(--space-12), 6vw, var(--space-16)) );
    padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    max-width: var(--container-mid, 900px);
}

.bte-single-post__back {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bte-teal);
    text-decoration: none;
    margin-bottom: var(--space-6);
}

.bte-single-post__back:hover {
    color: var(--bte-white);
}

.bte-single-post__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--bte-white);
    margin: var(--space-4) 0 0;
}

/* ---- Content row: article + sidebar ---- */
.bte-single-post__content {
    position: relative;
    z-index: 2;
    padding-bottom: var(--space-24);
}

.bte-single-post__content-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-12);
    align-items: start;
}

@media (max-width: 1023px) {
    .bte-single-post__content-inner {
        grid-template-columns: 1fr;
    }
}

.bte-single-post__main {
    min-width: 0;
}

/* ---- Sidebar ---- */
.bte-single-post__sidebar {
    position: sticky;
    top: calc( var(--bte-header-h, 100px) + var(--space-6) );
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (max-width: 1023px) {
    .bte-single-post__sidebar {
        position: static;
    }
}

/* ---- Sidebar widget styling (shared with shop sidebar) ---- */
.bte-widget {
    background-color: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: var(--space-5);
}

.bte-widget__title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bte-red);
    margin: 0 0 var(--space-4);
}

.bte-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bte-widget ul li a,
.bte-widget a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: var(--text-sm);
    line-height: 1.6;
    transition: color 0.15s;
}

.bte-widget ul li a:hover,
.bte-widget a:hover {
    color: var(--bte-white);
}

.bte-widget input[type="search"],
.bte-widget input[type="text"] {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.5rem;
    padding: var(--space-2) var(--space-3);
    color: var(--bte-white);
    font-size: var(--text-sm);
}

/* ============================================================
   SEARCH OVERLAY — full-screen liquid-glass popup, matching the
   site's own glass technique (see header .is-scrolled) but darker/
   stronger since this is a focused, full-attention moment rather
   than a background header treatment. Previously had zero CSS
   anywhere in the theme, hence looking like a bare, unstyled
   browser default.

   JS toggles the native `hidden` attribute directly (see bte-core.js
   openSearch/closeSearch), not a class — [hidden] maps to
   display:none by default, which can't be transitioned. Overriding
   that to stay display:flex (just invisible via opacity/visibility)
   lets the fade animate smoothly in both directions instead of
   snapping open/closed.
   ============================================================ */
.bte-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background-color: rgba(7, 9, 58, 0.92);
    /* Standard diamond/hex texture, same image used elsewhere on the
       site (Why Choose Us, product pages), tinted navy to match. */
    background-image:
        linear-gradient(rgba(7, 9, 58, 0.88), rgba(7, 9, 58, 0.88)),
        url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.bte-search-overlay[hidden] {
    display: flex; /* overrides the UA default display:none, so the opacity transition above can actually run */
}

.bte-search-overlay:not([hidden]) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s var(--ease-out), visibility 0s linear 0s;
}

.bte-search-overlay__inner {
    width: 100%;
    max-width: 46rem;
    transform: translateY(-12px);
    transition: transform 0.4s var(--ease-out);
}

.bte-search-overlay:not([hidden]) .bte-search-overlay__inner {
    transform: translateY(0);
}

.bte-search-overlay__close {
    position: fixed;
    top: var(--space-6);
    right: var(--gutter);
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--bte-white);
    font-size: 1.5rem;
    line-height: 1;
    background: transparent;
    transition: all var(--dur-fast);
}

.bte-search-overlay__close:hover {
    border-color: var(--bte-white);
    background: rgba(255, 255, 255, 0.08);
}

.bte-search-form {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    padding-bottom: var(--space-4);
    transition: border-color var(--dur-fast);
}

.bte-search-form:focus-within {
    border-bottom-color: var(--bte-red);
}

.bte-search-form__input {
    flex: 1;
    background: none;
    border: none;
    color: var(--bte-white);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: 700;
}

.bte-search-form__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.bte-search-form__input:focus {
    outline: none;
}

.bte-search-form__submit {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bte-red);
    color: var(--bte-white);
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
}

.bte-search-form__submit:hover {
    transform: scale(1.08);
    box-shadow: var(--glow-red);
}

@media (max-width: 640px) {
    .bte-search-form__input { font-size: 1.5rem; }
    .bte-search-overlay__close { top: var(--space-4); right: var(--space-4); }
}

/* ============================================================
   SEARCH RESULT CARDS — reuses .bte-subcat-card's own visual
   language (rounded corners, background image, overlay, footer),
   but as a <div> rather than an <a> so an explicit "More" button
   can sit alongside the main image/title link without nesting two
   <a> tags (invalid HTML). The card becomes a flex column: the
   inner link takes the image/title/excerpt area, the button sits
   below it within the same card boundary.
   ============================================================ */
.bte-search-result-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bte-search-result-card__link {
    position: relative;
    display: block;
    flex: 1;
    min-height: 280px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
}

.bte-search-result-card__excerpt,
.bte-search-result-card__price {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-sm);
    margin: var(--space-2) 0 0;
}

.bte-search-result-card__price {
    color: var(--bte-white);
    font-weight: 700;
}

.bte-search-result-card__more {
    align-self: flex-start;
    margin-left: 12px;
}

/* ============================================================
   GLOBAL SHORT-VIEWPORT SCALE-DOWN — REVERTED (2026-07-16)
   Tried `zoom` here to shrink the whole site proportionally on
   short laptop screens (see git history / previous theme version
   for the full rule and reasoning). Confirmed live it doesn't
   actually work on this site: `zoom` and `vw`/`vh` units don't
   compose consistently in Chrome — anything sized with vw/vh
   (which this site uses constantly: 100vh pinned sections, vw-
   based clamp() typography, full-bleed backgrounds) is computed
   against the TRUE, unzoomed viewport, while ordinary percentage-
   widths shrink with the zoom. That mismatch is exactly what
   produced the reported "big spaces on the right" (measured live:
   document.body.scrollWidth ~386px wider than the zoomed layout
   width) and pinned sections whose end-of-pin math — driven by
   vh/window.innerHeight — no longer lined up, cropping content
   before the actual bottom of the section.
   Removed entirely rather than patched further — a site this
   dependent on vh/vw throughout isn't a good fit for a single
   global zoom rule. Back to fixing individual sections as
   they're reported, which was the safer option originally
   offered. */


/* ============================================================
   MOBILE BOTTOM ACTION BAR + SCROLL CUES (phones, <768px)
   2026-07-21 — per mobile design: a floating Search/Call/Email pill
   fixed at the bottom on every page, and every section's "SCROLL"
   cue pinned to the bottom-right (clear of the pill). Scoped to
   max-width:767px; desktop/tablet untouched.
   ============================================================ */
.bte-mobile-actionbar { display: none; }

@media (max-width: 767px) {
    .bte-mobile-actionbar {
        display: flex;
        position: fixed;
        left: 50%;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        z-index: 150;
        width: min(90%, 400px);
        align-items: stretch;
        border-radius: 999px;
        /* Slight liquid glass — pale, frosted navy, matching the site's
           other glass surfaces (nav / search boxes). */
        background: rgba(7, 9, 58, 0.5);
        backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
        -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 10px 30px rgba(0, 0, 0, 0.40);
        /* Hidden just below the bottom edge until the page is scrolled
           (i.e. when the sticky header appears), then glides up. */
        transform: translateX(-50%) translateY( calc(100% + 28px) );
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
    }
    /* Glide up into view once scrolled down — tied to the same signals
       that bring in the sticky header (works on every page). */
    body.is-scrolled-past-hero .bte-mobile-actionbar,
    body:has( .bte-header.is-scrolled ) .bte-mobile-actionbar {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .bte-mobile-actionbar__item {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 0;
        color: rgba(255, 255, 255, 0.85);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color var(--dur-fast);
    }
    .bte-mobile-actionbar__item + .bte-mobile-actionbar__item {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
    .bte-mobile-actionbar__item:hover,
    .bte-mobile-actionbar__item:active { color: var(--bte-white); }

    /* The action bar is part of the open menu too (design) — force it
       visible and above the overlay while the menu is open. */
    .nav-open .bte-mobile-actionbar {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        pointer-events: auto;
        z-index: calc(var(--z-nav) + 2);
    }

    /* Every section's SCROLL cue → bottom-right, lifted clear of the
       action bar. */
    .bte-hero__scroll,
    .bte-services__scroll,
    .bte-about__scroll,
    .bte-as__scroll,
    .bte-jobs__scroll,
    .bte-manu__scroll,
    .bte-page-hero__scroll,
    .bte-pcat__scroll,
    .bte-statement__scroll,
    .bte-team__scroll,
    .bte-testi__scroll,
    .bte-timeline__scroll,
    .bte-wcu__scroll,
    .bte-video-intro__scroll,
    .bte-video-section__scroll,
    .bte-product-features__scroll,
    .bte-product-hero__scroll,
    .bte-product-spec__scroll {
        left: auto !important;
        right: var(--gutter) !important;
        transform: none !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    }
}

/* ============================================================
   MOBILE INFO POP-UPS (Call / Email) — 2026-07-21
   Small centred cards opened from the bottom action bar, with a
   close button in the corner. Only ever triggered from the mobile
   action bar, so effectively phones-only.
   ============================================================ */
.bte-info-popup {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) + 5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.bte-info-popup.is-open { display: flex; }
.bte-info-popup__box {
    position: relative;
    width: min(92%, 360px);
    padding: var(--space-9) var(--space-6) var(--space-7);
    border-radius: 16px;
    text-align: center;
    background: rgba(7, 9, 58, 0.85);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 20px 50px rgba(0, 0, 0, 0.5);
}
.bte-info-popup__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--bte-white);
    cursor: pointer;
    transition: background-color var(--dur-fast);
}
.bte-info-popup__close:hover { background: rgba(255, 255, 255, 0.16); }
.bte-info-popup__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-2);
}
.bte-info-popup__value {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--bte-white);
    text-decoration: none;
    word-break: break-word;
}
.bte-info-popup__value:hover { color: var(--bte-teal); }

/* ============================================================
   MOBILE SUBMENU SLIDE-IN PANELS — 2026-07-21
   Top-level items with children open a full-screen panel (parent
   title, child links, optional background photo) with a BACK
   control. Panels are absolute children of the fixed overlay.
   ============================================================ */
/* Panel-open row is a <button> — strip default button chrome. */
.bte-mobile-nav__panel-open {
    width: 100%;
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    text-align: left;
}

.bte-mobile-nav__panel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 92px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background-color: rgb(7, 9, 58);
    background-image:
        linear-gradient( rgba(7, 9, 58, 0.92), rgba(7, 9, 58, 0.92) ),
        url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.38s var(--ease-out), visibility 0s linear 0.38s;
}
.bte-mobile-nav__panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.38s var(--ease-out), visibility 0s;
}
/* keep header/title/list above the background photo */
.bte-mobile-nav__panel > *:not(.bte-mobile-nav__panel-bg) { position: relative; z-index: 1; }

.bte-mobile-nav__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}
.bte-mobile-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background: transparent;
    border: none;
    color: var(--bte-white);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bte-mobile-nav__back-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.bte-mobile-nav__panel-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--bte-red);
    margin: 0 0 var(--space-4);
}
.bte-mobile-nav__panel-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--bte-red);
    margin-bottom: var(--space-6);
}
.bte-mobile-nav__panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.bte-mobile-nav__panel-list a {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bte-white);
    text-decoration: none;
}
.bte-mobile-nav__panel-list a:active { color: var(--bte-red); }

/* Background photo — lower portion, fading up into the navy. */
.bte-mobile-nav__panel-bg {
    /* Flex item pinned to the bottom of the panel — sits below the
       links, fills the lower area, fades up into the navy. Scrolls
       naturally with the panel (no absolute positioning to fight the
       scroll on long menus like New Plant). */
    flex: 0 0 auto;
    margin-top: auto;
    width: 100%;
    min-height: 38vh;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
}

/* ============================================================
   MOBILE FOOTER (phones) — 2026-07-21
   Reorder to: Form → Depots → Menus (→ tagline → email signup, which
   already follow). Menus: Services + Quick Links side by side, Socials
   on the next line. "Get In Touch" smaller and on one line.
   ============================================================ */
@media (max-width: 767px) {
    .bte-footer__contact-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Un-nest the left column so the form, menus and depots become
       siblings that can be reordered. */
    .bte-footer__left-col { display: contents !important; }
    .bte-footer__form-col     { order: 1; }
    .bte-footer__depots-scroll { order: 2; }
    .bte-footer__widgets      { order: 3; }

    /* "Get In Touch" — smaller, single line. */
    .bte-footer__heading {
        font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important;
        white-space: nowrap !important;
        line-height: 1.05 !important;
    }

    /* Menus: Services + Quick Links side by side; Socials (3rd) full
       width on the next line. */
    .bte-footer__widgets-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-6) var(--space-6) !important;
    }
    .bte-footer__widget-col:nth-child(3) { grid-column: 1 / -1; }
}

/* 2026-07-21 — submenu panel fixes: title is now a link (parent page),
   and lock the overlay scroll while a panel is open so you can't scroll
   the main menu behind it (was a phantom scroll that went nowhere). */
.bte-mobile-nav__panel-title a { color: inherit; text-decoration: none; }
.bte-mobile-nav-overlay:has( .bte-mobile-nav__panel.is-open ) { overflow: hidden; }

/* 2026-07-21 — sub-category cards (.bte-subcat-card in
   .bte-subcat-carousel): show ONE per view on phones (were ~2, so you
   couldn't see a whole card's image/info). Keeps the horizontal snap
   carousel, one full card at a time with a small peek of the next. */
@media (max-width: 767px) {
    .bte-subcat-card,
    .bte-subcat-card--featured {
        flex: 0 0 86% !important;
        min-width: 0 !important;
    }
    .bte-subcat-carousel__track { height: clamp(420px, 62vh, 520px); }
}

/* 2026-07-24 — MOBILE SECTION PINS: sections flagged .is-mpin by
   bte-core.js fill the phone screen so they read as "locked to screen
   depth" while pinned. Phones only. */
@media (max-width: 767px) {
    .is-mpin {
        min-height: 100svh;
    }
}