/* Additions for the live page (real API data + interactive try-on demo). Kate's landing.css is unchanged. */
.pc-img img{width:100%;height:100%;object-fit:contain;display:block}
.pc-img.two img{width:50%}
.pc-img .thumb-svg{height:70%}
.r-nopairs{margin-top:16px;border:1px solid var(--dc-color-neutral-200);border-radius:var(--dc-radius-lg);padding:16px 20px}
.r-nopairs p{margin-top:6px;color:var(--dc-color-neutral-700)}
.live-try .lt-head{display:flex;align-items:center;gap:8px;margin-top:2px}
.lt-thumb{width:36px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--dc-color-accent-100);flex:none;background:#fff}
.live-try .tp-img{aspect-ratio:120/136}
.live-try.is-static .tp{cursor:default}
.tp[aria-checked=true] .tp-img{border-color:var(--dc-color-neutral-900);box-shadow:0 0 0 1px var(--dc-color-neutral-900)}
.tp[aria-checked=true] .tp-ok{display:flex}
.wide-try{width:100%;margin-top:10px}
/* try-on dialog: Kate's sheet layout as a real page dialog (bottom sheet on mobile, centred card on desktop) */
.try-dlg{border:0;padding:0;border-radius:18px;width:min(420px,100vw - 24px);max-height:min(760px,100vh - 24px);margin:auto;overflow:auto;background:#fff;color:var(--dc-color-neutral-900);font-size:14px;box-shadow:var(--dc-shadow-lg)}
.try-dlg::backdrop{background:rgba(14,17,22,.5)}
.try-dlg .sh{display:block;padding:14px 20px 22px}
.try-dlg .sh h3{font-size:18px}
.try-dlg .agree{position:relative}
.try-dlg .agree-cb{position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.try-dlg .agree-cb:focus-visible+.box{outline:2px solid var(--dc-color-focus);outline-offset:2px}
.try-dlg .sh-actions .btn[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.try-dlg.is-checked .need{visibility:hidden}
.lnk{background:none;border:0;font:inherit;cursor:pointer}
.try-dlg .n-link{font-size:13px;min-height:44px}
.pv-details{margin-top:8px;background:var(--dc-color-neutral-100);border-radius:10px;padding:10px 12px;font-size:12.5px}
.pv-details dt{font-weight:700;margin-top:6px}
.pv-details dt:first-child{margin-top:0}
.pv-details dd{color:var(--dc-color-neutral-700)}
.pv-draft{margin-top:8px;color:var(--dc-color-warning-fg);font-weight:600}
.lt-deleted{margin-top:10px;font-size:13px;color:var(--dc-color-success-fg);display:flex;gap:6px;align-items:center}
.lt-ph{margin-top:8px;font-size:12px;color:var(--dc-color-neutral-700);line-height:1.45}
.lt-ph .badge-ex{margin-inline-end:4px}
.lt-own{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--dc-color-neutral-600)}
.lt-own img{width:30px;height:40px;object-fit:cover;border-radius:5px}
.try-dlg .tp-img img.fig{width:100%;height:100%;object-fit:cover;margin:0}
.try-dlg[data-screen=camera]{background:var(--dc-color-neutral-900);width:min(420px,100vw - 24px)}
.live-cam{padding:0!important}
.live-cam .vf{height:min(560px,70vh)}
.live-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)} /* mirror the preview only; the captured frame is un-mirrored */
.live-cam .cam-link{min-height:44px}
.try-dlg .proc-img img{width:100%;height:100%;object-fit:cover;display:block}
.try-dlg .bar-in{width:calc(var(--prog,0) * 100%)}
[dir=rtl] .try-dlg .bar{transform:scaleX(-1)}
.try-dlg .resolved{margin-top:10px}
@media (max-width:600px){.try-dlg{margin:auto auto 0;border-radius:18px 18px 0 0;width:100vw;max-width:100vw}}
/* v1.1 review (answers-oleg-pr7) */
.pc-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* P2 #13 */
.pc-same{font-weight:400;color:var(--dc-color-neutral-600)}
.pc-vs .vl,.tp-tag bdi{display:inline-block;max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.tp-tag{padding:0 6px}
.pc-vs.small{font-size:13px;font-weight:600;color:var(--dc-color-neutral-700)}
.pc-vs.small bdi{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.pc-img.two .img-fallback{width:50%}
.img-fallback svg{height:70%}
.ticks{gap:4px 16px} /* P2 #15: wraps cleanly */
.r-split.no-try{grid-template-columns:1fr} /* no in-stock apparel size pair: CTA takes the row */
.try-dlg .lt-eb{margin-bottom:2px}
.reco.neutral{background:var(--dc-color-neutral-100);border-color:var(--dc-color-neutral-200);color:var(--dc-color-neutral-900)}
.try-dlg .btn.wide{width:100%;margin-top:10px}
.lt-demo-check{margin-top:8px;font-size:12px;color:var(--dc-color-neutral-700)}
.live-cam .cam-x{position:absolute;top:8px;inset-inline-end:8px;z-index:3;color:#fff;background:rgba(14,17,22,.55);border-radius:50%}
/* v1.4.1: the fit preview is a static picture of the UI (Kate's .ui-shot / .opt-row rules in landing.css) */
.live-fit, .live-fit *{cursor:default!important}
.mini[aria-hidden=true]{pointer-events:none;user-select:none}
/* v1.5 storefront widget rule (spec v1.5 "in-store selected state"; Kate's answer 2). Every shopper-facing widget on
   this page follows it: the phone card (.screen .nudge), the static fit preview (.nudge.is-static) and the try-on
   dialog's fit screen. Store theme here = the fictional/fallback store: ink #0E1116 text on a white card.
   Selected answer = store text colour fill + check (Kate's .chip.sel::before); unselected = 55% text/bg border;
   ultramarine only on the eyebrow, the focus ring and the 2px top line (#9DB0FF on dark stores). */
.nudge,.try-dlg[data-screen=fit]{--st-text:var(--dc-color-neutral-900);--st-bg:var(--dc-color-neutral-0);--st-accent:var(--dc-color-accent-600)}
.st-dark{--st-accent:var(--dc-color-accent-on-dark)}
.nudge .chip,.try-dlg[data-screen=fit] .chip{background:var(--st-bg);color:var(--st-text);border:1.5px solid color-mix(in srgb,var(--st-text) 55%,var(--st-bg))}
.nudge .chip.sel,.screen.is-fitpick #f-chip-mid,.try-dlg[data-screen=fit] .chip.sel{background:var(--st-text);border-color:var(--st-text);color:var(--st-bg)}
.try-dlg[data-screen=fit] .chip.sel::before{content:"";display:inline-block;width:12px;height:12px;margin-inline-end:5px;vertical-align:-1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.try-dlg[data-screen=fit] .chip{display:inline-flex;align-items:center;justify-content:center}
.nudge,.try-dlg[data-screen=fit]{border-block-start:2px solid var(--st-accent)}
.nudge .n-eyebrow,.try-dlg[data-screen=fit] .n-eyebrow{color:var(--st-accent)}
.nudge :focus-visible,.try-dlg[data-screen=fit] :focus-visible{outline:2px solid var(--st-accent);outline-offset:2px}
.try-dlg[data-screen=fit] .btn.pri{background:var(--st-text);border-color:var(--st-text);color:var(--st-bg)}
/* store chrome in the phone: torn-cart marker and line use store ink, not ultramarine */
.detect::before{background:currentColor}
.screen.is-detect[data-card=""] .d-line{border-inline-start:3px solid var(--dc-color-neutral-900)}