/* completeSTOP home hero slider (home page only). Loaded after app.css.
   Dark slider: big product photo in the middle, heading left, thumbnails bottom-right.
   No price and no size anywhere in the hero. */

/* hero starts at the very top, the header floats on it */
.cs-app.cs-vhero-on #main-view{padding-top:0;overflow-x:hidden}

.cs-vhero{position:relative;overflow:hidden;background:#161616;color:#fff;
  height:clamp(520px,86vh,820px);height:clamp(520px,86dvh,820px)}

/* one slide = one product, slides cross-fade */
.cs-vs{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.cs-vs.on{opacity:1;visibility:visible;transition:opacity .7s ease}
.cs-vs-bg{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;
  filter:blur(46px) brightness(.55) saturate(1.15);transform:scale(1.05)}
.cs-vs-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,14,14,.78) 0%,rgba(14,14,14,.45) 55%,rgba(14,14,14,.2) 100%)}

.cs-vs-copy{position:absolute;z-index:3;left:20px;right:20px;top:84px;max-width:560px}
.cs-vs-copy h1{font-size:clamp(32px,9vw,60px);line-height:1.04;font-weight:800;letter-spacing:-.02em;color:#fff}
.cs-vs-copy p{margin-top:12px;max-width:380px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.78)}
.cs-vs-btn{margin-top:18px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;
  font-size:13px;font-weight:700;padding:11px 22px;border-radius:999px;transition:transform .15s}
.cs-vs-btn:active{transform:scale(.96)}

/* product photo (cropped to a portrait card) */
.cs-vs-img{position:absolute;z-index:2;display:block;left:50%;bottom:88px;height:44%;aspect-ratio:3/4;
  transform:translateX(-50%);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cs-vs-img img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* thumbnails: click to jump to a slide */
.cs-vhero-picks{position:absolute;z-index:4;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:10px}
.cs-vhero-pick{width:46px;height:58px;padding:0;border-radius:12px;overflow:hidden;opacity:.55;
  border:2px solid transparent;transition:opacity .2s,border-color .2s,transform .2s}
.cs-vhero-pick:hover{opacity:.9}
.cs-vhero-pick.on{opacity:1;border-color:#fff}
.cs-vhero-pick img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* header on top of the hero */
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-header{background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-header .text-neutral-900,
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-header .text-neutral-700{color:#fff}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-header .text-neutral-400{color:rgba(255,255,255,.65)}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-header button:hover{background:rgba(255,255,255,.16)}

/* header links as pills (About Us / Contact are normal links) */
.cs-desk-nav a{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#525252;transition:background .2s}
.cs-desk-nav a:hover{background:#f5f5f5}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-desk-nav{background:rgba(255,255,255,.1);padding:5px;border-radius:999px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-desk-nav button,
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-desk-nav a{color:#e5e5e5}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-desk-nav button:hover,
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-desk-nav a:hover{background:rgba(255,255,255,.16)}
.cs-app.cs-vhero-on:not(.cs-vhero-past) .cs-desk-nav button.on{background:#fff;color:#111}

@container csapp (min-width:640px){
  .cs-vs-copy{left:40px}
  .cs-vs-img{height:50%}
}
@container csapp (min-width:1000px){
  .cs-vhero{height:clamp(560px,92vh,900px);height:clamp(560px,92dvh,900px)}
  .cs-vs-copy{left:max(36px,calc((100cqw - 1600px)/2));top:50%;transform:translateY(-50%);max-width:34%}
  .cs-vs-copy h1{font-size:clamp(52px,5.6vw,92px)}
  .cs-vs-copy p{font-size:15px;max-width:420px}
  .cs-vs-img{height:76%;bottom:6%}
  .cs-vhero-picks{left:auto;right:max(36px,calc((100cqw - 1600px)/2));bottom:32px;transform:none;gap:14px}
  .cs-vhero-pick{width:84px;height:104px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .cs-vs,.cs-vs.on{transition:none}
}


/* ---- responsive layout refinement: editable content remains in WordPress Customizer ---- */
@container csapp (min-width:1000px){
  .cs-vhero{
    height:clamp(620px,88vh,900px);
    height:clamp(620px,88dvh,900px);
  }
  .cs-vs-copy{
    left:clamp(32px,5.2cqw,100px);
    right:auto;
    top:50%;
    transform:translateY(-50%);
    width:42%;
    max-width:680px;
    z-index:3;
  }
  .cs-vs-copy h1{
    max-width:100%;
    font-size:clamp(44px,4.15cqw,78px);
    line-height:1.04;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .cs-vs-copy p{max-width:460px;font-size:15px}
  .cs-vs-img{
    left:70%;
    bottom:7%;
    height:78%;
    max-width:34%;
    aspect-ratio:3/4;
    transform:translateX(-50%);
  }
  .cs-vhero-picks{
    right:clamp(28px,5.2cqw,100px);
    bottom:28px;
    gap:12px;
  }
}
@container csapp (min-width:640px) and (max-width:999px){
  .cs-vhero{height:760px}
  .cs-vs-copy{top:82px;left:32px;right:32px;max-width:calc(100% - 64px)}
  .cs-vs-copy h1{font-size:clamp(38px,5.8cqw,58px);line-height:1.05;max-width:80%;text-wrap:balance}
  .cs-vs-img{left:auto;right:32px;bottom:82px;height:48%;transform:none}
  .cs-vhero-picks{left:32px;right:auto;bottom:22px;transform:none}
}
@container csapp (max-width:639px){
  .cs-vhero{height: min(820px, 100dvh); min-height:690px}
  .cs-vs-shade{
    background:linear-gradient(180deg,rgba(14,14,14,.72) 0%,rgba(14,14,14,.38) 54%,rgba(14,14,14,.18) 100%);
  }
  .cs-vs-copy{left:20px;right:20px;top:84px;max-width:none}
  .cs-vs-copy h1{
    max-width:100%;
    font-size:clamp(30px,8.1cqw,43px);
    line-height:1.06;
    letter-spacing:-.035em;
    text-wrap:balance;
    overflow-wrap:break-word;
  }
  .cs-vs-copy p{font-size:13px;max-width:95%;margin-top:10px}
  .cs-vs-btn{margin-top:14px;padding:10px 18px}
  .cs-vs-img{
    left:auto;right:20px;bottom:82px;
    height:42%;max-width:58%;
    aspect-ratio:3/4;transform:none;border-radius:18px;
  }
  .cs-vhero-picks{left:20px;right:auto;bottom:18px;transform:none;gap:8px}
  .cs-vhero-pick{width:42px;height:54px;border-radius:10px}
}
@media (max-width:380px){
  .cs-vhero{min-height:660px}
  .cs-vs-copy{left:16px;right:16px;top:78px}
  .cs-vs-copy h1{font-size:29px}
  .cs-vs-img{right:16px;height:39%;bottom:78px}
  .cs-vhero-picks{left:16px}
}