/*
Theme Name: NOVUS Divi Child
Theme URI: https://dev.novuspower.com
Description: NOVUS Precision Timing Products — dark red theme for Divi. Converted from Figma design.
Author: Shortcut Solutions
Template: Divi
Version: 1.9.46
License: proprietary
Text Domain: novus-divi
*/

/* ═══════════════════════════════════════════════════════════
   NOVUS Design Tokens — from Figma .make export
   ═══════════════════════════════════════════════════════════ */

/* NOVUS-ATTRSORT-001 (v45 / 1.9.29): product filter tree order is now
   managed by drag on the admin side (Configure terms = WooCommerce native;
   attribute GROUP order = novus_attrsort drag on Products ▸ Attributes,
   saved to the novus_attr_order option). This stylesheet carries NO CSS —
   see functions.php + woocommerce/archive-product.php. */
:root {
    /* Backgrounds */
    --novus-bg-primary:    #080000;
    --novus-bg-secondary:  #060000;
    --novus-bg-card:       #120000;
    --novus-bg-nav:        linear-gradient(to right, #cc0000, #000000);
    --novus-bg-footer:     #030811;
    --novus-bg-section:    #050000;
    --novus-bg-splash:     radial-gradient(ellipse 70% 55% at 50% 50%, rgba(204,0,0,0.08) 0%, transparent 70%);

    /* NOVUS-HEADER-RESTORE-001 (v44 / 1.9.28): --novus-bg-nav returns to its
       ORIGINAL pre-sweep red→black gradient per Josh — the sole sanctioned
       exception to the GR-002 "solid = colored stop" rule. Consumers:
       #main-header/.et-l--header + .et_mobile_menu (all var()-driven,
       all restored together). */

    /* Accent colors */
    --novus-red:           #cc0000;
    --novus-red-bright:    #ff3333;
    --novus-red-dim:       #8a5050;
    --novus-red-dark:      #5a3030;
    --novus-red-tint:      rgba(200,0,0,0.08);

    /* Text colors */
    --novus-text-heading:  #f0e8e8;
    --novus-text-body:     #b08080;
    --novus-text-muted:    #8a6060;
    --novus-text-faint:    #5a3030;
    --novus-text-dim:      #3d5068;
    --novus-text-link:     #cc0000;
    --novus-text-link-hover: #ff3333;

    /* Borders */
    --novus-border:        rgba(200,0,0,0.11);
    --novus-border-strong: rgba(200,0,0,0.35);
    --novus-border-faint:  rgba(0,180,255,0.08);

    /* Fonts */
    --novus-font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --novus-font-mono:     'JetBrains Mono', 'Courier New', monospace;
    --novus-font-cond:     'Roboto Condensed', 'Inter', sans-serif;

    /* Radius */
    --novus-radius:        8px;
    --novus-radius-lg:     12px;
    --novus-radius-xl:     16px;

    /* Layout */
    --novus-max-width:     1280px;
    --novus-nav-height:    64px;
}

/* ═══════════════════════════════════════════════════════════
   Base Styles
   ═══════════════════════════════════════════════════════════ */
body {
    font-family: var(--novus-font-body);
    background: var(--novus-bg-primary);
    color: var(--novus-text-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--novus-font-body);
    color: var(--novus-text-heading);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    letter-spacing: -0.025em;
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
}

h4 {
    font-size: 1.2rem;
}

/* Links */
a { color: var(--novus-text-link); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--novus-text-link-hover); }

/* Code / mono */
code, pre, .mono {
    font-family: var(--novus-font-mono);
}

/* Paragraphs */
p { color: var(--novus-text-body); line-height: 1.7; }

/* Labels / eyebrows */
.novus-eyebrow {
    font-family: var(--novus-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--novus-red);
    font-weight: 700;
}

.novus-eyebrow-dim {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--novus-red-dim);
}

/* ═══════════════════════════════════════════════════════════
   Body Containers
   ═══════════════════════════════════════════════════════════ */
#main-content,
.et_pb_section,
.novus-container {
    background: var(--novus-bg-primary);
}

.novus-container {
    max-width: var(--novus-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════
   Navbar Override
   ═══════════════════════════════════════════════════════════ */
#main-header,
.et-l--header {
    background: var(--novus-bg-nav) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--novus-border-strong);
}

#main-header .logo_container a,
#main-header .et_mobile_menu a,
#main-header nav>ul>li>a {
    color: rgba(255,255,255,0.8) !important;
    font-family: var(--novus-font-body);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

#main-header nav>ul>li>a:hover,
#main-header .et_mobile_menu a:hover {
    color: #fff !important;
}

#main-header nav>ul>li.current-menu-item>a,
#main-header nav>ul>li.current_page_item>a {
    color: #fff !important;
}

#top-header {
    background: rgba(0,0,0,0.9) !important;
    color: var(--novus-red-dim) !important;
    font-family: var(--novus-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}

#top-header a { color: var(--novus-red-dim) !important; }

/* Mobile menu */
.et_mobile_menu {
    background: var(--novus-bg-nav) !important;
    border-top: 1px solid var(--novus-border-strong);
}

/* Products dropdown — Figma Navbar dropdown spec */
/* Cert badge — desktop only (hidden in mobile menu per Figma) */
#top-menu li.novus-cert-item { display: none; }

@media only screen and (min-width: 981px) {

    /* Invisible bridge covering the float gap so hover isn't lost */
    #top-menu > li.menu-item-has-children::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 8px;
    }

    #top-menu li ul.sub-menu {
        top: 100% !important;
        margin-top: 8px !important;
        left: 0 !important;
        right: auto !important;
        width: 288px !important;
        padding: 8px 0 !important;
        background: #1a0000 !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 8px;
        box-shadow: 0 28px 56px rgba(0,0,0,0.65) !important;
        -webkit-box-shadow: 0 28px 56px rgba(0,0,0,0.65) !important;
        overflow: hidden;
        z-index: 99999;
    }

    #top-menu li ul.sub-menu li {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        line-height: 1.4 !important;
    }

    #top-menu li ul.sub-menu li a {
        padding: 10px 16px !important;
        width: 100% !important;
        color: rgba(255,255,255,0.65) !important;
        font-family: var(--novus-font-body);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    #top-menu li ul.sub-menu li a:hover {
        color: #ffffff !important;
        background: rgba(255,255,255,0.07);
    }


    /* Nav row layout — Figma: logo left, links + cert badge on one right-aligned row.
       Divi's left-header style pushes the nav right via inline padding-left computed
       from the logo width (js); the oversized 1024px logo made it overflow the container.
       Neutralize it and lay the menu out as a flex row so the badge is a real flex item. */
    #logo {
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
    }
    /* Divi left-header centers the logo via a zero-width inline helper; the collapsed
       container chain leaves the logo top-aligned in the 80px bar. Center it directly. */
    #main-header .logo_container {
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Nav row: flex the whole nav so links + badge form one right-aligned row.
       Divi's left-header style relies on inline padding-left (computed from the logo
       width by js) + 33px link paddings — both neutralized; badge flushes to the
       container's right edge as a plain flex item. */
    #et-top-navigation {
        padding: 0 !important;
        height: 80px;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        float: right;
    }
    #et-top-navigation nav#top-menu-nav { float: none !important; }
    #et-top-navigation nav > ul > li > a { padding-bottom: 0 !important; }
    #top-menu {
        display: flex !important;
        align-items: center;
        float: none !important;
    }
    #top-menu > li { float: none !important; }

    /* Uniform spacing between nav items + before the cert badge.
       Divi's default link paddings (0 left / 20px right) are asymmetric and
       also produced the tight 20px gap in front of the badge. Zero them and
       drive all spacing with one flex gap, matching the Figma Navbar's
       uniform gap between every nav child. */
    #et-top-navigation nav > ul > li > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #top-menu {
        gap: 34px;
    }
    #top-menu li.novus-cert-item {
        margin-left: 26px;
    }

    /* Cert badge (AS9100 / Made in USA / ISO9001) — flex sibling of the links,
       per Figma Navbar (36px tall, desktop only). */
    #top-menu li.novus-cert-item {
        display: block !important;
        position: static !important;
        transform: none !important;
        float: none !important;
    }
    #top-menu li.novus-cert-item a.novus-cert-link {
        padding: 0 !important;
        display: block !important;
    }
    #top-menu li.novus-cert-item img.novus-cert-badge {
        height: 36px;
        width: auto;
        object-fit: contain;
        display: block;
        transition: opacity 0.3s ease;
    }
    #top-menu li.novus-cert-item:hover img.novus-cert-badge {
        opacity: 0.9;
    }

    /* Caret on the Products top-level link — rotates 180° while its dropdown is open.
       Must out-specify Divi's own caret rule
       #top-menu .menu-item-has-children>a:first-child:after (1,2,1)
       which forces position:absolute + ETmodules glyph "3" at the li's corner. */
    #top-menu > li.menu-item-has-children > a:first-child::after,
    #top-menu > li.menu-item-has-children > a::after {
        /* SVG caret, NOT a font glyph — Inter has no U+25BE, so content:"\25BE"
           renders as a blank advance (space reserved, nothing painted). */
        content: "";
        width: 9px;
        height: 6px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: static !important;
        right: auto;
        top: auto;
        display: inline-block;
        vertical-align: middle;
        margin-left: 7px;
        transform: rotate(0deg);
        transform-origin: center center;
        transition: transform 0.25s ease;
    }
    #top-menu > li.menu-item-has-children:hover > a::after,
    #top-menu > li.menu-item-has-children:focus-within > a::after,
    #top-menu > li.menu-item-has-children.novus-menu-open > a::after {
        transform: rotate(180deg);
        opacity: 0.9;
    }
}

/* Search bar */
#et-top-search { margin-top: 3px; }
.et_search_form_container input {
    background: rgba(0,0,0,0.5) !important;
    border-color: var(--novus-border) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   Footer Override
   ═══════════════════════════════════════════════════════════ */
#main-footer,
.et-l--footer {
    background: var(--novus-bg-footer) !important;
    border-top: 1px solid var(--novus-border-faint);
}

#main-footer .et_pb_widget h4,
#main-footer .et_pb_widget .widgettitle,
#main-footer h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a0b4cc;
    margin-bottom: 20px;
}

#main-footer .et_pb_widget a,
#main-footer .et_pb_widget li,
#main-footer p,
#main-footer li {
    font-size: 14px;
    color: var(--novus-text-dim);
    transition: color 0.3s ease;
}

#main-footer .et_pb_widget a:hover,
#main-footer a:hover {
    color: #6a85a0;
}

#footer-bottom {
    background: rgba(0,0,0,0.3) !important;
    border-top: 1px solid var(--novus-border-faint) !important;
}

#footer-bottom .et_pb_text,
#footer-bottom p,
#footer-bottom a {
    font-size: 12px;
    color: #1e2d40;
}

/* ═══════════════════════════════════════════════════════════
   Divi Section/Row/Column Dark Theme
   ═══════════════════════════════════════════════════════════ */
.et_pb_section_0,
.et_pb_section {
    background-color: var(--novus-bg-primary) !important;
}

/* Card component for dark theme */
.novus-card {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    padding: 24px;
    transition: all 0.3s ease;
}

.novus-card:hover {
    border-color: var(--novus-red);
    transform: translateY(-2px);
}

/* Grid backgrounds (subtle red grid) */
.novus-grid-bg {
    position: relative;
    overflow: hidden;
}

.novus-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200,0,0,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,0,0,0.035) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Radial glow */
.novus-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--novus-bg-splash);
}

/* ═══════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════ */
.novus-btn {
    display: inline-block;
    padding: 12px 32px;
    background: var(--novus-red);
    color: #fff;
    border: none;
    border-radius: var(--novus-radius);
    font-family: var(--novus-font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.novus-btn:hover {
    background: var(--novus-red-bright);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(204,0,0,0.3);
}

.novus-btn-outline {
    display: inline-block;
    padding: 12px 32px;
    background: transparent;
    color: var(--novus-red);
    border: 1px solid var(--novus-red);
    border-radius: var(--novus-radius);
    font-family: var(--novus-font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.novus-btn-outline:hover {
    background: var(--novus-red-tint);
    color: var(--novus-red-bright);
}

/* Divi button override */
.et_pb_button {
    background: var(--novus-red) !important;
    border-color: var(--novus-red) !important;
    color: #fff !important;
    border-radius: var(--novus-radius) !important;
    font-family: var(--novus-font-body) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    padding: 12px 32px !important;
    transition: all 0.3s ease !important;
}

.et_pb_button:hover {
    background: var(--novus-red-bright) !important;
    border-color: var(--novus-red-bright) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(204,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   Text Module Overrides
   ═══════════════════════════════════════════════════════════ */
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3 {
    color: var(--novus-text-heading);
}

.et_pb_text_inner p {
    color: var(--novus-text-body);
}

/* Gradient text */
.novus-gradient-text {
    background: #cc0000;              /* GR-002: was 135deg #cc0000→#ff3333 → solid START #cc0000 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   Divi Text Module Dark Theme
   ═══════════════════════════════════════════════════════════ */
.et_pb_bg_layout_dark .et_pb_text_inner,
.et_pb_text_align_left .et_pb_text_inner {
    color: var(--novus-text-body);
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce Overrides
   ═══════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--novus-red);
    transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--novus-text-heading);
    font-weight: 600;
    font-size: 18px;
}

.woocommerce ul.products li.product .price {
    color: var(--novus-red-bright) !important;
    font-family: var(--novus-font-mono);
}

.woocommerce ul.products li.product .price ins {
    color: var(--novus-red-bright);
    text-decoration: none;
}

.woocommerce ul.products li.product .price del {
    color: var(--novus-red-dim);
}

.woocommerce ul.products li.product .button {
    background: var(--novus-red);
    color: #fff;
    border-radius: var(--novus-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--novus-red-bright);
    transform: translateY(-1px);
}

/* Product page */
.single-product .product .summary > h1 {
    color: var(--novus-text-heading);
    font-size: 2rem;
    font-weight: 700;
}

.single-product .product .price {
    color: var(--novus-red-bright) !important;
    font-family: var(--novus-font-mono);
    font-size: 1.5rem !important;
}

/* WooCommerce tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--novus-red) !important;
    border-color: var(--novus-red) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #fff !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius);
    background: var(--novus-bg-card);
}

/* Product category page */
.woocommerce .term-description {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    padding: 20px;
    color: var(--novus-text-body);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--novus-bg-card) !important;
    border-top-color: var(--novus-red) !important;
    color: var(--novus-text-heading) !important;
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--novus-red-bright) !important;
}

/* Forms */
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--novus-border) !important;
    border-radius: var(--novus-radius) !important;
    color: #fff !important;
    padding: 10px 14px !important;
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--novus-red) !important;
    outline: none;
}

.woocommerce form .form-row label {
    color: var(--novus-text-body) !important;
}

/* ═══════════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════════ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--novus-bg-card) !important;
    color: var(--novus-text-body) !important;
    border: 1px solid var(--novus-border) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--novus-red) !important;
    color: #fff !important;
    border-color: var(--novus-red) !important;
}

/* ═══════════════════════════════════════════════════════════
   Breadcrumb
   ═══════════════════════════════════════════════════════════ */
.woocommerce-breadcrumb {
    color: var(--novus-text-muted) !important;
    font-size: 13px;
}

.woocommerce-breadcrumb a {
    color: var(--novus-red) !important;
}

/* ═══════════════════════════════════════════════════════════
   WordPress Admin Bar Fix
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { font-size: 15px; }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .novus-container { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════
   Scrollbar (WebKit)
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0000; }
::-webkit-scrollbar-thumb { background: #2a0808; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--novus-red-dark); }

/* ═══════════════════════════════════════════════════════════
   Selection
   ═══════════════════════════════════════════════════════════ */
::selection {
    background: rgba(204,0,0,0.3);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   VAH Accordion Slider — Nav Outside the Image (SLIDER-NAV-001)
   ═══════════════════════════════════════════════════════════
   Scope: every rule below is gated on .vah-hero-carousel, which
   exists ONLY in the Vertical Accordion Hero plugin's hero (1
   instance, homepage). No other Novus slider or module uses
   these classes, so nothing else can be affected.

   Live markup contract (vah-frontend.js, untouched):
   .vah-heroes holds .vah-panel (tab bars) and .vah-panel-body
   (image slides) as siblings, interleaved. The plugin's JS
   reads server-rendered inline margin-top / margin-bottom on
   bodies to stack the tab titles OVER the image, and animates
   height + margins on every transition (jQuery slideUp/Down
   parity) — so margins must NOT be zeroed and heights must NOT
   be detached (the JS animates explicit px heights against
   them). The nav is therefore restyled rather than moved:

   · Every tab bar (.vah-panel) becomes an opaque black row.
   · Tabs stacked ABOVE the open body (tab 1) read as a black
     header row over the black section background — visually
     outside the image.
   · Tabs stacked BELOW the open body (the other titles) read
     as a black caption strip under the image — the plugin's
     own negative-margin geometry is reused, unchanged.
   · Slide text (heading/tagline/CTA) can no longer collide
     with titles: an opaque bar either hides the tab behind it
     (bottom titles) or sits above/outside the image area.

   The play/pause + collapse controls (also inside the carousel,
   bottom-right) are unchanged in position but now sit flush
   above an opaque black caption strip instead of floating on
   the artwork.
   ═══════════════════════════════════════════════════════════ */

/* Opaque tab bars — no more see-through titles floating on art. */
.vah-hero-carousel .vah-panel {
    background: #000;
}
/* Tab tint layer becomes a hairline separator instead of a
   translucent color wash over the image. */
.vah-hero-carousel .vah-panel .vah-transparency {
    opacity: 0.45;
    background: #000;
}
.vah-hero-carousel .vah-panel.vah-is-current .vah-transparency {
    opacity: 0;
}

/* Tab titles: white on black, vertically centered in the bar
   (the base style pads the top to sit on the image). */
.vah-hero-carousel .vah-panel-title h4 {
    padding-top: 0;
}

/* Image body cannot bleed past its frame edge-to-edge. */
.vah-hero-carousel .vah-panel-body {
    overflow: hidden;
}

/* ── Responsive ──
   Deliberately NO height changes here: the plugin's server-rendered
   body negative margins are computed from the FIXED --vah-tab bar
   height (26px live). Keeping bars at --vah-tab at every viewport is
   what keeps the tab strip / image geometry exact; the base styles
   already shrink the h4 to 13px ≤767px, and every Novus title fits a
   320px viewport without truncation (ellipsis remains the fallback). */

/* ================================================================
   VAH Accordion Slider - Nav Follows the Active Slide (SLIDER-NAV-003)
   (revises the SLIDER-NAV-002 block above)
   ================================================================
   v35 defect (live feedback): bar offsets were keyed to DOM order
   only, so the off-art slot above the image ALWAYS showed slide 1's
   title, whatever slide was active.

   SN-003 model (t = --vah-tab, H = --vah-h-live, N=3):
   - image tile stays fixed at [t .. t+H]: open body tops +t/0/-t
     (unchanged from v35, live-verified);
   - the ACTIVE slide's bar occupies the top slot [0 .. t];
   - the two inactive bars stack BELOW the image zone in DOM order:
     [t+H .. t+H+t] and [H+2t .. H+3t];
   - container stays H + 3t; the collapsed strip is untouched
     (with every body closed no state rule matches, the transforms
     release, and the natural 0/t/2t strip returns).

   Per-state bar shifts derive from live-measured flow tops, which
   DEPEND on the open state: closed bodies contribute zero flow and
   an OPEN body contributes H - 3t (H minus its inline -t/-2t
   margins; live 6.8.2 rects, state = open body index):
     state 1: flows 0 / H-2t / H-t  -> shifts   0 / 3t / 3t
     state 2: flows 0 / t   / H-t   -> shifts t+H / -t / 3t
     state 3: flows 0 / t   / 2t    -> shifts t+H / t+H / -2t
   Blocks are ordered state1 < state2 < state3: while the plugin
   animates a swap, both old and new :has() states can match and the
   later block wins; the transform transition makes the re-slot a
   glide, the body wipe stays inside the fixed image tile, and no
   property the plugin JS animates is touched.
   N=3 hardcodes this instance's data-index set (data-n="3");
   re-derive for other N. */

.vah-hero-carousel .vah-panel {
    transition: transform var(--vah-speed, 600ms) ease-in-out;
}

.vah-hero-carousel .vah-panel-body[data-index="1"] {
    top: var(--vah-tab, 26px);
}

.vah-hero-carousel .vah-panel-body[data-index="2"] {
    top: 0;
}

.vah-hero-carousel .vah-panel-body[data-index="3"] {
    top: calc(-1 * var(--vah-tab, 26px));
}

/* state 1: slide 1 active - its bar parks on the top slot */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="1"] {
    transform: translateY(0);
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="2"],
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(3 * var(--vah-tab, 26px)));
}

/* state 2: slide 2 active - bar 2 rides to the top slot */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="1"] {
    transform: translateY(calc(var(--vah-tab, 26px) + var(--vah-h-live, var(--vah-h, 540px))));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(-1 * var(--vah-tab, 26px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(3 * var(--vah-tab, 26px)));
}

/* state 3: slide 3 active - bar 3 rides to the top slot */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="1"],
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-tab, 26px) + var(--vah-h-live, var(--vah-h, 540px))));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(-2 * var(--vah-tab, 26px)));
}

/* Container = full art height + all three tab bars (unchanged). */
.vah-hero-carousel .vah-heroes {
    height: calc(var(--vah-h-live, var(--vah-h, 540px)) + 3 * var(--vah-tab, 26px));
}

/* ================================================================
   SLIDER-NAV-003 - END
   ================================================================ */

/* ═══════════════════════════════════════════════════════════
   VAH Accordion Slider — Breathing Gap Above the Active Title
   (SLIDER-NAV-004; revises the SLIDER-NAV-003 block above)
   ═══════════════════════════════════════════════════════════
   v36 defect (live feedback): the ACTIVE title bar, parked in the
   top slot [0 .. t], sits flush against the top edge of the hero
   section (the navbar is directly above) — the white title text
   hugs the section top with zero breathing room.

   Model: one gap, g = --vah-title-gap (10px below), inserted
   ABOVE the active title strip. Every box at or above the image
   zone shifts down by g; the closed bars keep riding the image
   bottom edge (their absolute offsets shift +g WITH the image, so
   bar-to-image and image-tile geometry are byte-identical to v36):

     open bodies (image tile):  [t+g .. t+g+H]  (tops: t+g / g / g−t)
     ACTIVE bar (top slot):     [g .. g+t]      (transforms +g)
     CLOSED bars (below image): flush at t+g+H  (shifts gain +g)
     container:                 H + 3t + g      (437 → 447 @1280)

   The collapsed strip is untouched (no :is-open state matches, the
   transforms release, and the plugin's inline height:inherit wins).
   g rides the same var(--vah-speed) transform transitions, so the
   slide-swap glide is unchanged. 10px chosen to match the plugin's
   own 10px h4 padding-bottom (in-component rhythm) at ≈38% of the
   26px bar height — visible, not a redesign.
   ═══════════════════════════════════════════════════════════ */

.vah-hero-carousel {
    --vah-title-gap: 10px;
}

.vah-hero-carousel .vah-panel-body[data-index="1"] {
    top: calc(var(--vah-tab, 26px) + var(--vah-title-gap, 10px));
}

.vah-hero-carousel .vah-panel-body[data-index="2"] {
    top: var(--vah-title-gap, 10px);
}

.vah-hero-carousel .vah-panel-body[data-index="3"] {
    top: calc(var(--vah-title-gap, 10px) - var(--vah-tab, 26px));
}

/* state 1: slide 1 active — its bar drops below the gap */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="1"] {
    transform: translateY(var(--vah-title-gap, 10px));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="2"],
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(3 * var(--vah-tab, 26px) + var(--vah-title-gap, 10px)));
}

/* state 2: slide 2 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="1"] {
    transform: translateY(calc(var(--vah-tab, 26px) + var(--vah-h-live, var(--vah-h, 540px)) + var(--vah-title-gap, 10px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) - var(--vah-tab, 26px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(3 * var(--vah-tab, 26px) + var(--vah-title-gap, 10px)));
}

/* state 3: slide 3 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="1"],
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-tab, 26px) + var(--vah-h-live, var(--vah-h, 540px)) + var(--vah-title-gap, 10px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) - 2 * var(--vah-tab, 26px)));
}

/* Container grows by the gap; collapsed strip unaffected. */
.vah-hero-carousel .vah-heroes {
    height: calc(var(--vah-h-live, var(--vah-h, 540px)) + 3 * var(--vah-tab, 26px) + var(--vah-title-gap, 10px));
}

/* ================================================================
   SLIDER-NAV-004 - END
   ================================================================ */

/* ═══════════════════════════════════════════════════════════
   VAH Accordion Slider — Black Chrome for the Title Gap (SLIDER-NAV-005)
   (extends the SLIDER-NAV-004 block above)
   ═══════════════════════════════════════════════════════════
   v37 defect (live feedback): the 10px gap above the ACTIVE title
   renders WHITE — the plugin paints .vah-hero-carousel { background:
   #fff } (assets/css/vah-frontend.css) and nothing covers the bare
   gap strip. The Divi module's own inline black rule is media-gated
   and does not apply at desktop widths (same reason the old 100px
   height pin never bit there — verified live 2026-10-10: computed
   carousel background = rgb(255,255,255) @1280).

   The active bar is transparent BY DESIGN (SN-001: tint opacity → 0
   so the title floats over the art) and it parks in the top slot
   [g .. g+t] in EVERY state (bar matrix {g,3t+g,t+H+g} / {3t+g,g,t+H+g}
   / {3t+g,t+H+g,g}); the slot [0..g] above it is bare. So the whole
   top strip [0 .. g+t] must read as black chrome — which is also
   what the order allows ("if the active-title slot above the image
   needs black behind the title strip itself, do it").

   Mechanism: paint .vah-heroes black. It wraps the full module
   interior [0 .. H+3t+g]; every pixel of it is covered by (a) the
   open image body, (b) a title bar, or (c) the bare top strip — so
   the black can only ever show through that strip. Minimal surface:
   one declaration, no state matrix, no !important; any layout the
   plugin adds inside .vah-heroes renders on black chrome, consistent
   with the closed bars. Gap size, bar slots, image tile and all v37
   geometry are untouched (color-only change); the collapsed strip
   (inline height:inherit) just gains a black backdrop behind its bars.
   ═══════════════════════════════════════════════════════════ */

.vah-hero-carousel .vah-heroes {
    background: #000;
}

/* SLIDER-NAV-005 - END */

/* ══════════════════════════════════════════════════════════════
   VAH Accordion Slider — 10px Slide Titles (SLIDER-NAV-006)
   (extends the SLIDER-NAV-005 block above; client request: slide
   titles render at 10px on EVERY bar — active and closed alike)
   ══════════════════════════════════════════════════════════════ */

/* Specificity (0,3,1): outranks the plugin's base rule
   (.vah-panel-title h4, 15px) AND its ≤767px media override (13px) —
   both (0,2,1) — at every viewport, regardless of load order.
   Titles are flex-centered inside their 26px bar (plugin flex +
   SN-001 padding-top:0), so a 12px line box (10px × 1.2) sits dead
   center — no dead space, no internal padding change needed, and
   the geometry contract (bar slots, 10px gap, black chrome) is
   untouched. letter-spacing 0.01em→0.02em (+0.2px at 10px) keeps
   the shrunken text legible; nowrap/ellipsis from the base rule
   still guard long titles. */
.vah-hero-carousel .vah-panel-title h4 {
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* SLIDER-NAV-006 - END */

/* ══════════════════════════════════════════════════════════════
   VAH Accordion Slider — Proportional Title Bars (SLIDER-NAV-007)
   (extends the SLIDER-NAV-006 block above; client request: with
   titles now 10px, shrink their CONTAINERS a little to match —
   not aggressive)
   ══════════════════════════════════════════════════════════════

   v39 defect (live feedback): 10px titles sit in 26px bars —
   dead chrome everywhere. Shrink the BAR (active + closed alike:
   both are .vah-panel) from t=26px to b=21px (−19%; the 12px line
   box keeps a 4.5px inset per side vs the previous 7px).

   WHY A NEW VAR (--vah-bar-h) INSTEAD OF REDEFINING --vah-tab:
   the plugin's server-rendered body margins are FROZEN literals
   (margin-top:-26px; margin-bottom:-52px — 26-quantum, captured
   live) and its JS re-applies exactly those cached strings on
   every transition. The whole offset model (SN-002/004 body tops,
   open-body flow height H−3t) is keyed to that 26. So 26 remains
   the LAYOUT COUPLING CONSTANT everywhere below, and b is only the
   BAR UI HEIGHT. (Inline style on .vah-hero-carousel would beat a
   CSS var override anyway.)

   Retile (targets; g = gap 10px UNCHANGED, H = --vah-h-live):
     image tile:   [g+(j−1)t .. +H]          (byte-identical to v38)
     ACTIVE bar:   [g .. g+b]                (top slot, all states)
     CLOSED bars:  [g+H .. g+H+b] + [g+H+b .. g+H+2b]  (flush under
                   the image — top edge pinned to the image bottom,
                   same v38 rule, just shorter bars)
     container:    H + 2b + g                (447 → 411 @1280)
     collapse:     bars only → 3b = 63px     (inline height:inherit
                   still wins; transforms release — strip follows)
   translateY per state = target − flow (flow = panels b each +
   open body H−3t; t=26 always):
     s1: p1 +g | p2,p3  3t+g−b   (flow b+(H−3t) / 2b+(H−3t))
     s2: p1 H+g | p2 g−b | p3 3t+g−b
     s3: p1,p2 H+g | p3 g−2b
   Same selectors as SN-004's matrix, later in this sheet → later
   block wins the cascade (equal specificity, same origin). Panel
   transform transition (SN-003) keeps the glide. The plugin JS
   animates BODIES only (height/margins/padding-top) — panel
   heights are static CSS, so no runtime contract is touched.
   No padding changes needed: titles are flex-centered in the bar
   (plugin base + SN-001 padding-top:0); the bar height IS the box.
   Dial: --vah-bar-h is a single knob (18–24px sane range); the
   matrix below derives from it automatically.
   ══════════════════════════════════════════════════════════════ */

.vah-hero-carousel {
    --vah-bar-h: 21px;
}

/* Active AND closed title bars shrink together (one element class). */
.vah-hero-carousel .vah-panel {
    height: var(--vah-bar-h, 26px);
}

/* state 1: slide 1 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="1"] {
    transform: translateY(var(--vah-title-gap, 10px));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="2"],
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(3 * var(--vah-tab, 26px) + var(--vah-title-gap, 10px) - var(--vah-bar-h, 26px)));
}

/* state 2: slide 2 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="1"] {
    transform: translateY(calc(var(--vah-h-live, var(--vah-h, 540px)) + var(--vah-title-gap, 10px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) - var(--vah-bar-h, 26px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(3 * var(--vah-tab, 26px) + var(--vah-title-gap, 10px) - var(--vah-bar-h, 26px)));
}

/* state 3: slide 3 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="1"],
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-h-live, var(--vah-h, 540px)) + var(--vah-title-gap, 10px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) - 2 * var(--vah-bar-h, 26px)));
}

/* Container: art + TWO shrunken bars + gap (411 @1280, was 447). */
.vah-hero-carousel .vah-heroes {
    height: calc(var(--vah-h-live, var(--vah-h, 540px)) + 2 * var(--vah-bar-h, 26px) + var(--vah-title-gap, 10px));
}

/* SLIDER-NAV-007 - END */

/* ════════════════════════════════════════════════════════════════════
   NOVUS-THUMBFADE-001 (v43 / 1.9.27) — remove the product-list thumbnail
   fade overlay gradient entirely (Josh: "needs to go").
   ════════════════════════════════════════════════════════════════════

   Target (plugin CSS, novus.css L733 — element exists on the HOME page
   product-list shortcode; NOT in any child file):

     .novus-pl-thumb-fade {
         position: absolute;
         inset: 0;
         pointer-events: none;
         background: linear-gradient(to bottom,
                     transparent 35%, var(--pl-card-bg, #120000) 100%);
     }

   BEFORE: bottom 65% of every product-list thumbnail is veiled by a
   dark fade (transparent 35% → #120000 var(--pl-card-bg) 100%).
   AFTER : background removed entirely → overlay renders transparent;
   the clean, un-veiled thumbnail image shows through.
   Layout untouched: position/inset/pointer-events stay (only the paint
   is removed); the plugin's own hover rule (img opacity .9) still works.

   Cascade: plugin rule = (0,1,0), NO !important → child override at
   equal specificity WINS BY SHEET ORDER (novus.css loads at head pos 2;
   child novus-divi-style loads later). Verified in the live home.html
   capture before writing this block. No !important needed or used.

   Scoped: matches only the plugin's own class, zero other selectors.
   ════════════════════════════════════════════════════════════════════ */

.novus-pl-thumb-fade {
    background: none;
}

/* NOVUS-THUMBFADE-001 - END */

/* ════════════════════════════════════════════════════════════════════
   NOVUS-NAVHERO-001 (v55 / 1.9.39) — hero nav contained + visible
   dropdown chrome. Live-measured 2026-10-19 (dev.novuspower.com,
   live = v54/1.9.38 byte-identical to this tree).

   DEFECTS (Josh report: "slides cut at bottom edge, unstyled dropdowns,
   phantom generated subheading label"):
   1. ART CLIP — every slide's art text now lives INSIDE the banner jpg
      (TimingIsEverythingBanner1920X540). Live rects (t=26 tab quantum,
      b=21 bar, g=10 gap, H=359): the open body paints at static-top
      j*b − t (position:relative top offsets: SN-004's +36/+10/−16) →
      tiles [31..390] / [26..385] / [21..380] while the SN-007 bar
      matrix puts closed bars at [369..411] in EVERY state → the art's
      bottom 21/5/11 px sit under an opaque black bar (the "cut"), and
      the tile wobbles ±5px between states.
   2. CONTROLS — plugin play/pause + collapse are 25×25 #000 squares
      bottom:0/25px on a carousel whose bottom band is black chrome
      (SN-005) → invisible; and bottom:25+25 straddles the art edge
      (390) at container 411.
   3. DROPDOWNS — panel styles apply (computed: bg #1a0000, 12%-white
      border, link padding 10/16, color .65-white) but #1a0000 over the
      new near-black hero reads as "no styling"; the ::before
      generated subheading label (35% white, 10px mono, content-only) is invisible on
      the same black and sits nowhere in the DOM text, so it read as a
      phantom. No green border exists in ANY shipped artifact since the
      v30 archive (grep-verified) — chrome goes to the brand red.
      No JS touches these dropdowns (grep: no novus-menu-open writer;
      plugin JS is .vah-scoped) — CSS-only is the whole surface.

   FIX A1 (art tile normalization; SN-004 selectors, retop): replace
   the 26-quantum body tops with b-based offsets so the open tile
   lands at [g .. g+H] = [10..369] in ALL states — flush under the
   active-bar row, flush above the closed-bar rows [369..411]. The
   closed-bar translate matrix (SN-003/004/007) is UNTOUCHED — it was
   already correct; the art was painted 21px too low into it.
     live-measured static flow top of open body j: j*b − t
       (= −5 / +16 / +37 — matches the three live states exactly)
     required css top(j) = g − (j*b − t) = g + t − j*b
       j=1: +15   j=2: −6   j=3: −27   (vs current +36/+10/−16)
   Plugin JS contract intact: it animates body height/margins only —
   `top` on bodies is child-owned since SN-003 (bodies are
   position:relative; JS never reads or writes it). Tile is now
   state-invariant → no mid-transition tile glide either.

   FIX A2 (controls on the bar grid): both buttons sized to the bar
   height var(--vah-bar-h,21px) × 34px wide, bottom 0 / 21 — they
   occupy the same right-hand column as the closed bars, fully inside
   the container in open states AND in the collapsed 63px strip
   (0/21/42 stack). Visible chrome: #1a0000 bg (matches panel), dim
   glyph, red hover. Height-only + colors: plugin's 25px bottom:25px
   offsets are overridden with our own pair; no JS reads button boxes.

   FIX B (dropdown visibility, ≥981px media — same gate as the
   original block): panel bg → #260000→#140000 vertical gradient
   (visible lift off pure black), border → brand red rgba(204,0,0,.55)
   (Josh: "make it work … whatever it takes" fallback sanctioned;
   Figma-exact green proven never to have shipped), real drop shadow.
   Items gain hairline row separators; hover wash → brand red.

   FIX C: ::before label removed via content:none (same media gate).

   All selectors scoped to #top-menu dropdowns (desktop nav only) or
   .vah-hero-carousel (homepage hero only). Version 1.9.39: header +
   BOTH woocommerce enqueues; the legacy 1.9.12 literal on
   novus-divi-style is intentionally bumped too so the main sheet's
   ?ver moves for this deploy.
   ════════════════════════════════════════════════════════════════════ */

/* ── A1: pin the open art tile to [g .. g+H] in every state ── */
.vah-hero-carousel .vah-panel-body[data-index="1"] {
    top: calc(var(--vah-title-gap, 10px) + var(--vah-tab, 26px) - var(--vah-bar-h, 26px));
}

.vah-hero-carousel .vah-panel-body[data-index="2"] {
    top: calc(var(--vah-title-gap, 10px) + var(--vah-tab, 26px) - 2 * var(--vah-bar-h, 26px));
}

.vah-hero-carousel .vah-panel-body[data-index="3"] {
    top: calc(var(--vah-title-gap, 10px) + var(--vah-tab, 26px) - 3 * var(--vah-bar-h, 26px));
}

/* ── A2: play/pause + collapse sized to the bar grid, visible chrome ── */
.vah-hero-carousel .vah-controller,
.vah-hero-carousel .vah-collapse {
    width: 34px;
    height: var(--vah-bar-h, 26px);
    background: #1a0000;
    color: #d9d9d9;
    font-size: 12px;
    line-height: 1;
}

.vah-hero-carousel .vah-controller {
    bottom: var(--vah-bar-h, 26px);
}

.vah-hero-carousel .vah-collapse {
    bottom: 0;
}

.vah-hero-carousel .vah-controller:hover,
.vah-hero-carousel .vah-collapse:hover {
    background: #cc0000;
    color: #fff;
}

/* ── B + C: dropdown chrome (desktop nav media gate, mirrors the
      original block above) ── */
@media only screen and (min-width: 981px) {

    #top-menu li ul.sub-menu {
        background: linear-gradient(180deg, #260000 0%, #140000 100%) !important;
        border: 1px solid rgba(204, 0, 0, 0.55) !important;
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.85) !important;
        -webkit-box-shadow: 0 20px 44px rgba(0, 0, 0, 0.85) !important;
    }

    #top-menu li ul.sub-menu li a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    #top-menu li ul.sub-menu li:last-child a {
        border-bottom: none;
    }

    #top-menu li ul.sub-menu li a:hover {
        background: rgba(204, 0, 0, 0.22);
        color: #ffffff !important;
    }

    /* The generated subheading above the dropdown items was REMOVED at
       source per NAVHERO addendum (Josh, 2026-10-19) - deliberate deletion
       shipped since ~v31, not an override. */
}

/* NOVUS-NAVHERO-001 - END */

/* ════════════════════════════════════════════════════════════════════
   NOVUS-NAVHERO-003 (v57 / 1.9.41) — hero art crop during slide morphs.
   Live-measured + pixel-verified on dev.novuspower.com 2026-10-20
   (live = v56/1.9.40, style.css byte-identical to this tree).

   DEFECT (Josh; re-dispatch of NAVHERO-002): slide headline glyph TOPS
   clip at the hero's top edge — "only lower portions of TIMING IS
   letterforms visible" — on captures and real viewports alike.

   ROOT CAUSE (transition-frame behavior, invisible to steady-state
   probes — which is why NAVHERO-002's settled-DOM evidence missed it):
   the plugin morph (vah.js carouselSlide, jQuery slideUp/slideDown
   parity) animates the open .vah-panel-body BOX — height + margins +
   padding-top — over --vah-speed (600ms live). The art layer
   .vah-zoom-background fills that box (absolute inset 0) with
   background-size: cover + background-position: CENTER (vah-frontend.css
   L119/L118), so EVERY animation frame re-covers the resizing box.
   painted size at 1280 is 1280x360 (width dominates the 2:1 art), so
   the centered vertical offset is -(360-h)/2: at mid-morph h=180 the
   box top sits at art row 90; at h=270, art row 45 — glyph tops start
   clipping below h~284 and the bright glyph mass (art rows ~90+) is
   sliced for ~0.5s at EVERY autoplay advance
   (initial 3s, then 5s) and every manual tab switch. At 1920-wide
   viewports the same re-cover clips the same rows during morphs. Any
   capture or glance landing in that window shows exactly "art fully
   painted, glyph tops cut".

   FIX: anchor the cover paint to the art's TOP edge. With
   background-position: top center the painted SCALE never changes
   between frames (cover size is box-width-driven and the width does
   not animate) and the art's top edge stays welded to the box top;
   the shrinking box just reveals less of the art BOTTOM — a clean
   wipe matching the Qorvo original. Glyph tops cannot clip at ANY box
   height or viewport: only the lowest art rows disappear mid-morph,
   and no slide keeps text there (art bottom bands hold scenery only).

   Steady state shifts the paint by <=2 art-px vs center (at the live
   359px tile the centered anchor offsets the paint -1px; NAVHERO-002
   already measured the centered paint at d=+1.75px from perfect, same
   magnitude) — no design intent change; the art keeps its full width
   fit at every width.

   Scoped: .vah-hero-carousel .vah-zoom-background (plugin's own class;
   the child sheet previously had ZERO rules on this element — its only
   background-position rule is the nav caret SVG). Later sheet wins at
   equal-or-higher specificity ((0,2,0) vs plugin (0,1,0)); no
   !important. background-position does not interact with the element
   transform, so the (disabled here) data-zoom intro scale is outside
   this contract.
   ════════════════════════════════════════════════════════════════════ */

.vah-hero-carousel .vah-zoom-background {
    background-position: top center;
}

/* NOVUS-NAVHERO-003 - END */

/* ════════════════════════════════════════════════════════════════════
   NOVUS-NAVHERO-004 (v58 / 1.9.42) — kill the .vah-panel-body negative
   margins (Josh order; joist-lead live A/B: margins zeroed ⇒ open body
   sits FLUSH below the title bar, "TIMING IS" fully visible, no
   bar-over-art). NAVHERO-003's top-center pin was necessary but not
   sufficient: the -26/-52 margins pulled the pinned art UNDER the bar.

   SERVER CONTRACT (fresh curl ?nh4=1, 2026-10-20): every body renders
   inline `margin-top:-26px;margin-bottom:-52px` (= -1*t / -2*t, the
   plugin's Qorvo stacking trick: open image is pulled up under the tab
   row and the following titles are pulled up flush under the image).
   vah.js `animateBody` writes INLINE margins from cached __vahOpen
   values at every slide() (start values, target values, and the
   end-of-transition restore) — so plain `margin: 0` LOSES during and
   after every transition. `!important` wins the cascade against inline
   styles at every frame; the JS keeps writing but the paint is flat 0.
   The plugin animates height (0→H) unchanged, so the wipe/grow
   animation survives; margin "animation" degenerates 0→0.

   NEW FLOW (margins gone, panels stay 21px in-flow rows):
     panel j (static):       [(j-1)b .. jb]        b = --vah-bar-h 21px
     OPEN body (relative):   [g+26 .. g+26+H]      top: g+26 (all states;
                             H = --vah-h-live 359 ⇒ tile [36..395] @1280,
                             26px black chrome strip above = the old
                             pulled-under-bar region, now honest chrome)
     CLOSED bodies: display:none ⇒ zero flow ⇒ tiles end EXACTLY at
                             their own box bottom [36..395].
     caption bars below:     translateY(g+26+H-(j-1)b) ⇒ [395..416]/[416..437]
     container (.vah-heroes): H + 2b + g + 26 = 405px @1280 (was 411:
                             the 411 model counted the caption rows at
                             395 because the -26 margin cancelled one
                             bar row in flow — that cancellation is what
                             v58 removes).
     collapse strip:         3b = 63px (unchanged; transforms release).

   SUPERSEDES: SN-003/004/NAVHERO-001 body-top rules (equal specificity,
   later in this sheet ⇒ they lose the cascade; kept in file as history).
   Everything else (SN-001 chrome, SN-005 black heroes, SN-006 10px
   titles, SN-007 bar heights, NAVHERO-001 controls + dropdowns,
   NAVHERO-003 art pin) is UNTOUCHED and still required. No plugin file
   is modified; scoped to .vah-hero-carousel (homepage hero only —
   grep: the only .vah-* instance site-wide).
   ════════════════════════════════════════════════════════════════════ */

/* 1. The margins die — !important because vah.js re-applies inline
      margins from its __vahOpen cache on EVERY transition. */
.vah-hero-carousel .vah-panel-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Open art tile pins to [g+b .. g+b+H] = flush under the ACTIVE bar
      (Josh's approved A/B look: bar in its own strip, art starts where
      the bar ends, nothing overlaps), IDENTICAL in all three states.
      Per-STATE tops because with margins at 0 the body's flow top is
      state-dependent (only the bars ABOVE it contribute flow:
      body1 flows at b, body2 at 2b, body3 at 3b). Closed bodies don't
      paint, so only the OPEN body of each state needs a top. */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel-body[data-index="1"] {
    top: var(--vah-title-gap, 10px);
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel-body[data-index="2"] {
    top: calc(var(--vah-title-gap, 10px) - var(--vah-bar-h, 26px));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel-body[data-index="3"] {
    top: calc(var(--vah-title-gap, 10px) - 2 * var(--vah-bar-h, 26px));
}

/* 3. Full bar matrix on the new flow (all 3 states x all 3 panels —
      per-state at EQUAL specificity to the SN-004/007 matrix it
      supersedes, later in this sheet, so it wins by position; the
      OLD matrix's closed-bar rows are keyed to the margin-cancelled
      flow and would clip under the container). Flow with margins
      gone (interleaved DOM p1,b1,p2,b2,p3,b3): open body j flows at
      [jb .. jb+H] (only the j panels before it contribute);
      targets: ACTIVE bar -> top slot [g .. g+b]; CLOSED bars ->
      caption rows flush under the tile: [g+b+H .. +b], m = 0,1.
      translateY = target_top - flow_top. Notable: in state 1 the
      closed bars flow EXACTLY one gap below their slots (they sit
      right after the tall open body) -> all three panels +g. */
/* state 1: slide 1 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="1"] {
    transform: translateY(var(--vah-title-gap, 10px));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="2"] {
    transform: translateY(var(--vah-title-gap, 10px));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="1"]) .vah-panel[data-index="3"] {
    transform: translateY(var(--vah-title-gap, 10px));
}

/* state 2: slide 2 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="1"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) + var(--vah-bar-h, 26px) + var(--vah-h-live, var(--vah-h, 540px))));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) - var(--vah-bar-h, 26px)));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="2"]) .vah-panel[data-index="3"] {
    transform: translateY(var(--vah-title-gap, 10px));
}

/* state 3: slide 3 active */
.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="1"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) + var(--vah-bar-h, 26px) + var(--vah-h-live, var(--vah-h, 540px))));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="2"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) + var(--vah-bar-h, 26px) + var(--vah-h-live, var(--vah-h, 540px))));
}

.vah-hero-carousel .vah-heroes:has(.vah-panel-body.vah-is-open[data-index="3"]) .vah-panel[data-index="3"] {
    transform: translateY(calc(var(--vah-title-gap, 10px) - var(--vah-bar-h, 26px)));
}

/* 4. Container: 10px gap + active bar + art tile + two caption rows
       = g + 3b + H (10 + 63 + 359 = 432 @1280; was 411 — the delta is
       exactly the -26 flow cancellation v58 removes, +9 live where the
       same margin-cancellation arithmetic was +17). */
.vah-hero-carousel .vah-heroes {
    height: calc(
        var(--vah-title-gap, 10px) + 3 * var(--vah-bar-h, 26px) + var(--vah-h-live, var(--vah-h, 540px))
    );
}

/* NOVUS-NAVHERO-004 - END */