
:root{--red:#e31e24;--dark:#111315;--dark2:#1b1e21;--muted:#6d7378;--line:#e7e8ea;--bg:#f5f6f7;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--dark);background:var(--bg)}
button,input,select,textarea{font:inherit}.topbar{background:#0f1113;color:#fff;display:flex;justify-content:center;gap:40px;padding:9px 20px;font-size:13px}
.header{display:grid;grid-template-columns:280px 1fr auto;gap:24px;align-items:center;background:#fff;padding:18px max(4vw,24px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{text-decoration:none;color:#111;display:flex;align-items:center;position:relative;font-weight:900;font-size:28px;letter-spacing:-1.5px}.brand-niss{color:#111}.brand-center{color:var(--red)}.gear{color:var(--red);font-size:20px;margin-left:3px}.brand small{position:absolute;top:31px;left:0;font-size:8px;letter-spacing:1px;color:#777;white-space:nowrap}
.global-search{display:flex;border:1px solid #d9dcdf;border-radius:9px;overflow:hidden;background:#f7f8f9}.global-search input{border:0;background:transparent;padding:13px 15px;width:100%;outline:0}.global-search button{border:0;background:var(--red);color:#fff;width:52px}
.header-actions{display:flex;gap:10px}.icon-btn{border:0;background:#f3f4f5;border-radius:9px;padding:10px 12px;cursor:pointer}.icon-btn b{background:var(--red);color:#fff;border-radius:20px;padding:2px 6px;font-size:11px}
.nav{display:flex;gap:30px;justify-content:center;background:#151719;padding:12px;position:relative;z-index:20}.nav a{color:#fff;text-decoration:none;font-size:14px;font-weight:600}
main{max-width:1280px;margin:auto}.hero{margin:26px 18px 0;min-height:390px;border-radius:22px;background:linear-gradient(120deg,#101214,#25292d);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;padding:60px}.hero-copy{max-width:650px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.7px;color:var(--red)}.hero h1{font-size:52px;line-height:1.02;margin:12px 0 18px;letter-spacing:-2px}.hero h1 strong{color:var(--red)}.hero p{color:#c8cbd0;font-size:18px;line-height:1.6}.hero-actions{display:flex;gap:12px;margin-top:28px}.btn{border:0;border-radius:9px;padding:13px 18px;font-weight:800;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--red);color:#fff}.secondary,.light{background:#fff;color:#17191b}.whatsapp{background:#1fa855;color:#fff}.full{width:100%;margin-top:9px}
.hero-art{position:relative;min-height:270px}.disc{width:230px;height:230px;border:24px solid #555;border-radius:50%;position:absolute;right:40px;top:20px;box-shadow:0 0 0 10px #aeb2b5 inset}.disc:after{content:"";position:absolute;width:70px;height:70px;background:#222;border:15px solid #777;border-radius:50%;left:41px;top:41px}.coil{position:absolute;width:80px;height:190px;border:14px solid var(--red);border-radius:30px;right:230px;top:70px;transform:rotate(-15deg)}.filter{position:absolute;width:75px;height:105px;background:#ddd;border-radius:10px;right:0;bottom:15px}.bearing{position:absolute;width:80px;height:80px;border:18px solid #aaa;border-radius:50%;right:170px;bottom:-5px}
.finder,.section{margin:28px 18px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 4px 22px #0000000a}.section-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.section-title h2{font-size:30px;margin:5px 0}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tab{border:1px solid #ddd;background:#fff;padding:9px 13px;border-radius:8px;cursor:pointer}.tab.active{background:#17191b;color:#fff}.tab-panel{display:none;margin-top:22px}.tab-panel.active{display:block}.select-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:10px}.select-grid select,.oem-row input,.vin-form input,.sort-wrap select,.admin-form input,.admin-form select,.admin-form textarea{border:1px solid #d9dcdf;border-radius:8px;padding:12px;background:#fff;width:100%}.oem-row,.vin-form{display:flex;gap:10px}.oem-row input,.vin-form input{flex:1}.help{display:block;margin-top:9px;color:#777}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px}.benefits article{background:#fff;border-radius:14px;padding:20px;display:flex;gap:12px;align-items:center}.benefits b,.benefits span{display:block}.benefits span{font-size:12px;color:#777;margin-top:3px}
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.category{border:1px solid var(--line);background:#fafafa;border-radius:12px;padding:18px;text-align:left;font-weight:800;cursor:pointer}.category.active{border-color:var(--red);color:var(--red)}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.product{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;position:relative}.product-img{height:165px;background:linear-gradient(135deg,#f1f2f3,#ddd);display:flex;align-items:center;justify-content:center;font-size:48px}.product-body{padding:16px}.product h3{font-size:15px;margin:5px 0 8px}.product .meta{font-size:12px;color:#777}.price{font-size:21px;font-weight:900;margin:10px 0}.sale-old{text-decoration:line-through;color:#999;font-size:12px;margin-left:6px}.badge{position:absolute;top:10px;left:10px;background:#151719;color:#fff;padding:5px 8px;border-radius:6px;font-size:10px}.badge.sale{background:var(--red)}.product-actions{display:flex;gap:7px}.product-actions .btn{flex:1;padding:9px;font-size:12px}
.vin-banner{margin:28px 18px;background:var(--red);color:#fff;border-radius:18px;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px}.vin-banner .eyebrow{color:#fff}.vin-banner h2{margin:7px 0;max-width:780px}.offer-card{margin-top:15px;background:#151719;color:#fff;padding:25px;border-radius:14px;display:flex;justify-content:space-between;gap:20px}.offer-card span{display:block;color:#ccc;margin-top:6px}.brand-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.brand-cloud span{padding:12px 18px;border:1px solid #ddd;border-radius:9px;font-weight:800}
footer{background:#111315;color:#fff;padding:45px max(5vw,30px);display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-top:35px}footer>div{display:flex;flex-direction:column;gap:8px}footer span,footer p{color:#aaa;font-size:13px}.footer-brand{display:inline-flex}.footer-brand .brand-niss{color:#fff}
.cart-drawer,.admin-drawer{position:fixed;right:-520px;top:0;height:100vh;width:min(480px,100%);background:#fff;z-index:60;padding:22px;box-shadow:-10px 0 40px #0003;overflow:auto;transition:.25s}.admin-drawer{width:min(620px,100%);right:-660px}.cart-drawer.open,.admin-drawer.open{right:0}.cart-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:12px}.cart-head button,.modal-close{border:0;background:#eee;border-radius:50%;width:35px;height:35px}.cart-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px 0;border-bottom:1px solid #eee}.cart-total{display:flex;justify-content:space-between;font-size:20px;padding:18px 0}.drawer-note{display:block;color:#777;margin-top:12px}.overlay{display:none;position:fixed;inset:0;background:#0008;z-index:50}.overlay.show{display:block}.modal{display:none;position:fixed;inset:0;z-index:70;place-items:center;padding:20px}.modal.open{display:grid}.modal-card{background:#fff;border-radius:16px;padding:25px;width:min(620px,100%);position:relative}.modal-close{position:absolute;right:14px;top:14px}.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:11px 18px;border-radius:8px;z-index:90;opacity:0;pointer-events:none}.toast.show{opacity:1}
.admin-form{display:grid;gap:12px}.admin-form label{font-size:12px;font-weight:700}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.admin-actions{display:flex;gap:8px}.admin-tools{border-top:1px solid #eee;margin-top:20px;padding-top:15px}.admin-list{margin-top:15px}.admin-row{border-top:1px solid #eee;padding:10px 0;display:flex;justify-content:space-between;gap:10px}.file-btn input{display:none}.image-preview{min-height:60px;background:#f3f3f3;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#777}.link-btn{border:0;background:transparent;color:var(--red);font-weight:800;cursor:pointer}.results{font-size:12px;color:#777}.sort-wrap{display:flex;gap:8px;align-items:center}.mobile-nav{display:none}
@media(max-width:900px){.header{grid-template-columns:1fr auto}.global-search{grid-column:1/-1;grid-row:2}.header-actions .icon-btn span{display:none}.nav{overflow:auto;justify-content:flex-start;padding-left:18px}.hero{grid-template-columns:1fr;padding:35px}.hero-art{display:none}.hero h1{font-size:39px}.select-grid{grid-template-columns:1fr 1fr}.benefits,.products,.categories{grid-template-columns:1fr 1fr}.section-title{align-items:flex-start;flex-direction:column}.oem-row,.vin-form{flex-direction:column}footer{grid-template-columns:1fr}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:40;justify-content:space-around;border-top:1px solid #ddd;padding:8px}.mobile-nav a,.mobile-nav button{border:0;background:none;color:#222;text-decoration:none;font-size:18px;display:flex;flex-direction:column;align-items:center}.mobile-nav span{font-size:10px}.topbar span:nth-child(2){display:none}body{padding-bottom:58px}}
@media(max-width:560px){.topbar{gap:12px;font-size:10px}.header{padding:14px}.brand{font-size:24px}.hero{margin:14px 10px;padding:27px 22px;min-height:auto}.hero h1{font-size:34px}.finder,.section{margin:14px 10px;padding:20px}.benefits{grid-template-columns:1fr;margin:10px}.products,.categories{grid-template-columns:1fr}.select-grid{grid-template-columns:1fr}.vin-banner{margin:14px 10px;flex-direction:column;align-items:flex-start}.offer-card{flex-direction:column}.two{grid-template-columns:1fr}}
