/* =========================================================
   Vegas Labs — Build Your Box (Figma "14 · Build Your Box": desktop 1440 / mobile 390 / box sheet)
   Page: Code/build-box.php + [vl_box part="preview|builder"] from snippet "VL Research Box".
   Loaded after vl-bulk.css, which supplies the shared builder pieces (vl-bk-card, -qty, -sum, -toggle,
   -go, -bar, sheet ≤1024). This file: box-specific layout and states (vl-bx-*).
   ========================================================= */

/* ---------- hero ---------- */
.vl-bx-hero.e-con{--padding-top:96px;--padding-bottom:96px;background:var(--pg-ivory)}
.vl-bx-hero .elementor-widget{margin:0!important}
.vl-bx-hero__row{display:flex!important;flex-direction:row!important;align-items:center!important;gap:80px!important}
.vl-bx-hero__copy{flex:1 1 0!important;min-width:0;width:auto!important;gap:32px!important}
.vl-bx-hero__meta p{color:var(--pg-mute)}
.vl-bx-hero__visual{flex:0 0 600px!important;width:600px!important}
.vl-bx-pv{display:flex;align-items:flex-end;gap:8px;box-sizing:border-box;padding:40px 24px 32px;border:1px solid var(--pg-line-s);border-radius:28px;background:var(--pg-card)}
.vl-bx-pv__slot{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;gap:16px}
.vl-bx-pv__slot img{width:128px;height:160px;object-fit:contain;transition:transform .6s var(--pg-ease)}
.vl-bx-pv__slot:hover img{transform:translateY(-6px)}
.vl-bx-pv__slot p{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;white-space:nowrap}
.vl-bx-pv__slot b{font:500 11px/1.3 var(--pg-mono);letter-spacing:.08em;color:var(--pg-green)}
.vl-bx-pv__slot span{font:500 14px/1.3 var(--pg-sans);color:var(--pg-ink)}
.vl-bx-pv__slot i{font:500 11px/1.3 var(--pg-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--pg-mute)}
.vl-bx-pv__meta{display:flex;justify-content:space-between;gap:16px;margin:16px 0 0!important;font:500 11px/1.3 var(--pg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pg-mute);white-space:nowrap}
.vl-bx-ben.vl-bk-ben{border:0!important;background:var(--pg-ivory)}
.vl-bx-ben.vl-bk-ben:hover{background:#EAEDE6;box-shadow:none;transform:none}

/* ---------- builder ---------- */
.vl-bx-build.e-con{--padding-top:80px;--padding-bottom:80px;background:var(--pg-paper)}
.vl-bx-build .elementor-widget{margin:0!important}
.vl-bx.vl-bk{gap:48px}
.vl-bx__toolbar{display:flex;flex-direction:column;gap:24px}
.vl-bx__titlerow{display:flex;align-items:flex-end;gap:24px}
.vl-bx__title{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:8px}
.vl-bx__title p{margin:0}
.vl-jn-mono.is-brand{color:var(--pg-green)}
:root .vl-bx .vl-bx__title h2{margin:0;font:500 32px/1.15 var(--pg-sans);letter-spacing:-.48px;color:var(--pg-ink)}
.vl-bx-search{flex:0 0 400px;width:400px}
.vl-bx__grid{gap:24px}
.vl-bx-card .vl-bx-card__media{height:220px}
.vl-bx-card .vl-bx-card__media img{width:200px;height:250px}
.vl-bx-card__meta.vl-bk-card__meta{gap:12px}
.vl-bx-strs{display:flex;flex-wrap:wrap;gap:8px}
.vl-bx-str{position:relative;display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--pg-line);border-radius:999px;cursor:pointer;font:400 12px/1.4 var(--pg-mono);letter-spacing:.24px;text-transform:uppercase;color:var(--pg-ink);transition:background-color .25s var(--pg-ease),border-color .25s var(--pg-ease),color .25s var(--pg-ease)}
.vl-bx-str input{position:absolute;opacity:0;pointer-events:none}
.vl-bx-str:hover{border-color:var(--pg-ink)}
.vl-bx-str:has(input:checked){border-color:var(--pg-ink);background:var(--pg-ink);color:var(--pg-paper)}
.vl-bx-str:has(input:focus-visible){outline:2px solid var(--pg-green);outline-offset:2px}
.vl-bx-str.is-off{cursor:not-allowed;color:#707872;text-decoration:line-through}
.vl-bx-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;white-space:nowrap}
.vl-bx-price [data-vl-bx-now]{font:400 14px/1.4 var(--pg-mono);color:var(--pg-ink)}
.vl-bx-price del{font:400 14px/1.4 var(--pg-mono);color:var(--pg-mute)}
.vl-bx-price__mo{font:400 14px/1.5 var(--pg-sans);color:var(--pg-mute)}
:root .vl-bx .vl-bx-add:hover{border-color:var(--pg-green);background:var(--pg-green);color:var(--pg-paper)}
:root .vl-bx .vl-bx-add:disabled:hover{border-color:var(--pg-line-s);background:transparent;color:#707872}
.vl-bx .vl-bk-qty output{width:44px;font:400 14px/1.4 var(--pg-mono);color:var(--pg-ink);text-align:center}
:root .vl-bx .vl-bk-qty button:disabled{opacity:.35;cursor:not-allowed;background:transparent}
.vl-bx.is-full .vl-bx-card:not(.is-sel) .vl-bx-add{opacity:.55}
/* bulk orders tile */
.vl-bx-tile{display:flex;flex-direction:column;justify-content:space-between;gap:16px;box-sizing:border-box;padding:24px;border-radius:20px;background:var(--pg-glass)}
.vl-bx-tile > div{display:flex;flex-direction:column;gap:12px}
.vl-bx-tile__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--pg-card);color:var(--pg-ink)}
.vl-bx-tile__icon .vl-icon{width:20px;height:20px;stroke-width:1.5}
.vl-bx-tile p{margin:0;font:400 14px/1.5 var(--pg-sans);color:var(--pg-text)}
.vl-bx-tile p.vl-jn-mono{font:500 11px/1.3 var(--pg-mono);color:var(--pg-mute)}
:root .vl-bx .vl-bx-tile h3{margin:0;font:600 18px/1.35 var(--pg-sans);letter-spacing:-.09px;color:var(--pg-ink)}
.vl-bx-tile .vl-pg-link{height:36px;font-size:14px}
.vl-bx-tile .vl-pg-link .vl-icon{width:16px;height:16px}

/* your box (Figma "Commerce/Box-Summary") */
.vl-bx-sum__head{display:flex;flex-direction:column;gap:8px}
.vl-bx-sum__head > p{margin:0}
.vl-bx-sum__title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
:root .vl-bx .vl-bx-sum__title h3{margin:0;font:500 24px/1.25 var(--pg-sans);letter-spacing:-.24px;color:var(--pg-ink)}
.vl-bx-sum__title > span{font:400 14px/1.4 var(--pg-mono);color:var(--pg-mute)}
.vl-bx-prog{display:block;height:6px;overflow:hidden;border-radius:999px;background:var(--pg-glass)}
.vl-bx-prog i{display:block;width:0;height:100%;border-radius:999px;background:var(--pg-green);transition:width .45s var(--pg-ease)}
.vl-bx-slots{display:flex;flex-direction:column;gap:8px}
.vl-bx-slot{display:flex;align-items:center;gap:12px;box-sizing:border-box;height:56px;padding:4px 8px;border:1px solid var(--pg-line-s);border-radius:12px;background:var(--pg-card);animation:vl-bk-pop .35s var(--pg-ease)}
.vl-bx-slot.is-empty{border:1px dashed var(--pg-line);background:transparent;animation:none;cursor:pointer;transition:border-color .25s ease,background-color .25s ease}
.vl-bx-slot.is-empty:hover{border-color:var(--pg-ink);background:rgba(9,11,10,.02)}
.vl-bx-slot__no{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--pg-glass);font:400 14px/1.4 var(--pg-mono);color:var(--pg-mute)}
.vl-bx-slot__t{flex:1 1 0;min-width:0;font:400 14px/1.5 var(--pg-sans);color:var(--pg-mute)}
.vl-bx-slot > .vl-icon{flex:none;width:16px;height:16px;stroke-width:1.5;color:var(--pg-ink);margin-right:8px}
.vl-bx-slot__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:48px;overflow:hidden;border-radius:8px;background:var(--pg-ivory)}
.vl-bx-slot__thumb img{width:44px;height:55px;object-fit:cover}
.vl-bx-slot__info{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:2px}
.vl-bx-slot__info b{font:500 14px/1.3 var(--pg-sans);color:var(--pg-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-bx-slot__info span{font:400 12px/1.4 var(--pg-mono);letter-spacing:.24px;text-transform:uppercase;color:var(--pg-mute)}
.vl-bx-sched{display:flex;flex-direction:column;gap:8px}
.vl-bx-sched p{margin:0}
.vl-bx-sched__bar span{flex:1 1 0;min-width:0;padding:8px 12px;border-radius:999px;font:500 14px/1.3 var(--pg-sans);color:var(--pg-text);text-align:center;white-space:nowrap}
.vl-bx-sched__bar span.is-on{background:var(--pg-ink);color:var(--pg-paper)}
:root .vl-bx .vl-bk-go:disabled{opacity:1;background:var(--pg-glass);color:#707872}
:root .vl-bx .vl-bk-go:disabled .vl-icon{display:none}
.vl-bx-sum .vl-bk-sum__ruo{margin:0}
.vl-bx-bar,.vl-bx-pips{display:none}
.vl-bx-bar strong i{margin:0 8px;font-style:normal;font-weight:400;color:var(--pg-line)}

/* ---------- how it works ---------- */
.vl-bx-how.e-con{background:var(--pg-ivory)}
.vl-bx-how .elementor-widget{margin:0!important}
.vl-bx-steps{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:0!important}
.vl-bx-step{flex:1 1 0!important;min-width:0;width:auto!important;gap:20px!important}
.vl-bx-step__rail{display:flex;align-items:center;margin:0}
.vl-bx-step__rail i{flex:1 1 0;height:1px;background:var(--pg-line)}
.vl-bx-step.is-last .vl-bx-step__rail i{display:none}
.vl-bx-step__node{display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:64px;height:64px;border:1px solid var(--pg-line);border-radius:999px;background:var(--pg-card);color:var(--pg-ink);transition:transform .45s var(--pg-ease)}
.vl-bx-step:hover .vl-bx-step__node{transform:scale(1.06)}
.vl-bx-step__node .vl-icon{width:24px;height:24px;stroke-width:1.5}
.vl-bx-step.is-last .vl-bx-step__node{border-color:var(--pg-green);background:var(--pg-green);color:var(--pg-paper)}
.vl-bx-step__text{gap:8px!important;padding-right:32px!important}
.vl-bx-step__body p{font:400 14px/1.5 var(--pg-sans);color:var(--pg-text)}

/* ---------- FAQ ---------- */
.vl-bx-faq.e-con{background:var(--pg-paper)}
.vl-bx-faq .elementor-widget{margin:0!important}
.vl-bx-faq__row{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:96px!important}
.vl-bx-faq__intro{flex:0 0 400px!important;width:400px!important;gap:32px!important}
.vl-bx-faq__acc{flex:1 1 0!important;min-width:0;width:auto!important;border-top:1px solid var(--pg-line-s)}
.vl-bx-help{gap:12px!important;padding:24px!important;border-radius:20px;background:var(--pg-ivory)}
.vl-bx-help__t{display:flex;align-items:center;gap:8px;margin:0;font:600 18px/1.35 var(--pg-sans);letter-spacing:-.09px;color:var(--pg-ink)}
.vl-bx-help__t .vl-icon{width:20px;height:20px;stroke-width:1.5;color:var(--pg-green)}
.vl-bx-help__d{margin:12px 0 0!important;font:400 14px/1.5 var(--pg-sans);color:var(--pg-text)}

/* =========================================================
   laptop 1025–1279
   ========================================================= */
@media (min-width:1025px) and (max-width:1279px){
  .vl-bx-hero__row{gap:48px!important}
  .vl-bx-hero__visual{flex:0 0 50%!important;width:50%!important}
  .vl-bx-pv__slot img{width:100px;height:125px}
  .vl-bx.vl-bk{gap:32px}
  .vl-bx__titlerow{flex-direction:column;align-items:stretch}
  .vl-bx-search{flex:none;width:100%}
}

/* =========================================================
   tablet + mobile ≤1024 (box summary = bottom sheet)
   ========================================================= */
@media (max-width:1024px){
  .vl-bx-hero.e-con{--padding-top:64px;--padding-bottom:72px}
  .vl-bx-hero__row{flex-direction:column!important;align-items:stretch!important;gap:40px!important}
  .vl-bx-hero__visual{flex:none!important;width:100%!important;max-width:600px}
  .vl-bx__titlerow{flex-direction:column;align-items:stretch;gap:16px}
  .vl-bx-search{flex:none;width:100%}
  .vl-bx-bar{display:flex}
  .vl-bx-bar .vl-bk-bar__t{gap:8px}
  .vl-bx-pips{display:flex;gap:4px}
  .vl-bx-pips i{width:24px;height:4px;border-radius:2px;background:var(--pg-glass);transition:background-color .3s ease}
  .vl-bx-pips i.is-on{background:var(--pg-green)}
  .vl-bx-sum__head{gap:12px}
  :root .vl-bx .vl-bx-sum__title h3{font-size:21px;letter-spacing:-.21px}
  .vl-bx-sum__title{align-items:center}
  :root .vl-bx .vl-bk-sum__close{order:3;border:1px solid var(--pg-line)!important}
  .vl-bx-sum__head > p{display:none}
  .vl-bx-sched > p:first-child{display:none}
  .vl-bx-how__btn{display:none!important}
  .vl-bx-steps{flex-direction:column!important;gap:0!important}
  .vl-bx-step{flex-direction:row!important;gap:16px!important;width:100%!important}
  .vl-bx-step__head{flex:none!important;width:44px!important;align-self:stretch}
  .vl-bx-step__head p{flex-direction:column;height:100%}
  .vl-bx-step__node{width:44px;height:44px}
  .vl-bx-step__node .vl-icon{width:18px;height:18px}
  .vl-bx-step__rail i{flex:1 1 auto;width:1px;height:auto;min-height:24px}
  .vl-bx-step__text{flex:1 1 0!important;padding:4px 0 22px!important;gap:6px!important}
  .vl-bx-step__no{display:none!important}
  :root .vl-page .vl-bx-step .vl-pg-h4 .elementor-heading-title{font:600 17px/1.35 var(--pg-sans);letter-spacing:-.085px}
  .vl-bx-faq__row{flex-direction:column!important;gap:40px!important}
  .vl-bx-faq__intro{flex:none!important;width:100%!important}
  .vl-bx-faq__acc{width:100%!important}
}

/* =========================================================
   mobile ≤767 (Figma 390)
   ========================================================= */
@media (max-width:767px){
  .vl-bx-hero.e-con{--padding-top:40px;--padding-bottom:40px}
  .vl-bx-hero > .e-con-inner{gap:32px!important}
  .vl-bx-hero__copy{gap:24px!important}
  .vl-bx-hero__visual{display:none!important}
  .vl-bx-ben.vl-bk-ben{padding:24px 20px!important}
  .vl-bx-build.e-con{--padding-top:40px;--padding-bottom:40px}
  .vl-bx__toolbar{gap:12px}
  .vl-bx__titlerow{gap:24px}
  :root .vl-bx .vl-bx__title h2{font-size:26px;letter-spacing:-.39px}
  .vl-bx__grid{gap:16px}
  .vl-bx-tile{display:none}
  .vl-bx-faq.e-con,.vl-bx-how.e-con{--padding-top:72px;--padding-bottom:72px}
  .vl-bx-help{display:none!important}
  .vl-bx-faq__intro{gap:0!important}
}
@media (prefers-reduced-motion:reduce){
  .vl-bx *{animation:none!important;transition:none!important}
}