/* ══════════════════════════════════════════════════

   GPM Racing · Manufacturer Template

   GlyphForge Icons · Light/Dark Theme

   ══════════════════════════════════════════════════ */



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}



/* ── Light Theme (default) ── */

:root{

    --primary:#d42b2b;

    --accent:#e6a817;

    --nw-accent:#0ea5e9;

    --bg:#fafafa;--bg-card:#ffffff;--bg-card-hover:#f8fafc;--bg-surface:#f1f5f9;

    --border:#e2e8f0;--border-hover:#cbd5e1;

    --text:#0f172a;--text-dim:#64748b;--text-muted:#475569;--text-inv:#ffffff;

    --hero-bg:linear-gradient(145deg,#f8f9fa 0%,#eef2f7 50%,#f8f9fa 100%);

    --hero-grid-color:rgba(212,43,43,.06);

    --hero-glow:rgba(212,43,43,.06);

    --nav-bg:rgba(255,255,255,.92);--nav-active-bg:rgba(212,43,43,.08);

    --shell-bg:#f8fafc;--shell-border:#e2e8f0;

    --card-shadow:0 2px 8px rgba(0,0,0,.06);--card-shadow-hover:0 12px 32px rgba(0,0,0,.1);

    --stat-bg:#ffffff;--footer-bg:#f1f5f9;

    --img-bg:#f1f5f9;--no-img-color:#cbd5e1;

    --icon-filter:none;

    --radius:10px;--radius-sm:6px;--radius-lg:16px;

    --font-h:'Barlow Condensed',sans-serif;--font-b:'Barlow',sans-serif;

    --max-w:1320px;

}



/* ── Dark Theme ── */

[data-theme="dark"]{

    --bg:#050810;--bg-card:#0d1117;--bg-card-hover:#151b24;--bg-surface:#111820;

    --border:#1e2d3d;--border-hover:#2a3f54;

    --text:#e0e0e0;--text-dim:#64748b;--text-muted:#8b9cb5;--text-inv:#ffffff;

    --hero-bg:linear-gradient(145deg,#0a0e14 0%,#120810 50%,#0a0e14 100%);

    --hero-grid-color:rgba(212,43,43,.03);

    --hero-glow:rgba(212,43,43,.08);

    --nav-bg:rgba(13,17,23,.92);--nav-active-bg:rgba(212,43,43,.15);

    --shell-bg:#070a0f;--shell-border:#141c28;

    --card-shadow:0 2px 8px rgba(0,0,0,.2);--card-shadow-hover:0 12px 40px rgba(0,0,0,.3);

    --stat-bg:#111820;--footer-bg:#050709;

    --img-bg:#080b10;--no-img-color:#1a2030;

    --icon-filter:brightness(0) invert(1);

}



html{scroll-behavior:smooth}

body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}

a{color:var(--accent);text-decoration:none;transition:color .2s}

a:hover{color:var(--primary)}

img{max-width:100%;display:block}

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

.section{padding:72px 0}.section-sm{padding:48px 0}



/* ── GlyphForge Icon System ── */

.gf{display:inline-block;vertical-align:middle;flex-shrink:0;filter:var(--icon-filter)}

.gf-16{width:16px;height:16px}

.gf-20{width:20px;height:20px}

.gf-28{width:28px;height:28px}

.gf-36{width:36px;height:36px}

.gf-48{width:48px;height:48px}

/* Colored icons override the theme filter */

.gf-accent{filter:brightness(0) saturate(100%) invert(72%) sepia(68%) saturate(1131%) hue-rotate(359deg) brightness(97%) contrast(89%)}

.gf-primary{filter:brightness(0) saturate(100%) invert(23%) sepia(97%) saturate(3265%) hue-rotate(351deg) brightness(86%) contrast(93%)}

.gf-nw{filter:brightness(0) saturate(100%) invert(56%) sepia(90%) saturate(2000%) hue-rotate(174deg) brightness(97%) contrast(91%)}

.gf-green{filter:brightness(0) saturate(100%) invert(60%) sepia(45%) saturate(600%) hue-rotate(113deg) brightness(95%) contrast(92%)}

.gf-purple{filter:brightness(0) saturate(100%) invert(40%) sepia(60%) saturate(4000%) hue-rotate(249deg) brightness(95%) contrast(92%)}

.gf-pink{filter:brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(4000%) hue-rotate(306deg) brightness(95%) contrast(95%)}



/* ── NW Shell Bar ── */

.nw-bar{background:var(--shell-bg);border-bottom:1px solid var(--shell-border);padding:0 24px;height:40px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-dim);position:sticky;top:0;z-index:900}

.nw-bar a{color:var(--nw-accent);font-size:12px}

.nw-bar .nw-crumb{display:flex;align-items:center;gap:6px}

.nw-bar .nw-crumb .sep{color:var(--border)}

.nw-verified{display:inline-flex;align-items:center;gap:4px;background:rgba(14,165,233,.1);color:var(--nw-accent);padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.02em}

.nw-bar-right{display:flex;align-items:center;gap:12px}

.theme-toggle{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;cursor:pointer;color:var(--text-dim);font-size:11px;display:flex;align-items:center;gap:4px;transition:all .2s}

.theme-toggle:hover{border-color:var(--border-hover);color:var(--text)}



/* ── Site Nav ── */

.site-nav{background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 24px;position:sticky;top:40px;z-index:800}

.site-nav .inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}

.site-nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-h);font-weight:700;font-size:22px;color:var(--text);letter-spacing:.02em;text-transform:uppercase}

.site-nav .brand:hover{color:var(--text)}

.site-nav .brand .mark{width:36px;height:36px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff}

.nav-links{display:flex;gap:4px}

.nav-links a{padding:8px 16px;border-radius:var(--radius-sm);font-family:var(--font-h);font-weight:600;font-size:14px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;transition:all .2s}

.nav-links a:hover{color:var(--text);background:rgba(128,128,128,.08)}

.nav-links a.active{color:var(--text);background:var(--nav-active-bg)}

.nav-search-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);padding:6px 12px;cursor:pointer;font-size:13px;transition:all .2s;display:flex;align-items:center;gap:6px;font-family:var(--font-b)}

.nav-search-btn:hover{border-color:var(--border-hover);color:var(--text)}



/* ── Hero ── */

.hero{position:relative;overflow:hidden;padding:100px 0 80px;background:var(--hero-bg)}

.hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 60px,var(--hero-grid-color) 60px,var(--hero-grid-color) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,var(--hero-grid-color) 60px,var(--hero-grid-color) 61px)}

.hero::after{content:'';position:absolute;top:0;right:0;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,var(--hero-glow) 0%,transparent 70%)}

.hero .wrap{position:relative;z-index:1}

.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(230,168,23,.1);border:1px solid rgba(230,168,23,.2);color:var(--accent);padding:6px 14px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}

.hero h1{font-family:var(--font-h);font-weight:800;font-size:clamp(48px,7vw,80px);line-height:1;color:var(--text);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:16px}

.hero h1 .accent{color:var(--primary)}

.hero-tagline{font-size:18px;color:var(--text-muted);max-width:560px;line-height:1.7;margin-bottom:36px}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap}



/* ── Buttons ── */

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius-sm);font-family:var(--font-h);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border:none;transition:all .25s}

.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#b82222;color:#fff}

.btn-primary .gf{filter:brightness(0) invert(1)}

.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

.btn-sm{padding:8px 18px;font-size:12px}



/* ── Stats Bar ── */

.stats-bar{background:var(--stat-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max-w);margin:0 auto;padding:0 24px}

.stat-item{text-align:center;padding:28px 16px;border-right:1px solid var(--border)}

.stat-item:last-child{border-right:none}

.stat-val{font-family:var(--font-h);font-size:36px;font-weight:800;color:var(--text);line-height:1}

.stat-val .unit{font-size:20px;color:var(--primary)}

.stat-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-top:6px}



/* ── Product Grid ── */

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}

.product-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .3s;cursor:pointer;position:relative;box-shadow:var(--card-shadow)}

.product-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}

.product-card .img-wrap{aspect-ratio:1;background:var(--img-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}

.product-card .img-wrap img{width:100%;height:100%;object-fit:contain;padding:16px}

.product-card .img-wrap .no-img{font-family:var(--font-h);font-size:40px;font-weight:700;color:var(--no-img-color);text-transform:uppercase}

.product-card .nid-badge{position:absolute;top:10px;left:10px;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.25);color:var(--nw-accent);padding:3px 8px;border-radius:4px;font-size:10px;font-weight:600;font-family:var(--font-h);letter-spacing:.04em}

.product-card .card-body{padding:16px}

.product-card .card-cat{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px}

.product-card .card-name{font-family:var(--font-h);font-size:15px;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.product-card .card-sku{font-size:12px;color:var(--text-dim);margin-bottom:10px}

.product-card .card-foot{display:flex;align-items:center;justify-content:space-between}

.product-card .card-price{font-family:var(--font-h);font-size:18px;font-weight:700;color:var(--text)}

.product-card .card-dealers{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:4px}

.product-card .card-dealers .dot{width:6px;height:6px;border-radius:50%;background:#10b981}



/* ── Catalog Sidebar ── */

.catalog-layout{display:grid;grid-template-columns:240px 1fr;gap:32px}

.catalog-sidebar{position:sticky;top:120px;align-self:start}

.sidebar-title{font-family:var(--font-h);font-size:13px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}

.cat-list{list-style:none}

.cat-list li a{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:var(--radius-sm);font-size:14px;color:var(--text-muted);transition:all .2s}

.cat-list li a:hover{background:rgba(128,128,128,.06);color:var(--text)}

.cat-list li a.active{background:rgba(212,43,43,.08);color:var(--primary)}

.cat-list li a .count{font-size:11px;color:var(--text-dim);background:rgba(128,128,128,.08);padding:1px 6px;border-radius:9999px}



/* ── Search ── */

.search-bar{display:flex;gap:8px;margin-bottom:24px}

.search-bar input{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;color:var(--text);font-size:14px;font-family:var(--font-b);outline:none;transition:border-color .2s}

.search-bar input:focus{border-color:var(--primary)}

.search-bar input::placeholder{color:var(--text-dim)}



/* ── Pagination ── */

.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:48px}

.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:all .2s}

.pagination a{color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border)}

.pagination a:hover{border-color:var(--primary);color:var(--primary)}

.pagination .current{background:var(--primary);color:#fff}



/* ── Product Detail ── */

.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

.pd-gallery{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--card-shadow)}

.pd-gallery img{max-height:100%;object-fit:contain;padding:32px}

.pd-info .pd-cat{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:8px}

.pd-info h1{font-family:var(--font-h);font-size:32px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:8px}

.pd-sku{font-size:14px;color:var(--text-dim);margin-bottom:8px}

.pd-nid{display:inline-flex;align-items:center;gap:6px;background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.2);color:var(--nw-accent);padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;margin-bottom:24px}

.pd-price{font-family:var(--font-h);font-size:40px;font-weight:800;color:var(--text);margin-bottom:8px}

.pd-price-label{font-size:12px;color:var(--text-dim);margin-bottom:24px}

.pd-desc{font-size:15px;color:var(--text-muted);line-height:1.7;margin-bottom:32px}

.pd-section-title{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}

.pd-specs{margin-bottom:32px}

.pd-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.pd-spec{display:flex;justify-content:space-between;padding:8px 12px;background:var(--bg-surface);border-radius:var(--radius-sm);font-size:13px}

.pd-spec .label{color:var(--text-dim)}.pd-spec .val{color:var(--text);font-weight:600}



/* ── Dealer Table ── */

.dealer-table{width:100%;border-collapse:collapse;margin-bottom:32px}

.dealer-table th{text-align:left;padding:10px 14px;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border)}

.dealer-table td{padding:12px 14px;font-size:14px;border-bottom:1px solid var(--border)}

.dealer-table tr:hover td{background:rgba(128,128,128,.04)}

.dealer-name-link{color:var(--nw-accent);font-weight:600}

.dealer-price{font-family:var(--font-h);font-weight:700;color:var(--text);font-size:16px}

.stock-badge{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600}

.stock-in{background:rgba(16,185,129,.1);color:#10b981}

.stock-low{background:rgba(245,158,11,.1);color:#f59e0b}

.stock-out{background:rgba(239,68,68,.1);color:#ef4444}



/* ── Dealer Cards ── */

.dealer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

.dealer-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:all .3s;box-shadow:var(--card-shadow)}

.dealer-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}

.dealer-card .dc-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}

.dealer-card .dc-avatar{width:44px;height:44px;border-radius:10px;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;font-size:16px;color:var(--primary);flex-shrink:0}

.dealer-card .dc-name{font-family:var(--font-h);font-weight:700;color:var(--text);font-size:16px}

.dealer-card .dc-une{font-size:12px;color:var(--nw-accent)}

.dealer-card .dc-stats{display:flex;gap:24px;padding-top:14px;border-top:1px solid var(--border)}

.dealer-card .dc-stat-val{font-family:var(--font-h);font-weight:700;color:var(--text);font-size:18px}

.dealer-card .dc-stat-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}



/* ── SSOT Flow ── */

.ssot-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:40px 0}

.ssot-node{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;text-align:center;min-width:160px;box-shadow:var(--card-shadow)}

.ssot-node.active{border-color:var(--primary);box-shadow:0 0 24px rgba(212,43,43,.12)}

.ssot-node .node-icon{margin:0 auto 8px}

.ssot-node .label{font-family:var(--font-h);font-weight:700;font-size:14px;color:var(--text);text-transform:uppercase;letter-spacing:.04em}

.ssot-node .sub{font-size:12px;color:var(--text-dim);margin-top:4px}

.ssot-arrow{color:var(--text-dim);display:flex;align-items:center}



/* ── Section Headers ── */

.sec-header{margin-bottom:40px}

.sec-header h2{font-family:var(--font-h);font-size:clamp(28px,4vw,42px);font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}

.sec-header h2 .highlight{color:var(--primary)}

.sec-header p{font-size:16px;color:var(--text-muted);margin-top:12px;max-width:600px}



/* ── Value Props ── */

.vp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}

.vp-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--card-shadow)}

.vp-card .vp-icon{margin-bottom:14px;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}

.vp-card h3{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}

.vp-card p{font-size:14px;color:var(--text-muted);line-height:1.6}



/* ── Empty State ── */

.empty-state{text-align:center;padding:80px 24px}

.empty-state .es-icon{margin:0 auto 16px;opacity:.3}

.empty-state h3{font-family:var(--font-h);font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px}

.empty-state p{font-size:15px;color:var(--text-dim);max-width:400px;margin:0 auto}



/* ── About ── */

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

.about-text h3{font-family:var(--font-h);font-size:20px;font-weight:700;color:var(--text);margin:24px 0 12px;text-transform:uppercase}

.about-text p{font-size:15px;color:var(--text-muted);line-height:1.7;margin-bottom:16px}

.about-sidebar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--card-shadow)}

.about-sidebar h3{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}

.about-sidebar .fact{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}

.about-sidebar .fact .label{color:var(--text-dim)}.about-sidebar .fact .val{color:var(--text);font-weight:600}



/* ── Footer ── */

.site-footer{background:var(--footer-bg);border-top:1px solid var(--border);padding:48px 24px 32px}

.footer-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:32px}

.footer-brand{font-family:var(--font-h);font-size:20px;font-weight:700;color:var(--text)}

.footer-tagline{font-size:13px;color:var(--text-dim);margin-top:4px}

.footer-links{display:flex;gap:24px}

.footer-links a{font-size:13px;color:var(--text-dim)}.footer-links a:hover{color:var(--text)}

.footer-bottom{max-width:var(--max-w);margin:24px auto 0;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim)}

.nw-powered{display:inline-flex;align-items:center;gap:6px;color:var(--nw-accent);font-weight:600}



/* ── Responsive ── */

@media(max-width:1024px){.catalog-layout{grid-template-columns:1fr}.catalog-sidebar{position:static}.cat-list{display:flex;flex-wrap:wrap;gap:4px}.cat-list li a{padding:6px 12px;font-size:13px;white-space:nowrap}}

@media(max-width:768px){.hero{padding:64px 0 48px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-item:nth-child(2){border-right:none}.pd-layout{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr}.nav-links{display:none}.product-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.ssot-flow{flex-direction:column}.ssot-arrow{transform:rotate(90deg)}}

@media(max-width:480px){.product-grid{grid-template-columns:1fr 1fr;gap:8px}.product-card .card-body{padding:10px}.product-card .card-name{font-size:13px}}