/* ===== Hero carousel (mirrors the live-site slideshow theme) ===== */
.panel.hero-cs{ display:block; height:clamp(460px,60vh,600px); min-height:0; }
.hero-cs .hcs-vp{ position:absolute; inset:0; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
.hero-cs .hcs-vp::-webkit-scrollbar{ display:none; }
.hero-cs .hcs-track{ display:flex; height:100%; }
.hero-cs .hcs-slide{ flex:0 0 100%; width:100%; position:relative; overflow:hidden; background:#0a0f1c;
  scroll-snap-align:start; scroll-snap-stop:always; }
.hero-cs .hcs-slide picture{ position:absolute; inset:0; }
.hero-cs .sph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-cs .scr{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(270deg, rgba(2,4,12,.82) 0%, rgba(2,4,12,.55) 24%, rgba(2,4,12,.12) 46%, rgba(2,4,12,0) 62%); }
.hero-cs .scr-left{ background:linear-gradient(90deg, rgba(2,4,12,.85) 0%, rgba(2,4,12,.58) 24%, rgba(2,4,12,.15) 46%, rgba(2,4,12,0) 62%); }
.hero-cs .scr-center{ background:radial-gradient(ellipse 46% 92% at 50% 50%, rgba(2,4,12,.8) 0%, rgba(2,4,12,.5) 46%, rgba(2,4,12,0) 76%); }
/* ---- Copy card: frosted-glass panel (on-brand with the site's glass cards) ---- */
.hero-cs .cp{ position:absolute; top:50%; right:clamp(20px,4vw,58px); left:auto; z-index:3;
  width:min(400px,45%); text-align:left; padding:clamp(24px,2.4vw,32px);
  background:rgba(10,14,30,.5); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16); border-radius:20px; box-shadow:0 26px 64px rgba(2,6,18,.5), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0; transform:translateY(-50%) translateY(10px); transition:opacity .55s .18s, transform .55s .18s var(--ease); }
.hero-cs .hcs-slide.is-active .cp, .hero-cs .hcs-slide.did .cp{ opacity:1; transform:translateY(-50%); }
.hero-cs .hcs-slide.did .cp{ transition:none; }
.hero-cs .cp-left{ right:auto; left:clamp(20px,4vw,58px); }
.hero-cs .cp-center{ right:auto; left:50%; margin-left:0; transform:translate(-50%,-50%) translateY(10px); }
.hero-cs .hcs-slide.is-active .cp-center, .hero-cs .hcs-slide.did .cp-center{ transform:translate(-50%,-50%); }
.hero-cs .eyebrow{ font-size:11.5px; color:#FF9A95; }
.hero-cs h2{ font-family:var(--head); font-size:clamp(29px,3.2vw,40px); font-weight:700; letter-spacing:-.02em; line-height:1.02; text-transform:none; margin:11px 0 0; color:#fff; }
.hero-cs .sb{ font-family:var(--body); font-size:14px; line-height:1.5; color:rgba(255,255,255,.78); margin:9px 0 0; }
/* product rows — clean, no hairline clutter, price in a subtle pill */
.hero-cs .rows{ margin:16px 0 0; display:grid; gap:5px; }
.hero-cs .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; margin:0 -4px;
  border-radius:11px; text-decoration:none; transition:background .18s; }
.hero-cs .row:hover{ background:rgba(255,255,255,.08); }
.hero-cs .row .nm{ font-family:var(--body); font-weight:600; font-size:14px; line-height:1.2; color:#fff; text-align:left; }
.hero-cs .row .nm small{ display:block; font-family:var(--body); font-weight:400; font-size:11px; letter-spacing:.02em; color:rgba(255,255,255,.6); margin-top:2px; white-space:nowrap; }
.hero-cs .row .pr{ flex:0 0 auto; font-family:var(--head); font-weight:700; font-size:15px; line-height:1; color:#fff; white-space:nowrap;
  background:rgba(255,255,255,.1); padding:6px 11px; border-radius:999px; }
.hero-cs .row .pr i{ font-style:normal; font-size:.62em; font-weight:600; vertical-align:.35em; color:rgba(255,255,255,.7); margin-right:1px; }
.hero-cs .crows{ margin:15px 0 0; display:grid; gap:3px; }
.hero-cs .crow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 12px; margin:0 -4px; border-radius:11px;
  font-family:var(--body); font-weight:600; font-size:14px; line-height:1.2; color:rgba(255,255,255,.94); }
.hero-cs .crow:nth-child(odd){ background:rgba(255,255,255,.05); }
.hero-cs .crow b{ color:#fff; font-family:var(--head); font-size:15px; font-weight:700; }
.hero-cs .cta{ margin-top:18px; display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap; }
.hero-cs .hbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:14.5px; line-height:1; letter-spacing:0; text-transform:none;
  color:#fff; background:var(--red); padding:14px 26px; border:1.5px solid transparent; border-radius:var(--pill);
  box-shadow:0 8px 22px rgba(211,47,45,.35); transition:transform .15s var(--ease), background .15s, box-shadow .15s, border-color .15s; }
.hero-cs .hbtn::after{ content:"\2192"; font-size:15px; line-height:1; transition:transform .15s; }
.hero-cs .hbtn:hover{ background:var(--red-deep); transform:translateY(-1px); box-shadow:0 12px 30px rgba(211,47,45,.45); }
.hero-cs .hbtn:hover::after{ transform:translateX(3px); }
.hero-cs .hbtn:active{ transform:translateY(1px); }
.hero-cs .hbtn.ghost{ background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.4); box-shadow:none; }
.hero-cs .hbtn.ghost:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.7); }
.hero-cs .hcs-arr{ position:absolute; bottom:18px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.85); display:grid; place-items:center; z-index:8; padding:0; transition:.18s; }
.hero-cs .hcs-arr svg{ width:20px; height:20px; }
.hero-cs .hcs-arr:hover{ transform:scale(1.1); background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); color:#fff; }
.hero-cs .hcs-prev{ left:18px; } .hero-cs .hcs-next{ right:18px; }
.hero-cs .hcs-dots{ position:absolute; left:60px; right:60px; bottom:20px; display:flex; justify-content:center; align-items:center; gap:0; z-index:7; pointer-events:none; }
.hero-cs .hcs-dot{ pointer-events:auto; width:26px; height:26px; background:transparent; border:none; padding:0; display:grid; place-items:center; }
.hero-cs .hcs-dot::before{ content:""; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); box-shadow:0 0 0 1px rgba(13,17,38,.35), 0 1px 4px rgba(13,17,38,.5); transition:.2s; }
.hero-cs .hcs-dot.active::before{ background:#fff; transform:scale(1.3); }
.hero-cs .hcs-play{ pointer-events:auto; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; padding:0; margin-left:2px; }
.hero-cs .hcs-play svg{ width:13px; height:13px; fill:currentColor; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media(max-width:900px){
  .panel.hero-cs{ height:clamp(500px,72vh,600px); align-items:stretch; }
  /* card anchors to the bottom, full width minus margins */
  .hero-cs .cp, .hero-cs .cp-left, .hero-cs .cp-center{ top:auto; bottom:54px; left:14px; right:14px; width:auto;
    transform:none; padding:20px 20px 22px; }
  .hero-cs .hcs-slide.is-active .cp, .hero-cs .hcs-slide.did .cp,
  .hero-cs .hcs-slide.is-active .cp-center, .hero-cs .hcs-slide.did .cp-center{ transform:none; }
  .hero-cs .scr, .hero-cs .scr-left, .hero-cs .scr-center{ background:linear-gradient(180deg, rgba(2,4,12,.1) 0%, rgba(2,4,12,.25) 45%, rgba(2,4,12,.6) 100%); }
  .hero-cs h2{ font-size:clamp(26px,7vw,34px); }
  .hero-cs .rows .row:nth-child(n+4), .hero-cs .crows .crow:nth-child(n+5){ display:none; }
  .hero-cs .hcs-arr{ display:none; }
  .hero-cs .hcs-dots{ left:22px; right:22px; justify-content:center; bottom:16px; }
}


@media(max-width:900px){
  .panel.hero-cs{ height:clamp(500px,72vh,580px); aspect-ratio:auto !important; width:100% !important; max-width:100% !important; }
  .hero-shell{ overflow-x:clip; }
  .hero-cs .cp, .hero-cs .cp-left, .hero-cs .cp-center{
    top:14px !important; bottom:auto !important; left:12px !important; right:12px !important;
    width:auto !important; transform:none !important; padding:11px 15px 12px !important;
    background:rgba(9,14,28,.84) !important; -webkit-backdrop-filter:blur(13px) saturate(1.1); backdrop-filter:blur(13px) saturate(1.1);
    border:1px solid rgba(255,255,255,.15) !important; border-radius:16px !important; box-shadow:0 18px 40px rgba(2,6,18,.55) !important; }
  .hero-cs .hcs-slide.mf-1 .sph{ object-position:50% 44% !important; }
  .hero-cs .hcs-slide.mf-2 .sph{ object-position:50% 36% !important; }
  .hero-cs .hcs-slide.mf-3 .sph{ object-position:50% 42% !important; }
  .hero-cs .hcs-slide.mf-4 .sph{ object-position:50% 40% !important; }
  .hero-cs .hcs-slide.mf-5 .sph{ object-position:50% 42% !important; }
  .hero-cs .hcs-slide .sph[src*="hero-test-5"]{ object-position:50% 50% !important; transform:none !important; }
  .hero-cs .hcs-slide .sph[src*="hero-test-4"]{ object-position:50% 100% !important; transform:translateY(-16px) !important; }
  .hero-cs .hcs-slide .sph[src*="hero-test-3"]{ object-position:50% 100% !important; transform:translateY(-16px) !important; }
  .hero-cs .hcs-slide .sph[src*="hero-test-2"]{ object-position:50% 100% !important; }
  .hero-cs .hcs-slide .sph[src*="hero-test-1"]{ object-position:50% 100% !important; transform:scale(1.16) !important; transform-origin:50% 100% !important; }
  .hero-cs .eyebrow{ font-size:11px !important; }
  .hero-cs h2{ font-size:clamp(19px,5.2vw,23px) !important; margin-top:5px !important; }
  .hero-cs .rows{ margin-top:9px !important; gap:3px !important; }
  .hero-cs .rows .row{ padding:6px 10px !important; }
  .hero-cs .sb{ font-size:12.5px !important; margin-top:5px !important; line-height:1.4 !important;
    display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .hero-cs .rows .row:nth-child(n+3), .hero-cs .crows .crow:nth-child(n+3){ display:none !important; }
  .hero-cs .rows .row:nth-child(n+3){ display:none !important; }
  .hero-cs .crows{ margin-top:9px !important; gap:2px !important; }
  .hero-cs .crows .crow:nth-child(n+3){ display:none !important; }
  .hero-cs .cta{ margin-top:11px !important; }
  .hero-cs .hbtn{ padding:11px 17px !important; font-size:13.5px !important; }
  .hero-cs .scr, .hero-cs .scr-left, .hero-cs .scr-center{ background:linear-gradient(180deg, rgba(2,4,12,.62) 0%, rgba(2,4,12,.34) 34%, rgba(2,4,12,0) 62%) !important; }
  .hero-cs .hcs-dots{ bottom:15px !important; }
}


.hero-cs .pr del, .hero-cs .crow b del{ opacity:.55; text-decoration:line-through; font-weight:600; font-size:.8em; margin-right:5px; }
.hero-cs .pr ins, .hero-cs .crow b ins{ text-decoration:none; }