/* ═══════════════════════════════════════════════════════════
   NOVUS WooCommerce Templates — Additional Styles
   Category page per Figma CategoryPage.tsx (blue accent spec):
   page #050a14, panels #0c1526, accents #0066ff/#00d4ff,
   text #e2e8f4/#6a85a0/#3d5068, borders rgba(0,180,255,.1)
   ═══════════════════════════════════════════════════════════ */

/* ─── Keyword Search Input ─── */
.novus-filter-search-input {
    width: 100%;
    padding: 8px 12px;
    background: #06111f;
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: var(--novus-radius);
    color: #e2e8f4;
    font-family: var(--novus-font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.novus-filter-search-input::placeholder {
    color: #3d5068;
}
.novus-filter-search-input:focus {
    border-color: #0066ff;
}

/* ─── Price Range Inputs ─── */
/* ─── Sub-category Links ─── */
.novus-filter-link {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    color: #6a85a0;
    text-decoration: none;
    transition: color 0.2s;
    display: block;
    padding: 2px 0;
}
.novus-filter-link:hover {
    color: #00d4ff;
}
.novus-filter-count {
    color: #3d5068;
    font-size: 11px;
}

/* ─── Modal (Flatsome compatibility) ─── */
.novus-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--novus-border-strong);
    border-radius: var(--novus-radius);
    color: var(--novus-red-bright);
    font-family: var(--novus-font-body);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    margin: 2px;
}
.novus-modal-btn:hover {
    background: rgba(200, 0, 0, 0.1);
    border-color: var(--novus-red);
}
/* Image variant: [modal_button id="..." image="..."] renders <img> instead of text.
   Reset Divi's global <button> chrome (padding/background/border) so the image IS
   the button; font-size:0 hides any stray text nodes inside the button. */
.novus-modal-btn-has-image {
    padding: 0;
    margin: 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}
.novus-modal-btn-has-image:hover {
    background: none;
    border-color: transparent;
    opacity: 0.85;
}
.novus-modal-btn-image {
    display: block;
    width: 149px;
    max-width: 100%;
    height: auto;
}
.novus-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    /* NOVUS-QUOTEFIX-001 (v52 / 1.9.36): 10000 sat UNDER Divi's fixed header
       (z-index 99999) — the header painted over the modal top. 100000 clears it. */
    z-index: 100000;
    padding: 24px;
}
.novus-modal-content {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border-strong);
    border-radius: var(--novus-radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 32px;
    /* NOVUS-QUOTEFIX-001 (v52 / 1.9.36): keep the close button out of the
       viewport-header zone on short screens. Top of the prescribed 24-32px
       range: flex centering nets ~half this value as extra top clearance. */
    margin-top: 32px;
    position: relative;
}
.novus-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--novus-text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.novus-modal-close:hover {
    color: var(--novus-red-bright);
}
.novus-modal-title {
    font-size: 1.2rem;
    margin-bottom: 16px;
    color: var(--novus-text-heading);
}
.novus-modal-body {
    color: var(--novus-text-body);
    line-height: 1.6;
}


/* Divi's style-static-cpt ships `body:not(.et-tb) #main-content .container { padding-top: 58px }`
   which stacks onto the breadcrumb 2rem + archive-wrap padding for a ~130px dead gap. Zero it on
   catalog archives (product pages don't use #main-content, so they're unaffected). */
body.tax-product_cat #main-content .container,
body.post-type-archive-product #main-content .container {
    padding-top: 0 !important;
}

/* ─── Category page body background (Figma #050a14 blue-black) ─── */
body.tax-product_cat,
body.post-type-archive-product {
    background: #050a14;
}
#left-area,
.tax-product_cat #main-content .container,
.post-type-archive-product #main-content .container {
    background: transparent;
}
.tax-product_cat #main-content,
.post-type-archive-product #main-content {
    background: transparent;
}

/* ─── Full-width container unchaining (Divi .container 80%/1121px + #left-area 79.125%) ─── */
body.tax-product_cat #main-content .container,
body.post-type-archive-product #main-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}
body.tax-product_cat #main-content #content-area,
body.post-type-archive-product #main-content #content-area {
    padding: 0 !important;
    margin: 0 !important;
}
body.tax-product_cat #main-content #left-area,
body.post-type-archive-product #main-content #left-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* ─── Category Page Layout (Figma: no hero, sidebar + grid) ─── */
.novus-archive-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* Screen-reader-only page title (visual design has none) */
.novus-archive-seo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.novus-shop-notices {
    min-height: 0;
}
.novus-shop-notices .woocommerce-notices-wrapper:empty {
    display: none;
}
.novus-shop-notices .woocommerce-ordering {
    margin: 0 0 16px;
}

.novus-archive-layout {
    display: grid;
    grid-template-columns: 224px 1fr;
    gap: 32px;
    align-items: start;
}

/* ─── Filter Sidebar Panel ─── */
.novus-filter-sidebar {
    position: sticky;
    top: 96px;
    background: #0c1526;
    border: 1px solid rgba(0, 180, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}
.novus-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.novus-filter-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a0b4cc;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.novus-filter-title svg {
    color: #0066ff;
}
.novus-filter-clear {
    background: none;
    border: none;
    color: #ff3b5c;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--novus-font-body);
    padding: 0;
}
.novus-filter-clear:hover {
    text-decoration: underline;
}

/* Mobile-only sheet close button (renders inside the sheet header). */
.novus-filter-close {
    display: none;
}

/* Filter groups */
.novus-filter-group {
    border-bottom: 1px solid rgba(0, 180, 255, 0.08);
    padding-bottom: 4px;
}
.novus-filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    background: none;
    border: none;
    color: #a0b4cc;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--novus-font-body);
}
.novus-filter-toggle svg {
    color: #0066ff;
    transition: transform 0.2s;
}
.novus-filter-group.collapsed .novus-filter-toggle svg {
    transform: rotate(-90deg);
}
.novus-filter-options {
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.novus-filter-group.collapsed .novus-filter-options {
    display: none;
}

/* Filter option rows (checkbox + mono label) */
.novus-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}
.novus-filter-checkbox,
.novus-spec-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.novus-filter-check {
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(0, 180, 255, 0.25);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.novus-filter-checkbox:checked + .novus-filter-check,
.novus-spec-checkbox:checked + .novus-filter-check {
    background: #0066ff;
    border-color: #0066ff;
}
.novus-filter-checkbox:checked + .novus-filter-check::after,
.novus-spec-checkbox:checked + .novus-filter-check::after {
    content: '';
    width: 4px;
    height: 7px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.novus-filter-label-text {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    color: #6a85a0;
    transition: color 0.2s;
}
.novus-filter-option:hover .novus-filter-label-text,
.novus-filter-option:hover > .novus-filter-link {
    color: #e2e8f4;
}
.novus-filter-checkbox:checked ~ .novus-filter-label-text,
.novus-spec-checkbox:checked ~ .novus-filter-label-text {
    color: #e2e8f4;
}

/* ─── Active Filter Chips (in-sidebar, Figma style) ─── */
.novus-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.novus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 102, 255, 0.18);
    border: 1px solid rgba(0, 102, 255, 0.35);
    border-radius: 100px;
    font-size: 11px;
    font-family: var(--novus-font-mono);
    color: #7aacff;
    cursor: pointer;
    transition: background 0.2s;
}
.novus-chip:hover {
    background: rgba(0, 102, 255, 0.28);
}
.novus-chip-close {
    font-size: 14px;
    line-height: 1;
    transition: opacity 0.3s ease;
}
.novus-chip:hover .novus-chip-close {
    opacity: 0.9;
}

/* ─── Product Grid (Figma: 3-col grid, gap 20px; 2-col tablet, 1-col mobile) ─── */
.novus-product-grid ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.novus-product-grid ul.products::before,
.novus-product-grid ul.products::after {
    display: none;
}
.novus-product-grid ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    list-style: none;
    display: flex;
    flex-direction: column;
}
.novus-product-grid ul.products li.product.first,
.novus-product-grid ul.products li.product.last {
    clear: none !important;
}

@media (max-width: 1100px) {
    .novus-product-grid ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .novus-product-grid ul.products {
        grid-template-columns: 1fr;
    }
}

/* ─── Product Card (Figma ProductCard: #0c1526 panel, blue hairline, cyan accents) ─── */
.novus-product-card {
    background: #0c1526;
    border: 1px solid rgba(0, 102, 255, 0.14);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.novus-product-card:hover {
    border-color: rgba(0, 102, 255, 0.38);
    box-shadow: 0 12px 32px rgba(0, 60, 180, 0.18);
    transform: translateY(-2px);
}

/* Card image */
.novus-card-image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    background: #0a1120;
    height: 180px;
    text-decoration: none !important;
}
.novus-card-image-bg {
    width: 100%;
    height: 100%;
}
/* Card image fit — absolute-fill into the 180px wrap. WC core `.woocommerce-page img {height:auto}`
   (0,1,1) beats a bare class (0,1,0) so the img rendered at natural ratio (308x369) and clipped.
   Same bug family as the product-page featured image fix — scope (0,2,0) + absolute-fill. */
/* Selector carries 5 classes (0,5,2) — WC grid rule `.woocommerce ul.products li.product a img`
   is (0,3,4) and was still winning the height war inside category grids. */
.novus-product-grid ul.products li.product .novus-card-image-wrap .novus-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: opacity 0.3s;
}
.novus-product-card:hover .novus-card-img {
    opacity: 0.9;
}
/* Decorative bottom-fade overlay on card thumbnails removed (NOVUS-THUMBGRAD-001, v48 / 1.9.32):
   rule + template div deleted together; paint-only element, no layout/JS dependency. */
.novus-card-model {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    background: rgba(0, 102, 255, 0.18);
    border: 1px solid rgba(0, 102, 255, 0.35);
    border-radius: 3px;
    font-family: var(--novus-font-mono);
    font-size: 10px;
    color: #00d4ff;
}

/* Card body */
.novus-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.novus-card-link {
    text-decoration: none !important;
}
.novus-card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #e2e8f4 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    transition: color 0.2s;
}
.novus-product-card:hover .novus-card-title {
    color: #7cc4ff !important;
}
.novus-card-desc {
    font-size: 13px;
    color: #6a85a0;
    margin: 0 !important;
    line-height: 1.5;
}

/* Spec chips */
.novus-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 16px;
}
.novus-spec-chip {
    padding: 2px 8px;
    background: rgba(0, 102, 255, 0.1);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 3px;
    font-family: var(--novus-font-mono);
    font-size: 11px;
    color: #00b3ff;
}

/* Card footer */
.novus-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
}
.novus-card-price {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    color: #6a85a0;
}
.novus-card-price del {
    opacity: 1;
}
.novus-card-price ins {
    text-decoration: none;
}
.novus-card-details {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #0066ff;
    text-decoration: none !important;
    transition: color 0.2s;
}
.novus-card-details:hover {
    color: #00d4ff;
}

/* No-image fallback */
.novus-card-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--novus-font-mono);
    font-size: 11px;
    color: #3d5068;
}

/* ─── Count line ("4 / 4 products") ─── */
.novus-count-line {
    font-family: var(--novus-font-mono);
    font-size: 13px;
    color: #6a85a0;
    margin: 0 0 24px;
}
.novus-count-shown {
    color: #00d4ff;
}

/* ─── Mobile Filter Toggle ─── */
.novus-mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius);
    color: var(--novus-text-heading);
    font-size: 14px;
    cursor: pointer;
    font-family: var(--novus-font-body);
}

@media (max-width: 768px) {
    .novus-archive-layout {
        grid-template-columns: 1fr;
    }
    .novus-filter-sidebar {
        position: relative;
        top: 0;
        display: none;
    }
    .novus-mobile-filter-btn {
        display: flex;
        margin-bottom: 16px;
    }
    /* The floating toggle is hidden while the sheet is open. Its old job — a
       reachable close control — is now the explicit ✕ button inside the sheet
       header (plus scrim tap + drag-down). This also frees 56px of sheet. */
    body.novus-mobile-filters-open .novus-mobile-filter-btn {
        display: none;
    }
    /* The open panel is a fixed bottom SHEET with its OWN internal scroll.
       It previously stayed in page flow (~2200px tall) while the body was
       scroll-locked — locking the page froze the panel too, trapping the
       user in an unusable dialog. Now the sheet is out of flow, sized to
       the viewport below the floating bar, and scrolls internally;
       overscroll-behavior stops the scroll from chaining into the locked
       page at the sheet's edges. */
    .novus-filter-sidebar.open {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* directly under the measured fixed header (JS sets the var at open) */
        top: var(--novus-header-h, 88px);
        z-index: 16;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-radius: 16px 16px 0 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        animation: novus-sheet-up 0.22s ease-out;
    }
    /* FILTER header stays pinned at the top of the scrolling sheet. On mobile
       it becomes the sheet's grab bar: drag handle centered, FILTER title on
       the left, big tappable ✕ on the right. */
    .novus-filter-sidebar.open .novus-filter-header {
        position: sticky;
        top: 0;
        background: #0c1526;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 10px 4px 12px;
        touch-action: none; /* drag-to-close owns touch on the bar */
    }
    /* centered drag handle pill */
    .novus-filter-sidebar.open .novus-filter-header::before {
        content: "";
        grid-column: 2;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(160, 180, 204, 0.35);
        justify-self: center;
    }
    .novus-filter-sidebar.open .novus-filter-title {
        grid-column: 1;
        justify-self: start;
    }
    .novus-filter-sidebar.open .novus-filter-clear {
        display: none;
    }
    /* ✕ close: the primary close affordance. 40px tap target, hairline border,
       sits in the right grid cell. */
    .novus-filter-sidebar.open .novus-filter-close {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 3;
        justify-self: end;
        width: 40px;
        height: 40px;
        padding: 0;
        background: rgba(0, 180, 255, 0.08);
        border: 1px solid rgba(0, 180, 255, 0.25);
        border-radius: 10px;
        color: #e2e8f4;
        cursor: pointer;
    }
    .novus-filter-sidebar.open .novus-filter-close:active {
        background: rgba(0, 180, 255, 0.2);
    }
    /* Sheet follows the finger while dragging the grab bar down; past the
       threshold JS dismisses, before it JS springs back. */
    .novus-filter-sidebar.open.novus-sheet-dragging {
        transition: none;
    }
    .novus-filter-sidebar.open {
        transition: transform 0.2s ease-out;
    }
    @keyframes novus-sheet-up {
        from { transform: translateY(10%); }
        to   { transform: translateY(0); }
    }
    /* Dark scrim over the page while the mobile panel is open,
       tapping it closes the panel. Rendered/removed by JS. */
    .novus-filter-scrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 15;
    }
}

/* ─── Single Product: Hero ─── */
.novus-product-wrap {
    max-width: var(--novus-max-width);
    margin: 0 auto;
    padding: 0 24px 64px;
}

.novus-product-hero {
    padding-top: 16px;
    padding-bottom: 40px;
}
.novus-product-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 980px) {
    .novus-product-hero-grid {
        grid-template-columns: 1fr;
    }
}

.novus-product-image-wrap {
    position: relative;
    border-radius: var(--novus-radius-lg);
    overflow: hidden;
}
.novus-product-image-frame {
    background: var(--novus-bg-secondary);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    overflow: hidden;
    height: 420px;
}
/* (0,2,0) scoping required: WC core `.woocommerce img{height:auto}` is (0,1,1)
   and beats a bare class on product pages (body carries the `woocommerce` class). */
.novus-product-image-frame .novus-product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.novus-product-image-frame:hover .novus-product-img {
    opacity: 0.9;
}
.novus-product-model-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 4px 12px;
    background: rgba(8, 0, 0, 0.85);
    border: 1px solid var(--novus-border);
    border-radius: 4px;
    backdrop-filter: blur(8px);
    font-family: var(--novus-font-mono);
    font-size: 12px;
    color: var(--novus-red-bright);
}

.novus-breadcrumb {
    padding-top: 2rem;
    font-family: var(--novus-font-mono);
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.novus-breadcrumb a {
    color: var(--novus-text-muted);
    text-decoration: none;
}
.novus-breadcrumb a:hover {
    color: var(--novus-red-bright);
}
.novus-breadcrumb .sep {
    color: var(--novus-text-muted);
    margin: 0 6px;
}
.novus-breadcrumb .current {
    color: var(--novus-red-bright);
}

/* Category/archive breadcrumb: Figma CategoryPage blues (vars are red outside single-product) */
body.tax-product_cat .novus-breadcrumb a,
body.post-type-archive-product .novus-breadcrumb a {
    color: #6a85a0;
}
body.tax-product_cat .novus-breadcrumb a:hover,
body.post-type-archive-product .novus-breadcrumb a:hover {
    color: #00d4ff;
}
body.tax-product_cat .novus-breadcrumb .sep,
body.post-type-archive-product .novus-breadcrumb .sep {
    color: #6a85a0;
}
body.tax-product_cat .novus-breadcrumb .current,
body.post-type-archive-product .novus-breadcrumb .current {
    color: #00d4ff;
}

/* Product info */
.novus-product-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    letter-spacing: -0.025em;
    margin: 8px 0 12px !important;
}
.novus-product-short-desc {
    color: var(--novus-text-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Specs grid */
.novus-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 32px;
}
.novus-spec-item {
    padding: 10px 12px;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius);
}
.novus-spec-key {
    font-family: var(--novus-font-mono);
    font-size: 10px;
    text-transform: capitalize;
    color: var(--novus-text-faint);
    margin-bottom: 2px;
}
.novus-spec-val {
    font-family: var(--novus-font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--novus-red-bright);
}

/* Action buttons */
.novus-product-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.novus-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--novus-radius);
    font-family: var(--novus-font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.novus-btn-primary {
    background: var(--novus-red);
    color: #fff;
}
.novus-btn-primary:hover {
    background: var(--novus-red-bright);
    color: #fff;
    box-shadow: 0 0 24px rgba(200, 0, 0, 0.3);
}
.novus-btn-ghost {
    background: transparent;
    border: 1px solid var(--novus-border-strong);
    color: var(--novus-red-bright);
}
.novus-btn-ghost:hover {
    background: rgba(200, 0, 0, 0.06);
}
.novus-btn-outline {
    background: transparent;
    border: 1px solid var(--novus-border-strong);
    color: var(--novus-red);
}
.novus-btn-outline:hover {
    background: rgba(200, 0, 0, 0.08);
}
.novus-btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--novus-red), var(--novus-red-bright));
    color: #fff;
    padding: 16px;
    font-size: 16px;
}
.novus-btn-submit:hover {
    box-shadow: 0 0 40px rgba(200, 0, 0, 0.4);
}

/* ─── Quote + Engineer Modals ─── */
.novus-modal-overlay .novus-quote-form {
    margin-top: 20px;
}
/* Success state inside modal (form is hidden on submit; block is a
   sibling of the form since NOVUS-QUOTE-SUCCESS-001 v64 / 1.9.48) */
.novus-modal-overlay .novus-quote-success {
    text-align: center;
    padding: 32px 0 8px;
}
.novus-modal-overlay .novus-quote-success h3 {
    color: var(--novus-text-heading);
    font-size: 20px;
    margin: 12px 0 8px;
}
/* Engineer modal: wider for the Forminator form */
.novus-engineer-modal-content {
    max-width: 640px;
}
.novus-engineer-form {
    margin-top: 12px;
}
/* Forminator form dark-theme alignment (scoped to our modal) */
#novus-engineer-modal .forminator-ui {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    color: var(--novus-text-body);
}
#novus-engineer-modal .forminator-ui .forminator-label {
    color: var(--novus-text-muted);
    font-family: inherit;
}
#novus-engineer-modal .forminator-ui .forminator-input,
#novus-engineer-modal .forminator-ui .forminator-textarea {
    background: rgba(200, 0, 0, 0.04);
    border: 1px solid var(--novus-border) !important;
    border-radius: 4px;
    color: var(--novus-text-heading);
}
#novus-engineer-modal .forminator-ui .forminator-input:focus,
#novus-engineer-modal .forminator-ui .forminator-textarea:focus {
    border-color: var(--novus-red) !important;
    box-shadow: none;
}
#novus-engineer-modal .forminator-ui .forminator-button,
#novus-engineer-modal .forminator-ui .forminator-button-submit {
    background: linear-gradient(135deg, var(--novus-red), var(--novus-red-bright));
    border: none;
    color: #fff;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    text-shadow: none;
}
#novus-engineer-modal .forminator-ui .forminator-button:hover {
    box-shadow: 0 0 40px rgba(200, 0, 0, 0.4);
}

/* ─── Forminator inside generic [modal] overlays: default dark skin ───
   The #novus-engineer-modal block above targets the product-page modal ID
   only. Any other [modal]-wrapped Forminator form (e.g. contact-us) renders
   Forminator's white "enclosed" panel on our dark overlay. Mirror the
   engineer palette for all of them. !important is REQUIRED: Forminator
   prints per-form module CSS with ID-qualified selectors (1,3,0) that beat
   plain class rules, and its "enclosed" panel background comes from the
   base stylesheet. */
.novus-modal-overlay .forminator-ui {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    color: var(--novus-text-body);
}
.novus-modal-overlay .forminator-ui .forminator-label {
    color: var(--novus-text-muted) !important;
    font-family: inherit;
}
.novus-modal-overlay .forminator-ui .forminator-input,
.novus-modal-overlay .forminator-ui .forminator-textarea {
    background: rgba(200, 0, 0, 0.04) !important;
    border: 1px solid var(--novus-border) !important;
    border-radius: 4px;
    color: var(--novus-text-heading) !important;
}
.novus-modal-overlay .forminator-ui .forminator-input:focus,
.novus-modal-overlay .forminator-ui .forminator-textarea:focus {
    border-color: var(--novus-red) !important;
    box-shadow: none;
}
.novus-modal-overlay .forminator-ui .forminator-button,
.novus-modal-overlay .forminator-ui .forminator-button-submit {
    background: linear-gradient(135deg, var(--novus-red), var(--novus-red-bright)) !important;
    border: none;
    color: #fff;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    text-shadow: none;
}
.novus-modal-overlay .forminator-ui .forminator-button:hover,
.novus-modal-overlay .forminator-ui .forminator-button-submit:hover {
    background: linear-gradient(135deg, var(--novus-red), var(--novus-red-bright)) !important;
    box-shadow: 0 0 40px rgba(200, 0, 0, 0.4);
}

/* ─── Tabbed Content ─── */
.novus-product-tabs-section {
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    overflow: hidden;
    margin-bottom: 0;
}
.novus-tabs-nav {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--novus-border);
    -webkit-overflow-scrolling: touch;
}
.novus-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--novus-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: var(--novus-font-body);
}
.novus-tab:hover {
    color: var(--novus-text-heading);
}
.novus-tab.active {
    color: var(--novus-red-bright);
    border-bottom-color: var(--novus-red-bright);
    background: rgba(200, 0, 0, 0.04);
}
.novus-tab-content {
    padding: 24px;
}
.novus-tab-panel {
    display: none;
}
.novus-tab-panel.active {
    display: block;
}
.novus-tab-heading {
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--novus-text-muted) !important;
    margin-bottom: 20px !important;
}

/* Full product description — Divi's global reset (margin/padding:0, list-style:none)
   flattens body HTML; restore readable block typography inside this container only. */
.novus-full-description {
    margin-top: 40px;
}
.novus-full-description h2,
.novus-full-description h3,
.novus-full-description h4 {
    font-size: 18px;
    color: var(--novus-text-heading);
    margin: 28px 0 12px;
}
.novus-full-description h2:first-child,
.novus-full-description h3:first-child,
.novus-full-description h4:first-child {
    margin-top: 0;
}
.novus-full-description p {
    color: var(--novus-text-muted);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 14px;
}
.novus-full-description ul,
.novus-full-description ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.novus-full-description ul {
    list-style: none;
}
.novus-full-description ul > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--novus-text-muted);
    font-size: 15px;
    line-height: 1.65;
}
.novus-full-description ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--novus-red-bright);
}
.novus-full-description ol {
    list-style: decimal;
    list-style-position: outside;
}
.novus-full-description ol > li {
    margin-bottom: 10px;
    padding-left: 4px;
    color: var(--novus-text-muted);
    font-size: 15px;
    line-height: 1.7;
}
.novus-full-description a {
    color: var(--novus-red-bright);
}

/* Features list */
.novus-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 600px) {
    .novus-features-list {
        grid-template-columns: 1fr;
    }
}
.novus-feature-item {
    display: flex;
    align-items: start;
    gap: 12px;
}
.novus-feature-check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--novus-red-tint);
    border: 1px solid var(--novus-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--novus-red);
}

/* Downloads list */
.novus-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.novus-download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--novus-bg-secondary);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius);
}
.novus-download-icon {
    color: var(--novus-red-bright);
    margin-right: 12px;
}
.novus-download-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--novus-text-heading);
    margin: 0 !important;
}
.novus-download-meta {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    color: var(--novus-text-faint);
    margin: 0 !important;
}

/* Video embed */
.novus-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--novus-radius);
    max-width: 800px;
}
.novus-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ─── Quote Form ─── */
.novus-quote-section {
    padding: 64px 0;
    background: var(--novus-bg-secondary);
    border-top: 1px solid var(--novus-border);
}
.novus-quote-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}
.novus-quote-title {
    font-size: 24px !important;
    margin: 4px 0 8px !important;
}
.novus-quote-desc {
    color: var(--novus-text-muted);
    font-size: 14px;
    margin-bottom: 32px !important;
}

.novus-form-section {
    padding: 24px;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    margin-bottom: 20px;
}
.novus-form-section-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--novus-text-muted);
    margin-bottom: 16px;
}
.novus-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .novus-form-grid {
        grid-template-columns: 1fr;
    }
}
.novus-form-field {
    margin-bottom: 16px;
}
.novus-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--novus-text-muted);
    margin-bottom: 6px;
}
.novus-form-field .req {
    color: var(--novus-red-bright);
}
.novus-form-field input[type="text"],
.novus-form-field input[type="email"],
.novus-form-field input[type="tel"],
.novus-form-field select,
.novus-form-field textarea {
    width: 100%;
    background: var(--novus-bg-secondary);
    border: 1px solid var(--novus-border);
    border-radius: 4px;
    color: var(--novus-text-heading);
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--novus-font-body);
    outline: none;
    transition: border-color 0.2s;
}
.novus-form-field input:focus,
.novus-form-field select:focus,
.novus-form-field textarea:focus {
    border-color: var(--novus-red-bright);
}
.novus-form-field input::placeholder,
.novus-form-field textarea::placeholder {
    color: var(--novus-text-faint);
}
.novus-form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23b08080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.novus-form-field textarea {
    resize: vertical;
    font-family: inherit;
}

/* Checkbox row */
.novus-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-top: 8px;
}
.novus-custom-checkbox {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.novus-custom-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.novus-check-mark {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--novus-border-strong);
    border-radius: 3px;
    transition: all 0.2s;
}
.novus-custom-checkbox input:checked + .novus-check-mark {
    background: var(--novus-red);
    border-color: var(--novus-red);
}
.novus-custom-checkbox input:checked + .novus-check-mark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* Success state */
.novus-quote-success {
    text-align: center;
    padding: 48px;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
}
.novus-success-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid #10b981;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.novus-quote-success h3 {
    color: var(--novus-text-heading) !important;
    margin-bottom: 8px !important;
}
.novus-quote-success p {
    color: var(--novus-text-muted) !important;
}

/* ─── Pagination ─── */
.novus-archive-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}
.novus-archive-pagination .woocommerce-pagination ul {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.novus-archive-pagination .page-numbers {
    padding: 8px 14px;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius);
    color: var(--novus-text-muted);
    font-size: 13px;
    font-family: var(--novus-font-mono);
    text-decoration: none !important;
    transition: all 0.2s;
}
.novus-archive-pagination .page-numbers.current {
    background: var(--novus-red);
    border-color: var(--novus-red);
    color: #fff;
}
.novus-archive-pagination .page-numbers:hover:not(.current) {
    border-color: var(--novus-border-strong);
    color: var(--novus-text-heading);
}

/* ─── No results ─── */
.novus-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
}
.novus-no-results p {
    color: var(--novus-text-muted);
    margin-bottom: 16px !important;
}

/* ─── Related Products ─── */
.novus-related-section {
    padding-top: 40px;
}
.novus-related-section .related > h2 {
    font-size: 20px !important;
    color: var(--novus-text-heading) !important;
    margin-bottom: 24px !important;
}

/* ─── WooCommerce notices ─── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--novus-bg-card) !important;
    border: 1px solid var(--novus-border-strong) !important;
    color: var(--novus-text-heading) !important;
    border-radius: var(--novus-radius) !important;
}
.woocommerce-message a,
.woocommerce-info a {
    color: var(--novus-red-bright) !important;
}


/* ═════════════════════════════════════════════════════════════
   Product video (Figma ProductPage): hero play overlay + modal
   ═════════════════════════════════════════════════════════════ */
.novus-product-image-frame { position: relative; }
.novus-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.novus-video-overlay-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 32px rgba(0, 102, 255, 0.5);
    color: #fff;
    transition: transform 0.2s ease, background 0.2s ease;
}
.novus-video-overlay-btn svg { margin-left: 3px; }
.novus-video-overlay:hover .novus-video-overlay-btn {
    background: rgba(0, 102, 255, 0.9);
    transform: scale(1.08);
}

/* Video modal — same overlay pattern as quote/engineer modals */
.novus-video-modal .novus-video-modal-box {
    position: relative;
    width: 100%;
    max-width: 900px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 180, 255, 0.2);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
    background: #050a14;
}
.novus-video-modal .novus-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 10, 20, 0.8);
    border: 1px solid rgba(0, 180, 255, 0.2);
    color: #a0b4cc;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.novus-video-modal .novus-video-modal-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.novus-video-modal iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ─── Tutorials tab (Figma card list) ─── */
.novus-tutorial-playbox {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 255, 0.12);
    border: 1px solid rgba(0, 102, 255, 0.2);
    color: var(--novus-red);
}
.novus-tutorial-playbox svg { margin-left: 2px; }
.novus-tutorial-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.novus-tutorial-duration {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    color: var(--novus-text-faint);
}
.novus-tutorial-level {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--novus-font-mono);
    font-size: 10px;
    line-height: 1.4;
}
.novus-tutorial-level.level-beginner {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.novus-tutorial-level.level-intermediate {
    background: rgba(0, 102, 255, 0.12);
    color: #7aacff;
}
.novus-tutorial-level.level-advanced {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}
.novus-tab-empty {
    font-size: 14px;
    color: var(--novus-text-faint);
}
.novus-download-icon-cyan { color: var(--novus-red-bright); }

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT — Figma ProductPage blue design language
   (page #050a14, panels #0c1526, accents #0066ff/#00d4ff,
   text #e2e8f4/#a0b4cc/#6a85a0/#3d5068, borders rgba(0,180,255,.1))
   Scoped to body.single-product so the red site chrome (nav/footer)
   keeps its own palette.
   ══════════════════════════════════════════════════════════════ */
body.single-product {
    --novus-bg-primary:    #050a14;
    --novus-bg-secondary:  #060f1e;
    --novus-bg-card:       #0c1526;
    --novus-bg-section:    #050a14;

    --novus-red:           #0066ff;
    --novus-red-bright:    #00d4ff;
    --novus-red-dim:       #6a85a0;
    --novus-red-dark:      #3d5068;
    --novus-red-tint:      rgba(0, 102, 255, 0.08);

    --novus-text-heading:  #e2e8f4;
    --novus-text-body:     #a0b4cc;
    --novus-text-muted:    #6a85a0;
    --novus-text-faint:    #3d5068;
    --novus-text-link:     #0066ff;
    --novus-text-link-hover: #00d4ff;

    --novus-border:        rgba(0, 180, 255, 0.1);
    --novus-border-strong: rgba(0, 180, 255, 0.35);
    --novus-border-faint:  rgba(0, 180, 255, 0.08);

    background: #050a14;
}
body.single-product #main-content,
body.single-product #main-content .container,
body.single-product #content-area,
body.single-product #left-area {
    background: transparent;
}

/* Active tab: cyan underline on faint cyan wash (Figma tab nav) */
body.single-product .novus-tab.active {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
    background: rgba(0, 212, 255, 0.04);
}

/* Hero image frame + badge (Figma: rounded-xl, badge rgba(5,10,20,.85)) */
body.single-product .novus-product-model-badge {
    background: rgba(5, 10, 20, 0.85);
    border-color: rgba(0, 180, 255, 0.2);
}

/* Feature check pills (Figma: rgba(0,102,255,.15) circle + #0066ff check) */
body.single-product .novus-feature-check {
    background: rgba(0, 102, 255, 0.15);
    border-color: rgba(0, 102, 255, 0.3);
}

/* Quote form panel + inputs (Figma: inputs #060f1e, focus rgba(0,212,255,.5)) */
body.single-product .novus-quote-form input,
body.single-product .novus-quote-form textarea,
body.single-product .novus-quote-form select {
    background: #060f1e;
    border-color: rgba(0, 180, 255, 0.15);
}
body.single-product .novus-quote-form input:focus,
body.single-product .novus-quote-form textarea:focus,
body.single-product .novus-quote-form select:focus {
    border-color: rgba(0, 212, 255, 0.5);
}
body.single-product .novus-quote-form .req {
    color: #ff3b5c;
}

/* ─── Related products carousel (Figma: w-64 cards, overflow-x) ─── */
.novus-related-head {
    margin-bottom: 20px;
}
.novus-related-head h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--novus-text-heading);
    letter-spacing: -0.01em;
    margin: 0;
}
.novus-related-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.novus-related-track::-webkit-scrollbar {
    display: none;
}
.novus-related-card {
    flex: 0 0 256px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.novus-related-card:hover {
    border-color: rgba(0, 180, 255, 0.3);
}
.novus-related-img {
    height: 144px;
    overflow: hidden;
}
.novus-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}
.novus-related-card:hover .novus-related-img img {
    opacity: 0.9;
}
.novus-related-body {
    padding: 16px;
}
.novus-related-model {
    display: block;
    font-family: var(--novus-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--novus-red-bright);
}
.novus-related-body h3 {
    font-size: 14px;
    line-height: 1.4;
    color: var(--novus-text-heading);
    margin: 6px 0 8px;
}
.novus-related-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.novus-related-chips span {
    font-family: var(--novus-font-mono);
    font-size: 10px;
    color: var(--novus-text-muted);
}


/* ═══ Mobile Tabs Overflow — scroll affordance (fig-novus-tabs-001, child 1.9.15) ═══
   The tab bar is a single Figma row. At narrow widths .novus-tabs-nav keeps
   nowrap + overflow-x:auto, but overflowed tabs were silently clipped: overlay
   scrollbars hide the bar's own scrollbar and most desktop pointers have no
   horizontal wheel, so later tabs looked absent (Tutorials unreachable at
   375px on 3-tab products). Fix keeps the single row and makes the overflow
   DISCOVERABLE: gradient edge fades (CSS-only, toggled per overflow state by
   JS) + explicit prev/next arrows at ≤600px, 44px tap targets. Desktop (>600px)
   renders exactly as before — arrows don't exist there, and both fades release
   once tabs fit. The wrapper div is injected by JS; no-JS keeps native swipe. */

.novus-tabs-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--novus-red-bright) transparent;
}
.novus-tabs-nav::-webkit-scrollbar {
    height: 4px;
}
.novus-tabs-nav::-webkit-scrollbar-thumb {
    background: var(--novus-red-bright);
    border-radius: 2px;
}
.novus-tabs-nav::-webkit-scrollbar-track {
    background: transparent;
}

.novus-tabs-nav-wrap {
    position: relative;
}
/* Edge fades paint only while that edge actually hides tabs (JS-toggled). */
.novus-tabs-nav-wrap.novus-tabs-fade-left::before,
.novus-tabs-nav-wrap.novus-tabs-fade-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 1px; /* stop above the nav's 1px bottom border */
    width: 48px;
    pointer-events: none;
    z-index: 1;
}
.novus-tabs-nav-wrap.novus-tabs-fade-left::before {
    left: 0;
    background: linear-gradient(to right, #080000 20%, rgba(8, 0, 0, 0));
}
.novus-tabs-nav-wrap.novus-tabs-fade-right::after {
    right: 0;
    background: linear-gradient(to left, #080000 20%, rgba(8, 0, 0, 0));
}

.novus-tabs-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--novus-border);
    border-radius: 50%;
    background: rgba(8, 0, 0, 0.88);
    color: var(--novus-text-heading);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    transition: background 0.15s ease;
}
.novus-tabs-arrow:hover {
    background: rgba(200, 0, 0, 0.25);
}
.novus-tabs-arrow.novus-tabs-arrow-prev {
    left: 8px;
}
.novus-tabs-arrow.novus-tabs-arrow-next {
    right: 8px;
}

@media (max-width: 600px) {
    .novus-tabs-arrow.is-visible {
        display: flex;
    }
}

/* ─── Contact page: chat + engineer buttons equal width + aligned (NOVUS-CONTACTBTN-001) ─── */
.et_pb_code_0, .et_pb_code_2 { padding-right: 0 !important; }
#lhnchatimg,
.novus-modal-btn-image {
	width: 149px !important;
	height: auto !important;
	max-width: 100%;
}

/* ─── Product page price line (NOVUS-PRICEOPTIN-001) ───
   Template renders <p class="novus-product-price"> only when the product has
   a price (get_price_html() non-empty); otherwise nothing renders. Tokens
   mirror the card price treatment (.novus-card-price, mono 12px #6a85a0).
   NOVUS-PRICESIZE-001 (v54 / 1.9.38): displayed prices render noticeably
   larger — 1.5em on the product page, 1.25em on category cards. Templates
   tag real prices with `has-price`, so the card "Inquire" placeholder keeps
   its original 12px size. Extra top/bottom margin keeps the price line from
   crowding the product title above. Color/weight/del/ins treatment is
   unchanged (mono, #6a85a0, del visible, ins plain). */
.novus-product-price {
    font-family: var(--novus-font-mono);
    font-size: 1.5em;
    color: #6a85a0;
    margin: 6px 0 14px;
}
.novus-product-price del {
    opacity: 1;
}
.novus-product-price ins {
    text-decoration: none;
}
.novus-card-price.has-price {
    font-size: 1.25em;
}

/* ═══════════════════════════════════════════════════════════
   NOVUS-QUOTE-SUCCESS-001 (v64 / 1.9.48) — Spec table styles.

   The NR2410-OG product description carries a pasted CSS block that was
   the styling mechanism for its div.spec-table-container > table.novus-
   spec-table markup; WP rendered the paste as literal paragraphs (neither
   theme registers these classes). Rules below are paste-verbatim (live
   product page capture, 2026-10-28), so the table renders styled once
   the paste is deleted from the description. Original paste styling
   intent preserved — including the container font-family stack.
   ═══════════════════════════════════════════════════════════ */

/* Container for the table to ensure it doesn't overflow its parent */
.spec-table-container {
    width: 100%;
    overflow-x: auto; /* Adds scroll on very small screens if needed */
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Base Table Styles */
.novus-spec-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Header Styles */
.novus-spec-table th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 700;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #ddd;
}

/* Cell Styles */
.novus-spec-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

/* Highlight the first column (Specification Labels) */
.novus-spec-table td:first-child {
    font-weight: 600;
    color: #2c3e50;
    width: 40%; /* Keeps the label column from getting too squished */
    min-width: 140px; /* Prevents breaking on tiny screens */
}

/* Alternating Row Colors for Readability */
.novus-spec-table tr:nth-child(even) {
    background-color: #fcfcfc;
}

/* Hover Effect */
.novus-spec-table tr:hover {
    background-color: #f1f1f1;
}

/* Mobile Responsiveness */
@media screen and (max-width: 600px) {
    .novus-spec-table th,
    .novus-spec-table td {
        padding: 10px;
        font-size: 14px;
    }

    /* On very small screens, you might want the width to auto-adjust */
    .novus-spec-table td:first-child {
        width: auto;
    }
}