*{box-sizing:border-box}body{margin:0;color:#111;font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}.notice{text-align:center;background:#101010;color:#eee;font-size:12px;letter-spacing:.02em;padding:13px}.notice b{font-size:10px;letter-spacing:.2em}.contact{text-align:right;padding:8px 3%;font-size:12px;color:#555}.header{display:flex;align-items:center;gap:40px;padding:20px 3%;height:114px}.logo{width:210px;max-width:100%}.desktop{display:flex;gap:30px;align-items:center;flex:1}.desktop a{font-size:12px}.actions{display:flex;gap:24px;font-size:24px}.menu{display:none;background:none;border:0;font-size:24px}.mobile-nav{padding:14px;position:absolute;background:white;z-index:3;right:0;left:0}.mobile-nav a{display:block;padding:12px}.hero{height:750px;background:url('/assets/zelox/hero-roadside-campaign-v1.png') center/cover no-repeat;display:grid;place-items:center;text-align:center;color:white}.hero-text p{font-size:16px;letter-spacing:.25em;margin:0 0 10px}.hero h1{font-size:48px;line-height:1.02;margin:0 0 22px}.button{background:#f3a622;color:#111;padding:14px 25px;display:inline-block;font-size:11px;letter-spacing:.18em;font-weight:bold}.button+.button{margin-left:8px}.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:75px 3% 25px}.categories a{position:relative;aspect-ratio:1;overflow:hidden}.categories img{width:100%;height:100%;object-fit:cover}.categories span{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:white;text-shadow:0 1px 5px black;font-size:22px;font-weight:bold}.lineup{padding:45px 3% 100px}.lineup h2{text-align:center;font-size:32px;margin:0 0 65px}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 22px}.product img{width:100%;aspect-ratio:1;object-fit:cover}.product h3{font-size:16px;margin:8px 0 2px}.product p{margin:7px 0;font-size:13px}.stars{color:#e8a623;font-size:17px}.stars small{color:#555;font-size:11px}.mission{height:450px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent),url('/assets/zelox/mission-roadside-daylight-v1.png') center/cover;color:white}.mission div{margin-left:9%;width:32%;line-height:1.6}.mission div>p:first-child{font-size:11px;letter-spacing:.2em}.mission h2{font-size:36px;margin:0}.mission p{font-size:16px}footer{display:flex;gap:8%;justify-content:center;padding:65px 5% 35px;position:relative;font-size:12px;color:#444}footer details{min-width:170px}footer summary{letter-spacing:.2em;cursor:pointer;margin-bottom:25px;font-size:12px}footer a{display:block;margin:12px 0}footer small{position:absolute;bottom:8px}.mobile-nav[hidden]{display:none}@media(max-width:768px){.notice{height:55px;font-size:11px}.notice b{display:block;margin-bottom:4px}.contact,.desktop,.account{display:none}.header{height:62px;padding:10px 20px;justify-content:space-between}.logo{width:100px}.actions{gap:20px;font-size:25px}.menu{display:block}.hero{height:487px;background-position:center}.hero-text{padding:0 15px}.hero-text p{font-size:14px;line-height:1.7}.hero h1{font-size:25px;line-height:1.05;margin-bottom:12px}.button{padding:12px 15px;font-size:10px}.categories{grid-template-columns:repeat(2,1fr);padding:40px 15px 0;gap:16px}.categories span{font-size:18px;bottom:8px;line-height:1.1}.lineup{padding:55px 15px 45px}.lineup h2{font-size:26px;margin:0 0 40px}.products{display:flex;overflow:auto;gap:16px}.product{flex:0 0 42%}.product h3{font-size:16px}.mission{height:480px;align-items:flex-end;background-position:center}.mission div{width:auto;margin:0;padding:25px;color:white}.mission h2{font-size:26px}.mission p{font-size:14px}footer{display:block;padding:100px 15px 35px}footer details{border-top:1px solid #ddd;padding:20px 0}footer summary{margin:0}footer small{position:static}footer details[open] a,footer details[open] p{margin:12px 0}}
.icon-button{border:0;background:none;font-size:24px;cursor:pointer;color:inherit}.slide-controls{position:absolute;bottom:18px;display:flex;gap:8px}.hero{position:relative}.slide-controls button{background:none;border:0;color:white;font-size:14px;cursor:pointer}.hero.winter{background-image:url('/assets/zelox/hero-winter-road-v1.png')}.hero.winter .hero-text{align-self:end;margin-bottom:55px}.product{position:relative}.quick-button{position:absolute;top:6px;right:6px;background:#fff;border:0;padding:10px;cursor:pointer;opacity:0}.product:hover .quick-button,.quick-button:focus{opacity:1}dialog{border:0;max-width:min(90vw,800px);max-height:85vh;padding:26px;color:#111}dialog::backdrop{background:rgba(0,0,0,.55)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:22px}.close-dialog{background:none;border:0;font-size:28px;cursor:pointer}.search-results a{display:block;padding:10px 0;border-bottom:1px solid #eee}.search-results img,.cart-row img{width:70px;height:70px;object-fit:cover;vertical-align:middle;margin-right:12px}.cart-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #ddd;padding:15px 0}.cart-row button{background:white;border:1px solid #ddd;padding:5px;cursor:pointer}.cart-total{text-align:right}.quick-content{display:grid;grid-template-columns:1fr 1fr;gap:25px}.quick-content img{width:100%}.quick-content input{width:70px;padding:8px}.quick-content button{border:0;cursor:pointer;margin:12px 0}.cart-count{font-size:12px}.search-results{max-height:50vh;overflow:auto}#cart-dialog{width:min(90vw,440px);margin:0 0 0 auto;height:100vh;max-height:none}#cart-dialog[open]{position:fixed;inset:0 0 0 auto}@media(max-width:768px){.quick-button{display:none}.quick-content{display:block}.quick-content img{max-height:220px;object-fit:contain}.hero.winter .hero-text{margin-bottom:30px}}

.actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:middle}.footer-logo img{width:200px;height:auto}.footer-logo{display:block}@media(max-width:768px){.footer-logo{display:none}}
/* Refinements against the recorded ZELOX desktop and mobile reference. */
.notice{height:40px;padding:10px}.contact{height:30px;padding:5px 40px;font-size:11px}.header{height:117px;padding:20px 40px;gap:24px}.logo{width:240px}.desktop{justify-content:center;gap:25px}.desktop a{font-size:15px;white-space:nowrap}.button{background:#f18f01}.categories,.lineup{max-width:1500px;margin-left:auto;margin-right:auto}.product h3{font-size:18px;line-height:1}.mission h2{font-weight:700}
@media(max-width:768px){.notice{height:56px;padding:9px}.header{height:60px;padding:10px 17px;gap:0}.logo{width:110px}.hero-text p{font-size:16px;max-width:260px;line-height:1.5;margin:0 auto 10px}.hero h1{font-size:24px;line-height:1}.product h3{font-size:18px}.categories{padding:40px 17px 0}.lineup{padding-left:17px;padding-right:17px}}
footer summary{list-style:none}footer summary::-webkit-details-marker{display:none}
@media(max-width:768px){.hero{background-position:66% center}.mission{background-position:72% center}.mission h2{font-weight:700}footer summary{position:relative}footer summary:after{content:'⌄';position:absolute;right:0;font-size:18px;line-height:1}}
.home-image{position:relative;aspect-ratio:1;overflow:hidden}.home-image img{width:100%;height:100%;object-fit:cover}.home-image .home-secondary{position:absolute;inset:0;opacity:0;transition:opacity .3s}.product:hover .home-secondary{opacity:1}@media(max-width:768px){.home-image .home-secondary{display:none}}
@media(min-width:769px){.z-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;justify-content:initial;padding:60px 40px;min-height:360px}.z-footer-logo{align-self:start}.z-footer small{bottom:36px;left:50%;transform:translateX(-50%)}.lineup h2{margin-bottom:100px}}
@media(max-width:768px){.products .product{flex-basis:38%}.products{gap:17px}}
.hero,.hero.winter{background:none;overflow:hidden}.home-hero-photo,.home-mission-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-text,.slide-controls{z-index:1}.mission{position:relative;background:none;overflow:hidden}.mission:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent)}.mission>div{position:relative;z-index:2}@media(max-width:768px){.home-hero-photo{object-position:66% center}.home-mission-photo{object-position:72% center}}
.mission:before{pointer-events:none}
/* Match the measured original homepage at the same viewport sizes. */
body{font-family:Helvetica,Arial,sans-serif;letter-spacing:.025em}
.home-hero-photo{object-position:65% 50%}.hero.winter .home-hero-photo{object-position:50% 50%}.home-mission-photo{object-position:50% 62%}
.hero-text{width:min(calc(100% - 80px), 552px);padding:0;transform:translateY(1.5px)}
.hero-text p:first-child{font-size:17.6px;line-height:28.16px;letter-spacing:5.28px;margin:0 0 5px;max-width:none}
.hero-text h1{font-size:48px;line-height:48px;letter-spacing:1.2px;margin:0}
.hero-text>div{margin-top:15px}.hero-text .button{font-size:13px;line-height:18.46px;letter-spacing:3.9px;padding:11px 20px;margin:0 5px 2px 0}.hero-text .button+.button{margin-left:0}
.hero.winter .hero-text{align-self:end;margin-bottom:40px;transform:none}.hero.winter h1{font-size:80px;line-height:80px;letter-spacing:2px}.hero.winter .hero-text p:nth-of-type(2){font-size:20.8px;line-height:33.28px;letter-spacing:.4px;margin:5px 0}.hero.winter .hero-text>div{margin-top:10px}
.mission>div{width:460px;line-height:1.6}.mission div>p:first-child{font-size:12px;line-height:19.2px;letter-spacing:2.16px;margin:0 0 12px}.mission h2{font-size:37.44px;line-height:41.184px;letter-spacing:.936px;margin:0 0 16px}.mission div>p:last-child{font-size:18px;line-height:28.8px;letter-spacing:.4px;margin:0}
@media(max-width:768px){.hero{height:487.5px}.hero:not(.winter) .home-hero-photo{object-position:65% 50%}.home-mission-photo{object-position:72% 50%}.hero-text{width:calc(100% - 34px);transform:translateY(-13.5px)}.hero-text p:first-child{font-size:16.192px;line-height:25.9072px;letter-spacing:4.8576px;margin:0 0 5px;max-width:none}.hero-text h1{font-size:24px;line-height:24px;letter-spacing:.6px;margin:0}.hero-text>div{margin-top:7.5px}.hero-text .button{font-size:11px;line-height:15.62px;letter-spacing:3.3px;padding:9px 17px;margin:4px 3px 2px 0}.hero.winter .hero-text{width:calc(100% - 34px);margin-bottom:40px;transform:none}.hero.winter h1{font-size:40px;line-height:40px;letter-spacing:1px}.hero.winter .hero-text p:nth-of-type(2){font-size:19.136px;line-height:30.6176px;letter-spacing:.368px;margin:5px 0}.hero.winter .hero-text>div{margin-top:2.5px}.mission>div{width:100%;margin:0;padding:0 25px 32px}.mission h2{font-size:26px;line-height:28.6px;letter-spacing:.65px}.mission div>p:last-child{font-size:15px;line-height:24px;letter-spacing:.368px}}
@media(min-width:769px){.hero:not(.winter) .hero-text{transform:translateY(2.5px)}.hero-text>div{transform:translateX(-5px)}.lineup{padding-bottom:95px}.z-footer{grid-template-columns:28.45% 20.32% 25.4% 25.83%}.z-footer small{bottom:60px}}
@media(max-width:768px){.hero:not(.winter) .hero-text{transform:translateY(-12.5px)}.hero-text>div{transform:translateX(-1px)}.lineup{padding-bottom:40px}}
.product h3{letter-spacing:.45px}.mission{background:#0f0f0f}.mission:before{background:linear-gradient(90deg,rgba(8,17,19,.82) 0%,rgba(8,17,19,.54) 29%,rgba(8,17,19,0) 65%)}.mission.mission-animate .home-mission-photo,.mission.mission-animate:before{animation:z-mission-entrance 2.5s cubic-bezier(.26,.54,.32,1) both}@keyframes z-mission-entrance{from{opacity:0;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.mission{background:#f4f4f4}.mission:before{background:linear-gradient(0deg,rgba(8,17,19,.94) 0%,rgba(8,17,19,.72) 36%,rgba(8,17,19,.08) 85%)}.products .product{flex-basis:calc(38% - .17px)}}@media(prefers-reduced-motion:reduce){.mission.mission-animate .home-mission-photo,.mission.mission-animate:before{animation:none}}
.categories a:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2);pointer-events:none}.categories span{z-index:1}@media(max-width:768px){.categories{gap:17px}}
.categories span{left:10px;right:10px;bottom:18px;font-size:24px;line-height:24px;letter-spacing:.6px}
.slide-controls{left:0;right:0;bottom:0;gap:0;justify-content:center}.slide-controls button{position:relative;width:120px;height:6px;margin:0 5px;padding:0;overflow:hidden;font-size:0}.slide-controls button:before,.slide-controls button:after{content:'';position:absolute;inset:0;background:#fff}.slide-controls button:before{opacity:.4}.slide-controls button:after{transform:translateX(-100%)}.slide-controls button[aria-current=true]:after{animation:z-slide-progress 8s linear forwards}.hero:hover .slide-controls button:after,.hero:focus-within .slide-controls button:after,.hero:has(.home-pause[aria-pressed=true]) .slide-controls button:after{animation-play-state:paused}@keyframes z-slide-progress{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(min-width:769px){.categories{padding-left:40px;padding-right:40px}.lineup{padding:72px 40px 95px}.lineup h2{font-size:32.3px;line-height:32.3px;letter-spacing:.8075px;margin-bottom:75px}}
@media(max-width:768px){.categories span{bottom:10px;font-size:19.2px;line-height:19.2px;letter-spacing:.48px}.lineup{padding-top:57px}.lineup h2{font-size:27.74px;line-height:27.74px;letter-spacing:.6935px}.slide-controls button{width:45px}.hero.winter .hero-text p:nth-of-type(2){max-width:none}}
@media(prefers-reduced-motion:reduce){.slide-controls button[aria-current=true]:after{animation:none;transform:translateX(0)}}
.hero.winter .hero-text>div{margin-top:15px}@media(max-width:768px){.hero.winter .hero-text>div{margin-top:5px}}

/* The category tiles and product cards keep their resting layout; only the
   image and the quick-view control change while a pointer is over them. */
.categories img{transition:transform .3s ease}
.categories a:after{transition:background-color .3s ease}
.product{container-type:inline-size}
.product .quick-button{top:calc(100cqi - 10px);right:10px;left:10px;transform:translateY(calc(-100% + 5px));background:#f18f01;color:#fff;border:0;padding:8px 5px;font:13.6px/21.76px Helvetica,Arial,sans-serif;text-align:center;cursor:pointer;transition:opacity .25s ease,transform .25s ease-out}
.home-image .home-secondary{transition:opacity .2s cubic-bezier(.26,.54,.32,1)}
.product:hover .home-secondary{opacity:0}
.product:focus-within .home-secondary{opacity:1}
.product:hover .quick-button,.product:focus-within .quick-button{opacity:1;transform:translateY(-100%)}
@media (hover:hover){
 .categories a:hover img,.categories a:focus-visible img{transform:scale(1.03);transition-duration:.8s}
 .categories a:hover:after,.categories a:focus-visible:after{background-color:rgba(0,0,0,.35);transition-duration:.8s}
 .product .home-image:hover .home-secondary,.product:has(.quick-button:hover) .home-secondary{opacity:1}
}
@media (hover:none){.product .quick-button{display:none}}
@media (prefers-reduced-motion:reduce){
 .categories img,.categories a:after,.product .quick-button,.home-image .home-secondary{transition:none}
 .categories a:hover img,.categories a:focus-visible img{transform:scale(1.03);transition:transform .15s ease}
}