/* DuoCart homepage v4.4 PROPOSAL (2026-10-22): scene carousel on the side of the hero (js/scenes-v4.js).
   Page chrome (label, tabs, controls) = DuoCart's own page, Fitting Ticket tokens.
   Inside the phones = the merchant's store: store fonts and colours; DuoCart's mark is neutral grey (#5C5C5C light / #ADADAD dark)
   on the eyebrow, the 2px top line and the focus ring only. Store fonts (SIL OFL) are copies of tryon/fonts, in ../fonts. */
@font-face{font-family:Jost;src:url(../fonts/Jost-Variable.ttf) format("truetype");font-weight:100 900}
@font-face{font-family:Assistant;src:url(../fonts/Assistant-Variable.ttf) format("truetype");font-weight:200 800}
@font-face{font-family:"Secular One";src:url(../fonts/SecularOne-Regular.ttf) format("truetype");font-weight:400}

/* ---------- page chrome ---------- */
.car{display:flex;flex-direction:column}
.car-h{margin:0 0 14px;font-size:20px;line-height:1.25;font-weight:700;color:var(--dc-color-neutral-900);letter-spacing:-.005em}
[dir=rtl] .car-h{font-size:20px;letter-spacing:0}
/* tabs: folder tabs cut into the mirror panel; the selected one shares the panel's fill. A thin ink thread fills while the scene plays. */
.car-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:end}
.car-tab{position:relative;min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:0;padding:10px 12px 12px;border:1.5px solid var(--dc-color-neutral-300);border-bottom:0;border-radius:var(--dc-radius-lg) var(--dc-radius-lg) 0 0;background:var(--dc-color-neutral-0);color:var(--dc-color-neutral-600);font:inherit;font-size:14px;font-weight:600;line-height:1.25;text-align:start;cursor:pointer}
.car-tab:hover{color:var(--dc-color-neutral-900)}
.car-tab[aria-selected=true]{background:var(--dc-color-neutral-100);border-color:var(--dc-color-neutral-100);color:var(--dc-color-neutral-900);min-height:62px}
.car-tab:focus-visible,.car-arrow:focus-visible,.car .pp:focus-visible{outline:2px solid var(--dc-color-focus);outline-offset:2px}
.car-prog{position:absolute;inset-inline:12px;bottom:8px;height:2px;background:var(--dc-color-neutral-200);display:none}
.car-tab[aria-selected=true] .car-prog{display:block}
.car-prog i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--dc-color-neutral-900);transform:scaleX(var(--p,0));transform-origin:left}
[dir=rtl] .car-prog i{transform-origin:right}
.car-stage.demo-stage{border-radius:0 0 var(--dc-radius-lg) var(--dc-radius-lg);padding:34px 24px 20px}
.car-slides{width:100%;display:flex;justify-content:center}
.car-slide{display:flex;flex-direction:column;align-items:center;width:100%}
.car-slide[hidden]{display:none}
.car-cap{margin:20px auto 0;max-width:30em;min-height:3.1em;text-align:center;font-size:15px;line-height:1.5;color:var(--dc-color-neutral-700)}
.car-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.car-btns{display:flex;align-items:center;gap:4px}
.car-arrow{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--dc-color-neutral-300);border-radius:var(--dc-radius-md);background:var(--dc-color-neutral-0);color:var(--dc-color-neutral-900);cursor:pointer}
.car-arrow:hover{border-color:var(--dc-color-neutral-900)}
.car-next svg{transform:scaleX(-1)}
[dir=rtl] .car-prev svg{transform:scaleX(-1)}
[dir=rtl] .car-next svg{transform:none}
.car .pp{padding:0 8px}

/* ---------- inside the phones: the in-store rule ---------- */
/* scene 1 (scene.js, unchanged): the store's font; DuoCart's mark in neutral grey, not fuchsia */
.car-p1 .screen{font-family:Jost,Assistant,sans-serif}
.car-p1 .nudge{--st-accent:#5C5C5C}
.car .is-tap .cursor{background:rgba(92,92,92,.55)}

.st-mimosa{--st-font:Jost,Assistant,sans-serif;--st-head:Jost,Assistant,sans-serif;--st-headw:500;--st-btnfont:Jost,Assistant,sans-serif;--st-btnls:.06em;
  --st-bg:#FFFFFF;--st-surface:#FFFFFF;--st-fg:#222222;--st-mut:#5E5E5E;--st-line:#E2E2E2;--st-ctl:#858585;--st-btn:#222222;--st-btn-ink:#FFFFFF;--st-r:0px;--st-tint:#F4F1EC;--dc-a:#5C5C5C}
.st-noir{--st-font:Assistant,sans-serif;--st-head:"Secular One",Assistant,sans-serif;--st-headw:400;--st-btnfont:"Secular One",Assistant,sans-serif;--st-btnls:0;
  --st-bg:#141414;--st-surface:#1B1B1A;--st-fg:#F3F0EA;--st-mut:#B9B4AC;--st-line:#3A3835;--st-ctl:#8F8D8A;--st-btn:#E8FF5A;--st-btn-ink:#141414;--st-r:16px;--st-tint:#262523;--dc-a:#ADADAD}
.vs{display:flex;flex-direction:column;background:var(--st-bg);color:var(--st-fg);font-family:var(--st-font);font-size:13px;line-height:1.4}
[dir=rtl] .vs{font-family:var(--st-font);line-height:1.45}
.vs p,.vs h3,.vs h4{margin:0}
.vs-head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:18px 10px 0;border-bottom:1px solid var(--st-line);flex:none}
.vs-logo{font-family:var(--st-head);font-size:15px;letter-spacing:.3em;font-weight:600;direction:ltr}
.st-noir .vs-logo{font-size:20px;letter-spacing:.04em;font-weight:400}
.vs-ic{position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.vs-bag i{position:absolute;top:2px;inset-inline-end:0;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--st-fg);color:var(--st-bg);font-style:normal;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.vs .n1{display:none}.vs[data-kept="1"] .n1{display:inline}.vs[data-kept="1"] .n2{display:none}
.vs-main{flex:1;padding:12px 14px;overflow:hidden;position:relative}
.vs-h1{font-family:var(--st-head);font-weight:var(--st-headw);font-size:19px;margin:2px 0 6px!important}
.vs-line{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--st-line);max-height:90px;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s,padding .4s}
.vs-thumb{width:48px;height:60px;background:var(--st-tint);border-radius:calc(var(--st-r) / 2);display:flex;align-items:center;justify-content:center}
.vs-thumb svg,.vs-thumb img{width:34px;height:auto;max-height:52px}
.vs-pn{font-size:13.5px;font-weight:500}
.vs-pv{font-size:12px;color:var(--st-mut)}
.vs-pr{font-size:13px;font-variant-numeric:tabular-nums}
.vs[data-kept="1"] .vs-line-b{max-height:0;opacity:0;padding:0;border-width:0}
/* DuoCart's card: store surface, 2px grey top line, grey eyebrow */
.vs-card{margin-top:12px;background:var(--st-surface);border:1px solid var(--st-line);border-top:2px solid var(--dc-a);border-radius:var(--st-r);padding:11px 12px 12px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.vs[data-card="1"] .vs-card{opacity:1;transform:none}
.vs[data-kept="1"] .vs-card{display:none}
.st-mimosa .vs-entry{background:var(--st-tint);border-color:var(--st-tint);border-top-color:var(--dc-a)}
.vs-eyebrow{color:var(--dc-a);font-size:11.5px;font-weight:600}
.vs-body{font-size:13.5px;margin:3px 0 10px!important}
.vs-btn2{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border:1.5px solid var(--st-fg);border-radius:var(--st-r);font-family:var(--st-btnfont);letter-spacing:var(--st-btnls);font-size:13.5px;font-weight:600;transition:background .15s,color .15s}
.vs.is-tap #s2-try,.vs.is-tap #s3-try{background:var(--st-fg);color:var(--st-bg)}
.vs-link{display:block;text-align:center;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;margin-top:8px}
.vs-entry-row{display:flex;align-items:center;gap:14px}.vs-entry-row .vs-btn2{flex:1}.vs-entry-row .vs-link{margin:0}
.vs-status{display:flex;gap:6px;align-items:flex-start;margin-top:12px!important;font-size:13px;opacity:0;transition:opacity .3s .2s}
.vs[data-kept="1"] .vs-status{opacity:1}
.vs-status svg,.vs-toast svg{flex:none;margin-top:2px}
.vs-foot{flex:none;padding:10px 14px 22px;border-top:1px solid var(--st-line)}
.vs-btn{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--st-r);background:var(--st-btn);color:var(--st-btn-ink);font-family:var(--st-btnfont);letter-spacing:var(--st-btnls);font-size:14px;font-weight:600}
.vs-toast{position:absolute;inset-inline:14px;bottom:18px;display:flex;gap:6px;padding:11px 12px;border-radius:var(--st-r);background:var(--st-fg);color:var(--st-bg);font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .3s .25s,transform .3s .25s;z-index:5}
.vs[data-kept="1"] .vs-toast{opacity:1;transform:none}
/* the try-on sheet (tryon 10 / 12 / 13), store surface, grey top line */
.vs-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s;pointer-events:none;z-index:6}
.vs[data-sheet="proc"] .vs-scrim,.vs[data-sheet="res"] .vs-scrim{opacity:1}
.vs-sheet{position:absolute;inset-inline:0;bottom:0;max-height:93%;overflow:hidden;background:var(--st-surface);border-top:2px solid var(--dc-a);border-radius:var(--st-r) var(--st-r) 0 0;padding:10px 14px 20px;transform:translateY(103%);transition:transform .42s var(--ease);z-index:7}
.vs[data-sheet="proc"] .vs-sheet,.vs[data-sheet="res"] .vs-sheet{transform:none}
.vs-sh-top{display:flex;align-items:center;justify-content:space-between;min-height:28px}
.vs-x{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center}
.vs-proc{display:none}.vs[data-sheet="proc"] .vs-proc{display:block}.vs[data-sheet="proc"] .vs-res{display:none}
.vs-title{font-family:var(--st-head);font-weight:var(--st-headw);font-size:17px;line-height:1.3;margin:4px 0 10px!important}
.vs-frames{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-frames span{aspect-ratio:120/150;border:1.5px dashed var(--st-ctl);border-radius:calc(var(--st-r) / 2);padding:6px;display:flex;align-items:flex-start;animation:vs-breathe 1.4s ease-in-out infinite alternate}
.vs-frames i{font-style:normal;font-size:11.5px;font-weight:600;padding:1px 6px;border:1px solid var(--st-line);border-radius:4px}
@keyframes vs-breathe{from{background:transparent}to{background:var(--st-tint)}}
.vs-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-panel{display:flex;flex-direction:column;gap:5px;min-width:0}
.vs-img{position:relative;display:block;border:2px solid transparent;border-radius:calc(var(--st-r) / 2);overflow:hidden;transition:border-color .2s}
.vs-img .fig{display:block;width:100%;height:auto}
.vs-tag,.vs-ill{position:absolute;background:#FFFFFF;color:#222222;border-radius:3px;font-size:10.5px;font-weight:600;padding:1px 5px;line-height:1.5}
.vs-tag{top:5px;inset-inline-start:5px}
.vs-ill{bottom:5px;inset-inline-end:5px;font-weight:500}
.vs-ok{display:none;position:absolute;top:5px;inset-inline-end:5px;width:22px;height:22px;border-radius:50%;background:var(--st-fg);color:var(--st-bg);align-items:center;justify-content:center}
.vs-cap{font-size:11.5px;color:var(--st-mut);text-align:center}
.vs-keep{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 6px;border:1.5px solid var(--st-fg);border-radius:var(--st-r);font-family:var(--st-btnfont);letter-spacing:var(--st-btnls);font-size:12.5px;font-weight:600;text-align:center;transition:background .15s,color .15s}
.vs[data-pick="a"] .vs-panel-a .vs-img{border-color:var(--st-fg)}
.vs[data-pick="a"] .vs-panel-a .vs-ok{display:flex}
.vs[data-pick="a"] #s2-keep-a,.vs.is-tap #s3-keep-M{background:var(--st-fg);color:var(--st-bg)}
.vs-disc{font-size:11px;color:var(--st-mut);margin-top:10px!important}
/* scene 3 view toggle (13): Side by side · M · L, the selected one filled with the store's text colour plus a check */
.vs-toggle{display:flex;border:1.5px solid var(--st-ctl);border-radius:var(--st-r);margin-bottom:8px;padding:2px;gap:2px}
.vs-toggle > span{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;font-size:12.5px;border-radius:calc(var(--st-r) / 2);transition:background .15s,color .15s}
.vs-toggle svg{display:none}
.vs[data-view="both"] .tg-both,.vs[data-view="M"] .tg-M,.vs[data-view="L"] .tg-L{background:var(--st-fg);color:var(--st-bg);font-weight:600}
.vs[data-view="both"] .tg-both svg,.vs[data-view="M"] .tg-M svg,.vs[data-view="L"] .tg-L svg{display:block}
.vs[data-view="M"] .vs-pair,.vs[data-view="L"] .vs-pair{grid-template-columns:1fr}
.vs[data-view="M"] .vs-panel-L,.vs[data-view="L"] .vs-panel-M{display:none}
.vs[data-view="M"] .vs-img,.vs[data-view="L"] .vs-img{width:66%;margin-inline:auto}
/* scene 3 product page (02) */
.vs-pdp-img{height:178px;background:var(--st-tint);border-radius:var(--st-r);display:flex;align-items:center;justify-content:center}
.vs-pdp-img svg{height:86%;width:auto}
.vs-pdp-n{font-family:var(--st-head);font-weight:var(--st-headw);font-size:16px;margin-top:10px!important}
.vs-pdp-p{color:var(--st-mut);font-size:13px}
.vs-sz-l{font-size:12px;color:var(--st-mut);margin-top:8px!important}
.vs-sizes{display:flex;gap:6px;margin-top:4px;direction:ltr}
[dir=rtl] .vs-sizes{direction:rtl}
.vs-sizes span{flex:1;min-height:34px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--st-ctl);border-radius:var(--st-r);font-weight:600;font-size:12.5px}
.vs-sizes .on{background:var(--st-fg);border-color:var(--st-fg);color:var(--st-bg)}
.vs-pdp .vs-btn{margin-top:10px}
.vs-pdp .vs-card{margin-top:12px}
.vs[data-kept="1"] .vs-entry{display:block;opacity:0}
/* end of loop: the store fades out before the next scene */
.vs::after{content:"";position:absolute;inset:0;background:var(--st-bg);opacity:0;transition:opacity .5s;pointer-events:none;z-index:30}
.vs[data-fade="1"]::after{opacity:1}

@media (max-width:960px){
  .car-stage.demo-stage{padding:22px 10px 14px}
  .car-tab{font-size:13px;padding:8px 9px 12px}
  .car-cap{margin-top:14px}
}
@media (prefers-reduced-motion: reduce){ .vs *,.vs::after{transition:none!important;animation:none!important} .car-prog i{transform:none;width:0} }
.car.is-reduced .vs *{animation:none!important}

/* ---------- v4.4.2 (Kate's review): scene 3 = try on ONE item from the product page ---------- */
.vs-s3one .vs-cnt{display:none}
.vs-s3one[data-added="1"] .vs-cnt{display:flex}
.vs-s3one[data-sz="M"] #s3-sz-M{background:var(--st-fg);border-color:var(--st-fg);color:var(--st-bg)}
.vs-s3one .vs-entry .vs-btn2{display:flex;margin-top:8px}
.vs-s3one[data-added="1"] .vs-toast{opacity:1;transform:none}
.vs-s3one[data-added="1"] .vs-entry{opacity:1}
.vs-frames.vs-one{grid-template-columns:1fr;width:62%;margin-inline:auto}
.vs-res .vs-one{display:flex;flex-direction:column;gap:5px;width:66%;margin-inline:auto}
.vs-add{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:10px;padding:0 10px;border-radius:var(--st-r);background:var(--st-fg);color:var(--st-bg);font-family:var(--st-btnfont);letter-spacing:var(--st-btnls);font-size:13px;font-weight:600;transition:opacity .15s}
.vs.is-tap #s3-add{opacity:.8}
/* Q27: keep the progress line, but not under reduced motion */
.car.is-reduced .car-prog{display:none!important}
@media (prefers-reduced-motion: reduce){ .car-prog{display:none!important} }
/* Q25: the size card is DuoCart-in-a-store, so its accent is the neutral grey, never fuchsia. The demo page's card already is (v4.3);
   this also covers the homepage's single-phone fallback (#phone, shown only if scenes-v4.js doesn't load). */
.phone .nudge{--st-accent:#5C5C5C}
/* v4.4.3 (Q28) hid the fit card's "Try on both instead" link in scene 1 here. v4.4.5 (Nadav): removed at the source
   (js/scene.js no longer renders it for sizes), so this rule is gone. */