:root{--r:#F3232B;--k:#0b0b0b;--img-hero:url(img/hero.webp);--img-tread:url(img/header.webp);--img-wheel:url(img/wheel-hero.webp)}
*{box-sizing:border-box;margin:0}body{font:14px/1.3 "Roboto Condensed","Arial Narrow",Arial,sans-serif;color:#222;background:#fff}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:0}
.wrap{width:65%;min-width:630px;max-width:1140px;margin:auto;position:relative}.row{display:flex;align-items:center;justify-content:space-between;height:100%}


.head{height:95px;background:linear-gradient(#000a,#0006),var(--img-tread) center/cover #050505}.head .wrap{height:95px}
.logo{font:900 62px/1 Impact,"Arial Black",sans-serif;color:#fff;letter-spacing:-2px;display:flex;transform:scaleX(.92);transform-origin:left}
.y{position:relative}.y:before{content:"";position:absolute;left:3px;top:6px;border:14px solid transparent;border-top:28px solid var(--r);border-bottom:0;border-left-width:19px;border-right-width:19px;mix-blend-mode:normal;opacity:.95;transform:scale(.6,.55);transform-origin:top}
.cartbtn{background:none;display:flex;align-items:center;gap:6px}.cartbtn b{background:var(--r);color:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:15px}
.catbar{background:var(--r);height:49px;color:#fff}.catbar .wrap{height:49px;display:flex;align-items:center;justify-content:space-between}
#cats{display:flex;list-style:none;padding:0;gap:20px;height:100%}#cats>li{position:relative;display:flex;align-items:center}
#cats a{font-weight:700;font-size:12px;text-transform:uppercase;padding:5px 0;border-bottom:2px solid transparent}#cats a.on,#cats a:hover{border-color:#fff}

#search{display:flex;align-items:center;gap:10px}#search input{background:none;border:0;border-bottom:1px solid #fff6;color:#fff;font-size:10px;width:80px;outline:0}#search input::placeholder{color:#fff}#search button{background:none;display:flex}
.hero{height:calc(100vh - 144px);height:calc(100svh - 144px);min-height:390px;background:#111;overflow:hidden;position:relative;color:#fff;display:grid;place-items:center;text-align:center}
.ht{margin-top:-30px;position:relative;z-index:2;transition:opacity .35s}.hero h1{font-size:clamp(34px,5.4vw,84px);font-weight:800;letter-spacing:1px;text-shadow:0 3px 22px #000,0 0 3px #000b}.hero p{font-size:clamp(20px,3.2vw,50px);font-weight:300;letter-spacing:1.5px;text-shadow:0 2px 16px #000,0 0 3px #000b}
.arr{z-index:2;position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:#0007;border:1px solid #fff5;color:#fff;font-size:18px;display:grid;place-items:center;padding:0;transition:background .2s,border-color .2s,transform .2s}.arr.l{left:18px}.arr.r{right:18px}.arr:hover{background:var(--r);border-color:var(--r);transform:translateY(-50%) scale(1.1)}.arr:active{transform:translateY(-50%) scale(.94)}
.promo{display:grid;grid-template-columns:repeat(3,1fr);height:172px;margin-top:24px;position:relative;z-index:2;overflow:hidden}
.promo a{position:relative;display:flex;align-items:center;overflow:hidden;padding-left:16px}.promo h3{font-size:19px;font-weight:700;line-height:1.1;z-index:1;color:#222;transition:.2s}.promo h3 span{font-weight:300;border-bottom:3px solid var(--r);display:inline-block}
.promo img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%);position:absolute;right:0;top:0;height:100%;width:48%;object-fit:cover}.p1{background:#cad0d9}.p2{background:#221f23}.p2 h3{color:#fff}.p3{background:#db0a0a}.p3 h3{color:#fff}.p3 h3 span{border-color:#fff}.p3 img{width:auto;aspect-ratio:1;height:130%;top:-15%;right:-18%}.promo a:hover h3{transform:translateX(3px)}
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;margin:17px 0 24px}.brands span{height:54px;background:#f2f2f2;display:grid;place-items:center;font:800 10px Arial;letter-spacing:-.3px}
.brands .c{color:#b8860b;font:700 italic 12px Georgia}.brands .i{font-style:italic;font-weight:900}.brands .m{color:#1b4a9a;font:900 italic 11px Arial}.brands .p{background:#ffd200;color:#c00;font-size:11px;margin:12px 0;height:30px}
h2{font-size:12px;font-weight:700;border-bottom:3px solid var(--r);display:inline-block;padding:8px 0 6px;width:145px;white-space:nowrap;margin-bottom:12px}h2 small{color:var(--r);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.card{border:1px solid #ddd;padding:0 0 10px;position:relative;background:#fff;overflow:hidden;opacity:0;transition:box-shadow .3s,transform .3s,border-color .3s}.card:hover{box-shadow:0 10px 24px #0002;transform:translateY(-4px);border-color:#ccc}
.card img{width:100%;aspect-ratio:1;object-fit:contain;padding:12px;background:#fff}.card h4{font-size:10px;color:#a00;padding:0 8px;font-weight:700}
.pr{padding:3px 8px;font-size:12px}.pr s{color:#999;font-size:10px;margin-right:5px}.pr b{font-size:13px}.tag{position:absolute;top:6px;left:6px;background:var(--r);color:#fff;font-size:9px;padding:2px 5px;font-weight:700}

#vazio,.demo{text-align:center;color:#777;font-size:11px;padding:20px 0}
.ov{position:fixed;inset:0;background:#0007;display:none;z-index:50}.ov.on{display:block}
.cart{position:fixed;top:0;right:0;height:100%;width:min(360px,100%);background:#fff;z-index:60;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column}.cart.on{transform:none}
.ch{background:#111;color:#fff;display:flex;justify-content:space-between;padding:14px}.ch button{background:none;color:#fff}#items{flex:1;overflow:auto;padding:10px}
.it{display:grid;grid-template-columns:60px 1fr;gap:10px;border-bottom:1px solid #eee;padding:8px 0;font-size:12px}.it img{width:60px;height:60px;object-fit:contain;border:1px solid #eee}
.q{display:flex;gap:6px;align-items:center;margin-top:4px}.q button{width:22px;height:22px;background:#eee}.q .rm{margin-left:auto;width:auto;padding:0 8px;background:none;color:var(--r)}
.cf{padding:14px;border-top:1px solid #ddd}.tot{display:flex;justify-content:space-between;font-size:16px;margin-bottom:10px}#checkout{width:100%;padding:12px;background:var(--r);color:#fff;font-weight:700}.cf small{display:block;color:#777;margin-top:8px;font-size:10px}
@media(max-width:700px){.wrap{width:94%;min-width:0}
.logo{font-size:44px}.catbar{height:auto}.catbar .wrap{flex-wrap:wrap;height:auto;padding:6px 0;gap:6px}#cats{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:14px;height:36px;max-width:100%}#cats a{white-space:nowrap;font-size:11px}
.hero{height:calc(100svh - 198px);min-height:300px;place-items:start center}.ht{padding:46px 14px 0;margin-top:0}.hero h1{font-size:36px;line-height:1.05;text-shadow:0 2px 18px #000,0 0 4px #000b}.hero p{font-size:20px;margin-top:8px;font-weight:400;text-shadow:0 2px 14px #000,0 0 3px #000b}.hero:before{content:"";position:absolute;inset:0 0 45% 0;background:linear-gradient(#000b,transparent);z-index:1;pointer-events:none}.promo{height:130px;margin-top:16px}.promo h3{font-size:12px}.brands{grid-template-columns:repeat(3,1fr);gap:8px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.arr{width:38px;height:38px;font-size:14px}}
#cats::-webkit-scrollbar{display:none}
@media(max-width:420px){.promo h3{font-size:10px}.promo a{padding-left:8px}}

.sl{position:absolute;inset:0;background:linear-gradient(#0005,#0005),var(--img-hero) center 35%/cover;opacity:0;transform:scale(1.05);transition:opacity 1.1s,transform 7s linear}
.sl.on{opacity:1;transform:scale(1)}
.sl:nth-child(2){background-image:linear-gradient(#0006,#0006),var(--img-tread);background-position:center}
.sl:nth-child(3){background:linear-gradient(#0003,#0003),#db0a0a}
.sl:nth-child(3):after{content:"";position:absolute;top:-9%;bottom:-9%;right:-3%;aspect-ratio:1;background:var(--img-wheel) center/cover;-webkit-mask-image:radial-gradient(circle closest-side,#000 90%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 90%,transparent 100%)}
@media(prefers-reduced-motion:reduce){.sl{transition:opacity .01s;transform:none}}
.dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.dots button{width:36px;height:16px;background:none;padding:0;position:relative}
.dots button:before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;background:#fff6;transition:.25s}
.dots button.on:before{background:var(--r)}.dots button:hover:before{background:#fff}
.arr:focus-visible,.dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.menu{position:fixed;top:0;left:0;min-width:240px;background:#fff;color:#222;border-radius:8px;padding:6px;box-shadow:0 14px 34px #0005;z-index:40;visibility:hidden;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
.menu:before{content:"";position:absolute;top:-6px;left:30px;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-radius:2px}
.dd.open .menu{visibility:visible;opacity:1;transform:none;pointer-events:auto}
#cats .menu a{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:0;border-radius:6px;color:#222;font-size:12px;letter-spacing:.4px;white-space:nowrap;transition:background .15s,color .15s,padding .15s}
#cats .menu a:after{content:"\203A";color:var(--r);font-size:20px;line-height:1;opacity:0;transform:translateX(-6px);transition:.18s}
#cats .menu a:hover,#cats .menu a:focus-visible{background:#f4f4f4;color:var(--r);padding-left:18px;outline:0}
#cats .menu a:hover:after,#cats .menu a:focus-visible:after{opacity:1;transform:none}
.ddt i{display:inline-block;font-style:normal;transition:transform .2s}.dd.open .ddt i{transform:rotate(180deg)}
.card.in{opacity:1;animation:up .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes up{from{opacity:0;transform:translateY(16px)}}
.card img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.card:hover img{transform:scale(1.06)}
.cartbtn b.bump{animation:bump .45s}@keyframes bump{40%{transform:scale(1.4)}}
.promo img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.promo a:hover img{transform:scale(1.06)}
#cats>li>a{transition:border-color .25s}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}.rv.in{opacity:1;transform:none}
#vazio:not([hidden]){animation:fade .5s}@keyframes fade{from{opacity:0}}
.chips{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:4px 2px 14px;margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #ddd;color:#333;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:8px 13px;border-radius:3px;transition:background .25s,color .25s,border-color .25s,transform .2s,box-shadow .25s}
.chip i{font-style:normal;font-size:10px;background:#eee;color:#666;padding:1px 6px;border-radius:9px;transition:.25s}
.chip:hover{border-color:var(--r);color:var(--r);transform:translateY(-2px);box-shadow:0 4px 10px #0001}
.chip.on{background:var(--r);border-color:var(--r);color:#fff;box-shadow:0 4px 12px #f3232b55}
.chip.on i{background:#fff3;color:#fff}
.chip:active{transform:scale(.96)}
.chip:focus-visible{outline:2px solid var(--r);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.rv,.card{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}
.add{position:relative;height:44px;margin:8px 8px 0}
.add>div{position:absolute;inset:0;display:flex;gap:6px;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1),visibility .3s}
.add .a2{opacity:0;transform:translateY(8px) scale(.97);visibility:hidden}
.add.has .a1{opacity:0;transform:translateY(-8px) scale(.97);visibility:hidden}
.add.has .a2{opacity:1;transform:none;visibility:visible}
.add button{height:44px;font-family:inherit;font-weight:700;transition:background .2s,color .2s,transform .15s,box-shadow .2s}
.add button:active{transform:scale(.93)}
.add .plus{flex:none;width:52px;background:var(--r);color:#fff;font-size:26px;line-height:1}
.add .plus:hover{background:#c71a21;box-shadow:0 4px 12px #f3232b66}
.a2 button{flex:none;width:46px;background:var(--r);color:#fff;font-size:22px;line-height:1}
.a2 button:first-child{background:#fff;color:var(--r);box-shadow:inset 0 0 0 1.5px var(--r)}
.a2 button:first-child:hover{background:var(--r);color:#fff}.a2 button:last-child:hover{background:#c71a21}
.a2 .qty{flex:1;display:grid;place-items:center;background:#f4f4f4;font-size:18px}
.qty b{display:inline-block}.qty b.pop{animation:pop .4s}@keyframes pop{40%{transform:scale(1.45);color:var(--r)}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,24px);opacity:0;visibility:hidden;display:flex;align-items:center;gap:10px;background:#111;color:#fff;padding:11px 14px;border-radius:6px;font-size:13px;box-shadow:0 10px 30px #0006;z-index:70;max-width:92vw;transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.3,1.2),visibility .3s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast .ck{width:22px;height:22px;border-radius:50%;background:#1f9d55;display:grid;place-items:center;font-size:13px;flex:none;transform:scale(0)}
.toast.on .ck{animation:ck .5s .1s cubic-bezier(.2,.9,.3,1.4) forwards}@keyframes ck{to{transform:scale(1)}}
.toast.rm .ck{background:#777}
#tmsg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.toast button{background:none;color:#ff6a70;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:4px 2px;white-space:nowrap}.toast button:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.toast,.add>div{transition:opacity .01s}.toast.on .ck{animation:none;transform:none}}
.add .buy{flex:1;position:relative;overflow:hidden;background:#222;color:#fff;font-size:12px;letter-spacing:.8px;transition:background .3s,letter-spacing .35s,transform .15s,box-shadow .3s}
.add .buy:before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,#fff3,transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.7,.2,1)}
.add .buy:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--r);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.add .buy:hover{background:#2b2b2b;letter-spacing:1.4px;box-shadow:0 6px 14px #0003}
.add .buy:hover:before{left:130%}.add .buy:hover:after{transform:scaleX(1)}
@media(max-width:700px){.sl{transform:none;transition:opacity 1s}.sl.on{transform:none}.sl:nth-child(3):after{top:auto;bottom:-6%;height:60%;right:50%;transform:translateX(50%)}}