/* ============================================================ THE GUN LAB — standalone static site Theming is attribute-driven so it ports cleanly to WordPress: All colors are CSS variables — no hard-coded hex in components. ============================================================ */ /* ---------- THEME TOKENS ---------- */ :root{ /* dark (default) */ --board:#06070A; --bg:#0C0F14; --surface:#12161D; --panel:#171C24; --card:#1B212B; --card2:#20262F; --line:#2C3543; --line2:#222A34; --text:#EEF2F6; --muted:#98A3B0; --muted2:#6B7582; --deep:#0A0D12; --deepest:#070A0E; --ctaA:#0A1416; --headerBg:rgba(18,22,29,.92); --glass:rgba(6,7,10,.78); --grid:rgba(255,255,255,.035); --danger:#FF5A4D; --ok:#3FD17A; --star:#F5B544; --shadow:0 40px 90px rgba(0,0,0,.45); /* accent (cyan preset by default) */ --accent:#22DEDE; --accent-ink:#04181A; --accent-dim:color-mix(in srgb, var(--accent) 12%, transparent); } [data-theme="light"]{ --board:#E9EDF2; --bg:#FFFFFF; --surface:#F4F6F9; --panel:#FFFFFF; --card:#FFFFFF; --card2:#EFF3F7; --line:#D5DBE3; --line2:#E6EAEF; --text:#0E1116; --muted:#51606E; --muted2:#94A0AC; --deep:#EEF1F5; --deepest:#F3F5F8; --ctaA:#E6FAFA; --headerBg:rgba(255,255,255,.9); --glass:rgba(6,7,10,.72); --grid:rgba(0,0,0,.05); --shadow:0 30px 70px rgba(20,30,50,.12); } /* accent presets — swap via data-accent on */ [data-accent="cyan"] {--accent:#22DEDE;--accent-ink:#04181A;} [data-accent="orange"]{--accent:#FF6B1A;--accent-ink:#1A0A00;} [data-accent="red"] {--accent:#E5484D;--accent-ink:#FFFFFF;} [data-accent="blue"] {--accent:#3B82F6;--accent-ink:#FFFFFF;} [data-accent="green"] {--accent:#2FBF71;--accent-ink:#04140A;} /* ---------- BASE ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text); font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;line-height:1.5; transition:background .25s ease,color .25s ease} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:'Archivo',sans-serif;letter-spacing:-.02em;margin:0;color:var(--text)} p{margin:0} .mono{font-family:'IBM Plex Mono',monospace} .accent{color:var(--accent)} .container{max-width:1280px;margin:0 auto;padding:0 32px;width:100%} .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);margin-bottom:12px} .section-title{font-weight:800;font-size:clamp(28px,3.4vw,38px)} .lead{font-size:18px;line-height:1.62;color:var(--muted)} .sub-right{font-size:14px;color:var(--muted);max-width:300px;text-align:right} .center{text-align:center} .muted{color:var(--muted)} section{position:relative} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:'Archivo',sans-serif;font-weight:700;font-size:16px; padding:15px 24px;border-radius:8px;border:1px solid transparent;cursor:pointer; transition:transform .12s ease,box-shadow .2s ease;white-space:nowrap} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--accent);color:var(--accent-ink); box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 26%,transparent)} .btn-ghost{border-color:var(--line);color:var(--text);background:transparent} .btn-block{width:100%} .btn-sm{padding:11px 18px;font-size:14px} .link-arrow{font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--accent);cursor:pointer} /* ---------- HEADER ---------- */ .site-header{position:sticky;top:0;z-index:60;height:72px;display:flex;align-items:center; background:var(--headerBg);border-bottom:1px solid var(--line2);backdrop-filter:blur(8px)} .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:18px} .brand{display:flex;align-items:center;gap:12px} .brand-text{display:flex;flex-direction:column;justify-content:center} .brand-mark{width:42px;height:42px;border-radius:9px;background:#fff;display:grid; place-items:center;flex:0 0 auto;padding:3px;overflow:hidden; box-shadow:0 0 0 1px var(--line2), 0 4px 14px rgba(0,0,0,.18)} .brand-logo{width:100%;height:100%;object-fit:contain;display:block} .brand-name{font-family:'Archivo';font-weight:900;font-size:18px;letter-spacing:.02em;line-height:1} .brand-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:var(--accent);margin-top:3px} .main-nav{display:flex;align-items:center;gap:28px;font-family:'Archivo';font-weight:600;font-size:14.5px} .main-nav a{transition:color .15s} .main-nav a:hover,.main-nav a.active{color:var(--accent)} .header-actions{display:flex;align-items:center;gap:16px} .header-phone{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:14px;white-space:nowrap} .cart-btn{position:relative;display:grid;place-items:center} .cart-count{position:absolute;top:-6px;right:-7px;background:var(--accent);color:var(--accent-ink); font-family:'IBM Plex Mono';font-size:10px;font-weight:600;border-radius:9px;padding:1px 5px} .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px; width:42px;height:38px;cursor:pointer;color:var(--text);place-items:center} /* ---------- HERO ---------- */ .hero{padding:74px 0 64px; background:radial-gradient(120% 130% at 78% 18%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 55%), linear-gradient(180deg,var(--bg),var(--surface))} .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center} .badge-pill{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-dim); padding:7px 13px;border-radius:50px;margin-bottom:24px} .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)} .hero h1{font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:1.03} .hero .lead{margin-top:22px;max-width:520px} .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px} .chip{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12.5px; color:var(--muted);background:var(--card);border:1px solid var(--line2);padding:9px 13px;border-radius:7px} .dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok)} .hero-media{position:relative} .hero-caption{position:absolute;left:18px;bottom:18px;background:var(--glass);backdrop-filter:blur(6px); border:1px solid var(--line);border-radius:9px;padding:11px 15px;font-family:'IBM Plex Mono',monospace; font-size:12px;color:#fff} .hero-rating{position:absolute;right:-14px;top:24px;background:var(--accent);color:var(--accent-ink); font-family:'Archivo';font-weight:800;font-size:13px;padding:9px 14px;border-radius:8px; box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 40%,transparent);transform:rotate(2deg)} /* ---------- IMAGE PLACEHOLDERS (swap for real / Woo gallery) ---------- */ .imgph{background:var(--card2);border:1px dashed var(--line);border-radius:12px;display:flex; align-items:center;justify-content:center;text-align:center;color:var(--muted2); font-family:'IBM Plex Mono',monospace;font-size:12px;padding:14px;line-height:1.4;position:relative;overflow:hidden} .imgph.rect{border-radius:0} /* ---------- TRUST STRIP ---------- */ .trust{background:var(--deep);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)} .trust .container{display:grid;grid-template-columns:repeat(4,1fr);padding-top:26px;padding-bottom:26px} .trust-item{display:flex;align-items:center;gap:13px;padding-right:24px;border-right:1px solid var(--line2)} .trust-item:last-child{border-right:0} .trust-stat{text-align:center} .trust-stat .num{font-family:'Archivo';font-weight:900;font-size:30px;line-height:1} .trust-stat .lbl,.trust-item .lbl{font-size:12.5px;color:var(--muted)} .trust-item .ttl{font-family:'Archivo';font-weight:800;font-size:15px;line-height:1.15} /* ---------- GENERIC SECTION PAD ---------- */ .pad{padding:74px 0} .pad-sm{padding:60px 0} .bg-surface{background:var(--surface);border-top:1px solid var(--line2)} .bg-bg{background:var(--bg)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;gap:24px;flex-wrap:wrap} /* ---------- SERVICES GRID ---------- */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .svc-card{background:var(--card);border:1px solid var(--line2);border-radius:13px;padding:26px 22px; display:flex;flex-direction:column} .svc-icon{width:46px;height:46px;border-radius:10px;background:var(--accent-dim); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);display:grid;place-items:center;margin-bottom:20px} .svc-card h3{font-weight:700;font-size:18px;margin-bottom:8px} .svc-card p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-bottom:18px;flex:1} .price-from{font-family:'IBM Plex Mono',monospace;font-size:13px;margin-bottom:6px} .price-from b{color:var(--accent);font-weight:600} /* ---------- PRODUCT CARDS ---------- */ .product-card{background:var(--card);border:1px solid var(--line2);border-radius:13px;overflow:hidden; transition:border-color .18s,transform .12s} .product-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px)} .product-media{position:relative} .tag{position:absolute;top:12px;left:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600; padding:4px 8px;border-radius:5px;background:var(--accent);color:var(--accent-ink)} .tag.ffl{background:var(--deep);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)} .product-body{padding:18px} .product-cat{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted2);letter-spacing:.1em;margin-bottom:7px} .product-body h3{font-weight:700;font-size:16px;line-height:1.25;margin-bottom:12px} .product-foot{display:flex;align-items:center;justify-content:space-between;gap:10px} .price{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600} /* ---------- HOW IT WORKS ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative} .steps-line{position:absolute;top:30px;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)} .step{text-align:center;padding:0 18px;position:relative} .step .num{width:60px;height:60px;border-radius:50%;background:var(--bg);border:1px solid var(--line); color:var(--text);font-family:'Archivo';font-weight:900;font-size:22px;display:grid;place-items:center; margin:0 auto 22px;box-shadow:0 0 0 6px var(--bg)} .step.is-first .num{border-color:var(--accent);color:var(--accent)} .step h3{font-weight:700;font-size:17px;margin-bottom:8px} .step p{font-size:13.5px;line-height:1.55;color:var(--muted)} /* ---------- LOCAL BLOCK ---------- */ .local{background:var(--surface);border-top:1px solid var(--line2)} .local-grid{display:grid;grid-template-columns:1.15fr 1fr} .local-map{position:relative;min-height:380px} .map-pin{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:18px;height:18px; border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 25%,transparent); animation:pulseDot 2.4s infinite} @keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)} 50%{box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 0%,transparent)}} .local-info{padding:56px 48px} .info-row{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px} .info-row svg{margin-top:2px;flex:0 0 auto} .info-row .t{font-family:'Archivo';font-weight:700;font-size:15px} .info-row .s{font-size:14px;color:var(--muted)} /* ---------- REVIEWS ---------- */ .review{background:var(--card);border:1px solid var(--line2);border-radius:13px;padding:28px} .stars{color:var(--star);font-size:15px;letter-spacing:3px;margin-bottom:16px} .review p{font-size:15px;line-height:1.6;color:var(--text);margin-bottom:22px} .reviewer{display:flex;align-items:center;gap:12px} .avatar{width:40px;height:40px;border-radius:50%;background:var(--card2);border:1px solid var(--line); font-family:'Archivo';font-weight:700;color:var(--accent);display:grid;place-items:center;font-size:15px;flex:0 0 auto} .reviewer .n{font-family:'Archivo';font-weight:700;font-size:14px} .reviewer .m{font-size:12.5px;color:var(--muted)} /* ---------- FINAL CTA ---------- */ .cta{padding:60px 0;background:linear-gradient(120deg,var(--ctaA),var(--deep));border-top:1px solid var(--line2)} .cta::after{content:"";position:absolute;inset:0; background:radial-gradient(80% 140% at 85% 50%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%)} .cta .container{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .cta h2{font-weight:900;font-size:clamp(28px,3.6vw,40px);max-width:640px;line-height:1.06} .cta-right{display:flex;flex-direction:column;gap:12px;align-items:flex-end} /* ---------- FOOTER ---------- */ .site-footer{background:var(--deepest);border-top:1px solid var(--line2);padding:56px 0 30px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line2)} .footer-brand p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:16px 0 18px;max-width:280px} .footer-nap{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);line-height:1.9} .footer-nap .hl{color:var(--text)} .footer-col h4{font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.04em;margin-bottom:16px} .footer-col .links{font-size:13.5px;color:var(--muted);line-height:2.1} .footer-col .links a{display:block} .footer-col .links a:hover{color:var(--accent)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-top:22px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted2)} .footer-bottom .socials{display:flex;gap:14px} /* slim footer (inner pages) */ .slim-footer{background:var(--deepest);border-top:1px solid var(--line2);padding:30px 0} .slim-footer .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .slim-footer .nap{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:12px} /* ---------- BREADCRUMB ---------- */ .crumb{padding:22px 0 0;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted2)} .crumb .cur{color:var(--muted)} /* ---------- ATF SPEC CALLOUTS ---------- */ .specs{background:var(--deep);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:30px 0} .specs .container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .spec{display:flex;align-items:flex-start;gap:11px} .spec svg{flex:0 0 auto;margin-top:1px} .spec .t{font-family:'Archivo';font-weight:700;font-size:14px} .spec .s{font-size:12.5px;color:var(--muted)} /* ---------- PRICING TABLE ---------- */ .price-table{border:1px solid var(--line2);border-radius:13px;overflow:hidden} .price-head,.price-row{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr;align-items:center} .price-head{background:var(--card2);padding:16px 24px;font-family:'IBM Plex Mono',monospace;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .price-row{padding:20px 24px;border-top:1px solid var(--line2);background:var(--card)} .price-row .svc{font-family:'Archivo';font-weight:700;font-size:16px} .price-row .svc small{display:block;font-family:'IBM Plex Sans';font-weight:400;font-size:13px;color:var(--muted);margin-top:3px} .price-row .amt{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600} .price-row .turn{font-size:14px;color:var(--muted)} .price-row .act{text-align:right} .price-note{font-size:13px;color:var(--muted2);margin-top:14px;text-align:center} .price-label{display:none;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted2);margin-bottom:3px} /* ---------- BEFORE / AFTER ---------- */ .ba{display:grid;grid-template-columns:1fr 1fr;gap:6px} .ba .cell{position:relative} .ba .lbl{position:absolute;top:8px;left:8px;font-family:'IBM Plex Mono',monospace;font-size:9px;padding:3px 7px;border-radius:4px; background:var(--glass);color:#fff} .ba .lbl.after{background:var(--accent);color:var(--accent-ink);font-weight:600} /* ---------- FAQ ---------- */ .faq-list{display:flex;flex-direction:column;gap:12px} .faq{background:var(--card);border:1px solid var(--line2);border-radius:11px;padding:22px 24px;cursor:pointer} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px} .faq-q .q{font-family:'Archivo';font-weight:700;font-size:16px} .faq-q .ico{color:var(--muted2);font-size:20px;line-height:1} .faq.open .faq-q .ico{color:var(--accent)} .faq-a{font-size:14.5px;line-height:1.6;color:var(--muted);max-height:0;overflow:hidden; transition:max-height .25s ease,margin .25s ease;margin-top:0} .faq.open .faq-a{max-height:300px;margin-top:10px} /* ---------- PRODUCT DETAIL ---------- */ .pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:48px} .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px} .pdp-cat{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted2);text-transform:uppercase;margin-bottom:10px} .pdp h1{font-weight:800;font-size:clamp(26px,3.4vw,34px);line-height:1.1} .pdp-rating{display:flex;align-items:center;gap:12px;margin:14px 0 18px;flex-wrap:wrap} .pdp-rating .stars{margin:0;font-size:14px} .pdp-price{font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:600;margin-bottom:6px} .pdp-sku{font-size:13.5px;color:var(--muted);margin-bottom:22px} .ffl-notice{background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:11px;padding:16px 18px; display:flex;gap:13px;margin-bottom:24px} .ffl-notice svg{flex:0 0 auto;margin-top:1px} .ffl-notice .t{font-family:'Archivo';font-weight:700;font-size:14.5px;margin-bottom:3px} .ffl-notice .s{font-size:13px;line-height:1.55;color:var(--muted)} .buy-row{display:flex;gap:12px;margin-bottom:14px} .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden} .qty button{width:42px;height:52px;display:grid;place-items:center;background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer} .qty input{width:46px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--text);background:transparent;border:0} .trust-list{display:flex;flex-direction:column;gap:9px} .trust-list div{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)} .spec-table{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:8px 22px} .spec-table .r{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line2)} .spec-table .r:last-child{border-bottom:0} .spec-table .k{font-size:13.5px;color:var(--muted)} .spec-table .v{font-family:'IBM Plex Mono',monospace;font-size:13px} .desc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px} .desc-grid h2{font-weight:800;font-size:24px;margin-bottom:16px} .desc-grid p{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:14px} /* ---------- TWEAKS PANEL (theme + accent switcher) ---------- */ .tweaks{position:fixed;right:20px;bottom:20px;z-index:100;font-family:'IBM Plex Sans',sans-serif} .tweaks-toggle{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--panel); color:var(--text);font-size:20px;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center} .tweaks-body{position:absolute;right:0;bottom:60px;background:var(--panel);border:1px solid var(--line); border-radius:14px;padding:18px;width:230px;box-shadow:var(--shadow);display:none} .tweaks.open .tweaks-body{display:block} .tweaks-row{margin-bottom:16px} .tweaks-row:last-child{margin-bottom:0} .tweaks-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted2);display:block;margin-bottom:9px} .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .seg button{flex:1;padding:9px;background:transparent;border:0;color:var(--muted);font-family:'Archivo'; font-weight:700;font-size:13px;cursor:pointer} .seg button.active{background:var(--accent);color:var(--accent-ink)} .swatches{display:flex;gap:9px} .sw{width:30px;height:30px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0} .sw.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg) inset} /* ---------- FORMS ---------- */ .form{display:flex;flex-direction:column;gap:16px} .field{display:flex;flex-direction:column;gap:7px} .field label{font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px} .field .hint{font-size:12.5px;color:var(--muted2)} .input,.select,.textarea,.file{width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px; padding:13px 14px;color:var(--text);font-family:'IBM Plex Sans',sans-serif;font-size:14.5px} .textarea{min-height:130px;resize:vertical} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,var(--line))} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .quote-grid,.contact-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:start} .aside-card{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:24px} .aside-card h3{font-family:'Archivo';font-weight:700;font-size:16px;margin-bottom:14px} .aside-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.5px;color:var(--muted)} .aside-row:last-child{border-bottom:0} .aside-row b{color:var(--text);font-family:'IBM Plex Mono',monospace} /* ---------- NOTICE BOX ---------- */ .notice{background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:12px;padding:20px 22px} .notice h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;margin-bottom:8px} .notice p,.notice li{font-size:14px;line-height:1.65;color:var(--muted)} .notice ul{margin:0;padding-left:20px} /* ---------- PROSE (legal / policy) ---------- */ .prose{max-width:760px;margin:0 auto} .prose h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;margin:30px 0 12px;color:var(--text)} .prose h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin:22px 0 8px;color:var(--text)} .prose p,.prose li{font-size:15px;line-height:1.7;color:var(--muted)} .prose ul{padding-left:20px} .prose .updated{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted2);margin-bottom:8px} /* ---------- GALLERY ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} /* ---------- CART ---------- */ .cart-grid,.co-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:36px;align-items:start} .cart-line{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line2)} .cart-line .thumb{width:88px;height:66px} .cart-line .nm{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:1.2} .cart-line .meta{font-size:12.5px;color:var(--muted);margin-top:4px} .cart-line .lt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;text-align:right;white-space:nowrap} .cart-remove{display:inline-block;font-size:12px;color:var(--muted2);margin-top:8px;cursor:pointer} .cart-remove:hover{color:var(--danger)} .summary{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:24px;position:sticky;top:90px} .summary h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;margin-bottom:16px} .summary .row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding:8px 0} .summary .row .v{font-family:'IBM Plex Mono',monospace;color:var(--text)} .summary .row.total{border-top:1px solid var(--line2);margin-top:8px;padding-top:14px;font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;color:var(--text)} .summary .row.total .v{font-size:18px} /* ---------- CHECKOUT ---------- */ .co-section{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:24px;margin-bottom:18px} .co-step{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .co-num{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;display:grid;place-items:center;flex:0 0 auto} .co-step h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin:0} .dealer-list{display:flex;flex-direction:column;gap:10px;margin-top:14px} .dealer{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s} .dealer:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .dealer.selected{border-color:var(--accent);background:var(--accent-dim)} .dealer input{margin-top:3px;accent-color:var(--accent);flex:0 0 auto} .dealer .nm{font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px} .dealer .ds{font-size:12.5px;color:var(--muted);margin-top:2px} .dealer .badge{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);margin-top:5px} @media (max-width:860px){.cart-grid,.co-grid{grid-template-columns:1fr}.summary{position:static}} /* ---------- RESPONSIVE ---------- */ @media (max-width:860px){ .form-grid{grid-template-columns:1fr} .quote-grid,.contact-grid{grid-template-columns:1fr;gap:28px} } @media (max-width:760px){ .gallery-grid{grid-template-columns:1fr 1fr} } /* ---------- RESPONSIVE (core) ---------- */ @media (max-width:1024px){ .hero-grid{grid-template-columns:1fr;gap:36px} .hero-rating{right:12px} .grid-4{grid-template-columns:repeat(2,1fr)} .local-grid{grid-template-columns:1fr} .local-map{min-height:280px} .pdp{grid-template-columns:1fr;gap:32px} .desc-grid{grid-template-columns:1fr;gap:28px} .footer-grid{grid-template-columns:1fr 1fr} .specs .container{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .container{padding:0 20px} .main-nav,.header-phone{display:none} .main-nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0; background:var(--panel);border-bottom:1px solid var(--line2);padding:8px 0} .main-nav.open a{padding:14px 24px;border-top:1px solid var(--line2)} .nav-toggle{display:grid} .grid-4,.grid-3{grid-template-columns:1fr} .steps{grid-template-columns:1fr;gap:30px} .steps-line{display:none} .trust .container{grid-template-columns:1fr 1fr;gap:22px} .trust-item,.trust-stat{border-right:0!important} .footer-grid{grid-template-columns:1fr} .sec-head{align-items:flex-start} .sub-right{text-align:left} .cta .container,.cta-right{align-items:flex-start} .specs .container{grid-template-columns:1fr} .local-info{padding:36px 24px} /* pricing table -> stacked cards */ .price-head{display:none} .price-row{grid-template-columns:1fr 1fr;gap:6px 16px;row-gap:6px} .price-row .svc{grid-column:1 / -1} .price-label{display:block} .price-row .act{text-align:left} } .pad{padding:clamp(48px,8vw,74px) 0}