/* OutletIndex Design System - Consolidated Production Bundle */
@layer tokens, layout, components;

@layer tokens {
/* -------------------------------------------------------------------------
 * LOCAL SELF-HOSTED FONTS (Zero 3rd-Party Dependencies)
 * ------------------------------------------------------------------------- */
/* Inter (Latin) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter (Latin Extended) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat (Latin) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat (Latin Extended) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
            --bg-base: #f8fafc;
            --bg-card: #ffffff;
            --bg-card-hover: #f1f5f9;
            --border-card: #e2e8f0;
            --border-glow: rgba(2, 132, 199, 0.4);
            --primary: #0284c7;
            --primary-rgb: 2, 132, 199;
            --accent: #6366f1;
            --emerald: #059669;
            --emerald-bg: #ecfdf5;
            --amber: #d97706;
            --amber-bg: #fffbeb;
            --rose: #e11d48;
            --text-main: #0f172a;
            --text-muted: #475569;
            --text-dim: #64748b;
            --sidebar-w: 290px;
        }

        [data-theme="dark"] {
            --bg-base: #0b0f19;
            --bg-card: #151e2e;
            --bg-card-hover: #1e2a3f;
            --border-card: #223147;
            --border-glow: rgba(56, 189, 248, 0.35);
            --primary: #38bdf8;
            --primary-rgb: 56, 189, 248;
            --accent: #818cf8;
            --emerald: #10b981;
            --emerald-bg: rgba(16, 185, 129, 0.15);
            --amber: #f59e0b;
            --amber-bg: rgba(245, 158, 11, 0.15);
            --rose: #f43f5e;
            --text-main: #ffffff;
            --text-muted: #cbd5e1;
            --text-dim: #94a3b8;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        body {
            font-weight: 475;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            background-color: var(--bg-base);
            color: var(--text-main);
            min-height: 100vh;
            padding: 24px;
            overflow-x: clip;
            background-image: 
                radial-gradient(circle at 10% 10%, rgba(2, 132, 199, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 90% 90%, rgba(99, 102, 241, 0.05) 0%, transparent 40%);
            background-attachment: fixed;
            transition: background-color 0.25s ease, color 0.25s ease;
        }

        [data-theme="dark"] body {
            background-image: 
                radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.07) 0%, transparent 45%),
                radial-gradient(circle at 90% 90%, rgba(129, 140, 248, 0.06) 0%, transparent 45%);
        }

        .container {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }


}

@layer layout {
        /* Header Bar */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-card);
        }

        .brand-cluster {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .brand-title {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            line-height: 1.1;
        }

        .brand-name-group {
            display: inline-flex;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
        }

        .brand-domain {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            line-height: 1.1;
        }

        .brand-title .name {
            font-size: 26px;
            font-weight: 900;
            color: var(--text-main);
            letter-spacing: -0.5px;
            transition: color 0.2s ease;
        }

        .brand-title .tld {
            font-size: 18px;
            font-weight: 800;
            color: #b91c1c;
            transition: color 0.2s ease;
        }

        [data-theme="dark"] .brand-title .tld {
            color: #ef4444;
        }

        /* Option 7: Master Site Name 3D Rocker Switch */
        .brand-site-rocker-toggle {
            display: inline-flex;
            align-items: center;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            perspective: 450px;
            text-align: left;
            user-select: none;
        }

        .brand-site-rocker-toggle:focus-visible .site-rocker-bezel {
            outline: 2px solid #10b981;
            outline-offset: 3px;
        }

        .site-rocker-bezel {
            display: inline-flex;
            align-items: stretch;
            padding: 3.5px 4.5px;
            border-radius: 9px;
            background: linear-gradient(180deg, #374151 0%, #1f2937 20%, #111827 80%, #030712 100%);
            border: 1.5px solid #4b5563;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
        }

        .brand-site-rocker-toggle:hover .site-rocker-bezel {
            transform: scale(1.03);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
        }

        .brand-site-rocker-toggle:active .site-rocker-bezel {
            transform: scale(0.98);
        }

        .site-rocker-well {
            display: inline-flex;
            align-items: stretch;
            padding: 2px;
            border-radius: 7px;
            background: #030712;
            border: 1px solid #000000;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.95);
        }

        .site-rocker-actuator {
            display: inline-flex;
            align-items: stretch;
            border-radius: 5px;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 420px;
        }

        .site-paddle-outlet {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 12px 3px 10px;
            font-size: 22px;
            font-weight: 900;
            letter-spacing: -0.4px;
            color: #ffffff;
            border-radius: 4px 0 0 4px;
            position: relative;
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.2, 0.9, 0.35, 1);
        }

        .site-paddle-pivot {
            width: 2.5px;
            background: #000000;
            flex-shrink: 0;
            box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
            position: relative;
            z-index: 3;
        }

        .site-paddle-index {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 12px 3px 10px;
            font-size: 22px;
            font-weight: 900;
            letter-spacing: -0.4px;
            color: #ffffff;
            border-radius: 0 4px 4px 0;
            position: relative;
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.2, 0.9, 0.35, 1);
        }

        .paddle-symbol-o {
            display: inline-flex;
            width: 8.5px;
            height: 8.5px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            opacity: 0.85;
            transition: all 0.2s ease;
            margin-right: 2px;
        }

        .paddle-symbol-i {
            display: inline-flex;
            width: 2.5px;
            height: 9.5px;
            border-radius: 1px;
            background-color: #ffffff;
            opacity: 0.85;
            transition: all 0.2s ease;
            margin-right: 2px;
        }

        /* Light Mode / Switch ON: Index Green Lit, Outlet Red Dormant */
        .brand-site-rocker-toggle.is-on .site-paddle-outlet {
            background: linear-gradient(160deg, #991b1b 0%, #7f1d1d 50%, #450a0a 100%);
            color: rgba(255, 255, 255, 0.75);
            transform: translateZ(3px) rotateY(-5deg);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        }

        .brand-site-rocker-toggle.is-on .paddle-symbol-o {
            opacity: 0.55;
            box-shadow: none;
        }

        .brand-site-rocker-toggle.is-on .site-paddle-index {
            background: linear-gradient(160deg, #34d399 0%, #10b981 40%, #059669 80%, #024e35 100%);
            color: #ffffff;
            transform: translateZ(-4px) rotateY(-11deg);
            box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 16px rgba(16, 185, 129, 0.85);
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        .brand-site-rocker-toggle.is-on .paddle-symbol-i {
            opacity: 1;
            box-shadow: 0 0 6px rgba(52, 211, 153, 0.9);
        }

        /* Dark Mode / Switch OFF: Outlet Red Lit, Index Green Dormant */
        .brand-site-rocker-toggle.is-off .site-paddle-outlet {
            background: linear-gradient(160deg, #ef4444 0%, #dc2626 40%, #991b1b 80%, #450a0a 100%);
            color: #ffffff;
            transform: translateZ(-4px) rotateY(11deg);
            box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 18px rgba(239, 68, 68, 0.9);
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        .brand-site-rocker-toggle.is-off .paddle-symbol-o {
            opacity: 1;
            box-shadow: 0 0 6px rgba(239, 68, 68, 0.9);
        }

        .brand-site-rocker-toggle.is-off .site-paddle-index {
            background: linear-gradient(160deg, #059669 0%, #047857 50%, #022c22 100%);
            color: rgba(255, 255, 255, 0.75);
            transform: translateZ(3px) rotateY(5deg);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        }

        .brand-site-rocker-toggle.is-off .paddle-symbol-i {
            opacity: 0.55;
            box-shadow: none;
        }

        /* Classic Hyperlink Blue .com Home Link */
        .tld-blue-classic {
            font-size: 20px;
            font-weight: 800;
            color: #0284c7;
            text-decoration: none;
            margin-left: 5px;
            padding: 2px 3px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            transition: color 0.18s ease, transform 0.18s ease;
        }

        .tld-blue-classic:hover {
            color: #0369a1;
            text-decoration: underline;
            text-underline-offset: 3px;
            transform: translateY(-1px);
        }

        [data-theme="dark"] .tld-blue-classic {
            color: #38bdf8;
            text-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
        }

        [data-theme="dark"] .tld-blue-classic:hover {
            color: #7dd3fc;
        }

        /* Option 1: Dual-Stripe Rocker Baseline Runner */
        .rocker-runner-track {
            display: flex;
            align-items: center;
            width: 100%;
            height: 3.5px;
            border-radius: 9999px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.08);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
            position: relative;
        }

        [data-theme="dark"] .rocker-runner-track {
            background: rgba(0, 0, 0, 0.45);
        }

        .rocker-segment-red {
            height: 100%;
            flex: 0 0 46%; /* spans directly under 'Outlet' */
            border-radius: 9999px 0 0 9999px;
            background: #991b1b;
            opacity: 0.35;
            transition: all 0.2s ease;
        }

        .rocker-pivot-notch {
            width: 2px;
            height: 100%;
            background: #000000;
            flex-shrink: 0;
        }

        .rocker-segment-green {
            height: 100%;
            flex: 1; /* spans directly under 'Index.com' */
            border-radius: 0 9999px 9999px 0;
            background: #059669;
            opacity: 1;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.75);
            transition: all 0.2s ease;
        }

        /* Dark Theme: Red Segment is Lit, Green Segment is Dormant */
        [data-theme="dark"] .rocker-segment-red {
            background: #ef4444;
            opacity: 1;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
        }

        [data-theme="dark"] .rocker-segment-green {
            background: #047857;
            opacity: 0.35;
            box-shadow: none;
        }

        .badge-store-soon {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            align-self: center;
            margin-left: 10px;
            padding: 4px 14px;
            color: #854d0e;
            background: #fef08a;
            border: 1px solid #facc15;
            border-radius: 12px;
            line-height: 1.25;
            white-space: nowrap;
            letter-spacing: 0.1px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .badge-store-soon .pill-line {
            display: block;
            white-space: nowrap;
        }

        .badge-store-soon .pill-line-1 {
            font-size: 11px;
            font-weight: 700;
            color: #854d0e;
            letter-spacing: 0.1px;
        }

        .badge-store-soon .pill-line-1 .pill-accent {
            color: #b91c1c;
            font-weight: 800;
        }

        .badge-store-soon .pill-line-2 {
            font-size: 10px;
            font-weight: 600;
            color: #a16207;
            letter-spacing: 0.15px;
            opacity: 0.92;
        }

        [data-theme="dark"] .badge-store-soon {
            color: #fef08a;
            background: rgba(234, 179, 8, 0.14);
            border-color: rgba(234, 179, 8, 0.35);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        [data-theme="dark"] .badge-store-soon .pill-line-1 {
            color: #fef08a;
        }

        [data-theme="dark"] .badge-store-soon .pill-line-1 .pill-accent {
            color: #f87171;
        }

        [data-theme="dark"] .badge-store-soon .pill-line-2 {
            color: #fde047;
            opacity: 0.85;
        }

        @media (max-width: 640px) {
            .brand-title {
                flex-wrap: wrap;
                row-gap: 6px;
            }
            .badge-store-soon {
                font-size: 10px;
                padding: 2.5px 8px;
                margin-left: 0;
                border-radius: 8px;
            }
            .badge-store-soon .pill-line-1 {
                font-size: 10px;
            }
            .badge-store-soon .pill-line-2 {
                font-size: 9px;
            }
        }

        .sub-tagline {
            font-size: 12px;
            color: var(--text-dim);
            font-weight: 600;
            margin-top: 3px;
            line-height: 1.45;
        }

        .header-disclosure {
            font-size: 10.5px;
            color: var(--text-muted);
            font-weight: 500;
            line-height: 1.35;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        .header-disclosure .disclosure-tag {
            color: #0284c7;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        [data-theme="dark"] .header-disclosure .disclosure-tag {
            color: #38bdf8;
        }

        .header-status-column {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }

        .guide-tracker-column {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 5px;
        }

        .header-status-column .header-disclosure,
        .guide-tracker-column .header-disclosure {
            justify-content: flex-end;
            text-align: right;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .region-selector {
            display: inline-flex;
            align-items: center;
            background: var(--bg-card-hover);
            border: 1px solid var(--border-card);
            border-radius: 9999px;
            padding: 4px;
            gap: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }

        .region-btn {
            background: transparent;
            border: none;
            padding: 7px 16px;
            border-radius: 9999px;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-dim);
            cursor: pointer;
            transition: all 0.18s ease-in-out;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            line-height: 1;
        }

        .region-btn:hover {
            color: var(--text-main);
        }

        .region-btn.active {
            background: var(--bg-card);
            color: var(--primary);
            box-shadow: 0 2px 6px rgba(2, 132, 199, 0.18), 0 1px 2px rgba(0, 0, 0, 0.06);
        }

        .flag-icon {
            width: 19px;
            height: 13.5px;
            border-radius: 2px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            flex-shrink: 0;
            vertical-align: middle;
            display: inline-block;
        }

        .inventory-status-card {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 8px;
            padding: 5px 12px 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            gap: 2px;
            user-select: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .inventory-status-card:hover {
            border-color: var(--primary);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
        }

        .status-card-header {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .status-dot-pulse {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #10b981;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
            animation: status-pulse-dot 2.5s infinite ease-in-out;
            flex-shrink: 0;
        }

        @keyframes status-pulse-dot {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
                box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
            }
            50% {
                transform: scale(1.15);
                opacity: 0.85;
                box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35);
            }
        }

        .status-card-title {
            font-size: 10px;
            font-weight: 800;
            color: var(--text-dim);
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .status-card-body {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            line-height: 1.2;
            white-space: nowrap;
        }

        .status-time {
            font-weight: 600;
            color: var(--text-main);
        }

        .status-sep {
            color: var(--text-dim);
            font-size: 10px;
        }

        .status-ago {
            font-weight: 700;
            color: #059669;
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 640px) {
            .inventory-status-card {
                align-items: flex-start;
                padding: 4px 10px 5px;
                width: 100%;
            }
            .header-status-column,
            .guide-tracker-column {
                align-items: flex-start;
                width: 100%;
            }
            .header-status-column .header-disclosure,
            .guide-tracker-column .header-disclosure {
                justify-content: flex-start;
                text-align: left;
            }
            .status-card-body {
                flex-wrap: wrap;
                gap: 4px;
                font-size: 11.5px;
            }
        }

        /* Compact Promotions Header Bar */
        .promo-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 250, 0.95) 100%);
            border: 1px solid #a7f3d0;
            border-radius: 12px;
            padding: 10px 18px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
            transition: all 0.2s ease;
        }

        .promo-header-bar:hover {
            border-color: #6ee7b7;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
        }

        .promo-bar-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1;
        }

        .promo-bar-icon {
            font-size: 20px;
            line-height: 1;
            flex-shrink: 0;
        }

        .promo-bar-text-group {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }

        .promo-bar-primary {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-width: 0;
        }

        .promo-bar-title {
            font-weight: 700;
            font-size: 13px;
            color: #065f46;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .promo-bar-summary {
            font-size: 13px;
            color: #047857;
            font-weight: 500;
        }

        .promo-bar-subline {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .promo-sub-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #6ee7b7;
            border-radius: 6px;
            padding: 1.5px 8px;
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: 0.15px;
            line-height: 1.35;
        }

        .promo-view-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1.5px solid #10b981;
            color: #065f46;
            font-weight: 700;
            font-size: 12px;
            padding: 6px 14px;
            border-radius: 9999px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .promo-view-btn:hover {
            background: #10b981;
            color: #ffffff;
            border-color: #059669;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(16, 185, 129, 0.25);
        }

        .promo-badge-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            background: #ecfdf5;
            color: #047857;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 800;
            transition: all 0.15s ease;
        }

        .promo-view-btn:hover .promo-badge-count {
            background: #ffffff;
            color: #065f46;
        }

        .promo-arrow-icon {
            transition: transform 0.15s ease;
        }

        .promo-view-btn:hover .promo-arrow-icon {
            transform: translateX(2px);
        }

        [data-theme="dark"] .promo-header-bar {
            background: linear-gradient(135deg, rgba(6, 78, 59, 0.4) 0%, rgba(4, 120, 87, 0.25) 100%);
            border-color: rgba(16, 185, 129, 0.35);
        }
        [data-theme="dark"] .promo-bar-title {
            color: #34d399;
        }
        [data-theme="dark"] .promo-bar-summary {
            color: #a7f3d0;
        }
        [data-theme="dark"] .promo-sub-badge {
            background: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;
            border-color: rgba(16, 185, 129, 0.4);
        }
        [data-theme="dark"] .promo-view-btn {
            background: var(--bg-card);
            color: #34d399;
            border-color: #10b981;
        }
        [data-theme="dark"] .promo-badge-count {
            background: rgba(16, 185, 129, 0.25);
            color: #6ee7b7;
        }

        /* Workspace Split Layout */
        .workspace-split {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            position: relative;
            margin-bottom: 30px;
        }

        /* Collapsed Sidebar on Wide Desktop */
        .workspace-split.sidebar-collapsed .filter-pane {
            display: none;
        }

        /* Hybrid Filter Pane (Sidebar on Desktop, Drawer on Tablet/Mobile) */
        .filter-pane {
            width: var(--sidebar-w);
            flex-shrink: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 12px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
        }

        .pane-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: #f8fafc;
            border-bottom: 1px solid var(--border-card);
        }

        .pane-title {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pane-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pane-reset-btn {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .pane-reset-btn:hover {
            text-decoration: underline;
        }

        .pane-close-btn {
            display: none;
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
        }

        .pane-body {
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .filter-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .store-facet-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .store-row-header {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
        }

        .store-parent-pill {
            flex: 1;
            min-width: 0;
            width: auto;
            justify-content: flex-start;
        }

        .store-guide-bubble,
        .category-guide-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 17px;
            height: 17px;
            margin-left: 6px;
            border-radius: 50%;
            background: #e0f2fe;
            border: 1px solid #7dd3fc;
            color: #0284c7;
            text-decoration: none;
            flex-shrink: 0;
            transition: all 0.15s ease;
            cursor: pointer;
            vertical-align: middle;
        }

        .store-guide-bubble:hover,
        .category-guide-trigger:hover {
            background: #0284c7;
            border-color: #0369a1;
            color: #ffffff;
            transform: scale(1.15);
            box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
        }

        [data-theme="dark"] .store-guide-bubble,
        [data-theme="dark"] .category-guide-trigger {
            background: #0c4a6e;
            border-color: #0284c7;
            color: #38bdf8;
        }

        [data-theme="dark"] .store-guide-bubble:hover,
        [data-theme="dark"] .category-guide-trigger:hover {
            background: #0284c7;
            border-color: #38bdf8;
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
        }

        .sub-facet-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            user-select: none;
            flex-shrink: 0;
            height: 28px;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }

        .sub-facet-toggle-btn:hover {
            background: #f1f5f9;
            border-color: #94a3b8;
            color: var(--text-main);
        }

        .sub-facet-toggle-btn[aria-expanded="true"] {
            background: #e0f2fe;
            border-color: #7dd3fc;
            color: #0369a1;
        }

        .sub-facet-toggle-btn[aria-expanded="true"] .toggle-chevron {
            transform: rotate(180deg);
        }

        .sub-facet-toggle-btn.is-filtered {
            background: #eff6ff;
            border-color: #93c5fd;
            color: #1d4ed8;
        }

        .sub-facet-toggle-btn.is-filtered .sub-facet-badge {
            background: #2563eb;
            color: #ffffff;
            padding: 1px 5px;
            border-radius: 9999px;
            font-size: 9px;
            font-weight: 700;
        }

        .sub-facet-toggle-btn:disabled,
        .sub-facet-toggle-btn.is-disabled {
            opacity: 0.35;
            cursor: not-allowed;
            pointer-events: none;
        }

        .toggle-chevron {
            transition: transform 0.2s ease;
            flex-shrink: 0;
        }

        .sub-facet-section {
            padding-left: 10px;
            margin-left: 8px;
            border-left: 2px solid #cbd5e1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: opacity 0.15s ease, max-height 0.2s ease;
        }

        .sub-facet-section.is-collapsed {
            display: none !important;
        }

        .sub-facet-section.is-hidden {
            display: none !important;
        }

        .sub-section-header {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-dim);
        }

        .sub-section-hint {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: var(--text-dim);
            opacity: 0.75;
            margin-top: -2px;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .section-header {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .section-header span.count {
            font-size: 10px;
            color: var(--text-dim);
            font-weight: 600;
        }

        /* Footer */
        footer {
            text-align: center;
            font-size: 12px;
            color: var(--text-dim);
            padding: 24px 16px 32px;
            border-top: 1px solid var(--border-card);
            line-height: 1.6;
        }

        .footer-brand {
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .footer-nav-cluster,
        .footer-links-cluster {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Responsive Footer Navigation Grid & Accordion */
        .footer-nav-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            max-width: 1080px;
            margin: 20px auto 28px auto;
            text-align: left;
            box-sizing: border-box;
        }

        .footer-col {
            display: flex;
            flex-direction: column;
        }

        .footer-details {
            width: 100%;
        }

        .footer-summary {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: 0.3px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: default;
            list-style: none;
            user-select: none;
            margin-bottom: 12px;
        }

        .footer-summary::-webkit-details-marker {
            display: none;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 7.5px;
        }

        .footer-links li {
            line-height: 1.4;
        }

        .footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 13px;
            transition: color 0.15s ease, transform 0.15s ease;
            display: inline-block;
        }

        .footer-links a:hover {
            color: var(--primary);
            transform: translateX(2px);
        }

        .footer-subheading {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px dashed var(--border-subtle);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-dim);
            letter-spacing: 0.5px;
            list-style: none;
        }

        [data-theme="dark"] .footer-links a {
            color: #94a3b8;
        }

        [data-theme="dark"] .footer-links a:hover {
            color: var(--primary);
        }

        [data-theme="dark"] .footer-subheading {
            border-top-color: var(--border-card);
            color: #64748b;
        }

        @media (max-width: 960px) and (min-width: 641px) {
            .footer-nav-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
                padding: 0 16px;
            }
        }

        @media (max-width: 640px) {
            .footer-nav-grid {
                display: flex;
                flex-direction: column;
                gap: 0;
                margin: 14px auto 22px auto;
                border-top: 1px solid var(--border-subtle);
                padding: 0 4px;
            }

            .footer-accordion-item {
                border-bottom: 1px solid var(--border-subtle);
            }

            .footer-summary {
                cursor: pointer;
                padding: 13px 4px;
                margin-bottom: 0;
                justify-content: space-between;
                font-size: 13.5px;
            }

            .footer-summary::after {
                content: "＋";
                font-size: 15px;
                font-weight: 700;
                color: var(--text-dim);
                transition: transform 0.2s ease;
            }

            details[open] .footer-summary::after {
                content: "－";
                color: var(--primary);
            }

            .footer-links {
                padding: 4px 6px 14px 8px;
                gap: 9px;
            }

            .footer-links a {
                font-size: 13.5px;
            }

            [data-theme="dark"] .footer-nav-grid,
            [data-theme="dark"] .footer-accordion-item {
                border-color: var(--border-card);
            }
        }

        .footer-disclaimer {
            font-size: 11px;
            color: #94a3b8;
            max-width: 960px;
            margin: 0 auto;
            line-height: 1.5;
            text-align: left;
        }

        .footer-copyright {
            margin-top: 10px;
            font-size: 11px;
            color: #94a3b8;
            text-align: center;
        }

        .footer-disclaimer a {
            color: var(--primary);
            text-decoration: underline;
        }

        /* ==========================================================================
           OPTION 4: BACKDROP & MOBILE FLOATING ACTION BAR
           ========================================================================== */

        /* Backdrop overlay */
        .sidebar-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(2px);
            z-index: 90;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        /* Mobile Sticky Floating Filter Bar (Removed in favor of top action bar) */
        .mobile-float-bar {
            display: none !important;
            position: fixed;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 50;
            background: #0f172a;
            color: #ffffff;
            border-radius: 30px;
            padding: 10px 20px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
            font-size: 13px;
            font-weight: 700;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.15);
            user-select: none;
            transition: transform 0.15s ease, background 0.15s ease;
        }

        .mobile-float-bar:hover {
            background: #1e293b;
            transform: translateX(-50%) scale(1.02);
        }

        .mobile-count-badge {
            background: var(--primary);
            color: #ffffff;
            padding: 2px 7px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 800;
        }

        /* ==========================================================================
           RESPONSIVE BREAKPOINTS (OPTION 4 HYBRID IMPLEMENTATION)
           ========================================================================== */

        /* LAPTOP & TABLET (768px to 1199px) -> Off-canvas Slide-Over Drawer */
        @media (max-width: 1199px) {
            .filter-pane {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 340px;
                z-index: 100;
                border-radius: 0;
                transform: translateX(-100%);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
                visibility: hidden;
                pointer-events: none;
                transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
            }
            .filter-pane.open {
                transform: translateX(0);
                visibility: visible;
                pointer-events: auto;
            }
            .pane-close-btn {
                display: block;
            }
            .pane-footer {
                display: block;
            }
            .pane-body {
                max-height: calc(100vh - 140px);
                overflow-y: auto;
            }
            .sidebar-backdrop.open {
                opacity: 1;
                pointer-events: auto;
            }
            .workspace-split.sidebar-collapsed .filter-pane {
                display: flex;
            }
            .table-responsive-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
        }

        /* Subpage & Editorial Dark Mode Harmonization */
        [data-theme="dark"] .page-hero,
        [data-theme="dark"] .guide-hero {
            background: linear-gradient(135deg, #151e2e 0%, #1e293b 100%) !important;
            border-color: var(--border-card) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
        }
        [data-theme="dark"] .page-hero h1,
        [data-theme="dark"] .guide-hero h1,
        [data-theme="dark"] .section-title-group h2,
        [data-theme="dark"] .guide-section h2,
        [data-theme="dark"] .guide-section h3,
        [data-theme="dark"] .guide-section h4,
        [data-theme="dark"] .content-card h2,
        [data-theme="dark"] .content-card h3,
        [data-theme="dark"] .content-card h4,
        [data-theme="dark"] .tier-card-title,
        [data-theme="dark"] .matrix-card-title,
        [data-theme="dark"] .matrix-channel-title,
        [data-theme="dark"] .store-nav-title,
        [data-theme="dark"] .faq-question,
        [data-theme="dark"] .spec-list li strong,
        [data-theme="dark"] .content-card strong,
        [data-theme="dark"] .guide-section strong,
        [data-theme="dark"] .guide-hero strong,
        [data-theme="dark"] .page-hero strong {
            color: #ffffff !important;
        }
        [data-theme="dark"] .page-hero p,
        [data-theme="dark"] .guide-hero p,
        [data-theme="dark"] .guide-hero p.lead,
        [data-theme="dark"] .page-hero p.lead,
        [data-theme="dark"] .guide-section p,
        [data-theme="dark"] .guide-section li,
        [data-theme="dark"] .content-card p,
        [data-theme="dark"] .content-card li,
        [data-theme="dark"] .tier-card p,
        [data-theme="dark"] .spec-list li,
        [data-theme="dark"] .store-nav-desc,
        [data-theme="dark"] .matrix-spec-val,
        [data-theme="dark"] .faq-answer {
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .content-card {
            background: var(--bg-card) !important;
            border-color: var(--border-card) !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        [data-theme="dark"] .tier-card {
            background: var(--bg-card-hover) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .spec-list {
            border-top-color: var(--border-card) !important;
        }
        [data-theme="dark"] .feature-item {
            background: var(--bg-card-hover) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .feature-item h4 {
            color: #ffffff !important;
        }
        [data-theme="dark"] .feature-item p {
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .formula-box {
            background: var(--bg-card-hover) !important;
            border-left-color: var(--primary) !important;
            color: #ffffff !important;
        }
        [data-theme="dark"] .section-header {
            border-bottom-color: var(--border-card) !important;
        }
        [data-theme="dark"] .footer-brand,
        [data-theme="dark"] .footer-disclaimer,
        [data-theme="dark"] .footer-copyright,
        [data-theme="dark"] .matrix-channel-sub,
        [data-theme="dark"] .matrix-card-sub,
        [data-theme="dark"] .matrix-spec-label,
        [data-theme="dark"] .store-nav-hint {
            color: #94a3b8 !important;
        }
        [data-theme="dark"] .guide-table-wrap {
            background: var(--bg-card) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .guide-table thead th {
            background: #1e293b !important;
            color: #ffffff !important;
            border-bottom-color: var(--border-card) !important;
        }
        [data-theme="dark"] .guide-table th:first-child,
        [data-theme="dark"] .guide-table td:first-child {
            background: var(--bg-card) !important;
            border-right-color: var(--border-card) !important;
        }
        [data-theme="dark"] .guide-table td {
            color: #cbd5e1 !important;
            border-bottom-color: var(--border-card) !important;
        }
        [data-theme="dark"] .guide-table tr:hover td,
        [data-theme="dark"] .guide-table tr:hover td:first-child {
            background: var(--bg-card-hover) !important;
        }
        [data-theme="dark"] .matrix-card {
            background: var(--bg-card) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .matrix-card-header {
            border-bottom-color: var(--border-card) !important;
        }
        [data-theme="dark"] .store-nav-hub {
            background: linear-gradient(135deg, #151e2e 0%, #1e293b 100%) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .store-nav-card {
            background: var(--bg-card) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .store-nav-pill {
            background: var(--bg-card-hover) !important;
            color: #cbd5e1 !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .faq-item {
            background: var(--bg-card) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .faq-question {
            background: var(--bg-card-hover) !important;
            color: #ffffff !important;
        }
        [data-theme="dark"] .faq-answer {
            background: var(--bg-card) !important;
            border-top-color: var(--border-card) !important;
        }
        [data-theme="dark"] .tip-box {
            background: rgba(217, 119, 6, 0.15) !important;
            border-left-color: #f59e0b !important;
            color: #fde68a !important;
        }
        [data-theme="dark"] .tip-box strong {
            color: #ffffff !important;
        }
        [data-theme="dark"] .warning-box {
            background: rgba(245, 158, 11, 0.12) !important;
            border-left-color: #f59e0b !important;
            color: #fde68a !important;
        }
        [data-theme="dark"] .callout-box,
        [data-theme="dark"] .note-callout {
            background: var(--bg-card-hover) !important;
            border-left-color: var(--primary) !important;
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .contact-box {
            background: rgba(16, 185, 129, 0.1) !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
        }
        [data-theme="dark"] .contact-box h3,
        [data-theme="dark"] .contact-email-link {
            color: #34d399 !important;
        }
        [data-theme="dark"] .contact-box p {
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .stock-pill,
        [data-theme="dark"] .watt-badge {
            background: var(--bg-card-hover) !important;
            color: var(--text-muted) !important;
            border-color: var(--border-card) !important;
        }
        [data-theme="dark"] .guide-nav-pill {
            background: rgba(56, 189, 248, 0.12) !important;
            border-color: rgba(56, 189, 248, 0.3) !important;
            color: #38bdf8 !important;
        }
        [data-theme="dark"] .sidebar-guide-tip {
            background: rgba(56, 189, 248, 0.08) !important;
            border-color: rgba(56, 189, 248, 0.25) !important;
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .sidebar-guide-tip strong {
            color: #ffffff !important;
        }
        [data-theme="dark"] .sidebar-guide-tip a,
        [data-theme="dark"] .content-card a:not(.store-btn):not(.btn-cta):not(.contact-email-link),
        [data-theme="dark"] .guide-section a:not(.store-btn):not(.btn-cta):not(.matrix-channel-link):not(.store-nav-card):not(.store-nav-pill),
        [data-theme="dark"] .footer-nav-row a,
        [data-theme="dark"] .footer-disclaimer a {
            color: #38bdf8 !important;
        }


}

@layer components {
        /* KPI Metrics Section */
        .kpi-section {
            margin-bottom: 24px;
        }

        .kpi-mobile-toggle {
            display: none;
        }

        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
        }

        .kpi-card {
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 14px;
            padding: 20px;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
        }

        .kpi-card:hover {
            transform: translateY(-2px);
            border-color: var(--border-glow);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
        }

        .kpi-card.kpi-clickable {
            cursor: pointer;
            user-select: none;
        }

        .kpi-card.kpi-clickable:hover {
            border-color: var(--primary);
            box-shadow: 0 10px 20px -3px rgba(37, 99, 235, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
        }

        .kpi-card.kpi-clickable:active {
            transform: translateY(0);
        }

        .kpi-link-badge {
            font-size: 11px;
            font-weight: 600;
            color: var(--primary);
            background: rgba(37, 99, 235, 0.08);
            border: 1px solid rgba(37, 99, 235, 0.2);
            padding: 2px 7px;
            border-radius: 6px;
            transition: all 0.15s ease;
        }

        .kpi-card.kpi-clickable:hover .kpi-link-badge,
        .kpi-link-badge:hover,
        .kpi-link-badge.is-active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

        button.kpi-link-badge {
            font-family: inherit;
            cursor: pointer;
            outline: none;
            line-height: inherit;
        }

        .kpi-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .kpi-val {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: var(--text-main);
            margin-bottom: 4px;
        }

        .kpi-sub {
            font-size: 12px;
            color: var(--text-dim);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .emerald-text { color: var(--emerald) !important; }
        .primary-text { color: var(--primary) !important; }
        .amber-text { color: var(--amber) !important; }
        .rose-text { color: var(--rose) !important; }

        /* 2-Row Metric Matrix Card (Layout 2A) */
        .kpi-matrix-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .kpi-matrix-grid {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: -2px;
        }

        .kpi-matrix-header-row,
        .kpi-matrix-row {
            display: grid;
            grid-template-columns: 76px repeat(3, minmax(0, 1fr));
            align-items: center;
            text-align: center;
        }

        .kpi-matrix-scope-title {
            text-align: left;
        }

        .kpi-matrix-col-header {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5px;
            white-space: nowrap;
        }

        .kpi-matrix-col-header .kpi-matrix-icon {
            font-size: 10px;
        }

        .kpi-matrix-row-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-dim);
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .kpi-matrix-val {
            font-size: 17px;
            font-weight: 800;
            letter-spacing: -0.3px;
            line-height: 1.2;
        }

        button.kpi-matrix-val,
        button.kpi-matrix-col-header {
            background: none;
            border: none;
            font-family: inherit;
            margin: 0;
            color: inherit;
            outline: none;
            width: 100%;
        }

        button.kpi-matrix-col-header {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15px;
            line-height: 1.2;
        }

        .kpi-matrix-val.is-clickable {
            cursor: pointer;
            border-radius: 6px;
            padding: 2px 6px;
            transition: all 0.15s ease;
            user-select: none;
        }

        .kpi-matrix-col-header.is-clickable {
            cursor: pointer;
            border-radius: 6px;
            padding: 2px 2px;
            transition: all 0.15s ease;
            user-select: none;
        }

        .kpi-matrix-val.is-clickable {
            display: inline-block;
            width: auto;
            min-width: 48px;
            margin: 0 auto;
        }

        .kpi-matrix-val.amber-text.is-clickable {
            background: rgba(217, 119, 6, 0.09);
            border: 1px solid rgba(217, 119, 6, 0.28);
        }

        .kpi-matrix-val.amber-text.is-clickable:hover {
            background: rgba(217, 119, 6, 0.2);
            border-color: var(--amber);
            transform: translateY(-1px) scale(1.05);
            box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
        }

        .kpi-matrix-val.emerald-text.is-clickable {
            background: rgba(16, 185, 129, 0.09);
            border: 1px solid rgba(16, 185, 129, 0.28);
        }

        .kpi-matrix-val.emerald-text.is-clickable:hover {
            background: rgba(16, 185, 129, 0.2);
            border-color: var(--emerald);
            transform: translateY(-1px) scale(1.05);
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
        }

        .kpi-matrix-val.is-active,
        .kpi-matrix-col-header.is-active {
            box-shadow: 0 0 0 2px currentColor;
            border-radius: 6px;
            background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="dark"] .kpi-matrix-val.is-active,
        [data-theme="dark"] .kpi-matrix-col-header.is-active {
            background: rgba(255, 255, 255, 0.08);
        }

        .kpi-matrix-val.is-zero,
        .kpi-matrix-val.rose-text {
            border: 1px solid transparent;
            padding: 2px 6px;
        }

        .kpi-matrix-val.is-zero {
            cursor: default !important;
            opacity: 0.55;
            pointer-events: none;
        }

        .kpi-matrix-col-header.is-clickable:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="dark"] .kpi-matrix-col-header.is-clickable:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .kpi-matrix-divider {
            height: 1px;
            background: var(--border-card);
            margin: 2px 0;
            opacity: 0.8;
        }

        /* Action Toolbar (Option 4) */
        .catalog-toolbar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 10px;
            column-gap: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 12px;
            padding: 10px 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            margin-bottom: 12px;
        }

        .filter-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--primary);
            color: #ffffff;
            border: none;
            padding: 9px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            user-select: none;
        }

        .filter-toggle-btn:hover {
            background: #0369a1;
            transform: translateY(-1px);
        }

        .filter-count-badge {
            background: #ffffff;
            color: var(--primary);
            font-size: 11px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 12px;
        }

        .search-box {
            flex: 1 1 240px;
            min-width: 180px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .search-box input {
            width: 100%;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 8px;
            padding: 9px 14px 9px 36px;
            font-size: 13px;
            color: var(--text-main);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .search-box input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
        }

        .search-icon {
            position: absolute;
            left: 11px;
            color: var(--text-dim);
            pointer-events: none;
        }

        .toolbar-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px 12px;
            flex-wrap: wrap;
        }

        .sort-wrap, .page-size-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .sort-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sort-select {
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            color: var(--text-main);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            outline: none;
            cursor: pointer;
            max-width: 320px;
            text-overflow: ellipsis;
        }

        /* Global Condition Row Header Label */
        .global-parent-label {
            display: inline-flex;
            align-items: center;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: 0.2px;
            user-select: none;
            padding-left: 2px;
        }

        [data-theme="dark"] .global-parent-label {
            color: #f1f5f9;
        }

        /* Mobile Action Bar Wrapper & Scroll Chevrons - Hidden on Desktop */
        .mobile-action-bar-wrap {
            display: none;
            position: relative;
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }
        .mobile-action-bar-wrap::before,
        .mobile-action-bar-wrap::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 2px;
            width: 28px;
            pointer-events: none;
            z-index: 2;
            transition: opacity 0.2s ease;
        }
        .mobile-action-bar-wrap::before {
            left: 0;
            background: linear-gradient(to right, var(--bg-card), transparent);
        }
        .mobile-action-bar-wrap::after {
            right: 0;
            background: linear-gradient(to right, transparent, var(--bg-card));
        }

        .action-bar-scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            color: var(--text-main);
            cursor: pointer;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
            user-select: none;
            padding: 0;
        }
        .action-bar-scroll-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--primary);
            color: var(--primary);
        }
        .action-bar-scroll-btn:active {
            transform: translateY(-50%) scale(0.92);
        }
        .action-bar-scroll-btn.is-hidden {
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
        }
        .action-bar-scroll-btn.scroll-prev {
            left: 2px;
            padding-right: 1px;
        }
        .action-bar-scroll-btn.scroll-next {
            right: 2px;
            padding-left: 1px;
        }

        /* Mobile Action Bar (Horizontal Scrollable Pill Bar) */
        .mobile-action-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            flex-wrap: nowrap;
            padding: 2px 2px 4px 2px;
        }
        .mobile-action-bar::-webkit-scrollbar {
            display: none;
        }

        .action-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 36px;
            padding: 0 13px;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 9999px;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-main);
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            transition: all 0.15s ease;
            user-select: none;
            flex: 0 0 auto;
            position: relative;
        }
        .action-pill:active {
            transform: scale(0.97);
            background: var(--bg-card-hover);
        }
        .action-pill.is-active {
            background: rgba(2, 132, 199, 0.1);
            border-color: var(--primary);
            color: var(--primary);
            font-weight: 700;
        }
        [data-theme="dark"] .action-pill.is-active {
            background: rgba(56, 189, 248, 0.15);
            border-color: var(--primary);
            color: var(--primary);
        }
        .action-pill-filter {
            flex-shrink: 0;
        }
        .action-pill-filter .badge {
            background: var(--primary);
            color: #ffffff;
            font-size: 10px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 9999px;
            margin-left: 2px;
        }
        .action-pill-sort,
        .action-pill-tier {
            flex: 0 0 auto;
            min-width: auto;
            justify-content: flex-start;
            gap: 6px;
        }
        .action-pill-sort .pill-content,
        .action-pill-tier .pill-content {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }
        .action-pill-sort .pill-value,
        .action-pill-tier .pill-value {
            white-space: nowrap;
        }
        .pill-chevron {
            color: var(--text-dim);
            flex-shrink: 0;
            margin-left: 2px;
        }
        .action-pill.is-active .pill-chevron {
            color: var(--primary);
        }
        .mobile-action-bar::after {
            content: '';
            display: block;
            flex: 0 0 8px;
            height: 1px;
        }

        /* Bottom Sheet Modals (Hidden on Desktop) */
        .bottom-sheet {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-card);
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25);
            z-index: 100;
            transform: translateY(100%);
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            max-height: 80vh;
            flex-direction: column;
            border-top: 1px solid var(--border-card);
        }
        .bottom-sheet.open {
            transform: translateY(0);
        }
        .sheet-handle {
            width: 36px;
            height: 4px;
            background: var(--border-card);
            border-radius: 2px;
            margin: 10px auto 4px;
            flex-shrink: 0;
        }
        .sheet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 18px 12px;
            border-bottom: 1px solid var(--border-card);
            flex-shrink: 0;
        }
        .sheet-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sheet-close-btn {
            background: none;
            border: none;
            font-size: 22px;
            color: var(--text-dim);
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            line-height: 1;
        }
        .sheet-close-btn:hover {
            color: var(--text-main);
            background: var(--bg-card-hover);
        }
        .sheet-body {
            padding: 8px 12px 28px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
            -webkit-overflow-scrolling: touch;
        }
        .sheet-group-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-dim);
            padding: 10px 10px 4px;
        }
        .sheet-option-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.15s ease;
            user-select: none;
        }
        .sheet-option-row:hover {
            background: var(--bg-card-hover);
        }
        .sheet-option-row.is-selected {
            background: rgba(2, 132, 199, 0.1);
        }
        [data-theme="dark"] .sheet-option-row.is-selected {
            background: rgba(56, 189, 248, 0.15);
        }
        .sheet-option-left {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow: hidden;
        }
        .sheet-option-icon {
            font-size: 16px;
            color: var(--primary);
            flex-shrink: 0;
        }
        .sheet-option-text {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--text-main);
        }
        .sheet-option-row.is-selected .sheet-option-text {
            color: var(--primary);
            font-weight: 700;
        }
        .sheet-option-desc {
            font-size: 11.5px;
            color: var(--text-dim);
            margin-top: 1px;
        }
        .sheet-check-icon {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary);
            display: none;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            flex-shrink: 0;
            margin-left: 8px;
        }
        .sheet-option-row.is-selected .sheet-check-icon {
            display: flex;
        }

        /* Active Filter Chips Bar */
        .active-chips-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 16px;
            padding: 0 2px;
        }

        .active-chips-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-right: 2px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
            border-radius: 20px;
            padding: 3px 10px;
            font-size: 11px;
            font-weight: 600;
        }

        .chip-all-hardware {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
        }

        .chip-remove {
            cursor: pointer;
            font-size: 13px;
            font-weight: 800;
            color: #0284c7;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            transition: color 0.1s;
        }

        .chip-remove:hover {
            color: #b91c1c;
        }

        .chip-clear-all {
            background: none;
            border: none;
            color: #b91c1c;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            padding: 2px 6px;
            margin-left: 4px;
            text-decoration: underline;
        }

        .chip-clear-all:hover {
            color: #991b1b;
        }

        [data-theme="dark"] .chip {
            background: rgba(56, 189, 248, 0.15);
            color: #7dd3fc;
            border-color: rgba(56, 189, 248, 0.3);
        }

        [data-theme="dark"] .chip-remove {
            color: #38bdf8;
        }

        /* Category Vertical List in Sidebar */
        .cat-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .cat-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: none;
            border: 1px solid transparent;
            border-radius: 6px;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            text-align: left;
            transition: all 0.12s ease;
        }

        .cat-btn:hover {
            background: var(--bg-card-hover);
            color: var(--text-main);
        }

        .cat-btn.active {
            background: rgba(2, 132, 199, 0.1);
            color: var(--primary);
            border-color: rgba(2, 132, 199, 0.25);
            font-weight: 700;
        }

        .cat-btn.is-disabled {
            opacity: 0.38;
            cursor: not-allowed;
            pointer-events: none;
        }

        .cat-count {
            font-size: 10.5px;
            font-weight: 600;
            color: var(--text-dim);
            background: #f1f5f9;
            padding: 1px 6px;
            border-radius: 9999px;
            margin-left: 6px;
            transition: all 0.12s ease;
        }

        .cat-btn.active .cat-count {
            background: rgba(2, 132, 199, 0.15);
            color: var(--primary);
            font-weight: 700;
        }

        .cat-sub-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-left: 10px;
            padding-left: 8px;
            border-left: 2px solid var(--border-card);
            margin-top: 3px;
            margin-bottom: 5px;
            transition: all 0.15s ease;
        }

        .cat-sub-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: none;
            border: 1px solid transparent;
            border-radius: 5px;
            padding: 5px 8px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            text-align: left;
            transition: all 0.12s ease;
        }

        .cat-sub-btn:hover {
            background: var(--bg-card-hover);
            color: var(--text-main);
        }

        .cat-sub-btn.active {
            background: rgba(2, 132, 199, 0.1);
            color: var(--primary);
            border-color: rgba(2, 132, 199, 0.25);
            font-weight: 700;
        }

        .cat-sub-btn.is-disabled {
            opacity: 0.38;
            cursor: not-allowed;
            pointer-events: none;
        }

        .cat-sub-btn .cat-count {
            font-size: 10px;
            font-weight: 600;
            padding: 0 5px;
            border-radius: 9999px;
            margin-left: 4px;
        }

        .cat-sub-btn.active .cat-count {
            background: rgba(2, 132, 199, 0.15);
            color: var(--primary);
            font-weight: 700;
        }

        [data-theme="dark"] .cat-sub-btn.active {
            color: #38bdf8;
            border-color: rgba(56, 189, 248, 0.3);
            background: rgba(56, 189, 248, 0.12);
        }

        [data-theme="dark"] .cat-sub-btn.active .cat-count {
            color: #38bdf8;
            background: rgba(56, 189, 248, 0.15);
        }

        .cat-divider {
            height: 1px;
            background: var(--border-card);
            margin: 6px 0;
            opacity: 0.85;
        }

        .cat-btn[data-cat="best-value"] {
            font-weight: 700;
            color: #0284c7;
        }

        [data-theme="dark"] .cat-btn[data-cat="best-value"] {
            color: #38bdf8;
        }

        .badge-best-value {
            display: inline-flex;
            align-items: center;
            background: rgba(2, 132, 199, 0.12);
            color: #0284c7;
            border: 1px solid rgba(2, 132, 199, 0.3);
            border-radius: 4px;
            padding: 1px 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.01em;
            margin-right: 6px;
            white-space: nowrap;
        }

        [data-theme="dark"] .badge-best-value {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            border-color: rgba(56, 189, 248, 0.35);
        }

        .facet-pill-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .sub-facet-section .facet-pill-grid {
            flex-direction: column;
            gap: 5px;
        }

        .sub-facet-section .facet-pill-grid .check-pill {
            width: 100%;
            box-sizing: border-box;
            justify-content: flex-start;
        }

        .pane-footer {
            padding: 12px 16px;
            background: #f8fafc;
            border-top: 1px solid var(--border-card);
            display: none;
        }

        .apply-btn {
            width: 100%;
            background: var(--primary);
            color: #ffffff;
            border: none;
            padding: 10px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .apply-btn:hover {
            background: #0369a1;
        }

        /* Catalog Main Area */
        .catalog-main {
            flex: 1;
            min-width: 0;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 12px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
        }

        .catalog-main .main-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 8px 16px;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-card);
            background: #f8fafc;
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
        }

        #table-count {
            font-size: 13px;
            color: var(--text-muted);
            text-align: right;
            line-height: 1.35;
            flex-shrink: 0;
        }

        .table-count-primary {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
        }

        .table-count-sub {
            font-size: 11.5px;
            color: #92400e;
            margin-top: 2px;
        }

        [data-theme="dark"] .table-count-sub {
            color: #fde68a;
        }

        /* Desktop: Plain text (no link color, no underline, no pointer cursor) */
        .table-count-sub .table-count-filters-link {
            color: inherit;
            text-decoration: none;
            cursor: default;
            pointer-events: none;
            font-weight: 600;
        }

        @keyframes filterPulse {
            0% { outline: 2px solid rgba(2, 132, 199, 0.8); box-shadow: 0 0 12px rgba(2, 132, 199, 0.4); }
            50% { outline: 2px solid rgba(2, 132, 199, 0.4); box-shadow: 0 0 6px rgba(2, 132, 199, 0.2); }
            100% { outline: 2px solid transparent; box-shadow: none; }
        }

        .highlight-pulse {
            animation: filterPulse 1.2s ease-out;
        }

        .main-header-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            flex: 1 1 auto;
            min-width: 220px;
        }

        .main-header-left .card-title {
            font-size: 15px;
            font-weight: 700;
            margin: 0;
            color: var(--text-main);
            line-height: 1.25;
            letter-spacing: -0.01em;
        }

        .table-responsive-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }

        .table-responsive-wrap.has-inner-scroll {
            overflow: auto;
            max-height: calc(100vh - 240px);
            min-height: 400px;
        }

        /* Dynamic Dual-Range Slider Filters */
        .sliders-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 14px;
        }

        .filter-pane .sliders-panel {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: none;
            border: none;
            border-radius: 0;
            padding: 0;
            margin-bottom: 0;
        }

        .slider-card {
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            padding: 12px 16px 14px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            transition: opacity 0.2s, border-color 0.2s;
        }

        .filter-pane .slider-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px 12px;
            box-shadow: none;
        }

        .slider-card.disabled {
            opacity: 0.45;
            pointer-events: none;
        }

        .slider-card.single-value .range-slider-wrap {
            pointer-events: none;
            opacity: 0.7;
        }

        .slider-card.single-value .slider-badge {
            background: #fef3c7;
            color: #92400e;
            border-color: #fde68a;
        }

        .slider-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 12px;
        }

        .slider-title {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-main);
        }

        .slider-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .range-slider-wrap {
            position: relative;
            height: 28px;
            display: flex;
            align-items: center;
            cursor: pointer;
            touch-action: none;
            user-select: none;
        }

        .slider-track-bg {
            position: absolute;
            width: 100%;
            height: 6px;
            background: #e2e8f0;
            border-radius: 9999px;
            left: 0;
            top: 11px;
            z-index: 1;
        }

        .slider-track-fill {
            position: absolute;
            height: 6px;
            background: var(--primary);
            border-radius: 9999px;
            top: 11px;
            z-index: 2;
            transition: left 0.05s, width 0.05s;
        }

        .slider-thumb {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ffffff;
            border: 3px solid var(--primary);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            cursor: grab;
            z-index: 4;
            transform: translate(-50%, 0);
            top: 4px;
            transition: transform 0.1s, border-color 0.1s;
            outline: none;
        }

        .slider-thumb:hover {
            transform: translate(-50%, 0) scale(1.2);
            border-color: #0369a1;
        }

        .slider-thumb.dragging {
            cursor: grabbing;
            transform: translate(-50%, 0) scale(1.25);
            z-index: 6;
            border-color: #0284c7;
            box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25);
        }

        .slider-ticks {
            position: relative;
            height: 18px;
            margin-top: 8px;
            padding: 0;
        }

        .slider-tick {
            position: absolute;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-dim);
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            transition: color 0.15s, transform 0.1s;
        }

        .slider-tick:hover {
            color: var(--primary);
            transform: translateY(-1px);
        }

        .slider-tick.active {
            color: var(--text-main);
            font-weight: 700;
        }

        .check-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            user-select: none;
            transition: all 0.15s ease;
        }

        .check-pill:hover {
            background: var(--bg-card-hover);
            border-color: var(--primary);
            color: var(--text-main);
        }

        .check-pill input[type="checkbox"] {
            accent-color: var(--primary);
            cursor: pointer;
            width: 14px;
            height: 14px;
            margin: 0;
        }

        .check-pill.active,
        .check-pill:has(input:checked) {
            background: rgba(2, 132, 199, 0.08);
            border-color: var(--primary);
            color: #0369a1;
            font-weight: 600;
        }

        .checkbox-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }

        .action-link-btn {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            padding: 4px 6px;
            text-decoration: underline;
            transition: color 0.15s ease;
        }

        .action-link-btn:hover {
            color: #0369a1;
        }

        .action-link-btn.clear-btn {
            color: var(--text-dim);
        }

        .action-link-btn.clear-btn:hover {
            color: var(--rose);
        }

        .action-divider {
            color: #cbd5e1;
            font-size: 12px;
            user-select: none;
        }

        /* Table Design */
        .table-wrap {
            overflow: visible;
        }

        table {
            width: 100%;
            min-width: 860px;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 13px;
            text-align: left;
        }

        #dealsTable.hide-perf-col {
            min-width: 720px;
        }

        #dealsTable.hide-perf-col .col-hardware-power {
            display: none !important;
        }

        th {
            background: var(--bg-card-hover);
            color: var(--text-dim);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            padding: 12px 14px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 -2px 0 var(--border-card);
        }

        .th-curr-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-main);
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            padding: 1.5px 6px;
            border-radius: 4px;
            margin-left: 5px;
            letter-spacing: 0.3px;
            vertical-align: middle;
            text-transform: uppercase;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            cursor: default;
        }

        .th-curr-badge .th-flag-icon {
            display: block;
            border-radius: 1.5px;
            flex-shrink: 0;
            box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
        }


        td {
            padding: 14px;
            border-bottom: 1px solid var(--border-card);
            vertical-align: middle;
        }

        .model-eyebrow-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-align: right;
            margin-bottom: 2px;
            line-height: 1;
        }

        .cat-eyebrow {
            display: inline-flex;
            align-items: center;
            font-size: 8.5px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--accent);
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-radius: 4px;
            padding: 1.5px 6px;
            line-height: 1;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }

        [data-theme="light"] .cat-eyebrow {
            color: #0284c7;
            background: rgba(2, 132, 199, 0.08);
            border-color: rgba(2, 132, 199, 0.2);
        }

        /* Suppress category eyebrow on dedicated landing pages or when single category filter is active, but preserve best value badge */
        body[data-initial-category]:not([data-initial-category="all"]) .model-eyebrow-row:not(.has-best-value),
        #dealsTable.hide-cat-eyebrows .model-eyebrow-row:not(.has-best-value) {
            display: none !important;
        }

        body[data-initial-category]:not([data-initial-category="all"]) .model-eyebrow-row.has-best-value .cat-eyebrow,
        #dealsTable.hide-cat-eyebrows .model-eyebrow-row.has-best-value .cat-eyebrow {
            display: none !important;
        }

        #dealsTable th.col-hardware-power,
        #dealsTable td.col-hardware-power {
            width: 215px;
            min-width: 205px;
            padding: 10px 20px;
        }
        #dealsTable th.col-hardware-power {
            text-align: center;
        }

        #dealsTable th.col-deal-action,
        #dealsTable td.col-deal-action,
        #dealsTable th:last-child, #dealsTable td:last-child {
            width: 215px;
            min-width: 205px;
            padding: 10px 16px 10px 22px;
            text-align: left;
            vertical-align: middle;
            white-space: normal;
        }

        tr:hover td {
            background: var(--bg-card-hover);
        }

        #dealsTable th.col-model,
        #dealsTable td.model-col {
            font-weight: 600;
            color: var(--text-main);
            min-width: 280px;
        }

        .specs-snippet {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 4px;
            line-height: 1.4;
        }

        .cat-tag {
            display: inline-block;
            background: var(--bg-card-hover);
            border: 1px solid var(--border-card);
            padding: 2px 7px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-dim);
            text-transform: capitalize;
            white-space: nowrap;
            max-width: 100%;
            box-sizing: border-box;
        }

        .price-reg {
            color: #94a3b8;
            text-decoration: line-through;
            font-size: 12px;
        }

        .price-reg-inline {
            display: none;
        }

        #dealsTable th.col-sticker-price,
        #dealsTable td.col-sticker-price {
            padding-left: 20px;
        }

        .price-list {
            font-weight: 600;
            color: var(--text-main);
        }

        .deal-stack {
            display: flex;
            flex-direction: column;
            gap: 3.5px;
            width: 100%;
            text-align: left;
        }

        .deal-row-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }

        .net-price-hero {
            font-size: 16.5px;
            font-weight: 900;
            color: #059669;
            line-height: 1.1;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }
        [data-theme="dark"] .net-price-hero {
            color: #34d399;
        }

        .deal-shelf-divider {
            width: 100%;
            height: 1px;
            background: var(--border-subtle);
            margin: 1px 0;
        }

        .deal-row-context {
            display: flex;
            align-items: center;
            gap: 3.5px;
            flex-wrap: wrap;
            line-height: 1.3;
        }

        .deal-row-btn {
            width: 100%;
            margin-top: 3px;
        }
        .deal-row-btn .btn-view {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .net-price-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #ecfdf5;
            color: #059669;
            font-weight: 800;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid #a7f3d0;
        }

        .discount-badge {
            display: inline-block;
            background: #dcfce7;
            color: #15803d;
            border: 1px solid #86efac;
            font-size: 9.5px;
            font-weight: 800;
            padding: 1px 4.5px;
            border-radius: 4px;
            letter-spacing: 0.3px;
            line-height: 1.2;
        }

        .price-badge-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .coupon-tag {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0;
            border-radius: 4px;
            padding: 1px 6px;
            margin-top: 3px;
        }

        .coupon-row {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 4px;
        }

        .coupon-prefix {
            font-size: 11px;
            color: var(--text-dim);
            font-weight: 600;
        }

        .coupon-pill {
            display: inline-flex;
            align-items: center;
            gap: 4.5px;
            background: #eff6ff;
            border: 1.5px dashed #0284c7;
            color: #0369a1;
            padding: 2px 7.5px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 800;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            cursor: pointer;
            line-height: 1.25;
            white-space: nowrap;
            letter-spacing: 0.3px;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(2, 132, 199, 0.08);
        }

        .coupon-pill:hover {
            background: #dbeafe;
            border-color: #0284c7;
            box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
            transform: translateY(-0.5px);
        }

        .coupon-pill.copied {
            background: #ecfdf5;
            border-color: #10b981;
            border-style: solid;
            color: #047857;
        }

        .coupon-pill .scissor-icon {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            opacity: 0.9;
            flex-shrink: 0;
            transition: transform 0.15s ease;
        }

        .coupon-pill:hover .scissor-icon {
            transform: scale(1.15) rotate(-12deg);
        }

        [data-theme="dark"] .coupon-pill {
            background: rgba(2, 132, 199, 0.18);
            border-color: #38bdf8;
            color: #7dd3fc;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        [data-theme="dark"] .coupon-pill:hover {
            background: rgba(2, 132, 199, 0.3);
            border-color: #7dd3fc;
        }

        [data-theme="dark"] .coupon-pill.copied {
            background: rgba(16, 185, 129, 0.2);
            border-color: #10b981;
            color: #6ee7b7;
        }

        [data-theme="dark"] .net-price-badge {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.3);
            color: #34d399;
        }

        [data-theme="dark"] .discount-badge {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.4);
            color: #6ee7b7;
        }

        [data-theme="dark"] .coupon-tag {
            background: rgba(16, 185, 129, 0.15) !important;
            color: #34d399 !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
        }

        [data-theme="dark"] .savings-tag {
            color: #34d399 !important;
        }

        [data-theme="dark"] .stock-pill.stock-low {
            background: rgba(245, 158, 11, 0.15) !important;
            color: #fbbf24 !important;
            border-color: rgba(245, 158, 11, 0.35) !important;
        }

        .copy-toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: #0f172a;
            color: #ffffff;
            padding: 9px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 9999;
        }

        .copy-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .savings-tag {
            font-size: 9.5px;
            color: #059669;
            font-weight: 700;
            line-height: 1.2;
        }
        [data-theme="dark"] .savings-tag {
            color: #34d399;
        }

        .drop-cut-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-size: 9.5px;
            font-weight: 700;
            color: #b45309;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 4px;
            padding: 1px 4.5px;
            line-height: 1.2;
        }

        .new-arrival-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 700;
            color: #4338ca;
            background: #eef2ff;
            border: 1px solid #c7d2fe;
            border-radius: 4px;
            padding: 1px 6px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: help;
            transition: all 0.15s ease-in-out;
        }

        .new-arrival-badge:hover {
            filter: brightness(0.96);
            transform: translateY(-1px);
        }

        .stock-drop-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 700;
            color: #be123c;
            background: #fff1f2;
            border: 1px solid #fecdd3;
            border-radius: 4px;
            padding: 1px 6px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: help;
            transition: all 0.15s ease-in-out;
        }

        .stock-drop-badge:hover {
            filter: brightness(0.96);
            transform: translateY(-1px);
        }

        .stock-col-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .stock-btn-wrap {
            margin-top: 2px;
        }

        .stock-btn-wrap .btn-view {
            padding: 5px 12px;
            font-size: 11.5px;
            min-width: 105px;
        }

        .stock-pill {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        .stock-low {
            background: #fffbeb;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .grade-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            letter-spacing: 0.3px;
            vertical-align: middle;
            margin-left: 6px;
            cursor: help;
            transition: all 0.15s ease-in-out;
        }

        .grade-badge:hover {
            filter: brightness(0.95);
            transform: translateY(-1px);
        }

        .btn-psref-link {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 4px;
            letter-spacing: 0.2px;
            vertical-align: baseline;
            margin-left: 3px;
            text-decoration: none;
            background: rgba(2, 132, 199, 0.08);
            color: #0284c7;
            border: 1px solid rgba(2, 132, 199, 0.28);
            transition: all 0.15s ease-in-out;
            cursor: pointer;
            white-space: nowrap;
        }

        .btn-psref-link:hover {
            background: #0284c7;
            color: #ffffff;
            border-color: #0284c7;
            transform: translateY(-0.5px);
            box-shadow: 0 1px 4px rgba(2, 132, 199, 0.25);
        }

        .grade-badge.refurb-a, .grade-badge.grade-a {
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0;
        }

        .grade-badge.refurb-b, .grade-badge.grade-b {
            background: #fffbeb;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .grade-badge.outlet-new {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .grade-badge.outlet-likenew {
            background: #f0fdfa;
            color: #0f766e;
            border: 1px solid #99f6e4;
        }

        .grade-badge.outlet-scratch {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
        }

        .grade-badge.outlet-refurb {
            background: #f8fafc;
            color: #334155;
            border: 1px solid #cbd5e1;
        }

        [data-theme="dark"] .grade-badge.refurb-a,
        [data-theme="dark"] .grade-badge.grade-a {
            background: rgba(16, 185, 129, 0.15) !important;
            color: #34d399 !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
        }

        [data-theme="dark"] .grade-badge.refurb-b,
        [data-theme="dark"] .grade-badge.grade-b {
            background: rgba(245, 158, 11, 0.15) !important;
            color: #fbbf24 !important;
            border-color: rgba(245, 158, 11, 0.3) !important;
        }

        [data-theme="dark"] .grade-badge.outlet-new {
            background: rgba(59, 130, 246, 0.15) !important;
            color: #60a5fa !important;
            border-color: rgba(59, 130, 246, 0.3) !important;
        }

        [data-theme="dark"] .grade-badge.outlet-likenew {
            background: rgba(20, 184, 166, 0.15) !important;
            color: #2dd4bf !important;
            border-color: rgba(20, 184, 166, 0.3) !important;
        }

        [data-theme="dark"] .grade-badge.outlet-scratch {
            background: rgba(249, 115, 22, 0.15) !important;
            color: #fb923c !important;
            border-color: rgba(249, 115, 22, 0.3) !important;
        }

        [data-theme="dark"] .grade-badge.outlet-refurb {
            background: rgba(148, 163, 184, 0.15) !important;
            color: #cbd5e1 !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
        }

        [data-theme="dark"] .btn-psref-link {
            background: rgba(56, 189, 248, 0.12);
            color: #38bdf8;
            border-color: rgba(56, 189, 248, 0.3);
        }

        [data-theme="dark"] .btn-psref-link:hover {
            background: #38bdf8;
            color: #0f172a;
            border-color: #38bdf8;
            box-shadow: 0 2px 6px rgba(56, 189, 248, 0.35);
        }

        .ddr-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            letter-spacing: 0.3px;
            vertical-align: middle;
        }

        .ddr-badge.ddr5 {
            background: #ede9fe;
            color: #6d28d9;
            border: 1px solid #ddd6fe;
        }

        .ddr-badge.ddr4 {
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .ddr-badge.lpddr5, .ddr-badge.lpddr5x {
            background: #fdf2f8;
            color: #be185d;
            border: 1px solid #fbcfe8;
        }

        .upgrade-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 4px;
            letter-spacing: 0.2px;
            vertical-align: middle;
            margin-left: 3px;
        }

        .upgrade-badge.soldered {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .upgrade-badge.slots {
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .watt-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 600;
            padding: 1px 5px;
            border-radius: 4px;
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
            letter-spacing: 0.2px;
            vertical-align: middle;
            margin-left: 4px;
        }

        .btn-view {
            display: inline-block;
            background: linear-gradient(135deg, #0284c7, #2563eb);
            color: #fff;
            text-decoration: none;
            padding: 6px 14px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 12px;
            transition: all 0.2s;
            white-space: nowrap;
            text-align: center;
        }

        .btn-view:hover {
            background: linear-gradient(135deg, #0369a1, #1d4ed8);
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
        }

        .btn-view.store-refurb {
            background: linear-gradient(135deg, #0d9488, #0284c7);
        }

        .btn-view.store-refurb:hover {
            background: linear-gradient(135deg, #0f766e, #0369a1);
            box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
        }

        .btn-view.store-lenovo {
            background: linear-gradient(135deg, #e2231a, #b91c1c);
        }

        .btn-view.store-lenovo:hover {
            background: linear-gradient(135deg, #c51d15, #991b1b);
            box-shadow: 0 2px 8px rgba(226, 35, 26, 0.35);
        }

        .btn-view.store-microsoft {
            background: linear-gradient(135deg, #0078d4, #107c41);
        }

        .btn-view.store-microsoft:hover {
            background: linear-gradient(135deg, #005a9e, #0e6b37);
            box-shadow: 0 2px 8px rgba(0, 120, 212, 0.35);
        }

        .btn-view.store-woot {
            background: linear-gradient(135deg, #ea580c, #d97706);
        }

        .btn-view.store-woot:hover {
            background: linear-gradient(135deg, #c2410c, #b45309);
            box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
        }

        .btn-view.store-apple {
            background: linear-gradient(135deg, #1d1d1f, #333336);
        }

        .btn-view.store-apple:hover {
            background: linear-gradient(135deg, #000000, #1d1d1f);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        .btn-view.store-newegg {
            background: linear-gradient(135deg, #f58220, #003087);
        }

        .btn-view.store-newegg:hover {
            background: linear-gradient(135deg, #e06d0b, #002266);
            box-shadow: 0 2px 8px rgba(245, 130, 32, 0.35);
        }

        .btn-view.store-newegg-business {
            background: linear-gradient(135deg, #003087, #0d47a1);
        }

        .btn-view.store-newegg-business:hover {
            background: linear-gradient(135deg, #002266, #0a3880);
            box-shadow: 0 2px 8px rgba(0, 48, 135, 0.4);
        }

        .btn-view.store-refurb-io {
            background: linear-gradient(135deg, #0d9488, #0f766e);
        }

        .btn-view.store-refurb-io:hover {
            background: linear-gradient(135deg, #0f766e, #115e59);
            box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
        }

        .btn-view.store-hp {
            background: linear-gradient(135deg, #0096D6, #0077b6);
        }

        .btn-view.store-hp:hover {
            background: linear-gradient(135deg, #0077b6, #023e8a);
            box-shadow: 0 2px 8px rgba(0, 150, 214, 0.4);
        }

        .btn-view.store-dell-ebay {
            background: linear-gradient(135deg, #0076CE, #005A9E);
        }

        .btn-view.store-dell-ebay:hover {
            background: linear-gradient(135deg, #005A9E, #00447C);
            box-shadow: 0 2px 8px rgba(0, 118, 206, 0.4);
        }

        .btn-view.btn-view-catalog {
            padding: 4px 12px;
            text-align: center;
            line-height: 1.25;
            min-width: 116px;
        }

        .btn-view .ext-arrow {
            display: inline-block;
            font-size: 12px;
            margin-left: 3px;
            transition: transform 0.18s ease;
            vertical-align: middle;
            line-height: 1;
        }

        .btn-view:hover .ext-arrow {
            transform: translate(2px, -2px);
        }

        .btn-view-sub {
            display: block;
            font-size: 10px;
            font-weight: 500;
            opacity: 0.9;
            letter-spacing: 0.2px;
            margin-top: 1px;
            white-space: nowrap;
        }

        .info-tip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #0284c7;
            color: #ffffff;
            cursor: help;
            margin-left: 5px;
            vertical-align: middle;
            position: relative;
            user-select: none;
            box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
            transition: background 0.15s, transform 0.15s;
        }

        .info-tip svg {
            display: block;
            width: 8px;
            height: 8px;
            pointer-events: none;
        }

        .info-tip:hover, .info-tip:focus {
            background: #0369a1;
            transform: scale(1.1);
        }

        .info-tip .info-tooltip {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #0f172a;
            color: #f8fafc;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 11px;
            font-weight: 400;
            font-style: normal;
            line-height: 1.45;
            text-transform: none;
            padding: 9px 12px;
            border-radius: 7px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45);
            width: 310px;
            max-width: 85vw;
            text-align: left;
            white-space: normal;
            z-index: 1000;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        /* Invisible hover bridge to allow seamless mouse movement into tooltip */
        .info-tip .info-tooltip::before {
            content: '';
            position: absolute;
            top: -12px;
            left: 0;
            right: 0;
            height: 12px;
        }

        .info-tip .info-tooltip::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent #0f172a transparent;
        }

        /* First column tooltip alignment: Anchor rightwards so it never pokes into the sidebar or clips under the filter pane */
        th:first-child .info-tip .info-tooltip {
            left: -8px;
            transform: none;
        }

        th:first-child .info-tip .info-tooltip::after {
            left: 10px;
            transform: none;
        }

        th:hover, th:focus-within {
            z-index: 50;
        }

        .info-tip:hover .info-tooltip,
        .info-tip:focus .info-tooltip,
        .info-tip .info-tooltip:hover {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        /* Tablet & Small Laptop (769px to 1199px) -> Balanced 2x2 KPI Grid & 2-Row Toolbar */
        @media (min-width: 769px) and (max-width: 1199px) {
            .kpi-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
        }

        @media (min-width: 769px) and (max-width: 1199px) {
            .catalog-toolbar {
                flex-wrap: wrap;
                row-gap: 10px;
            }
            .search-box {
                flex: 1 1 240px;
                min-width: 200px;
            }
            .toolbar-actions {
                width: 100%;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 8px 14px;
            }
            .sort-wrap {
                flex: 0 1 auto;
            }
            .sort-select {
                max-width: 320px;
            }
            .catalog-main {
                min-width: 0;
                overflow: hidden;
            }
            .table-responsive-wrap {
                overflow-x: auto;
                max-width: 100%;
            }
        }



        /* Mobile Collapsible KPI Section */
        @media (max-width: 768px) {
            /* Mobile Collapsible KPI Section */
            .kpi-section {
                margin-bottom: 12px;
            }
            .kpi-mobile-toggle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                background: var(--bg-card);
                border: 1px solid var(--border-card);
                border-radius: 12px;
                padding: 11px 14px;
                cursor: pointer;
                user-select: none;
                font: inherit;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
                transition: all 0.2s ease;
            }
            .kpi-mobile-toggle:active {
                background: #f8fafc;
            }
            .kpi-toggle-title {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--text-main);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .kpi-toggle-icon {
                font-size: 14px;
            }
            .kpi-mobile-toggle .mobile-toggle-indicator {
                color: var(--primary);
            }
            .kpi-section.is-collapsed-mobile .kpi-grid {
                display: none !important;
            }
            .kpi-section:not(.is-collapsed-mobile) .kpi-mobile-toggle .toggle-chevron {
                transform: rotate(180deg);
            }
            .kpi-section:not(.is-collapsed-mobile) .kpi-grid {
                display: grid !important;
                margin-top: 8px;
            }
        }

        /* MOBILE PORTRAIT (<= 768px) -> Bottom Sheet Drawer + Product Card Layout */
        @media (max-width: 768px) {
            body {
                padding: 12px 10px 24px;
            }
            header {
                padding-bottom: 12px;
                margin-bottom: 14px;
            }

            /* Mobile KPI Grid & Matrix Card Layout (Fixes Cut-Off Pane) */
            .kpi-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-bottom: 0;
            }
            .kpi-card {
                padding: 12px 14px;
                border-radius: 10px;
            }
            .kpi-val {
                font-size: 24px;
            }
            .kpi-title {
                font-size: 11.5px;
                margin-bottom: 4px;
            }
            .kpi-sub {
                font-size: 11px;
            }

            #card-kpi-active {
                grid-column: 1 / -1;
            }
            #card-kpi-laptop {
                grid-column: 1;
            }
            #card-kpi-desktop {
                grid-column: 2;
            }

            /* Catalog Activity Pane Spans Full Width */
            .kpi-matrix-card {
                grid-column: 1 / -1;
                padding: 12px 14px;
            }
            .kpi-matrix-grid {
                gap: 4px;
            }
            .kpi-matrix-header-row,
            .kpi-matrix-row {
                grid-template-columns: 82px 1fr 1fr 1fr;
            }
            .kpi-matrix-row-label {
                font-size: 10.5px;
            }
            .kpi-matrix-col-header {
                font-size: 10px;
                letter-spacing: 0.2px;
            }
            .kpi-matrix-val {
                font-size: 15px;
            }
            .catalog-toolbar {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
                padding: 10px 12px;
            }
            .search-box {
                flex: 0 0 auto;
                width: 100%;
                min-width: 0;
            }
            /* Hide cramped raw select toolbar on mobile */
            .toolbar-actions {
                display: none !important;
            }
            /* Show modern Option 1 scrollable action bar pills and bottom sheet on mobile */
            .mobile-action-bar-wrap {
                display: block !important;
            }
            .mobile-action-bar {
                display: flex !important;
                width: 100%;
                min-width: 0;
            }
            .bottom-sheet {
                display: flex;
            }
            .filter-toggle-btn {
                display: none;
            }
            .mobile-float-bar {
                display: none !important;
            }

            /* Bottom Sheet Drawer */
            .filter-pane {
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                max-height: 85vh;
                height: auto;
                border-radius: 20px 20px 0 0;
                transform: translateY(100%);
                z-index: 100;
            }
            .filter-pane.open {
                transform: translateY(0);
            }
            .pane-header {
                border-radius: 20px 20px 0 0;
            }
            .pane-close-btn {
                display: block;
            }
            .pane-footer {
                display: block;
            }
            .pane-body {
                max-height: calc(85vh - 120px);
                overflow-y: auto;
            }


            /* Adaptive Table to Product Cards */
            .table-responsive-wrap {
                overflow: visible;
                width: 100%;
                max-width: 100%;
            }
            #dealsTable thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }
            #dealsTable,
            #dealsTable tbody {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box;
            }
            #dealsTable tbody tr {
                position: relative;
                display: grid;
                grid-template-columns: 1fr auto;
                row-gap: 6px;
                column-gap: 10px;
                align-items: center;
                background: var(--bg-card);
                border: 1px solid var(--border-card);
                border-radius: 10px;
                margin: 8px 0;
                padding: 10px 12px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box;
                overflow: visible;
            }
            [data-theme="dark"] #dealsTable tbody tr,
            .dark-mode #dealsTable tbody tr {
                background: var(--bg-card);
                border-color: var(--border-card);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            }
            #dealsTable tbody tr:has(td[colspan]),
            #dealsTable tbody tr#tableSentinelRow {
                display: block;
                padding: 0;
                margin: 8px 0;
                border: none;
                box-shadow: none;
                background: transparent;
            }
            #dealsTable tbody tr td[colspan] {
                display: block;
                width: 100% !important;
                box-sizing: border-box;
            }
            /* 1. Model & Specs (with Right-Justified Eyebrow Header) */
            #dealsTable td.model-col {
                grid-column: 1 / -1;
                order: 1;
                display: block;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                padding: 0 !important;
                border: none !important;
                box-sizing: border-box;
                line-height: 1.35;
                font-size: 13px;
            }
            #dealsTable td.model-col .model-eyebrow-row {
                display: flex;
                width: 100%;
                justify-content: flex-end;
                margin-bottom: 4px;
            }
            #dealsTable td.model-col .model-eyebrow-row.has-best-value {
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px 6px;
                margin-bottom: 6px;
            }
            #dealsTable td.model-col .model-eyebrow-row.has-best-value .badge-best-value {
                margin-right: 0;
            }
            #dealsTable td.model-col .specs-snippet {
                margin-top: 3px;
                font-size: 11px;
                line-height: 1.3;
            }

            /* 2. Hardware Power (Compute only, spans full width) */
            #dealsTable td.col-hardware-power {
                grid-column: 1 / -1;
                order: 2;
                display: block;
                width: 100% !important;
                padding: 2px 0 0 0 !important;
                border: none !important;
                box-sizing: border-box;
            }
            #dealsTable.hide-perf-col td.col-hardware-power {
                display: none !important;
            }

            /* 3. Sticker Price (Hidden on mobile - deduplicated into net price) */
            #dealsTable td.col-sticker-price {
                display: none !important;
            }

            /* 4. Merged Deal & Action Block (Spans full width at bottom of card) */
            #dealsTable td.col-deal-action {
                grid-column: 1 / -1;
                order: 3;
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 8px 0 0 0 !important;
                border: none !important;
                border-top: 1px dashed var(--border-subtle) !important;
                box-sizing: border-box;
            }
            #dealsTable td.col-deal-action .deal-stack {
                max-width: 100% !important;
                width: 100% !important;
            }
            #dealsTable td.col-deal-action .deal-row-top {
                display: flex !important;
                width: 100% !important;
                justify-content: space-between !important;
                align-items: center !important;
            }
            #dealsTable td.col-deal-action .deal-row-btn {
                width: 100% !important;
                margin-top: 4px !important;
            }
            #dealsTable td.col-deal-action .deal-row-btn .btn-view {
                width: 100% !important;
                min-width: 0 !important;
            }
            /* 6. Legacy Columns Fallback */
            #dealsTable td.col-stock-action,
            #dealsTable td.col-net-price {
                display: none !important;
            }
            .image-tooltip {
                max-width: calc(100vw - 54px);
                left: 0 !important;
                top: 26px !important;
                box-sizing: border-box;
            }
            .image-tooltip::before {
                left: 10px !important;
                top: -7px !important;
                border-left: 7px solid transparent !important;
                border-right: 7px solid transparent !important;
                border-bottom: 7px solid #cbd5e1 !important;
                border-top: none !important;
            }
            [data-theme="dark"] .image-tooltip::before,
            .dark-mode .image-tooltip::before {
                border-bottom-color: rgba(56, 189, 248, 0.4) !important;
            }
        }

        /* LANDSCAPE MOBILE & SHORT VIEWPORTS -> Table Height Floor & Column Sizing */
        @media (max-height: 520px) and (max-width: 1024px) {
            .table-responsive-wrap {
                max-height: 72vh;
                min-height: 260px;
            }
            th {
                padding: 10px 8px;
                font-size: 10px;
            }
            td {
                padding: 10px 8px;
            }
            .model-col {
                min-width: 220px;
            }
            #dealsTable th:last-child, #dealsTable td:last-child {
                padding-right: 18px;
                min-width: 120px;
            }
            .btn-view {
                padding: 5px 10px;
                font-size: 11.5px;
            }
            table {
                min-width: 820px;
            }
        }

        /* ==========================================================================
           PROMOTIONS MODAL & DRAWER STYLES
           ========================================================================== */
        .promos-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            justify-content: flex-end;
            align-items: stretch;
            padding: 0;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

        .promos-modal-overlay.is-active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .promos-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            cursor: pointer;
        }

        .promos-drawer-handle {
            display: none;
            width: 36px;
            height: 4px;
            background: #cbd5e1;
            border-radius: 9999px;
            margin: 10px auto 2px;
            flex-shrink: 0;
        }

        .promos-modal-dialog {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 470px;
            height: 100vh;
            max-height: 100vh;
            background: var(--bg-card);
            border-radius: 16px 0 0 16px;
            box-shadow: -10px 0 35px rgba(0, 0, 0, 0.22);
            border-left: 1px solid var(--border-card);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateX(100%);
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .promos-modal-overlay.is-active .promos-modal-dialog {
            transform: translateX(0);
        }

        .promos-modal-header {
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-card);
            background: var(--bg-card-hover);
            flex-shrink: 0;
        }

        .promos-modal-title-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .promos-modal-icon {
            font-size: 24px;
            line-height: 1;
        }

        .promos-modal-title {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.2;
        }

        .promos-modal-subtitle {
            margin: 2px 0 0;
            font-size: 12px;
            color: var(--text-dim);
        }

        .promos-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            line-height: 1;
            color: var(--text-dim);
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: all 0.15s ease;
        }

        .promos-modal-close:hover {
            color: var(--text-main);
            background: var(--bg-card-hover);
        }

        .promos-tabs-wrapper {
            position: relative;
            flex-shrink: 0;
            background: var(--bg-card);
            border-bottom: 1px solid var(--border-card);
            overflow: hidden;
        }

        .promos-tabs-wrapper::before,
        .promos-tabs-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 4px;
            width: 32px;
            pointer-events: none;
            z-index: 2;
            transition: opacity 0.2s ease;
        }

        .promos-tabs-wrapper::before {
            left: 0;
            background: linear-gradient(to right, var(--bg-card), transparent);
        }

        .promos-tabs-wrapper::after {
            right: 0;
            background: linear-gradient(to right, transparent, var(--bg-card));
        }

        .promos-scroll-btn {
            position: absolute;
            top: calc(50% - 2px);
            transform: translateY(-50%);
            z-index: 4;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            color: #334155;
            cursor: pointer;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
            user-select: none;
            padding: 0;
        }

        .promos-scroll-btn:hover {
            background: var(--bg-card-hover);
            color: var(--text-main);
            border-color: var(--primary);
        }

        .promos-scroll-btn:active {
            transform: translateY(-50%) scale(0.92);
        }

        .promos-scroll-btn.is-hidden {
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
        }

        .promos-scroll-prev {
            left: 5px;
            padding-right: 1px;
        }

        .promos-scroll-next {
            right: 5px;
            padding-left: 1px;
        }

        .promos-store-tabs {
            padding: 10px 32px 8px 18px;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            background: var(--bg-card);
            flex-shrink: 0;
            scrollbar-width: thin;
            scrollbar-color: #94a3b8 var(--bg-card-hover);
            -webkit-overflow-scrolling: touch;
        }

        .promos-store-tabs::-webkit-scrollbar {
            display: block;
            height: 4px;
        }

        .promos-store-tabs::-webkit-scrollbar-track {
            background: var(--bg-card-hover);
            border-radius: 9999px;
            margin: 0 16px;
        }

        .promos-store-tabs::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 9999px;
        }

        .promos-store-tabs::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        .promos-tab {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 13px;
            border: 1px solid var(--border-card);
            background: var(--bg-card);
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .promos-tab:hover {
            color: var(--text-main);
            background: var(--bg-card-hover);
            border-color: var(--primary);
        }

        .promos-tab.active {
            color: #ffffff;
            background: #059669;
            border-color: #059669;
            box-shadow: 0 1px 3px rgba(5, 150, 105, 0.25);
        }

        .promos-tab-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 19px;
            height: 19px;
            padding: 0 5px;
            border-radius: 9999px;
            font-size: 10.5px;
            font-weight: 800;
            line-height: 1;
            background: var(--bg-card-hover);
            color: var(--text-dim);
            margin-left: 5px;
            transition: all 0.15s ease;
        }

        .promos-tab.active .promos-tab-count {
            background: #ffffff;
            color: #059669;
        }

        .promos-modal-body {
            padding: 18px 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
        }

        .promo-modal-card {
            background: var(--bg-card-hover);
            border: 1px solid var(--border-card);
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: all 0.15s ease;
        }

        .promo-modal-card:hover {
            border-color: var(--primary);
            background: var(--bg-card);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .promo-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }

        .promo-card-store-badge {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 8px;
            border-radius: 4px;
        }

        .promo-card-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
        }

        .promo-card-meta {
            font-size: 12.5px;
            color: var(--text-dim);
            line-height: 1.4;
        }

        .promo-card-meta strong {
            color: var(--text-main);
        }

        .promo-card-exclusions {
            font-size: 11.5px;
            color: #94a3b8;
            font-style: italic;
        }

        .promo-card-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 4px;
            padding-top: 10px;
            border-top: 1px solid var(--border-card);
            flex-wrap: wrap;
        }

        .promo-card-filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-card);
            color: var(--text-main);
            border: 1px solid var(--border-card);
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .promo-card-filter-btn:hover {
            background: var(--primary);
            color: #ffffff;
            border-color: var(--primary);
        }

        .promos-modal-footer {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid var(--border-card);
            background: var(--bg-card-hover);
            gap: 12px;
            flex-shrink: 0;
        }

        .promos-footer-note {
            font-size: 12px;
            color: var(--text-dim);
        }

        .promos-footer-close-btn {
            background: var(--primary);
            color: #ffffff;
            border: none;
            padding: 7px 16px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .promos-footer-close-btn:hover {
            filter: brightness(1.1);
        }

        .promo-tag-auto {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 6px;
            letter-spacing: 0.3px;
        }

        .promo-code-box {
            display: inline-flex;
            align-items: center;
            background: #ffffff;
            border: 1px dashed #0284c7;
            border-radius: 6px;
            overflow: hidden;
        }

        .promo-code-box code {
            padding: 3px 8px;
            font-size: 12px;
            font-weight: 800;
            color: #0369a1;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            letter-spacing: 0.5px;
        }

        .btn-promo-copy {
            background: #f0f9ff;
            border: none;
            border-left: 1px solid #bae6fd;
            color: #0284c7;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .btn-promo-copy:hover {
            background: #0284c7;
            color: #ffffff;
        }

        .promo-badge-dellrefurb {
            background: #dbeafe;
            color: #1e40af;
            border: 1px solid #bfdbfe;
        }

        .promo-badge-delloutlet {
            background: #fef3c7;
            color: #92400e;
            border: 1px solid #fde68a;
        }

        .promo-badge-lenovo {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        .promo-badge-microsoft {
            background: #eff6ff;
            color: #0078d4;
            border: 1px solid #bfdbfe;
        }

        .promo-badge-woot {
            background: #fef3c7;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .promo-badge-apple {
            background: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
        }

        .promo-badge-newegg {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #ffedd5;
        }

        @media (max-width: 768px) {
            .promo-header-bar {
                flex-direction: column;
                align-items: stretch;
                padding: 9px 12px;
                gap: 8px;
            }
            .promo-bar-left {
                width: 100%;
                gap: 10px;
                align-items: flex-start;
            }
            .promo-bar-icon {
                font-size: 18px;
                margin-top: 1px;
            }
            .promo-bar-text-group {
                flex: 1;
                min-width: 0;
                gap: 4px;
            }
            .promo-bar-title {
                display: none;
            }
            .promo-bar-summary {
                font-size: 12px;
                line-height: 1.35;
            }
            .promo-sub-badge {
                font-size: 10.5px;
                padding: 2px 7px;
                line-height: 1.3;
            }
            .promo-view-btn {
                width: 100%;
                justify-content: center;
                padding: 6px 12px;
                font-size: 11.5px;
            }
            .promos-modal-overlay {
                align-items: flex-end;
                justify-content: center;
            }
            .promos-drawer-handle {
                display: block;
            }
            .promos-modal-dialog {
                max-width: 100%;
                width: 100%;
                height: 85vh;
                max-height: 88vh;
                border-radius: 20px 20px 0 0;
                border-left: none;
                border-top: 1px solid rgba(226, 232, 240, 0.9);
                transform: translateY(100%);
                box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
            }
            .promos-modal-overlay.is-active .promos-modal-dialog {
                transform: translateY(0);
            }
            .promos-modal-header {
                padding: 12px 16px;
            }
            .promos-store-tabs {
                padding: 8px 30px 8px 14px;
            }
            .promos-modal-body {
                padding: 14px 16px;
                flex: 1 1 auto;
                min-height: 0;
                max-height: none;
                overflow-y: auto;
            }
        }

        /* ==========================================================================
           PRODUCT IMAGE TOOLTIP & THUMBNAIL TRIGGER
           ========================================================================== */
        .item-img-trigger {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-right: 6px;
            vertical-align: -3px;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            border-radius: 5px;
            color: #0284c7;
            cursor: pointer;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        [data-theme="dark"] .item-img-trigger,
        .dark-mode .item-img-trigger {
            background: #1e293b;
            border-color: #334155;
            color: #38bdf8;
        }

        @media (hover: hover) and (pointer: fine) {
            tbody tr:has(.item-img-trigger:hover) {
                position: relative;
                z-index: 25;
            }
            .item-img-trigger:hover {
                z-index: 1000;
                background: #0284c7;
                border-color: #0284c7;
                color: #ffffff;
                box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
            }
            [data-theme="dark"] .item-img-trigger:hover,
            .dark-mode .item-img-trigger:hover {
                background: #0284c7;
                border-color: #38bdf8;
                color: #ffffff;
                box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
            }
        }

        tbody tr:has(.item-img-trigger.is-active) {
            position: relative;
            z-index: 25;
        }

        .item-img-trigger.is-active {
            z-index: 1000;
            background: #0284c7;
            border-color: #0284c7;
            color: #ffffff;
            box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
        }

        [data-theme="dark"] .item-img-trigger.is-active,
        .dark-mode .item-img-trigger.is-active {
            background: #0284c7;
            border-color: #38bdf8;
            color: #ffffff;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
        }

        .item-img-trigger svg {
            pointer-events: none;
        }

        /* Floating Image Tooltip Card - Anchors downward to stay cleanly below sticky header */
        .image-tooltip {
            position: absolute;
            left: 28px;
            top: -6px;
            transform: translateX(6px);
            width: 280px;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
            z-index: 1000;
            pointer-events: auto;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
            text-align: left;
        }

        [data-theme="dark"] .image-tooltip,
        .dark-mode .image-tooltip {
            background: rgba(15, 23, 42, 0.96);
            border-color: rgba(56, 189, 248, 0.35);
            box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.15);
        }

        @media (hover: hover) and (pointer: fine) {
            .item-img-trigger:hover .image-tooltip {
                opacity: 1;
                visibility: visible;
                transform: translateX(0);
            }
            .tooltip-close-btn {
                display: none !important;
            }
        }

        .item-img-trigger.is-active .image-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .tooltip-close-btn {
            display: none;
        }

        /* Dedicated touch/mobile dismiss button (tap-to-open popover) */
        @media (hover: none), (pointer: coarse), (max-width: 768px) {
            .tooltip-close-btn {
                position: absolute;
                top: 8px;
                right: 8px;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #f1f5f9;
                border: 1px solid #cbd5e1;
                color: #64748b;
                font-size: 15px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                padding: 0;
                z-index: 10;
                transition: all 0.15s ease;
            }
            .tooltip-close-btn:hover {
                background: #e2e8f0;
                color: #0f172a;
            }
            [data-theme="dark"] .tooltip-close-btn,
            .dark-mode .tooltip-close-btn {
                background: #1e293b;
                border-color: #334155;
                color: #cbd5e1;
            }
            [data-theme="dark"] .tooltip-close-btn:hover,
            .dark-mode .tooltip-close-btn:hover {
                background: #334155;
                color: #ffffff;
            }
        }

        /* Tooltip Arrow */
        .image-tooltip::before {
            content: '';
            position: absolute;
            left: -7px;
            top: 14px;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-right: 7px solid #cbd5e1;
        }

        [data-theme="dark"] .image-tooltip::before,
        .dark-mode .image-tooltip::before {
            border-right-color: rgba(56, 189, 248, 0.35);
        }



        .tooltip-img-box {
            width: 100%;
            height: 155px;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 10px;
            border: 1px solid #e2e8f0;
        }

        [data-theme="dark"] .tooltip-img-box,
        .dark-mode .tooltip-img-box {
            background: #ffffff;
            border-color: #334155;
        }

        .tooltip-img {
            max-width: 92%;
            max-height: 92%;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .tooltip-thumb-svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            transition: transform 0.2s ease;
        }

        .image-tooltip:hover .tooltip-img,
        .image-tooltip:hover .tooltip-thumb-svg {
            transform: scale(1.04);
        }

        .tooltip-img-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 4px;
            line-height: 1.3;
            white-space: normal;
        }

        .tooltip-img-sub {
            font-size: 11px;
            color: var(--text-dim);
            margin-bottom: 10px;
            line-height: 1.3;
            white-space: normal;
        }

        .tooltip-img-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
            color: #ffffff !important;
            font-weight: 700;
            font-size: 11.5px;
            padding: 7px 10px;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.15s ease;
        }

        .tooltip-img-btn:hover {
            background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
            transform: translateY(-1px);
        }

        /* Catalog Multipage Pagination Bar */
        .catalog-pagination-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 18px;
            background: #f8fafc;
            border-top: 1px solid var(--border-card);
            border-bottom-left-radius: 11px;
            border-bottom-right-radius: 11px;
            flex-wrap: wrap;
        }

        .pagination-info {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .pagination-controls {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
        }

        .page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-muted);
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }

        .page-btn:hover:not(:disabled) {
            background: var(--bg-card-hover);
            border-color: var(--primary);
            color: var(--text-main);
        }

        .page-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #ffffff;
            font-weight: 700;
            box-shadow: 0 1px 3px rgba(2, 132, 199, 0.35);
        }

        .page-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            background: var(--bg-card-hover);
            border-color: var(--border-card);
            color: var(--text-dim);
        }

        .page-dots {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 34px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-dim);
            user-select: none;
        }

        .pagination-page-size-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .pagination-page-size-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pagination-page-size-select {
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            background: var(--bg-card);
            border: 1px solid var(--border-card);
            color: var(--text-main);
            outline: none;
            cursor: pointer;
        }

        @media (max-width: 640px) {
            .catalog-pagination-bar {
                flex-direction: column;
                align-items: center;
                gap: 12px;
                padding: 14px 14px 20px;
            }
            .pagination-info {
                order: 1;
            }
            .pagination-page-size-wrap {
                order: 2;
            }
            .pagination-controls {
                width: 100%;
                justify-content: center;
                order: 3;
            }
        }

        /* Dark Mode Dashboard Headers & Pagination */
        [data-theme="dark"] .pane-header {
            background: var(--bg-card) !important;
            border-bottom-color: var(--border-card) !important;
        }
        [data-theme="dark"] .catalog-main .main-header {
            background: var(--bg-card) !important;
            border-bottom-color: var(--border-card) !important;
        }
        [data-theme="dark"] .catalog-pagination-bar {
            background: var(--bg-card) !important;
            border-top-color: var(--border-card) !important;
        }
        [data-theme="dark"] .chip-all-hardware {
            background: var(--bg-card-hover) !important;
            color: var(--text-muted) !important;
            border-color: var(--border-card) !important;
        }

        /* Dark Mode Facet Toggles & Sections */
        [data-theme="dark"] .sub-facet-toggle-btn {
            background: var(--bg-card-hover) !important;
            border-color: var(--border-card) !important;
            color: var(--text-muted) !important;
        }
        [data-theme="dark"] .sub-facet-toggle-btn:hover {
            background: var(--border-card) !important;
            border-color: var(--primary) !important;
            color: var(--text-main) !important;
        }
        [data-theme="dark"] .sub-facet-toggle-btn[aria-expanded="true"],
        [data-theme="dark"] .sub-facet-toggle-btn.is-filtered {
            background: rgba(56, 189, 248, 0.15) !important;
            border-color: rgba(56, 189, 248, 0.35) !important;
            color: #38bdf8 !important;
        }
        [data-theme="dark"] .sub-facet-section {
            border-left-color: var(--border-card) !important;
        }

        /* Dark Mode Hardware Sliders */
        [data-theme="dark"] .slider-card,
        [data-theme="dark"] .filter-pane .slider-card {
            background: var(--bg-card) !important;
            border-color: var(--border-card) !important;
            box-shadow: none !important;
        }
        [data-theme="dark"] .slider-badge {
            background: rgba(56, 189, 248, 0.15) !important;
            color: #38bdf8 !important;
            border-color: rgba(56, 189, 248, 0.3) !important;
        }
        [data-theme="dark"] .slider-card.single-value .slider-badge {
            background: rgba(245, 158, 11, 0.15) !important;
            color: #fbbf24 !important;
            border-color: rgba(245, 158, 11, 0.3) !important;
        }
        [data-theme="dark"] .slider-track-bg {
            background: var(--border-card) !important;
        }
        [data-theme="dark"] .slider-thumb {
            background: #0f172a !important;
            border-color: var(--primary) !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
        }
        [data-theme="dark"] .slider-thumb:hover {
            border-color: #38bdf8 !important;
        }
        [data-theme="dark"] .slider-thumb.dragging {
            border-color: #38bdf8 !important;
            box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25) !important;
        }
        [data-theme="dark"] .slider-tick {
            color: var(--text-dim) !important;
        }
        [data-theme="dark"] .slider-tick.active {
            color: var(--text-main) !important;
        }

.perf-score-card,
.perf-card-opt2 {
    display: inline-flex;
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 8px;
    min-width: 196px;
    max-width: 236px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.15s ease;
    box-sizing: border-box;
    cursor: pointer;
}
.perf-card-opt2:hover {
    border-color: #0284c7;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}
.opt2-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2px 4px;
}
.opt2-divider {
    width: 1px;
    background: #e2e8f0;
    margin: 2px 4px;
}
.opt2-tag {
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.opt2-col-office .opt2-tag { color: #0284c7; }
.opt2-col-gaming .opt2-tag { color: #9333ea; }
.opt2-val {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}
.opt2-tier-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.3;
}
.opt2-col-topval {
    margin-bottom: 3px;
}
.val-badge-deal,
.val-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: -0.15px;
    color: #047857;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.25;
}
.val-badge-mid,
.val-badge-avg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: -0.15px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.25;
}
.val-badge-bottom {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: -0.15px;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.25;
}
.pill-entry { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.pill-mid { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.pill-pro { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
.pill-workstation { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.pill-integrated { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.pill-casual { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.pill-1080p { background: #fdf2f8; color: #be185d; border: 1px solid #fbcfe8; }
.pill-hiend { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* Option 2 Cards & Pills — dark theme */
[data-theme="dark"] .perf-card-opt2 { background: #131b2e; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .perf-card-opt2:hover { border-color: rgba(56, 189, 248, 0.4); box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
[data-theme="dark"] .opt2-divider { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .opt2-col-office .opt2-tag { color: #38bdf8; }
[data-theme="dark"] .opt2-col-gaming .opt2-tag { color: #c084fc; }
[data-theme="dark"] .opt2-val { color: #f8fafc; }
[data-theme="dark"] .pill-entry { background: rgba(100, 116, 139, 0.16); color: #94a3b8; border-color: rgba(148, 163, 184, 0.25); }
[data-theme="dark"] .pill-mid { background: rgba(2, 132, 199, 0.15); color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); }
[data-theme="dark"] .pill-pro { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(52, 211, 153, 0.3); }
[data-theme="dark"] .pill-workstation { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }
[data-theme="dark"] .pill-integrated { background: rgba(100, 116, 139, 0.12); color: #64748b; border-color: rgba(100, 116, 139, 0.2); }
[data-theme="dark"] .pill-casual { background: rgba(147, 51, 234, 0.15); color: #c084fc; border-color: rgba(192, 132, 252, 0.3); }
[data-theme="dark"] .pill-1080p { background: rgba(236, 72, 153, 0.15); color: #f472b6; border-color: rgba(244, 114, 182, 0.3); }
[data-theme="dark"] .pill-hiend { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(248, 113, 113, 0.3); }
[data-theme="dark"] .val-badge-deal,
[data-theme="dark"] .val-badge-top { color: #34d399; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(52, 211, 153, 0.25); }
[data-theme="dark"] .val-badge-mid,
[data-theme="dark"] .val-badge-avg { color: #94a3b8; background: rgba(148, 163, 184, 0.16); border: 1px solid rgba(148, 163, 184, 0.25); }
[data-theme="dark"] .val-badge-bottom { color: #f87171; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(248, 113, 113, 0.25); }
        /* Option 2 Cards responsive narrow cells */
        @media (max-width: 900px) {
            .perf-card-opt2    { min-width: 150px; }
            .opt2-val          { font-size: 13.5px; }
            .opt2-tier-pill    { font-size: 8px; padding: 1px 4px; }
        }

        /* ── ULTRA-COMPACT BENCHMARK TOOLTIP CARD (OPTION B: UNIFIED PILL) ── */
        .perf-tooltip-card {
            position: absolute;
            top: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%) translateY(3px);
            width: 255px;
            max-width: 92vw;
            border-radius: 8px;
            padding: 7px 9px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 2000;
            transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.14s;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            text-align: left;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.99);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid #cbd5e1;
            box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.16), 0 3px 8px rgba(0, 0, 0, 0.05);
            color: #0f172a;
        }
        .perf-tooltip-card::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 0;
            right: 0;
            height: 8px;
        }
        .perf-tooltip-card::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent rgba(255, 255, 255, 0.99) transparent;
        }

        [data-theme="dark"] .perf-tooltip-card,
        .dark-mode .perf-tooltip-card {
            background: rgba(15, 23, 42, 0.98);
            border-color: rgba(56, 189, 248, 0.35);
            box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.75), 0 0 18px rgba(56, 189, 248, 0.12);
            color: #f8fafc;
        }
        [data-theme="dark"] .perf-tooltip-card::after,
        .dark-mode .perf-tooltip-card::after {
            border-color: transparent transparent rgba(15, 23, 42, 0.98) transparent;
        }

        @media (hover: hover) and (pointer: fine) {
            tbody tr:has(.perf-card-opt2:hover),
            tbody tr:has(.perf-card-opt2:focus-within) {
                position: relative;
                z-index: 35;
            }
            .perf-card-opt2:hover,
            .perf-card-opt2:focus-within {
                z-index: 1000;
            }
            .perf-card-opt2:hover .perf-tooltip-card,
            .perf-card-opt2:focus-within .perf-tooltip-card,
            .perf-tooltip-card:hover {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateX(-50%) translateY(0);
            }
        }

        tbody tr:has(.perf-card-opt2.is-active),
        tbody tr.perf-row-active {
            position: relative;
            z-index: 35;
        }

        .perf-card-opt2.is-active {
            z-index: 1000;
        }

        .perf-card-opt2.is-active .perf-tooltip-card {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .tip-head-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1px 0 3px 0;
            font-size: 10px;
            font-weight: 700;
            gap: 4px;
        }
        .tip-head-gaming {
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            margin-top: 5px;
            padding-top: 4px;
        }
        .head-left {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .head-tag {
            font-size: 8.5px;
            font-weight: 800;
            padding: 1px 3.5px;
            border-radius: 2.5px;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .head-tag-office {
            background: rgba(2, 132, 199, 0.15);
            color: #0284c7;
        }
        [data-theme="dark"] .head-tag-office,
        .dark-mode .head-tag-office {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
        }
        .head-tag-gaming {
            background: rgba(147, 51, 234, 0.15);
            color: #9333ea;
        }
        [data-theme="dark"] .head-tag-gaming,
        .dark-mode .head-tag-gaming {
            background: rgba(192, 132, 252, 0.18);
            color: #c084fc;
        }
        .head-score {
            font-weight: 800;
            font-size: 10.5px;
            font-variant-numeric: tabular-nums;
        }

        /* Option B Unified Tier + BB in Tier */
        .head-tier-bb-unified {
            font-size: 8.5px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            background: rgba(16, 185, 129, 0.14);
            color: #047857;
            border: 1px solid rgba(16, 185, 129, 0.35);
            white-space: nowrap;
            line-height: 1.2;
        }
        .head-tier-bb-unified.bb-top {
            background: rgba(16, 185, 129, 0.14);
            color: #047857;
            border: 1px solid rgba(16, 185, 129, 0.35);
        }
        .head-tier-bb-unified.bb-avg {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
        }
        .head-tier-bb-unified.bb-bottom {
            background: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        [data-theme="dark"] .head-tier-bb-unified,
        .dark-mode .head-tier-bb-unified {
            color: #34d399;
            border-color: rgba(52, 211, 153, 0.35);
        }
        [data-theme="dark"] .head-tier-bb-unified.bb-top,
        .dark-mode .head-tier-bb-unified.bb-top {
            background: rgba(16, 185, 129, 0.15);
            color: #34d399;
            border-color: rgba(52, 211, 153, 0.35);
        }
        [data-theme="dark"] .head-tier-bb-unified.bb-avg,
        .dark-mode .head-tier-bb-unified.bb-avg {
            background: rgba(148, 163, 184, 0.16);
            color: #94a3b8;
            border-color: rgba(148, 163, 184, 0.25);
        }
        [data-theme="dark"] .head-tier-bb-unified.bb-bottom,
        .dark-mode .head-tier-bb-unified.bb-bottom {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border-color: rgba(248, 113, 113, 0.3);
        }
        .head-tier-bb-unified .tier-lbl {
            font-weight: 800;
            color: inherit;
        }
        .head-tier-bb-unified .tier-sep {
            opacity: 0.5;
            margin: 0 3px;
        }

        .head-tier-pill {
            font-size: 8.5px;
            font-weight: 700;
            padding: 1px 4.5px;
            border-radius: 3px;
            border: 1px solid transparent;
            line-height: 1.2;
        }
        .head-tier-pill.tier-entry { background: rgba(100, 116, 139, 0.18); color: #94a3b8; border-color: rgba(100, 116, 139, 0.3); }
        .head-tier-pill.tier-mid   { background: rgba(14, 165, 233, 0.18); color: #0284c7; border-color: rgba(14, 165, 233, 0.35); }
        [data-theme="dark"] .head-tier-pill.tier-mid,
        .dark-mode .head-tier-pill.tier-mid { color: #38bdf8; }
        .head-tier-pill.tier-pro   { background: rgba(56, 189, 248, 0.2); color: #0284c7; border-color: rgba(56, 189, 248, 0.45); }
        [data-theme="dark"] .head-tier-pill.tier-pro,
        .dark-mode .head-tier-pill.tier-pro { color: #38bdf8; }
        .head-tier-pill.tier-work  { background: rgba(99, 102, 241, 0.2); color: #6366f1; border-color: rgba(99, 102, 241, 0.45); }
        [data-theme="dark"] .head-tier-pill.tier-work,
        .dark-mode .head-tier-pill.tier-work { color: #818cf8; }
        .head-tier-pill.tier-casual { background: rgba(20, 184, 166, 0.18); color: #0d9488; border-color: rgba(20, 184, 166, 0.35); }
        [data-theme="dark"] .head-tier-pill.tier-casual,
        .dark-mode .head-tier-pill.tier-casual { color: #2dd4bf; }
        .head-tier-pill.tier-1080p  { background: rgba(168, 85, 247, 0.2); color: #9333ea; border-color: rgba(168, 85, 247, 0.45); }
        [data-theme="dark"] .head-tier-pill.tier-1080p,
        .dark-mode .head-tier-pill.tier-1080p { color: #c084fc; }
        .head-tier-pill.tier-hiend  { background: rgba(236, 72, 153, 0.2); color: #db2777; border-color: rgba(236, 72, 153, 0.45); }
        [data-theme="dark"] .head-tier-pill.tier-hiend,
        .dark-mode .head-tier-pill.tier-hiend { color: #f472b6; }

        .tip-data-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-top: 1px;
        }
        .tip-data-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 9.5px;
            line-height: 1.35;
            gap: 5px;
        }
        .tip-data-row.tip-val-row {
            margin-top: 3px;
            padding-top: 3px;
            border-top: 1px dashed rgba(226, 232, 240, 0.7);
        }
        [data-theme="dark"] .tip-data-row.tip-val-row,
        .dark-mode .tip-data-row.tip-val-row {
            border-top-color: rgba(255, 255, 255, 0.1);
        }
        .data-key {
            font-weight: 700;
            font-size: 9px;
            color: #64748b;
            min-width: 26px;
            width: auto;
            margin-right: 2px;
            flex-shrink: 0;
            text-transform: uppercase;
        }
        [data-theme="dark"] .data-key,
        .dark-mode .data-key {
            color: #94a3b8;
        }
        .data-val {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0.95;
            font-size: 9.5px;
        }
        .tdp-tag {
            display: inline-block;
            font-size: 8px;
            font-weight: 700;
            padding: 0 3px;
            border-radius: 2px;
            background: rgba(245, 158, 11, 0.15);
            color: #b45309;
            margin-left: 2px;
        }
        [data-theme="dark"] .tdp-tag,
        .dark-mode .tdp-tag {
            color: #fbbf24;
        }
        .data-pts {
            font-weight: 700;
            font-size: 10px;
            font-variant-numeric: tabular-nums;
            color: #0284c7;
            text-align: right;
            flex-shrink: 0;
        }
        [data-theme="dark"] .data-pts,
        .dark-mode .data-pts {
            color: #38bdf8;
        }
        .data-pts.purple-pts {
            color: #9333ea;
        }
        [data-theme="dark"] .data-pts.purple-pts,
        .dark-mode .data-pts.purple-pts {
            color: #c084fc;
        }

        .tip-mobile-close {
            display: none;
        }
        @media (hover: none), (pointer: coarse), (max-width: 768px) {
            .tip-mobile-close {
                display: flex;
                position: absolute;
                top: 4px;
                right: 4px;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                border: none;
                background: rgba(148, 163, 184, 0.2);
                color: inherit;
                font-size: 12px;
                cursor: pointer;
                line-height: 1;
                z-index: 10;
            }
        }

/* ── DEAL SYNDICATION FEEDS BADGES ───────────────────────────── */
.footer-feeds-cluster {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 16px 0;
    font-size: 13px;
    position: relative;
}
.footer-feeds-label {
    font-weight: 700;
    color: #334155;
}
.footer-feeds-sep {
    color: #cbd5e1;
}
.footer-feeds-badges {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.feed-dropdown {
    position: relative;
    display: inline-block;
}
.feed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: all 0.15s ease-in-out;
}
.feed-badge::-webkit-details-marker,
.feed-badge::marker {
    display: none;
}
.dropdown-chevron {
    transition: transform 0.2s ease;
    margin-left: 2px;
    flex-shrink: 0;
}
.feed-dropdown[open] .dropdown-chevron {
    transform: rotate(180deg);
}
.feed-badge-rss {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}
.feed-badge-rss:hover {
    background: #ea580c;
    color: #ffffff;
    border-color: #ea580c;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}
.feed-badge-json {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.feed-badge-json:hover {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}
.feed-icon {
    flex-shrink: 0;
}
.feed-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: min(480px, calc(100vh - 120px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.16), 0 6px 12px -4px rgba(0, 0, 0, 0.08);
    z-index: 1050;
    text-align: left;
    animation: feedMenuIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes feedMenuIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.feed-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}
.feed-dropdown-menu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: #e2e8f0 transparent transparent transparent;
}
.feed-dropdown-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}
.feed-dropdown-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0;
}
.feed-dropdown-row .feed-dropdown-item {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}
.feed-copy-btn {
    flex: 0 0 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 0;
}
.feed-copy-btn:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    transform: translateY(-1px);
}
.feed-copy-btn.is-copied {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}
.feed-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    margin: 3px 0;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    transition: background 0.12s ease;
}
.feed-dropdown-item.primary-deal {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.feed-dropdown-item.primary-deal:hover {
    background: #f1f5f9;
    color: #0284c7;
}
.feed-dropdown-item.best-value-deal {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #b45309;
}
.feed-dropdown-item.best-value-deal:hover {
    background: #fef3c7;
    color: #92400e;
}
.feed-item-tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    font-weight: 700;
}
.feed-dropdown-item.best-value-deal .feed-item-tag {
    background: #fde68a;
    color: #78350f;
}
.feed-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 8px 0;
}
.feed-dropdown-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 6px;
    padding-left: 2px;
}
.feed-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}
.feed-subitem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.feed-subitem-row:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.feed-subitem-row .feed-dropdown-subitem {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
}
.feed-subitem-row .feed-dropdown-subitem:hover {
    background: transparent;
}
.feed-dropdown-subitem {
    display: block;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 11.5px;
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, color 0.12s ease;
}
.feed-dropdown-subitem:hover {
    background: #f1f5f9;
    color: #0284c7;
    font-weight: 600;
}
.feed-copy-btn-mini {
    flex: 0 0 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.65;
    transition: all 0.12s ease;
    padding: 0;
    margin-right: 2px;
}
.feed-subitem-row:hover .feed-copy-btn-mini {
    opacity: 1;
    color: #475569;
}
.feed-copy-btn-mini:hover {
    background: #e2e8f0;
    color: #0284c7 !important;
}
.feed-copy-btn-mini.is-copied {
    opacity: 1 !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
}
[data-theme="dark"] .footer-feeds-label {
    color: #94a3b8;
}
[data-theme="dark"] .footer-feeds-sep {
    color: #475569;
}
[data-theme="dark"] .feed-badge-rss {
    background: rgba(234, 88, 12, 0.12);
    color: #fb923c;
    border-color: rgba(234, 88, 12, 0.35);
}
[data-theme="dark"] .feed-badge-rss:hover {
    background: #ea580c;
    color: #ffffff;
}
[data-theme="dark"] .feed-badge-json {
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
    border-color: rgba(22, 163, 74, 0.35);
}
[data-theme="dark"] .feed-badge-json:hover {
    background: #16a34a;
    color: #ffffff;
}
[data-theme="dark"] .feed-dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.6), 0 6px 12px -4px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .feed-dropdown-menu::after {
    border-color: #1e293b transparent transparent transparent;
}
[data-theme="dark"] .feed-dropdown-menu::before {
    border-color: #334155 transparent transparent transparent;
}
[data-theme="dark"] .feed-dropdown-header {
    color: #94a3b8;
    border-color: #334155;
}
[data-theme="dark"] .feed-copy-btn {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}
[data-theme="dark"] .feed-copy-btn:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}
[data-theme="dark"] .feed-subitem-row {
    background: #0f172a;
    border-color: #1e293b;
}
[data-theme="dark"] .feed-subitem-row:hover {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .feed-copy-btn-mini {
    color: #64748b;
}
[data-theme="dark"] .feed-subitem-row:hover .feed-copy-btn-mini {
    color: #94a3b8;
}
[data-theme="dark"] .feed-copy-btn-mini:hover {
    background: #334155;
    color: #38bdf8 !important;
}
[data-theme="dark"] .feed-copy-btn-mini.is-copied {
    background: rgba(34, 197, 94, 0.25) !important;
    color: #4ade80 !important;
}
[data-theme="dark"] .feed-dropdown-item {
    color: #e2e8f0;
}
[data-theme="dark"] .feed-dropdown-item:hover {
    background: #334155;
    color: #38bdf8;
}
[data-theme="dark"] .feed-dropdown-item.primary-deal {
    background: #0f172a;
    border-color: #334155;
}
[data-theme="dark"] .feed-dropdown-item.primary-deal:hover {
    background: #1e293b;
    border-color: #475569;
}
[data-theme="dark"] .feed-dropdown-item.best-value-deal {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}
[data-theme="dark"] .feed-dropdown-item.best-value-deal:hover {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
}
[data-theme="dark"] .feed-dropdown-item.best-value-deal .feed-item-tag {
    background: rgba(245, 158, 11, 0.25);
    color: #fde68a;
}
[data-theme="dark"] .feed-dropdown-divider {
    background: #334155;
}
[data-theme="dark"] .feed-dropdown-section-title {
    color: #64748b;
}
[data-theme="dark"] .feed-dropdown-subitem {
    color: #94a3b8;
}
[data-theme="dark"] .feed-dropdown-subitem:hover {
    background: transparent;
    color: #38bdf8;
}

/* Responsive Deal Syndication Feeds (Mobile Screen-Centering & Overflow Prevention) */
@media (max-width: 640px) {
    .footer-feeds-cluster {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
    }
    .footer-feeds-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: static;
    }
    .footer-feeds-sep {
        color: #cbd5e1;
    }
    .feed-dropdown {
        position: static;
    }
    .feed-dropdown-menu {
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(340px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: min(480px, calc(100vh - 120px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .feed-dropdown-menu::before,
    .feed-dropdown-menu::after {
        display: none !important;
    }
    .feed-copy-btn-mini {
        opacity: 0.85;
    }
}

        /* ==========================================================================
           PHOTO VIEW SELECTOR & TABLE VIEW MODES (IMAGE EXPANSION ONLY)
           ========================================================================== */
        .th-model-wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            min-width: 260px;
        }

        .th-model-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-dim);
            white-space: nowrap;
        }

        .photo-view-selector {
            display: inline-flex;
            align-items: center;
            background: var(--bg-card-hover);
            border: 1px solid var(--border-card);
            border-radius: 9999px;
            padding: 2.5px;
            gap: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .photo-view-btn {
            background: transparent;
            border: none;
            padding: 3.5px 9px;
            border-radius: 9999px;
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-dim);
            cursor: pointer;
            transition: all 0.16s ease-in-out;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            line-height: 1;
            text-transform: none;
            letter-spacing: normal;
        }

        .photo-view-btn svg {
            flex-shrink: 0;
            opacity: 0.8;
        }

        .photo-view-btn:hover {
            color: var(--text-main);
        }

        .photo-view-btn.active {
            background: var(--bg-card);
            color: var(--primary);
            box-shadow: 0 1px 4px rgba(2, 132, 199, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
        }

        [data-theme="dark"] .photo-view-btn.active,
        .dark-mode .photo-view-btn.active {
            background: rgba(15, 23, 42, 0.95);
            color: #38bdf8;
            box-shadow: 0 1px 4px rgba(56, 189, 248, 0.25);
        }

        /* 1. COMPACT MODE */
        #dealsTable.view-compact th.col-thumb,
        #dealsTable.view-compact td.col-thumb {
            display: none !important;
        }
        #dealsTable.view-compact .item-img-trigger {
            display: inline-flex !important;
        }

        /* 2. SMALL PHOTO MODE (Scaled to former Large Photo size: 72px) */
        #dealsTable.view-small th.col-thumb,
        #dealsTable.view-small td.col-thumb {
            display: table-cell !important;
            width: 88px !important;
            min-width: 88px !important;
            max-width: 88px !important;
            padding: 8px 4px !important;
            text-align: center;
        }
        #dealsTable.view-small .thumb-box {
            width: 72px;
            height: 72px;
        }
        #dealsTable.view-small .item-img-trigger {
            display: none !important;
        }

        /* 3. LARGE PHOTO MODE (Scaled significantly larger: 100px) */
        #dealsTable.view-large th.col-thumb,
        #dealsTable.view-large td.col-thumb {
            display: table-cell !important;
            width: 118px !important;
            min-width: 118px !important;
            max-width: 118px !important;
            padding: 8px 4px !important;
            text-align: center;
        }
        #dealsTable.view-large .thumb-box {
            width: 100px;
            height: 100px;
        }
        #dealsTable.view-large .item-img-trigger {
            display: none !important;
        }

        /* Thumbnail Container in Table Cell */
        .thumb-box {
            background: #ffffff;
            border: 1px solid var(--border-card);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
            margin: 0 auto;
            cursor: pointer;
            transition: transform 0.18s ease, border-color 0.18s ease;
        }

        [data-theme="dark"] .thumb-box,
        .dark-mode .thumb-box {
            background: #0d131f;
        }

        .thumb-box:hover {
            border-color: var(--primary);
        }

        .prod-thumb-svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .thumb-box:hover .prod-thumb-svg {
            transform: scale(1.08);
        }

        .thumb-img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            display: block;
            transform: scale(1.05);
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .thumb-box:hover .thumb-img {
            transform: scale(1.12);
        }



        .model-header-wrap {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .model-text-block {
            flex: 1;
            min-width: 0;
        }

        .mobile-card-thumb {
            display: none;
        }

        .mobile-view-bar {
            display: none;
        }

        /* Mobile Responsive Behavior */
        @media (max-width: 768px) {
            .catalog-main .main-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                padding: 12px 14px;
            }

            .main-header-left {
                width: 100%;
                min-width: 0;
            }

            .main-header-left .card-title {
                font-size: 14.5px;
                line-height: 1.35;
            }

            #table-count {
                width: 100%;
                text-align: left;
                margin-top: 2px;
            }

            .table-count-primary {
                font-size: 12.5px;
            }

            .table-count-sub {
                font-size: 11px;
                line-height: 1.4;
            }

            /* On mobile: Filters is an active tappable link that opens the drawer */
            .table-count-sub .table-count-filters-link {
                color: var(--primary, #0284c7);
                text-decoration: underline;
                cursor: pointer;
                pointer-events: auto;
                font-weight: 600;
            }

            .table-count-sub .table-count-filters-link:hover {
                color: var(--primary-hover, #0369a1);
            }

            [data-theme="dark"] .table-count-sub .table-count-filters-link {
                color: #38bdf8;
            }

            #dealsTable th.col-thumb,
            #dealsTable td.col-thumb,
            #dealsTable.view-small th.col-thumb,
            #dealsTable.view-small td.col-thumb,
            #dealsTable.view-large th.col-thumb,
            #dealsTable.view-large td.col-thumb,
            #dealsTable.view-compact th.col-thumb,
            #dealsTable.view-compact td.col-thumb {
                display: none !important;
            }

            .mobile-view-bar {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
                padding: 6px 12px;
                background: var(--bg-card);
                border: 1px solid var(--border-card);
                border-radius: 8px;
                margin-bottom: 10px;
            }

            #dealsTable.view-small .mobile-card-thumb {
                display: block;
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                border-radius: 6px;
                overflow: hidden;
                background: #ffffff;
                border: 1px solid var(--border-card);
                margin-top: 2px;
            }

            #dealsTable.view-large .mobile-card-thumb {
                display: block;
                flex-shrink: 0;
                width: 58px;
                height: 58px;
                border-radius: 6px;
                overflow: hidden;
                background: #ffffff;
                border: 1px solid var(--border-card);
                margin-top: 2px;
            }

            [data-theme="dark"] #dealsTable .mobile-card-thumb,
            .dark-mode #dealsTable .mobile-card-thumb {
                background: #0d131f;
            }

            .mobile-card-thumb .prod-thumb-svg {
                width: 100%;
                height: 100%;
                display: block;
            }

            .mobile-card-thumb img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                transform: scale(1.05);
                transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            }
        }

        /* ==========================================================================
           OpenWrt Hardware Compatibility Badges & Table Column
           ========================================================================== */
        .col-openwrt {
            text-align: center;
            vertical-align: middle;
            min-width: 190px;
        }

        .th-openwrt-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .openwrt-card {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 5px 8px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            text-align: center;
            min-width: 196px;
            max-width: 236px;
            min-height: 52px;
            width: 100%;
            margin: 0 auto;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            transition: all 0.15s ease;
            position: relative;
            cursor: pointer;
            box-sizing: border-box;
        }

        .openwrt-card:hover {
            border-color: #0284c7;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
        }

        [data-theme="dark"] .openwrt-card,
        .dark-mode .openwrt-card {
            background: #131b2e;
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        [data-theme="dark"] .openwrt-card:hover,
        .dark-mode .openwrt-card:hover {
            border-color: #38bdf8;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
        }

        .openwrt-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.2px;
            white-space: nowrap;
        }

        .openwrt-pill.openwrt-supported {
            background: rgba(16, 185, 129, 0.15);
            color: #047857;
            border: 1px solid rgba(16, 185, 129, 0.35);
        }
        [data-theme="dark"] .openwrt-pill.openwrt-supported,
        .dark-mode .openwrt-pill.openwrt-supported {
            background: rgba(16, 185, 129, 0.22);
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.45);
        }

        .openwrt-pill.openwrt-conditional {
            background: rgba(245, 158, 11, 0.15);
            color: #b45309;
            border: 1px solid rgba(245, 158, 11, 0.35);
        }
        [data-theme="dark"] .openwrt-pill.openwrt-conditional,
        .dark-mode .openwrt-pill.openwrt-conditional {
            background: rgba(245, 158, 11, 0.22);
            color: #fbbf24;
            border-color: rgba(245, 158, 11, 0.45);
        }

        .openwrt-pill.openwrt-unsupported {
            background: rgba(239, 68, 68, 0.12);
            color: #b91c1c;
            border: 1px solid rgba(239, 68, 68, 0.25);
        }
        [data-theme="dark"] .openwrt-pill.openwrt-unsupported,
        .dark-mode .openwrt-pill.openwrt-unsupported {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.35);
        }

        .openwrt-pill.openwrt-accessory {
            background: rgba(100, 116, 139, 0.12);
            color: #475569;
            border: 1px solid rgba(100, 116, 139, 0.25);
        }
        [data-theme="dark"] .openwrt-pill.openwrt-accessory,
        .dark-mode .openwrt-pill.openwrt-accessory {
            background: rgba(148, 163, 184, 0.14);
            color: #94a3b8;
            border-color: rgba(148, 163, 184, 0.25);
        }

        .openwrt-pill.openwrt-unknown {
            background: rgba(148, 163, 184, 0.1);
            color: #64748b;
            border: 1px dashed rgba(148, 163, 184, 0.35);
        }
        [data-theme="dark"] .openwrt-pill.openwrt-unknown,
        .dark-mode .openwrt-pill.openwrt-unknown {
            background: rgba(148, 163, 184, 0.1);
            color: #94a3b8;
            border-color: rgba(148, 163, 184, 0.3);
        }

        .openwrt-split-pill { display: inline-flex; align-items: stretch; border-radius: 9999px; font-size: 11px; line-height: 1.25; overflow: hidden; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); white-space: nowrap; }
        .ow-split-brand { display: inline-flex; align-items: center; padding: 3px 7px 3px 8px; font-weight: 800; font-size: 10px; letter-spacing: 0.2px; text-transform: uppercase; background: rgba(2, 132, 199, 0.12); color: #0369a1; border-right: 1px solid rgba(2, 132, 199, 0.25); }
        [data-theme="dark"] .ow-split-brand, .dark-mode .ow-split-brand { background: rgba(2, 132, 199, 0.22); color: #38bdf8; border-right-color: rgba(56, 189, 248, 0.3); }
        .ow-split-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; font-weight: 700; font-size: 11px; letter-spacing: -0.15px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .openwrt-split-pill.openwrt-supported { border-color: rgba(16, 185, 129, 0.35); }
        .openwrt-split-pill.openwrt-supported .ow-split-status { background: rgba(16, 185, 129, 0.14); color: #047857; }
        [data-theme="dark"] .openwrt-split-pill.openwrt-supported, .dark-mode .openwrt-split-pill.openwrt-supported { border-color: rgba(16, 185, 129, 0.45); }
        [data-theme="dark"] .openwrt-split-pill.openwrt-supported .ow-split-status, .dark-mode .openwrt-split-pill.openwrt-supported .ow-split-status { background: rgba(16, 185, 129, 0.22); color: #34d399; }

        .openwrt-split-pill.openwrt-conditional { border-color: rgba(245, 158, 11, 0.35); }
        .openwrt-split-pill.openwrt-conditional .ow-split-status { background: rgba(245, 158, 11, 0.14); color: #b45309; }
        [data-theme="dark"] .openwrt-split-pill.openwrt-conditional, .dark-mode .openwrt-split-pill.openwrt-conditional { border-color: rgba(245, 158, 11, 0.45); }
        [data-theme="dark"] .openwrt-split-pill.openwrt-conditional .ow-split-status, .dark-mode .openwrt-split-pill.openwrt-conditional .ow-split-status { background: rgba(245, 158, 11, 0.22); color: #fbbf24; }

        .openwrt-split-pill.openwrt-unsupported { border-color: rgba(239, 68, 68, 0.28); }
        .openwrt-split-pill.openwrt-unsupported .ow-split-status { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
        [data-theme="dark"] .openwrt-split-pill.openwrt-unsupported, .dark-mode .openwrt-split-pill.openwrt-unsupported { border-color: rgba(239, 68, 68, 0.38); }
        [data-theme="dark"] .openwrt-split-pill.openwrt-unsupported .ow-split-status, .dark-mode .openwrt-split-pill.openwrt-unsupported .ow-split-status { background: rgba(239, 68, 68, 0.22); color: #f87171; }

        .openwrt-split-pill.openwrt-accessory { border-color: rgba(100, 116, 139, 0.25); }
        .openwrt-split-pill.openwrt-accessory .ow-split-status { background: rgba(100, 116, 139, 0.12); color: #475569; }
        [data-theme="dark"] .openwrt-split-pill.openwrt-accessory, .dark-mode .openwrt-split-pill.openwrt-accessory { border-color: rgba(148, 163, 184, 0.25); }
        [data-theme="dark"] .openwrt-split-pill.openwrt-accessory .ow-split-status, .dark-mode .openwrt-split-pill.openwrt-accessory .ow-split-status { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

        .openwrt-split-pill.openwrt-unknown { border-style: dashed; border-color: rgba(148, 163, 184, 0.35); }
        .openwrt-split-pill.openwrt-unknown .ow-split-status { background: rgba(148, 163, 184, 0.1); color: #64748b; }
        [data-theme="dark"] .openwrt-split-pill.openwrt-unknown, .dark-mode .openwrt-split-pill.openwrt-unknown { border-color: rgba(148, 163, 184, 0.3); }
        [data-theme="dark"] .openwrt-split-pill.openwrt-unknown .ow-split-status, .dark-mode .openwrt-split-pill.openwrt-unknown .ow-split-status { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }

        .openwrt-target-row {
            font-size: 10px;
            color: var(--text-dim, #64748b);
            display: inline-flex;
            gap: 3px;
            align-items: center;
        }

        .openwrt-target-val {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-weight: 600;
            color: var(--text-main, #334155);
        }
        [data-theme="dark"] .openwrt-target-val,
        .dark-mode .openwrt-target-val {
            color: #cbd5e1;
        }

        .openwrt-link {
            font-size: 10px;
            font-weight: 600;
            color: #0284c7;
            text-decoration: none;
            transition: color 0.15s ease;
        }
        .openwrt-link:hover {
            color: #0369a1;
            text-decoration: underline;
        }
        [data-theme="dark"] .openwrt-link,
        .dark-mode .openwrt-link {
            color: #38bdf8;
        }
        [data-theme="dark"] .openwrt-link:hover,
        .dark-mode .openwrt-link:hover {
            color: #7dd3fc;
        }

        .ow-split-info { font-size: 10px; opacity: 0.7; margin-left: 4px; display: inline-flex; align-items: center; vertical-align: middle; }

        /* On desktop table cells, hide redundant "OPENWRT" prefix and generic primer */
        @media (min-width: 901px) {
            .col-openwrt .ow-split-brand { display: none !important; }
            .col-openwrt .ow-split-status { padding: 3px 10px; border-radius: 9999px; }
            .col-openwrt .ow-tip-primer-section,
            .col-openwrt .ow-tip-fallback-btn { display: none !important; }
        }

        /* Mobile item card override: flatten desktop card into compact split pill */
        @media (max-width: 900px) {
            .openwrt-card {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                min-width: 0 !important;
                max-width: 100% !important;
                min-height: 0 !important;
                width: auto !important;
                transform: none !important;
            }
            .openwrt-target-row { display: none !important; }
        }

        .openwrt-card.is-active, .openwrt-card:focus-within { z-index: 1000; }
        tbody tr:has(.openwrt-card.is-active) { position: relative; z-index: 35; }

        .openwrt-tooltip-card {
            position: absolute;
            top: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%) translateY(3px);
            width: 270px;
            max-width: 90vw;
            border-radius: 10px;
            padding: 9px 11px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 2000;
            transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.14s;
            font-family: inherit;
            text-align: left;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.99);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid #cbd5e1;
            box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.18), 0 3px 10px rgba(0, 0, 0, 0.06);
            color: #0f172a;
        }
        .openwrt-tooltip-card::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, 0.99) transparent; }
        [data-theme="dark"] .openwrt-tooltip-card, .dark-mode .openwrt-tooltip-card { background: rgba(15, 23, 42, 0.98); border-color: rgba(56, 189, 248, 0.35); box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.75), 0 0 18px rgba(56, 189, 248, 0.12); color: #f8fafc; }
        [data-theme="dark"] .openwrt-tooltip-card::after, .dark-mode .openwrt-tooltip-card::after { border-color: transparent transparent rgba(15, 23, 42, 0.98) transparent; }
        .openwrt-card.is-active .openwrt-tooltip-card { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

        @media (hover: hover) and (pointer: fine) {
            tbody tr:has(.openwrt-card:hover),
            tbody tr:has(.openwrt-card:focus-within) { position: relative; z-index: 35; }
            .openwrt-card:hover, .openwrt-card:focus-within { z-index: 1000; }
            .openwrt-card:hover .openwrt-tooltip-card,
            .openwrt-card:focus-within .openwrt-tooltip-card,
            .openwrt-tooltip-card:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        }

        .ow-tip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); padding-right: 18px; }
        .ow-tip-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent, #0284c7); }
        .ow-tip-status-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
        .ow-tip-target-row { font-size: 10px; color: var(--text-dim, #64748b); display: flex; gap: 4px; margin-bottom: 6px; }
        .ow-tip-key { font-weight: 600; }
        .ow-tip-val { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 600; color: var(--text-main, #334155); }
        [data-theme="dark"] .ow-tip-val, .dark-mode .ow-tip-val { color: #cbd5e1; }
        .ow-tip-section { margin-bottom: 6px; }
        .ow-tip-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-dim, #64748b); display: block; margin-bottom: 2px; }
        .ow-tip-notes-text { font-size: 11px; line-height: 1.35; color: var(--text-main, #1e293b); background: rgba(148, 163, 184, 0.08); border-left: 2.5px solid var(--accent, #0284c7); padding: 4px 6px; border-radius: 0 4px 4px 0; }
        [data-theme="dark"] .ow-tip-notes-text, .dark-mode .ow-tip-notes-text { color: #e2e8f0; background: rgba(148, 163, 184, 0.12); }
        .ow-tip-primer-text { font-size: 10px; line-height: 1.35; color: var(--text-dim, #64748b); }
        [data-theme="dark"] .ow-tip-primer-text, .dark-mode .ow-tip-primer-text { color: #94a3b8; }
        .ow-tip-btn { display: block; text-align: center; font-size: 10.5px; font-weight: 700; color: #0284c7; background: rgba(2, 132, 199, 0.08); border: 1px solid rgba(2, 132, 199, 0.2); padding: 5px 8px; border-radius: 6px; text-decoration: none; transition: all 0.15s ease; margin-top: 6px; }
        .ow-tip-btn:hover { background: rgba(2, 132, 199, 0.16); border-color: rgba(2, 132, 199, 0.35); }
        [data-theme="dark"] .ow-tip-btn, .dark-mode .ow-tip-btn { color: #38bdf8; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.25); }

        /* ==========================================================================
           Best Value Educational Coachmark Bubble & Visual Beacon
           ========================================================================== */
        @keyframes filterBeaconPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.85);
            }
            60% {
                box-shadow: 0 0 0 11px rgba(245, 158, 11, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
            }
        }

        .filter-beacon-pulse {
            animation: filterBeaconPulse 1.35s infinite ease-out !important;
            position: relative !important;
            z-index: 30 !important;
            border-color: #f59e0b !important;
        }

        .action-pill-filter.filter-beacon-pulse {
            border: 1.5px solid #f59e0b !important;
            color: #f59e0b !important;
        }

        .action-pill-filter.filter-beacon-pulse svg {
            stroke: #f59e0b !important;
        }

        .filter-coachmark-bubble {
            position: fixed;
            z-index: 10000;
            background: #0f172a;
            color: #f8fafc;
            border: 1px solid rgba(245, 158, 11, 0.6);
            border-radius: 12px;
            padding: 12px 14px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 158, 11, 0.22);
            font-size: 12px;
            line-height: 1.45;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: auto;
            box-sizing: border-box;
            max-width: 360px;
        }

        .filter-coachmark-bubble.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Arrow Up (Mobile / Top default) */
        .filter-coachmark-bubble.arrow-up::before,
        .filter-coachmark-bubble:not(.arrow-left)::before {
            content: '';
            position: absolute;
            top: -7px;
            left: var(--arrow-left, 32px);
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #0f172a;
            border-top: none;
        }

        .filter-coachmark-bubble.arrow-up::after,
        .filter-coachmark-bubble:not(.arrow-left)::after {
            content: '';
            position: absolute;
            top: -8.5px;
            left: var(--arrow-left, 32px);
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8.5px solid rgba(245, 158, 11, 0.7);
            border-top: none;
            z-index: -1;
        }

        /* Arrow Left (Desktop sidebar pointing left towards Category pills) */
        .filter-coachmark-bubble.arrow-left::before {
            content: '';
            position: absolute;
            top: var(--arrow-top, 24px);
            left: -7px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-right: 7px solid #0f172a;
            border-left: none;
        }

        .filter-coachmark-bubble.arrow-left::after {
            content: '';
            position: absolute;
            top: var(--arrow-top, 24px);
            left: -8.5px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8.5px solid rgba(245, 158, 11, 0.7);
            border-left: none;
            z-index: -1;
        }

        .coachmark-content {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .coachmark-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }

        .coachmark-title-wrap {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .coachmark-star {
            color: #f59e0b;
            font-size: 13px;
            line-height: 1;
        }

        .coachmark-title {
            font-size: 12.5px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: -0.2px;
        }

        .coachmark-close-btn {
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            padding: 0 2px;
            margin-left: auto;
            transition: color 0.15s ease;
        }

        .coachmark-close-btn:hover {
            color: #ffffff;
        }

        .coachmark-text {
            color: #cbd5e1;
            font-size: 11.5px;
            line-height: 1.45;
        }

        .coachmark-text strong {
            color: #f8fafc;
            font-weight: 700;
        }

        .coachmark-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 4px;
        }

        .coachmark-gotit-btn {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid #f59e0b;
            color: #fbbf24;
            font-size: 11.5px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .coachmark-gotit-btn:hover {
            background: #f59e0b;
            color: #0f172a;
        }

        /* Tablet Table Viewport Sizing (769px to 1024px) -> Prevent Horizontal Right Overflow & Pill Cut-Off */
        @media (min-width: 769px) and (max-width: 1024px) {
            body {
                padding: 16px;
            }
            .catalog-main {
                min-width: 0;
                overflow-x: auto;
            }
            .table-responsive-wrap {
                overflow-x: auto;
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
            }
            #dealsTable {
                width: 100% !important;
                table-layout: auto;
            }
            #dealsTable.view-large th.col-thumb,
            #dealsTable.view-large td.col-thumb {
                width: 90px !important;
                min-width: 90px !important;
                max-width: 90px !important;
                padding: 8px 4px !important;
            }
            #dealsTable.view-large .thumb-box {
                width: 80px !important;
                height: 80px !important;
            }
            #dealsTable th.col-hardware-power,
            #dealsTable td.col-hardware-power {
                width: 190px !important;
                min-width: 175px !important;
                padding: 10px 8px !important;
            }
            #dealsTable .perf-card-opt2 {
                max-width: 100% !important;
            }
            #dealsTable th.col-deal-action,
            #dealsTable td.col-deal-action,
            #dealsTable th:last-child, #dealsTable td:last-child {
                width: 195px !important;
                min-width: 180px !important;
                padding: 10px 10px !important;
            }
            #dealsTable th.col-model,
            #dealsTable td.model-col {
                min-width: 220px !important;
                padding: 10px 12px !important;
            }
        }



}