/* CARRYBOY CB-762X Full Box – fullbox.css : เฉพาะหน้า Full Box (ใช้คู่กับ /shared/assets/css/site.css) */

.cbsv .fb h2{font-size:clamp(2.4rem,4.6vw,4rem)}
.cbsv .fb-note{font-size:.85rem;color:var(--steel);margin-top:18px}

/* ---------- HERO ---------- */
.cbsv .fb-hero{position:relative;overflow:hidden;padding-top:clamp(40px,5vw,72px)}
.cbsv .fb-hero .wrap{position:relative;z-index:2}
.cbsv .fb-model{font-family:var(--disp);font-weight:700;font-size:1.35rem;color:var(--red);letter-spacing:.04em}
.cbsv .fb-model span{color:var(--bone);margin-left:.4em}
.cbsv .fb-hero h1{font-size:clamp(3.4rem,10vw,9rem);margin:.04em 0 .12em -.04em;animation:fbIn .9s cubic-bezier(.2,.7,.2,1) both}
.cbsv .fb-tagline{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;max-width:34ch;color:#fff}
.cbsv .fb-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;padding-left:8px}
.cbsv .fb-hero-img{position:relative;z-index:1;margin-top:calc(-1 * clamp(40px,9vw,160px))}
.cbsv .fb-hero-img img{width:100%;aspect-ratio:1883/835;object-fit:cover;object-position:center 60%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%);mask-image:linear-gradient(180deg,transparent 0%,#000 26%)}
@keyframes fbIn{from{opacity:0;transform:translateX(-60px) skewX(-8deg)}to{opacity:1;transform:none}}

/* ---------- FIT BAND (red, slanted) ---------- */
.cbsv .fb-fit{position:relative;z-index:3;margin-top:-4vw;background:var(--red);color:#fff;
  clip-path:polygon(0 4vw,100% 0,100% calc(100% - 2vw),0 100%);padding:calc(4vw + 26px) 0 calc(2vw + 26px)}
.cbsv .fb-fit-in{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.cbsv .fb-fit h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.cbsv .fb-fit-label p{font-size:.98rem;opacity:.9;margin-top:6px}
.cbsv .fb-fit-list{display:flex;flex-wrap:wrap;gap:0}
.cbsv .fb-fit-list li{display:flex;flex-direction:column;padding:4px 28px;border-left:2px solid rgba(255,255,255,.45)}
.cbsv .fb-fit-list li:first-child{border-left:0;padding-left:0}
.cbsv .fb-fit-list b{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1}
.cbsv .fb-fit-list span{font-family:var(--disp);font-weight:600;font-size:1.15rem;letter-spacing:.04em;opacity:.92}

/* ---------- INTRO + NUMBERS ---------- */
.cbsv .fb-intro{padding:100px 0 90px}
.cbsv .fb-intro-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.cbsv .fb-lede{font-size:1.3rem;line-height:1.5;color:#fff;max-width:40ch}
.cbsv .fb-intro-body p+p{margin-top:1em;color:#c9ccd1;max-width:60ch}
.cbsv .fb-nums{display:grid;grid-template-columns:repeat(4,1fr);margin:72px 0 0;border-top:2px solid var(--rule)}
.cbsv .fb-nums>div{padding:22px 24px 0 0}
.cbsv .fb-nums>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.cbsv .fb-nums dt{font-size:.98rem;color:var(--steel)}
.cbsv .fb-nums dd{margin:6px 0 0;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(3.6rem,7vw,6rem);line-height:.9;color:var(--bone);font-variant-numeric:tabular-nums}
.cbsv .fb-nums dd i{color:var(--red);font-size:.5em;vertical-align:top;margin-left:2px}
.cbsv .fb-nums dd small{display:block;font-size:1rem;font-style:normal;font-weight:600;color:var(--steel);letter-spacing:.04em;margin-bottom:4px}

/* ---------- EXPLORER ---------- */
.cbsv .fb-explore{background:var(--panel);padding:100px 0;clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%)}
.cbsv .fb-exp-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.cbsv .fb-exp-head p{color:#c9ccd1;margin-top:12px}
.cbsv .fb-cars{display:flex;gap:10px;padding-left:8px}
.cbsv .fb-car-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:.8em 1.5em;transform:skewX(-12deg);border:2px solid var(--rule);color:var(--bone);font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:.03em;transition:background .2s,border-color .2s}
.cbsv .fb-car-btn>span{display:inline-block;transform:skewX(12deg)}
.cbsv .fb-car-btn:hover{border-color:var(--bone)}
.cbsv .fb-car-btn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.cbsv .fb-car-btn:focus-visible{outline:3px solid var(--bone);outline-offset:3px}

.cbsv .fb-exp-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.cbsv .fb-stage{position:relative;padding:20px 0 30px;
  background:radial-gradient(ellipse 60% 22% at 50% 88%,rgba(0,0,0,.45),transparent 70%),
             radial-gradient(ellipse 70% 60% at 50% 55%,rgba(255,255,255,.07),transparent 70%)}
.cbsv .fb-car{position:relative}
.cbsv .fb-car[hidden]{display:none}
.cbsv .fb-car img{width:100%;height:auto}
.cbsv .fb-spot{all:unset;box-sizing:border-box;position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:var(--red);cursor:pointer;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 14px rgba(0,0,0,.45);transition:transform .2s,background .2s}
.cbsv .fb-spot::before,.cbsv .fb-spot::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .25s}
.cbsv .fb-spot::after{transform:translate(-50%,-50%) rotate(90deg)}
.cbsv .fb-spot:hover{transform:scale(1.12)}
.cbsv .fb-spot[aria-pressed="true"]{background:var(--bone);box-shadow:0 0 0 3px var(--red),0 4px 14px rgba(0,0,0,.45)}
.cbsv .fb-spot[aria-pressed="true"]::before{background:var(--red);transform:translate(-50%,-50%) rotate(45deg)}
.cbsv .fb-spot[aria-pressed="true"]::after{background:var(--red);transform:translate(-50%,-50%) rotate(135deg)}
.cbsv .fb-spot:focus-visible{outline:3px solid var(--bone);outline-offset:4px}
.cbsv .fb-spot[aria-pressed="false"]{animation:fbPulse 2.4s ease-out infinite}
@keyframes fbPulse{0%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 3px rgba(227,20,27,.6)}70%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 16px rgba(227,20,27,0)}100%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 16px rgba(227,20,27,0)}}

.cbsv .fb-panels{position:relative;min-height:100%}
.cbsv .fb-panel[hidden]{display:none}
.cbsv .fb-panel img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#111}
.cbsv .fb-panel h3{font-size:clamp(1.8rem,2.6vw,2.3rem);margin:22px 0 10px}
.cbsv .fb-panel p{color:#c9ccd1;max-width:44ch}
.cbsv .fb-panel{animation:fbFade .35s ease both}
@keyframes fbFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cbsv .fb-gal{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:56px}
.cbsv .fb-gal[hidden]{display:none}
.cbsv .fb-gal[data-car="hilux"]{grid-template-columns:repeat(4,1fr)}
.cbsv .fb-gal button{all:unset;cursor:zoom-in;display:block;overflow:hidden;background:#111;aspect-ratio:3/2}
.cbsv .fb-gal button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.cbsv .fb-gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cbsv .fb-gal button:hover img{transform:scale(1.05)}

/* 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%)}

/* ---------- FEATURES ---------- */
.cbsv .fb-features{background:var(--bone);color:var(--graphite);padding:100px 0}
.cbsv .fb-features h2{margin-bottom:48px;max-width:24ch}
.cbsv .fb-flist{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 28px}
.cbsv .fb-flist li{display:flex;flex-direction:column}
.cbsv .fb-flist figure{margin:0 0 18px;overflow:hidden;background:#d9d6ce;aspect-ratio:3/2;border-bottom:4px solid var(--red)}
.cbsv .fb-flist figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cbsv .fb-flist li:hover figure img{transform:scale(1.04)}
.cbsv .fb-flist h3{font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.05;margin-bottom:6px}
.cbsv .fb-flist p{color:#4a515a;font-size:1rem}

/* ---------- MATERIAL ---------- */
.cbsv .fb-material{padding:110px 0}
.cbsv .fb-mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cbsv .fb-mat-img{margin:0}
.cbsv .fb-mat-img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:62% center}
.cbsv .fb-props{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:32px}
.cbsv .fb-props li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--rule);color:#dfe1e4}
.cbsv .fb-props li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:8px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}

/* ---------- CLOSING ---------- */
.cbsv .fb-closing{position:relative;overflow:hidden;padding:110px 0 90px;background:
  radial-gradient(ellipse 50% 70% at 80% 60%,rgba(227,20,27,.18),transparent 70%),#15181c;
  clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
.cbsv .fb-close-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cbsv .fb-closing h2{max-width:14ch}
.cbsv .fb-closing p{color:#d5d8dc;max-width:44ch;margin-top:18px}
.cbsv .fb-closing .fb-ctas{margin-top:32px}
.cbsv .fb-sign{margin-top:56px;font-family:var(--disp);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--steel)}
.cbsv .fb-sign b{color:var(--red);font-weight:800}
.cbsv .fb-close-img img{width:100%;max-width:620px;margin-left:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}

/* ---------- Thai typography ---------- */
.cbsv[data-lang="th"] .fb h2,.cbsv[data-lang="th"] .fb h3{line-height:1.2;font-weight:700}
.cbsv[data-lang="th"] .fb h2{font-size:clamp(2rem,3.8vw,3.2rem)}
.cbsv[data-lang="th"] .fb-fit h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.cbsv[data-lang="th"] .fb-flist h3{font-size:1.3rem}
.cbsv[data-lang="th"] .fb-panel h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.cbsv[data-lang="th"] .fb-model span{font-family:var(--thai);font-style:normal;font-weight:500;font-size:1.1rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .cbsv .fb-flist{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .cbsv .fb-exp-grid{grid-template-columns:1fr;gap:32px}
  .cbsv .fb-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
  .cbsv .fb-panel img{grid-row:span 2}
  .cbsv .fb-panel h3{margin-top:0}
}
@media (max-width:900px){
  .cbsv .fb-intro-grid,.cbsv .fb-mat-grid,.cbsv .fb-close-grid{grid-template-columns:1fr;gap:32px}
  .cbsv .fb-nums{grid-template-columns:repeat(2,1fr)}
  .cbsv .fb-nums>div:nth-child(3){padding-left:0;border-left:0}
  .cbsv .fb-nums>div:nth-child(n+3){border-top:1px solid var(--rule);margin-top:22px}
  .cbsv .fb-gal,.cbsv .fb-gal[data-car="hilux"]{grid-template-columns:repeat(2,1fr)}
  .cbsv .fb-gal button:first-child{grid-column:span 2}
  .cbsv .fb-intro,.cbsv .fb-explore,.cbsv .fb-features,.cbsv .fb-material{padding-top:72px;padding-bottom:72px}
  .cbsv .fb-close-img img{margin:0 auto}
  .cbsv .lb{padding:56px 12px}
}
@media (max-width:620px){
  .cbsv{font-size:17px}
  .cbsv .fb-hero-img img{aspect-ratio:4/3;object-position:30% 60%}
  .cbsv .fb-fit-list{width:100%;flex-direction:column}
  .cbsv .fb-fit-list li{flex-direction:row;align-items:baseline;gap:10px;padding:10px 0;border-left:0;border-top:1px solid rgba(255,255,255,.4)}
  .cbsv .fb-fit-list li:first-child{border-top:0}
  .cbsv .fb-props{grid-template-columns:1fr}
  .cbsv .fb-flist{grid-template-columns:1fr;gap:0}
  .cbsv .fb-flist li{display:grid;grid-template-columns:42% 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid #d3d0c8}
  .cbsv .fb-flist li:first-child{border-top:0}
  .cbsv .fb-flist figure{margin:0;border-bottom-width:3px}
  .cbsv[data-lang="th"] .fb-flist h3{font-size:1.12rem}
  .cbsv .fb-flist h3{font-size:1.25rem}
  .cbsv .fb-flist p{font-size:.9rem}
  .cbsv .fb-close-img{order:-1}
  .cbsv .fb-panel{display:block}
  .cbsv .fb-panel h3{margin-top:20px}
  .cbsv .fb-spot{width:30px;height:30px;margin:-15px 0 0 -15px}
  .cbsv .fb-spot::before,.cbsv .fb-spot::after{width:12px}
  .cbsv .fb-cars{width:100%}
  .cbsv .fb-car-btn{flex:1;text-align:center;padding:.75em .6em;font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
  .cbsv .fb *{animation:none!important;transition:none!important}
}