/* ═══════════════════════════════════════════════════════════
   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);
}
.novus-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    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;
    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;
}
.novus-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, #0c1526 100%);
    pointer-events: none;
}
.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 emptied on submit) */
.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);
}

/* ─── 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);
}