/* CARRYBOY Sport Lid SV – sv.css : เฉพาะหน้า SV */
/* ---------- HERO ---------- */
.cbsv .hero{position:relative;overflow:hidden;padding-top:clamp(40px,5vw,72px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5vw),0 100%)}
.cbsv .hero .wrap{position:relative;z-index:2}
.cbsv .hero-img{position:relative;z-index:1;margin-top:calc(-1 * clamp(60px,11vw,190px))}
.cbsv .hero-img img{width:100%;aspect-ratio:1509/887;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}
.cbsv .hero-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,#1b1f24 0%,rgba(27,31,36,.6) 14%,rgba(27,31,36,0) 30%)}
.cbsv .brand{font-family:var(--disp);font-weight:700;font-size:1.35rem;color:var(--red);letter-spacing:.04em}
.cbsv .hero h1{font-size:clamp(3.2rem,9vw,8rem);margin:.05em 0 .12em -.04em;animation:cbsvIn .9s cubic-bezier(.2,.7,.2,1) both}
.cbsv .hero h1 .sv{color:var(--red)}
.cbsv .tagline{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;max-width:34ch;color:#fff}
.cbsv .hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;padding-left:8px}
@keyframes cbsvIn{from{opacity:0;transform:translateX(-60px) skewX(-8deg)}to{opacity:1;transform:none}}

/* ---------- INTRO ---------- */
.cbsv .intro{padding:96px 0 0}
.cbsv .intro .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.cbsv .intro h2{font-size:clamp(2.6rem,5vw,4.2rem)}
.cbsv .lede{font-size:1.3rem;line-height:1.5;color:#fff;max-width:38ch}
.cbsv .intro .body p+p{margin-top:1em}
.cbsv .intro .body p{color:#c9ccd1;max-width:60ch}
.cbsv .strip{margin-top:80px;position:relative}
.cbsv .strip img{width:100%;aspect-ratio:1600/517;object-fit:cover}
.cbsv .strip figcaption{position:absolute;left:max(24px,calc((100vw - 1240px)/2));bottom:24px;font-family:var(--disp);font-style:italic;font-weight:700;font-size:1.2rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ---------- 45° INTERACTIVE ---------- */
.cbsv .angle{padding:110px 0}
.cbsv .angle .grid{display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:center}
.cbsv .stage{position:relative;aspect-ratio:850/567;overflow:hidden;background:#ddd}
.cbsv .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cbsv .stage .open{opacity:0;transition:opacity .45s ease}
.cbsv .readout{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(6rem,14vw,11rem);line-height:.8;color:var(--bone);font-variant-numeric:tabular-nums}
.cbsv .readout small{font-size:.45em;color:var(--red);vertical-align:top}
.cbsv .gauge{width:100%;max-width:300px;height:auto;margin:18px 0 6px}
.cbsv .angle h2{font-size:clamp(2.2rem,4vw,3.4rem);margin:12px 0 16px}
.cbsv .angle p{color:#c9ccd1;max-width:42ch}
.cbsv .slider{margin-top:28px}
.cbsv .slider label{display:block;font-weight:600;font-size:.95rem;color:var(--steel);margin-bottom:8px}
.cbsv input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
.cbsv input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--red) var(--p,0%),var(--rule) var(--p,0%))}
.cbsv input[type=range]::-moz-range-track{height:6px;background:var(--rule)}
.cbsv input[type=range]::-moz-range-progress{height:6px;background:var(--red)}
.cbsv input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;background:var(--bone);border:5px solid var(--red);transform:skewX(-12deg)}
.cbsv input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--bone);border:5px solid var(--red);border-radius:0}

/* ---------- FEATURES ---------- */
.cbsv .features{background:var(--bone);color:var(--graphite);padding:110px 0;clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%)}
.cbsv .features h2{font-size:clamp(2.6rem,5vw,4.2rem);max-width:14ch}
.cbsv .features .head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.cbsv .features .head p{max-width:40ch;color:#4a515a}
.cbsv .flist{display:grid;grid-template-columns:repeat(2,1fr);column-gap:64px;margin:0;padding:0;list-style:none}
.cbsv .flist li{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:26px 0;border-top:2px solid #d3d0c8}
.cbsv .flist svg{width:40px;height:40px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbsv .flist h3{font-size:1.65rem;font-style:normal;font-weight:700;margin-bottom:4px}
.cbsv .flist p{color:#4a515a;font-size:1.02rem}

/* ---------- DETAILS ---------- */
.cbsv .details{padding:110px 0}
.cbsv .details h2{font-size:clamp(2.6rem,5vw,4.2rem);margin-bottom:14px}
.cbsv .details .intro-p{color:#c9ccd1;max-width:58ch;margin-bottom:48px}
.cbsv .dgrid{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:20px}
.cbsv .dgrid figure{margin:0;position:relative;overflow:hidden;background:var(--panel)}
.cbsv .dgrid figure:first-child{grid-row:span 2}
.cbsv .dgrid img{width:100%;height:100%;object-fit:cover}
.cbsv .dgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 20px;background:linear-gradient(0deg,rgba(20,23,27,.9),rgba(20,23,27,0))}
.cbsv .dgrid figcaption strong{display:block;font-family:var(--disp);font-style:italic;font-weight:800;font-size:1.7rem;line-height:1}
.cbsv .dgrid figcaption>span{font-size:.98rem;color:#d5d8dc}

/* ---------- GALLERY ---------- */
.cbsv .gallery{padding:0 0 110px}
.cbsv .gallery h2{font-size:clamp(2.6rem,5vw,4.2rem);margin-bottom:12px}
.cbsv .gallery .sub{color:#c9ccd1;margin-bottom:40px;max-width:52ch}
.cbsv .ggrid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:12px}
.cbsv .ggrid button{all:unset;cursor:zoom-in;position:relative;overflow:hidden;background:var(--panel);display:block}
.cbsv .ggrid button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.cbsv .ggrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cbsv .ggrid button:hover img{transform:scale(1.04)}
.cbsv .ggrid button.g1{grid-column:span 4;grid-row:span 2}.cbsv .ggrid button.g2{grid-column:span 2;grid-row:span 2}
.cbsv .ggrid button.g3,.cbsv .ggrid button.g4,.cbsv .ggrid button.g5{grid-column:span 2;grid-row:span 1}
.cbsv .ggrid button.g6,.cbsv .ggrid button.g7{grid-column:span 3;grid-row:span 2}

/* lightbox */
.cbsv .lb{position:fixed;inset:0;z-index:99999;background:rgba(14,16,19,.94);display:none;align-items:center;justify-content:center;padding:56px 72px}
.cbsv .lb.on{display:flex}
.cbsv .lb img{max-height:100%;max-width:100%;object-fit:contain}
.cbsv .lb button{all:unset;cursor:pointer;position:absolute;color:#fff;font-family:var(--disp);font-weight:700;font-size:2.4rem;line-height:1;padding:12px 16px}
.cbsv .lb button:focus-visible{outline:3px solid var(--red)}
.cbsv .lb .x{top:12px;right:16px}.cbsv .lb .pv{left:12px;top:50%;transform:translateY(-50%)}.cbsv .lb .nx{right:12px;top:50%;transform:translateY(-50%)}

/* ---------- CLOSING CTA ---------- */
.cbsv .closing{position:relative;padding:160px 0 120px;overflow:hidden;clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%)}
.cbsv .closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.cbsv .closing::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,31,36,.97) 0%,rgba(27,31,36,.88) 45%,rgba(27,31,36,.35) 100%)}
.cbsv .closing .wrap{position:relative;z-index:1}
.cbsv .closing h2{font-size:clamp(2.6rem,5vw,4.4rem);max-width:17ch}
.cbsv .closing p{color:#d5d8dc;max-width:46ch;margin-top:20px}
.cbsv .closing .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;padding-left:8px}
.cbsv .closing .sign{margin-top:64px;font-family:var(--disp);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--steel)}
.cbsv .closing .sign b{color:var(--red);font-weight:800}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .cbsv .intro .grid,.cbsv .angle .grid,.cbsv .dgrid{grid-template-columns:1fr}
  .cbsv .dgrid figure:first-child{grid-row:auto}
  .cbsv .flist{grid-template-columns:1fr}
  .cbsv .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .cbsv .ggrid button.g1,.cbsv .ggrid button.g6,.cbsv .ggrid button.g7{grid-column:span 2;grid-row:span 2}
  .cbsv .ggrid button.g2{grid-column:span 1;grid-row:span 2}
  .cbsv .ggrid button.g3,.cbsv .ggrid button.g4{grid-column:span 1;grid-row:span 1}
  .cbsv .ggrid button.g5{grid-column:span 2;grid-row:span 1}
  .cbsv .readout{font-size:7rem}
  .cbsv .intro,.cbsv .angle,.cbsv .features,.cbsv .details{padding-top:72px;padding-bottom:72px}
  .cbsv .gallery{padding-bottom:72px}
  .cbsv .lb{padding:56px 12px}
}
@media (max-width:560px){
  .cbsv{font-size:17px}
  .cbsv .hero-img{margin-top:-8px}
  .cbsv .hero-img img{aspect-ratio:5/4;object-position:22% center;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%)}
  .cbsv .strip img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .cbsv *{animation:none!important;transition:none!important}
}

/* Thai typography for this page */
.cbsv[data-lang="th"] h2,.cbsv[data-lang="th"] .flist h3,.cbsv[data-lang="th"] .dgrid figcaption strong{line-height:1.2;font-weight:700}
.cbsv[data-lang="th"] h2{font-size:clamp(2rem,4vw,3.3rem)}
.cbsv[data-lang="th"] .closing h2{font-size:clamp(2.1rem,4.4vw,3.8rem)}
.cbsv[data-lang="th"] .flist h3{font-size:1.4rem}
.cbsv[data-lang="th"] .strip figcaption{font-family:var(--thai)}