:root{--black:#090909;--white:#f7f4ea;--lime:#caff1a;--red:#ff3131;--muted:#aaa;--display:"Archivo Black",Inter,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.texture{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px)}
.topbar{height:34px;background:#050505;color:white;position:fixed;top:0;left:0;right:0;z-index:90;display:grid;place-items:center;font-size:.75rem;text-transform:uppercase;font-weight:900;letter-spacing:.08em;text-align:center;padding:0 12px}
.header{height:70px;position:fixed;top:34px;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:0 28px;background:rgba(9,9,9,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
.brand{font-family:var(--display);display:flex;align-items:center;gap:10px}
.brand i{width:28px;height:28px;background:var(--lime);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.header nav{display:flex;gap:24px;text-transform:uppercase;font-weight:900;font-size:.78rem}
.header b{border:1px solid white;border-radius:50%;padding:4px 8px;margin-left:5px}

.scroll-video-scene{height:165vh;background:#020202;position:relative}
.scroll-video-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.scroll-video-card{width:42vw;height:24vw;min-width:310px;min-height:180px;position:relative;overflow:hidden;background:linear-gradient(135deg,#111,#333 48%,#c2b6a8);box-shadow:0 45px 140px rgba(0,0,0,.75);will-change:width,height,border-radius,transform}
.scroll-video-card .hero-upload{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-dark{position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.65));z-index:1}
.runner{position:absolute;right:24%;top:28%;width:70px;height:160px;background:#080808;border-radius:40px 40px 18px 18px;transform:rotate(-10deg);z-index:1}
.runner:before{content:"";position:absolute;top:-40px;left:14px;width:42px;height:45px;border-radius:50%;background:#111}
.speed{position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 34px,rgba(255,49,49,.25) 35px 38px);animation:speed 1.7s linear infinite;z-index:1}
@keyframes speed{to{transform:translateX(-80px)}}
.video-copy{position:absolute;left:clamp(22px,5vw,70px);bottom:clamp(24px,7vh,80px);z-index:3;max-width:850px}
.video-copy span,.eyebrow,.section-head p{color:var(--lime);text-transform:uppercase;font-weight:900;letter-spacing:.13em}
.video-copy h1,.material-copy h2,.section-head h2,.showcase-card h3,.story p,.page-hero h1,.product-left h1,.buy h2,.details h2,.cart-page h1,.checkout h1{font-family:var(--display);line-height:.78;letter-spacing:-.08em;text-transform:uppercase}
.video-copy h1{font-size:clamp(3.5rem,9vw,9rem);margin:10px 0;text-shadow:7px 7px 0 #111}
.video-copy p{color:#ddd;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.material-scene{min-height:100vh;position:relative;display:grid;align-items:center;padding:120px 5vw;overflow:hidden;background:#090909}
.material-bg{position:absolute;inset:0;background:radial-gradient(circle at 18% 70%,rgba(255,49,49,.35),transparent 25%),linear-gradient(135deg,#111 0 38%,#d7d0c4 39% 63%,#191919 64% 100%)}
.material-bg:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(10deg,rgba(0,0,0,.18) 0 4px,transparent 4px 18px)}
.material-copy{position:relative;z-index:2;width:min(760px,100%);margin-left:auto}
.material-copy h2{font-size:clamp(3.2rem,7vw,7.5rem);margin:10px 0 24px}
.material-copy p:not(.eyebrow){color:#ededed;line-height:1.75;max-width:560px;font-size:1.1rem}

.btn,.outline{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:0;background:var(--lime);color:#111;font-weight:900;text-transform:uppercase;letter-spacing:.08em;box-shadow:5px 5px 0 var(--red)}
.outline{background:white;box-shadow:none}

.sticky-showcase,.products-grid,.cart-page,.checkout{padding:110px 5vw}
.section-head{margin-bottom:35px}
.section-head h2,.page-hero h1{font-size:clamp(3.2rem,8vw,8rem);margin:0}
.showcase-card{position:sticky;top:120px;min-height:78vh;background:linear-gradient(145deg,var(--bg),#080808);border:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1fr .9fr .8fr;align-items:center;gap:30px;padding:42px;margin-bottom:36px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.35)}
.showcase-card:before{content:"";position:absolute;top:-10%;bottom:-10%;left:42%;width:18%;background:var(--accent);transform:skewX(-18deg)}
.showcase-card>*{position:relative;z-index:2}
.showcase-card h3{font-size:clamp(2.7rem,5vw,5.8rem);margin:0 0 22px;text-shadow:5px 5px 0 #111}
.card-product-img{display:grid;place-items:center}
.showcase-card img{width:100%;max-height:60vh;object-fit:contain;filter:drop-shadow(0 30px 45px rgba(0,0,0,.5))}
.card-buy{background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.14);padding:24px;backdrop-filter:blur(12px)}
.card-buy h4{font-size:2rem;margin:0 0 12px}
.card-buy p,.product-card p{color:#ccc;line-height:1.6}
.stock-dot{color:var(--accent);font-weight:900;text-transform:uppercase;font-size:.75rem}
.mini-specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.mini-specs span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);padding:8px 10px;color:#e7e7e7;font-size:.78rem;font-weight:800}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.card-actions .btn,.card-actions .outline{width:100%;box-shadow:none}

.story{min-height:80vh;display:grid;place-items:center;text-align:center;padding:80px 5vw;background:#050505}
.story p{font-size:clamp(3rem,7vw,8rem);margin:0}
.story b{color:var(--lime);text-shadow:5px 5px 0 var(--red)}

.page-hero{padding:150px 5vw 40px;position:relative;overflow:hidden}
.page-hero p:last-child{color:#ccc}
.page-hero:after{content:"";position:absolute;right:-10vw;top:20%;width:38vw;height:120px;background:var(--lime);transform:skewX(-18deg);opacity:.18}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card{background:#151515;border:1px solid rgba(255,255,255,.12);padding-bottom:20px;transition:opacity .65s ease,transform .65s cubic-bezier(.19,1,.22,1),box-shadow .25s ease}
.product-card:hover{transform:translateY(-8px);box-shadow:0 24px 70px rgba(0,0,0,.34)}
.product-img{height:420px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--accent),transparent 25%),linear-gradient(145deg,var(--bg),#111)}
.product-img img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 30px 45px rgba(0,0,0,.45));transition:transform .5s cubic-bezier(.19,1,.22,1)}
.product-card:hover .product-img img{transform:scale(1.06) rotate(-2deg)}
.product-card span,.product-card h3,.product-card p,.product-card strong{margin-left:20px;margin-right:20px}
.product-card span{display:block;margin-top:20px;color:var(--lime);text-transform:uppercase;font-size:.75rem;font-weight:900}
.product-card h3{font-size:1.6rem}

.product-hero{min-height:100vh;padding-top:104px;display:grid;grid-template-columns:33% 35% 32%;background:linear-gradient(140deg,#080808 0 34%,var(--bg) 35% 68%,#111 69%);position:relative}
.product-hero:before{content:"";position:absolute;top:0;bottom:0;left:42%;width:15%;background:var(--accent);transform:skewX(-18deg)}
.product-left,.gallery,.buy{position:relative;z-index:2}
.product-left{padding:55px 28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.65),transparent)}
.product-left h1{font-size:clamp(3rem,5vw,6rem);margin:0;text-shadow:5px 5px 0 #111}
.gallery{display:grid;grid-template-columns:70px 1fr;gap:16px;align-items:center;padding:45px 0}
.thumbs{display:grid;gap:10px}
.thumbs button{height:82px;background:#111;border:1px solid rgba(255,255,255,.22);opacity:.7;padding:4px}
.thumbs button.active{outline:3px solid var(--accent);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:contain}
.main-img{height:72vh;display:grid;place-items:center}
.main-img img{max-height:100%;width:90%;object-fit:contain;filter:drop-shadow(0 40px 55px rgba(0,0,0,.55))}
.buy{align-self:center;margin-right:28px;background:rgba(8,8,8,.88);border:1px solid rgba(255,255,255,.16);padding:24px;backdrop-filter:blur(14px)}
.rating{color:var(--accent);font-weight:900}
.buy h2{font-size:3rem;margin:14px 0}
.buy p{color:#d0d0d0;line-height:1.6}
.buy strong{font-size:1.4rem}
.buy label{display:block;margin:14px 0 7px;color:#aaa;text-transform:uppercase;font-weight:900;font-size:.75rem}
.colors{display:flex;gap:8px}
.colors input{display:none}
.colors i{display:block;width:32px;height:32px;border-radius:50%;border:3px solid white}
.colors input:checked+i{outline:3px solid var(--accent)}
select,.buy input[type=number]{width:100%;height:46px;border:0;padding:0 12px}
.buy .btn{width:100%;margin-top:18px}
.details{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:100px 5vw;background:#111}
.details h2{font-size:clamp(3rem,6vw,6rem);margin:0}
.details ul{display:grid;gap:12px;padding:0;list-style:none}
.details li{background:#1b1b1b;border:1px solid rgba(255,255,255,.12);padding:16px;font-weight:800}

.cart-page h1,.checkout h1{font-size:clamp(3rem,8vw,8rem)}
.empty,.cart-row,.summary,.checkout-form{background:#151515;border:1px solid rgba(255,255,255,.12);padding:22px}
.cart-row{display:grid;grid-template-columns:1fr 100px 140px;gap:16px;align-items:center;margin-bottom:12px}
.cart-row p{color:#aaa}
.cart-total{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.checkout{display:grid;grid-template-columns:1fr 420px;gap:30px}
.checkout-form{display:grid;gap:12px}
.checkout label{display:grid;gap:7px;color:#aaa;text-transform:uppercase;font-weight:900}
.checkout input,.checkout textarea{background:#080808;color:white;border:1px solid rgba(255,255,255,.14);padding:12px;min-height:48px}
.summary p{display:flex;justify-content:space-between;color:#ccc}

.reveal-card,.reveal-section{opacity:0;transform:translateY(38px) scale(.98);transition:opacity .65s ease,transform .65s cubic-bezier(.19,1,.22,1)}
.revealed{opacity:1!important;transform:translateY(0) scale(1)!important}

.wa{position:fixed;right:18px;bottom:18px;z-index:90;background:#25D366;color:#07130a;padding:14px 18px;border-radius:999px;font-weight:900}
.footer{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding:80px 5vw;background:#050505}
.footer h3{font-family:var(--display);font-size:2.2rem}
.footer p,.footer a{color:#aaa;display:block;margin:8px 0;line-height:1.6}
.footer h4{text-transform:uppercase;letter-spacing:.1em}

@media(max-width:980px){
  .scroll-video-scene{height:100vh}
  .scroll-video-card{width:100vw!important;height:100vh!important;border-radius:0!important}
  .material-scene{padding:90px 20px}
  .showcase-card,.product-hero,.details,.checkout{grid-template-columns:1fr}
  .showcase-card{position:relative;top:auto}
  .grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr;padding:25px}
  .thumbs{display:flex;overflow:auto}
  .thumbs button{min-width:80px}
  .buy{margin:20px}
  .footer{grid-template-columns:1fr 1fr}
  .reveal-card,.reveal-section{opacity:1;transform:none}
}
@media(max-width:620px){
  .header{padding:0 14px}
  .header nav{gap:12px;font-size:.65rem}
  .topbar{font-size:.62rem}
  .video-copy h1{font-size:4rem}
  .grid,.footer{grid-template-columns:1fr}
  .cart-row{grid-template-columns:1fr}
  .cart-total{flex-direction:column;align-items:stretch}
  .showcase-card{padding:24px}
  .card-actions{grid-template-columns:1fr}
  .wa{left:14px;right:14px;text-align:center}
  .product-left h1{font-size:3.2rem}
}


/* MOBILE UX CLEANUP PATCH */
@media (max-width: 980px){
  .material-scene{
    display:none !important;
  }

  .sticky-showcase .mini-specs,
  .sticky-showcase .card-buy p,
  .sticky-showcase .stock-dot{
    display:none !important;
  }

  .sticky-showcase .card-buy{
    padding:16px !important;
  }

  .sticky-showcase .card-actions{
    margin-top:12px !important;
  }

  body.mobile-intro-skip .mobile-reference-panel,
  body.mobile-intro-skip .mobile-panel,
  body.mobile-intro-skip .mobile-panel-content,
  body.mobile-intro-skip .mobile-panel-dock{
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }
}

/* MOBILE VERTICAL VIDEO LOADER PATCH: critical CSS is inline in index.php */
