/* ==========================================================================
   WheelsHome — homepage only (hero, marquee, spec-bar, brand shelves)
   ========================================================================== */

/* Homepage sections are full-bleed with generous rhythm, unlike the
   tighter shop/product/cart pages — this intentionally overrides the
   shared .section rule from wheelshome-base.css. */
.section{padding:120px 5vw;}
@media(max-width:680px){.section{padding:80px 20px}}

/* ---------- HERO ---------- */
.hero{min-height:100vh;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;padding:150px 5vw 90px;}
.hero-bg-layer{position:absolute;inset:-4%;z-index:-3;}
.hero-bg-layer img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate;}
.hero-scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(7,7,10,.55) 0%,rgba(7,7,10,.35) 35%,rgba(7,7,10,.85) 82%,#07070a 100%),
    linear-gradient(90deg,rgba(7,7,10,.92) 0%,rgba(7,7,10,.35) 48%,rgba(7,7,10,.55) 100%);
}
@keyframes kenburns{0%{transform:scale(1.12) translate(0,0)}100%{transform:scale(1.25) translate(-1.5%,-1%)}}
.glow-blob{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;pointer-events:none;}
.hero .glow-1{width:520px;height:520px;background:radial-gradient(circle,rgba(255,90,31,.55),transparent 70%);top:-8%;right:8%;animation:pulse 9s ease-in-out infinite;}
.hero .glow-2{width:420px;height:420px;background:radial-gradient(circle,rgba(255,184,77,.35),transparent 70%);bottom:-6%;left:-4%;animation:pulse 11s ease-in-out infinite 1.5s;}
.ghost-text{position:absolute;z-index:0;left:5vw;top:14%;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);font-family:'Bebas Neue';font-size:clamp(6rem,17vw,16rem);line-height:.82;letter-spacing:.01em;white-space:nowrap;pointer-events:none;user-select:none;}
.hero-content{position:relative;z-index:2;max-width:780px;}
.hero-title{font-family:'Bebas Neue';font-size:clamp(58px,9vw,132px);line-height:.86;letter-spacing:.003em;margin-bottom:26px;}
.hero-title .row{display:flex;overflow:hidden;}
.hero-title .row span{display:inline-block;}
.hero-title .row.l2{justify-content:flex-end;}
.hero-title .row.l2 span{color:var(--ember);}
.hero p.lead{color:#e4e4e2;font-size:clamp(16px,1.6vw,19px);line-height:1.65;max-width:560px;}
.hero-stats{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:640px;}
.stat{padding:18px 16px;border:1px solid var(--line);border-radius:22px;background:var(--panel);backdrop-filter:blur(16px);}
.stat strong{display:block;font-family:'Bebas Neue';font-size:30px;letter-spacing:.01em;color:#fff;}
.stat span{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
.hero-badge-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:13px 17px;border:1px solid var(--line-strong);border-radius:18px;background:rgba(10,10,13,.55);backdrop-filter:blur(18px);font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:.02em;}
.hero-badge-float.a{right:6vw;top:26%;animation:floatY 7s ease-in-out infinite;}
.hero-badge-float.b{right:9vw;top:44%;animation:floatY 8s ease-in-out infinite 1s;}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.6);font-size:11px;text-transform:uppercase;letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:10px;}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:floatY 2.2s ease-in-out infinite;}
@media(pointer:fine){.hero-content,.hero-bg-layer{will-change:transform;}}

/* ---------- MARQUEE ---------- */
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;background:linear-gradient(90deg,rgba(255,90,31,.06),transparent 30%,transparent 70%,rgba(255,90,31,.06));position:relative;z-index:2;}
.marquee-track{display:inline-flex;gap:0;padding:20px 0;animation:marquee 26s linear infinite;font-family:'Bebas Neue';font-size:20px;letter-spacing:.02em;color:#e8e8e6;}
.marquee-track span{padding:0 26px;display:inline-flex;align-items:center;gap:26px;}
.marquee-track b{color:var(--ember);}
.marquee-track i{width:6px;height:6px;border-radius:50%;background:var(--ember2);display:inline-block;font-style:normal;}

/* ---------- SPEC-BAR FILTER ---------- */
.spec-bar{border:1px solid var(--line);border-radius:26px;background:var(--panel);backdrop-filter:blur(18px);padding:28px;margin-bottom:28px;scroll-margin-top:110px;}
.spec-title{font-family:'Bebas Neue';font-size:24px;letter-spacing:.01em;margin-bottom:18px;}
.spec-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;}
.spec-field{border:1px solid var(--line-strong);border-radius:14px;background:#0d0d10;padding:10px 16px;position:relative;transition:border-color .2s;flex:1 1 220px;}
.spec-field:focus-within{border-color:var(--ember);}
.spec-field label{display:block;font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.05em;color:var(--muted);margin-bottom:2px;}
.spec-field select{width:100%;height:30px;border:0;background:transparent;color:#fff;padding:0 24px 0 0;outline:none;appearance:none;font-size:15px;font-weight:700;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%);
  background-position:calc(100% - 8px) center,calc(100% - 3px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.spec-field select option{background:#0d0d10;color:#fff;}
.spec-row .btn{height:54px;padding:0 26px;flex:0 0 auto;}
.spec-status{color:var(--muted);font-size:13px;margin-top:16px;}
.spec-status b{color:var(--ember2);}

/* ---------- WHEEL BRAND STRIP ---------- */
.wheelbrand-strip{margin-bottom:40px;}
.wheelbrand-strip .strip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.wheelbrand-strip .strip-head h4{font-family:'Bebas Neue';font-size:20px;letter-spacing:.02em;color:#fff;}
.wheelbrand-strip .strip-note{color:var(--muted);font-size:12.5px;max-width:440px;line-height:1.5;}
.wheelbrand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.wheelbrand{
  min-height:118px;position:relative;overflow:hidden;padding:16px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;cursor:pointer;
  transition:border-color .3s,background .3s,transform .1s;
}
.wheelbrand:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(255,90,31,.35),transparent 60%);opacity:0;transition:.35s;}
.wheelbrand:hover{border-color:rgba(255,90,31,.5);}
.wheelbrand:hover:before{opacity:1}
.wheelbrand.active{border-color:var(--ember);background:linear-gradient(150deg,rgba(255,90,31,.16),rgba(255,255,255,.02));}
.wheelbrand .mono{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);font-family:'Bebas Neue';font-size:13px;letter-spacing:.02em;color:#fff;position:relative;z-index:2;}
.wheelbrand span:last-child{position:relative;z-index:2;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#e6e6e4;}

/* ---------- BRAND SHELVES ---------- */
.brand-shelf{margin-bottom:46px;}
.brand-shelf:last-child{margin-bottom:0;}
.brand-shelf.hide{display:none;}
.shelf-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.shelf-head .shelf-mono{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,90,31,.12);border:1px solid rgba(255,90,31,.35);font-family:'Bebas Neue';font-size:12px;letter-spacing:.02em;color:var(--ember2);flex:none;}
.shelf-head h3{font-family:'Bebas Neue';font-size:25px;letter-spacing:.01em;color:#fff;}
.shelf-head .shelf-count{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.shelf-head .link-arrow{margin-left:auto;}

@media(max-width:1180px){
  .wheelbrand-grid{grid-template-columns:repeat(3,1fr)}
  .hero-badge-float{display:none}
}
@media(max-width:680px){
  .hero{padding:120px 20px 50px;min-height:92vh;}
  .hero-title{font-size:56px}
  .ghost-text{display:none}
  .hero-stats{grid-template-columns:1fr}
  .spec-bar{padding:18px;border-radius:22px;}
  .spec-row .spec-field{flex-basis:100%;}
  .spec-row .btn{flex:1 1 auto;}
  .wheelbrand-grid{grid-template-columns:repeat(2,1fr)}

  /* Client wants 2 products per row on the homepage shelves on mobile
     (up from 1), showing up to 6 per brand (bumped from 4 above). Same
     issue as the catalog fix: the shared .product card overlays title/price
     on the image with a fixed push-down offset sized for a single wide
     column — halving the width would spill long product names over the
     photo, so mobile shelf cards get the same compact stacked layout
     (image on top, text below in flow) instead of just forcing 2 columns
     onto the full-size card. Scoped to #products so the shop/related-
     products cards elsewhere keep their existing layout. */
  #products .products{grid-template-columns:repeat(2,1fr);gap:10px;}
  #products .product{min-height:0;position:relative;display:block;padding:0;border-radius:16px;}
  #products .product-media{position:relative;inset:auto;aspect-ratio:1/1;}
  #products .product-media:after{display:none;}
  #products .product .badge{top:8px;right:8px;padding:4px 8px;font-size:9px;}
  #products .product-body{position:static;z-index:auto;margin-top:0;padding:10px 10px 34px;}
  #products .product h3{
    font-size:14px;line-height:1.25;margin-bottom:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  #products .product .spec-line{
    font-size:9.5px;margin-bottom:5px;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  }
  #products .product .price{font-size:15px;}
  #products .add{width:30px;height:30px;right:8px;bottom:8px;font-size:15px;}
}