:root{
  --navy:#1a3a6e; --navy-d:#0f2347; --orange:#f97316;
  --dark:#111827;  --dark2:#1c2535;  --light:#f5f6fa;
  --text:#1f2937;  --muted:#6b7280;  --border:#e5e7eb;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--text);background:#fff;font-size:14px;line-height:1.5;overflow-x:hidden;}
a{text-decoration:none;}
img{display:block;max-width:100%;}

/* ── TOP BAR ── */
.topbar{background:#1c2535;color:#b0bec5;padding:8px 0;font-size:12px;line-height:1;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;}
.topbar-left{display:flex;gap:24px;align-items:center;}
.topbar-left span{display:flex;align-items:center;gap:6px;}
.topbar-left i{color:var(--orange);font-size:11px;}
.topbar-right{display:flex;gap:20px;}
.topbar-right a{color:#b0bec5;font-size:12px;display:flex;align-items:center;gap:5px;transition:color .18s;}
.topbar-right a i{font-size:11px;}
.topbar-right a:hover{color:var(--orange);}

/* ── HEADER ── */
.site-header{background:#fff;padding:13px 0;border-bottom:1px solid var(--border);}
.header-row{display:flex;align-items:center;gap:22px;}
.brand-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.brand-m{font-size:56px;font-weight:900;font-style:italic;font-family:'Arial Black',Arial,sans-serif;
  background:linear-gradient(140deg,var(--orange),#d94f00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;flex-shrink:0;display:block;}
.brand-m-sm{font-size:42px;}
.brand-name{font-size:15px;font-weight:700;color:var(--navy);line-height:1.2;letter-spacing:.2px;}
.brand-name strong{font-weight:900;font-size:16px;}
.brand-tagline{font-size:9px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;margin-top:1px;}
.header-search-col{flex:1;min-width:0;}
.search-box{display:flex;border:2px solid var(--orange);border-radius:4px;overflow:hidden;height:40px;}
.search-box input{flex:1;border:none;padding:0 14px;font-size:14px;outline:none;color:var(--text);min-width:0;}
.search-box button{background:var(--orange);border:none;color:#fff;padding:0 22px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .18s;}
.search-box button:hover{background:#e8650a;}
.search-sub{font-size:11px;color:var(--muted);margin-top:4px;}
.header-phone{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.header-phone i{font-size:22px;color:var(--navy);}
.header-phone strong{display:block;font-size:15px;font-weight:700;color:var(--text);}
.header-phone small{font-size:11px;color:var(--muted);}
.header-cart{display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer;}
.cart-icon-wrap{position:relative;}
.cart-icon-wrap .fas{font-size:26px;color:var(--navy);}
.badge-cart{position:absolute;top:-8px;right:-10px;background:var(--orange);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.header-cart small{display:block;font-size:11px;color:var(--muted);}
.cart-price{font-weight:700;font-size:14px;color:var(--navy);}

/* ── NAV ── */
.site-nav{background:var(--navy);}
.nav-inner{display:flex;align-items:stretch;}
.nav-categories{background:var(--orange);color:#fff;font-weight:700;font-size:14px;padding:11px 18px;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;transition:background .18s;}
.nav-categories:hover{background:#e8650a;color:#fff;}
.site-nav .nav-inner a:not(.nav-categories){color:#c8d6e9;font-size:14px;padding:11px 16px;display:flex;align-items:center;white-space:nowrap;transition:background .18s,color .18s;}
.site-nav .nav-inner a:not(.nav-categories):hover{background:rgba(255,255,255,.09);color:#fff;}

/* ── HERO ── */
.hero{
  background:
    linear-gradient(105deg,
      var(--navy-d) 0%,
      var(--navy) 36%,
      rgba(15,35,71,.7) 52%,
      rgba(15,35,71,.15) 70%,
      transparent 85%),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1440&h=540&fit=crop&q=85') center/cover no-repeat;
  min-height:460px;display:flex;align-items:center;padding:48px 0;
}
.hero-content{max-width:52%;}
.hero-h1{font-size:40px;font-weight:900;color:#fff;text-transform:uppercase;line-height:1.15;margin-bottom:14px;letter-spacing:-.3px;}
.hero-h1 span{color:var(--orange);}
.hero-p{font-size:15px;color:#c8d6e9;margin-bottom:26px;line-height:1.65;}
.hero-finder{background:#fff;border-radius:8px;padding:18px 20px 20px;box-shadow:0 6px 32px rgba(0,0,0,.38);}
.finder-tabs{display:flex;gap:6px;margin-bottom:14px;}
.ftab{background:transparent;border:1.5px solid var(--border);border-radius:5px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .18s;}
.ftab.active{background:var(--orange);border-color:var(--orange);color:#fff;}
.ftab:hover:not(.active){border-color:var(--orange);color:var(--orange);}
.finder-row{display:flex;gap:8px;align-items:center;}
.finder-select{flex:1;height:34px;border:1.5px solid var(--border);border-radius:4px;padding:0 10px;font-size:13px;color:var(--text);background:#fff;cursor:pointer;outline:none;min-width:0;}
.finder-select:focus{border-color:var(--orange);}
.finder-input{flex:1;height:34px;border:1.5px solid var(--border);border-radius:4px;padding:0 12px;font-size:13px;outline:none;}
.finder-btn{flex-shrink:0;background:var(--orange);border:none;color:#fff;padding:0 20px;height:34px;font-size:13px;font-weight:700;border-radius:4px;cursor:pointer;white-space:nowrap;transition:background .18s;}
.finder-btn:hover{background:#e8650a;}

/* ── FEATURES STRIP ── */
.feat-strip{background:#f5f6fa;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:13px 0;}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.feat-item{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);padding:4px 0;border-right:1px solid var(--border);}
.feat-item:last-child{border-right:none;}
.feat-item i{font-size:18px;color:var(--navy);}

/* ── SECTIONS ── */
.section-white{background:#fff;padding:36px 0;}
.section-light{background:var(--light);padding:28px 0;}
.sec-h2{font-size:20px;font-weight:700;text-transform:uppercase;color:var(--text);margin-bottom:20px;letter-spacing:.3px;}
.sec-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.sec-viewall{text-align:right;margin-top:14px;}
.link-org{color:var(--orange);font-size:13px;}
.link-org:hover{text-decoration:underline;color:#e8650a;}
.fw-600{font-weight:600;}

/* ── CATEGORIES ── */
.cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;}
.cat-item{text-align:center;padding:18px 6px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;background:#fff;}
.cat-img-wrap{width:100%;height:88px;margin:0 auto 12px;background:#f0f4ff;border-radius:7px;display:flex;align-items:center;justify-content:center;}
.cat-img-wrap i{font-size:40px;color:var(--navy);transition:color .2s;}
.cat-item span{font-size:13px;font-weight:600;color:var(--text);display:block;}
.cat-item:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 6px 16px rgba(249,115,22,.13);}
.cat-item:hover span{color:var(--orange);}
.cat-item:hover .cat-img-wrap{background:#fff3e6;}
.cat-item:hover .cat-img-wrap i{color:var(--orange);}

/* ── PROMO ── */
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.promo{border-radius:10px;padding:24px 18px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;min-height:168px;position:relative;}
.promo-navy{background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 100%);}
.promo-dark{background:linear-gradient(135deg,#1a2535 0%,#2c3a4a 100%);}
.promo-orange{background:linear-gradient(135deg,#e8580c 0%,var(--orange) 100%);}
.promo-body{color:#fff;flex:1;position:relative;z-index:1;padding-right:10px;}
.promo-eyebrow{font-size:11px;font-weight:700;opacity:.7;margin:0 0 4px;text-transform:uppercase;letter-spacing:.8px;}
.promo-body h3{font-size:20px;font-weight:800;text-transform:uppercase;line-height:1.2;margin:0 0 8px;}
.promo-body p{font-size:13px;opacity:.88;margin:0 0 14px;line-height:1.5;}
.pbtn{display:inline-block;padding:7px 16px;border-radius:4px;font-size:12px;font-weight:700;transition:all .18s;}
.pbtn-white{background:#fff;color:var(--navy);}
.pbtn-white:hover{background:#f0f4ff;color:var(--navy);}
.pbtn-dark{background:rgba(0,0,0,.3);color:#fff;border:1px solid rgba(255,255,255,.35);}
.pbtn-dark:hover{background:rgba(0,0,0,.45);color:#fff;}
.promo-pic-wrap{position:relative;flex-shrink:0;border-radius:8px;overflow:hidden;}
.promo-pic-wrap img{width:155px;height:138px;object-fit:cover;display:block;}
.promo-pic-tall img{width:128px;height:162px;}
.promo-pic-wrap::before{content:'';position:absolute;inset:0 auto 0 0;width:55%;z-index:1;pointer-events:none;}
.promo-navy .promo-pic-wrap::before{background:linear-gradient(to right,var(--navy-d),transparent);}
.promo-dark .promo-pic-wrap::before{background:linear-gradient(to right,#1a2535,transparent);}
.promo-orange .promo-pic-wrap::before{background:linear-gradient(to right,#e8580c,transparent);}

/* ── WHY BUY ── */
.why-section{border-top:1px solid var(--border);padding-top:30px;padding-bottom:30px;}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.why-item{display:flex;align-items:flex-start;gap:14px;padding:6px 4px;}
.why-icon{width:56px;height:56px;min-width:56px;background:#edf2ff;border:1.5px solid #c7d7f5;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.why-icon i{font-size:22px;color:var(--navy);}
.why-item strong{font-size:15px;font-weight:700;display:block;margin-bottom:4px;line-height:1.3;}
.why-item small{font-size:13px;color:var(--muted);line-height:1.5;display:block;}

/* ── PRODUCTS ── */
.prod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.prod-card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:var(--orange);}
.prod-img-wrap{height:152px;display:flex;align-items:center;justify-content:center;background:#fafafa;padding:10px;border-bottom:1px solid var(--border);}
.prod-img-wrap img{max-height:100%;max-width:100%;object-fit:contain;}
.prod-info{padding:11px 12px;display:flex;flex-direction:column;flex:1;}
.prod-name{font-size:14px;font-weight:700;margin:0 0 3px;line-height:1.3;color:var(--text);}
.prod-brand{font-size:11px;color:var(--muted);margin:0 0 7px;}
.prod-price{font-size:16px;font-weight:700;color:var(--text);margin:0 0 10px;}
.prod-btn{width:100%;margin-top:auto;background:var(--orange);border:none;color:#fff;padding:9px 6px;font-size:12px;font-weight:700;border-radius:4px;cursor:pointer;transition:background .18s;display:flex;align-items:center;justify-content:center;gap:7px;}
.prod-btn:hover{background:#e8650a;}

/* ── BRANDS ── */
.brands-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;}
.brand-card{background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:15px 8px;text-align:center;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;min-height:64px;}
.brand-card:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(26,58,110,.1);}
.br-bosch{font-weight:900;font-size:16px;color:#111;letter-spacing:.5px;}
.br-ngk{font-weight:900;font-size:18px;color:#cc0000;letter-spacing:2px;}
.br-mann{font-weight:900;font-size:12px;color:#006633;letter-spacing:.5px;line-height:1.25;}
.br-trw{font-weight:900;font-size:18px;color:#cc0000;letter-spacing:2px;}
.br-monroe{font-weight:900;font-size:13px;color:#111;letter-spacing:1px;}
.br-moura{font-weight:700;font-size:15px;color:#004f9e;}
.br-acdelco{font-weight:700;font-size:13px;color:#cc0000;}
.br-valeo{font-weight:700;font-size:14px;color:#004a8f;}
.brand-all{border-color:var(--orange);flex-direction:column;gap:4px;color:var(--orange);}
.brand-all i{font-size:14px;}
.brand-all span{font-size:11px;font-weight:700;line-height:1.3;}
.brand-all:hover{background:#fff8f3;}

/* ── NEWSLETTER ── */
.section-newsletter{background:var(--navy);padding:22px 0;}
.nl-grid{display:grid;grid-template-columns:118px 1fr 240px;gap:32px;align-items:center;}
.nl-icon-box{width:102px;height:102px;background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.22);border-radius:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nl-icon-box i{font-size:44px;color:#fff;}
.nl-svg-icon{width:58px;height:44px;display:block;}
.section-newsletter h3{font-size:22px;font-weight:800;color:#fff;text-transform:uppercase;margin-bottom:8px;line-height:1.22;}
.section-newsletter p{font-size:13px;color:#a8bcd4;margin-bottom:15px;}
.nl-form{display:flex;gap:8px;max-width:460px;}
.nl-form input{flex:1;border:none;border-radius:4px;padding:10px 14px;font-size:13px;outline:none;min-width:0;}
.nl-form button{background:var(--orange);border:none;color:#fff;padding:10px 20px;border-radius:4px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .18s;}
.nl-form button:hover{background:#e8650a;}
.nl-img-col img{border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.48);width:100%;max-height:240px;object-fit:cover;}

/* ── FOOTER ── */
.site-footer{background:var(--dark);padding:44px 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr 1.5fr 1.3fr 1.2fr;gap:24px;}
.foot-logo{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.foot-brand-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2;}
.foot-brand-tagline{font-size:8.5px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-top:2px;}
.foot-desc{font-size:12px;color:#9ca3af;margin-bottom:14px;line-height:1.65;}
.foot-social{display:flex;gap:7px;}
.foot-social a{width:30px;height:30px;border-radius:50%;background:#374151;color:#d1d5db;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .18s;}
.foot-social a:hover{background:var(--orange);color:#fff;}
.foot-title{font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;margin-bottom:13px;}
.foot-list{list-style:none;padding:0;}
.foot-list li{font-size:12px;color:#9ca3af;margin-bottom:7px;display:flex;align-items:center;gap:6px;}
.foot-list li a{color:#9ca3af;transition:color .18s;}
.foot-list li a:hover{color:var(--orange);}
.foot-list li i{color:var(--orange);font-size:11px;width:13px;flex-shrink:0;}
.foot-addr{color:#9ca3af;font-size:12px;line-height:1.7;margin-bottom:8px;}
.foot-addr strong{color:#fff;}
.pay-cards{display:flex;flex-direction:column;gap:7px;}
.pay-card-lg{display:flex;align-items:center;justify-content:center;border-radius:7px;padding:11px 14px;font-weight:900;}
.pay-visa{background:#1a1f71;color:#fff;font-size:22px;font-style:italic;letter-spacing:4px;}
.pay-mc{background:#fff;justify-content:flex-start;padding:10px 14px;gap:0;}
.mc-circle{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:inline-block;}
.mc-red{background:#eb001b;}
.mc-orange,.mc-yel{background:#f79e1b;margin-left:-14px;}
.mc-label{font-size:11px;color:#333;font-weight:700;margin-left:9px;font-style:italic;align-self:center;}
.pay-bancard{background:#0068b4;color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px;}
.foot-bottom{border-top:1px solid #374151;margin-top:30px;padding:15px 0;text-align:center;}
.foot-bottom p{font-size:12px;color:#6b7280;margin:0;}

/* ── RESPONSIVE ── */
@media(max-width:1200px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1024px){
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .brands-grid{grid-template-columns:repeat(4,1fr);}
  .why-grid{grid-template-columns:repeat(3,1fr);}
  .nl-grid{grid-template-columns:88px 1fr;}
  .nl-img-col{display:none;}
  .hero-content{max-width:70%;}
}
@media(max-width:768px){
  .topbar-right{display:none;}
  .header-row{flex-wrap:wrap;}
  .header-search-col{order:3;flex:0 0 100%;}
  .header-phone,.header-cart{display:none;}
  .nav-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav-inner::-webkit-scrollbar{display:none;}
  .hero-content{max-width:100%;}
  .hero-h1{font-size:28px;}
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .promo-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .brands-grid{grid-template-columns:repeat(4,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nl-form{flex-direction:column;}
}