/* ============================================================
   Larina Showroom, the shopper's page (?store=...&product=...).

   A gallery to pick a room, then the picture as the whole page with a
   light toolbar above it, the measurement under it, the product strip and
   the rug controls below that, and the floor tools folded away until asked
   for. Open Frame tokens from showroom.css; nothing here invents a colour.
   ============================================================ */
.shopper-only{display:none}
body.shopper .shopper-only{display:block}
body.shopper #rooms,body.shopper .side{display:none!important}
body.shopper .app{display:block;min-height:0}
body.shopper .work{max-width:1180px;margin:auto;padding:12px 16px 32px}
[hidden]{display:none!important}

/* ---- icons and buttons ------------------------------------------------ */
body.shopper .tb svg,body.shopper .btn svg,body.shopper .nb svg,.zb svg,.gcard svg{width:18px;height:18px;flex-shrink:0}
body.shopper .tb{font-size:13.5px!important;min-height:44px;padding:0 14px;white-space:nowrap;justify-content:center;gap:8px}
body.shopper .tb.ghost{border-color:transparent;background:transparent}
body.shopper .tb.ghost:hover{background:var(--accent-soft)}
body.shopper .btn{min-height:46px;gap:8px}
body.shopper .btn.light{background:var(--brand-white);color:var(--accent);border:1px solid transparent}
body.shopper .btn.light:hover{background:var(--brand-ivory)}
body.shopper .nb{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:10px}
body.shopper .nudge{grid-template-columns:repeat(4,44px);gap:6px}
body.shopper button:disabled{opacity:.5;cursor:default}
body.shopper .tb:focus-visible,body.shopper .btn:focus-visible,body.shopper .nb:focus-visible,body.shopper .zb:focus-visible,body.shopper a:focus-visible,.gcard:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- the gallery ------------------------------------------------------- */
#shopper-start{position:fixed;inset:0;z-index:25;overflow:auto;background:var(--paper);padding:0 0 40px}
.gallery{max-width:1180px;margin:0 auto;padding:18px clamp(14px,3vw,28px)}
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.gallery-head .wm{height:22px;width:auto}
.gallery-head a{text-decoration:none;color:var(--ink)}
.gallery-title{margin:26px 0 16px;max-width:64ch}
.gallery-title h1{font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.gallery-sub{margin-top:10px;font-size:15.5px;color:var(--ink-2);text-wrap:pretty}
.product-chip{display:inline-flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:18px;max-width:100%}
.product-chip img{width:56px;height:70px;object-fit:cover;border-radius:8px;background:var(--accent-soft)}
.product-chip div{display:grid;gap:2px;min-width:0}
.product-chip b{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-chip span{font-size:12.5px;color:var(--muted)}
.gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* Nine rooms in two columns would leave one dangling cell; the first room spans the row instead. */
@media(max-width:900px) and (min-width:481px){.gcard.room.featured{grid-column:1/-1;aspect-ratio:16/9}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}
.gcard{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden;text-align:start;cursor:pointer;box-shadow:0 1px 2px rgba(23,31,28,.05);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.gcard.room{aspect-ratio:4/3}
.gcard.room img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.gcard.room .gname{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff;font-weight:700;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.gcard.room .gname small{font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;background:rgba(23,31,28,.55);padding:4px 8px;border-radius:999px;backdrop-filter:blur(3px)}
.gcard.room::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,24,21,.82) 0%,rgba(18,24,21,.45) 28%,rgba(18,24,21,0) 55%);pointer-events:none}
.gcard.room:hover,.gcard.room:focus-visible{transform:translateY(-3px);box-shadow:0 10px 26px rgba(23,31,28,.14);border-color:var(--accent)}
.gcard.room:hover img{transform:scale(1.04)}
/* the own-room card takes a full row, so the six sample rooms fill their
   rows exactly (3 x 2 on desktop, 2 x 3 on tablets) with no dangling cell */
.gcard.own{grid-column:1/-1;background:var(--accent);color:var(--brand-ivory);border-color:var(--accent);cursor:default;display:grid}
.gcard.own .own-inner{padding:clamp(18px,3vw,26px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:14px 28px}
.gcard.own .own-kicker{grid-column:1}.gcard.own .own-text{grid-column:1}
.gcard.own .own-buttons{grid-column:2;grid-row:1/3}
.own-kicker{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.own-text{font-size:13.5px;opacity:.9;line-height:1.45}
.own-buttons{display:grid;gap:10px;grid-template-columns:1fr}
.gallery-foot{margin-top:18px;font-size:13px;color:var(--muted);max-width:76ch}
#shopper-cancel{margin-top:14px}
#shopper-error{color:var(--bad);font-weight:600;margin:0 0 12px}
@media(max-width:600px),(max-height:520px){
  .gallery{padding:12px 14px}
  .gallery-title{margin:14px 0 12px}
  .gcard.own .own-inner{grid-template-columns:1fr}
  .gcard.own .own-buttons{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr}
}
@media(max-width:400px){.gcard.own .own-buttons{grid-template-columns:1fr}}
.gcard.entering{animation:card-pop .45s var(--ease) both}
@keyframes card-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- the viewer -------------------------------------------------------- */
body.shopper .top{position:sticky;top:0;z-index:12}
body.shopper .top .tools .tb{min-height:40px}
.shopper-summary{padding:4px 0 10px;display:grid;gap:4px}
#shopper-status{font-size:16px;font-weight:600;line-height:1.35;text-wrap:pretty}
#shopper-size-status{font-size:13px}
body.shopper #stage{max-height:none;border-radius:16px;box-shadow:0 1px 2px rgba(23,31,28,.06)}
#view{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#view canvas,#view #handles,#view #floor-review,#view #debug-tint,#view #debug-svg{position:absolute;inset:0;width:100%;height:100%}
body.shopper .stage-tags{display:none!important}
.sample-tag{position:absolute;top:10px;left:10px;z-index:6;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ivory);background:rgba(23,31,28,.62);padding:5px 10px;border-radius:999px;pointer-events:none;backdrop-filter:blur(3px)}
.sample-tag[hidden]{display:none!important}
body.shopper.own .limits.own-only,body.shopper #adjust,body.shopper #fit{display:none!important}
body.shopper .bar{margin-top:10px;border-radius:14px;padding:10px 14px;gap:14px}
body.shopper .bar .ctl label{display:inline-flex;align-items:center;gap:6px}
body.shopper .bar .ctl .ico{width:15px;height:15px}
body.shopper .sel a{display:inline-flex;align-items:center;gap:4px}
.shopper-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tools-panel{margin-top:10px;animation:panel-in .28s var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.shopper .mask-controls{position:static;border-radius:14px;padding:12px 14px;margin:0}
body.shopper .mask-controls .tb{min-height:40px;font-size:12.5px!important}
.tools-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.brush-size{display:flex;align-items:center;gap:6px;font-size:12.5px}
.brush-size input{width:110px;accent-color:var(--accent)}
body.shopper .panel{border-radius:14px}

/* zoom for precise edits (own photo, tools open) */
.zoom-tools{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;margin:0 0 10px}
.zoom-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#5b6660);padding:0 6px 0 8px}
.zoom-tools[hidden]{display:none!important}
.zb{width:40px;height:40px;display:inline-grid;place-items:center;border:0;border-radius:999px;background:transparent;cursor:pointer;color:var(--ink)}
.zb:hover{background:var(--accent-soft)}
.zb[aria-pressed="true"]{background:var(--accent);color:var(--brand-ivory)}
.zoom-val{font-size:12px;font-weight:700;min-width:28px;text-align:center}
.opt-text{flex:1 1 auto;min-width:0}
#stage.panning{cursor:grab}
#stage.panning.dragging{cursor:grabbing}
.handle{transform:scale(calc(1 / var(--z,1)))}

/* rug visibility by mode */
body.shopper #rug-canvas{transition:opacity .7s ease}
body.shopper.preview-loading #rug-canvas,
body.shopper.preview-unplaced:not(.shopper-tools) #rug-canvas{visibility:hidden}
/* the calibration panel belongs to the tools, never to the simple measurement */
body.shopper:not(.shopper-tools) #adjust-panel{display:none!important}
body.shopper.shopper-measuring #rug-canvas{visibility:hidden;opacity:0}
/* the estimated preview says so on the picture itself */
#estimate-badge{display:none;position:absolute;left:10px;bottom:10px;z-index:6;padding:5px 10px;border-radius:999px;background:rgba(17,17,17,.72);color:#fff;font:600 12px/1.2 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
body.shopper.preview-needs-measurement:not(.preview-loading):not(.preview-unplaced):not(.shopper-measuring):not(.shopper-tools) #estimate-badge,
body.shopper.size-uncertain:not(.shopper-measuring):not(.shopper-tools) #estimate-badge{display:block}
body.shopper.size-uncertain #estimate-badge{background:rgba(150,40,20,.85)}
.build-tag{margin:18px auto 24px;max-width:1100px;padding:0 16px;font:12px/1.4 system-ui,sans-serif;color:#7a7f78}
body.shopper.preview-loading .bar,body.shopper.preview-loading .shopper-summary details{display:none!important}
#shopper-pending{margin:0;font-weight:600;color:var(--accent)}
.shopper-guide{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line,#d9d5c8);border-radius:14px;background:var(--card,#fffdf8);display:grid;gap:8px}
.shopper-guide[hidden]{display:none}
.shopper-guide p{margin:0}
.shopper-guide .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#shopper-apply-length[disabled]{opacity:.7}
body.shopper.shopper-measuring .bar,body.shopper.shopper-measuring #pose-note,body.shopper.shopper-measuring .shopper-actions,body.shopper.shopper-measuring #shopper-tools{display:none!important}
/* the sticky header must not cover the photo's top edge when the page scrolls to it */
body.shopper #stage{scroll-margin-top:calc(var(--shopper-top,0px) + 12px)}
body.shopper #shopper-error{color:var(--bad)}

/* ---- the measurement card under the photo --------------------------- */
#measure-card{position:relative;margin:12px 0 4px;background:var(--panel);border:2px solid var(--accent);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
#measure-card .measure-arrow{position:absolute;top:-11px;left:34px;width:18px;height:18px;background:var(--panel);border-left:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg)}
#measure-card p{margin:0}
#measure-title{font-size:16px;line-height:1.4}
.measure-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.measure-zero{font-weight:600}
.measure-zero span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#17392d;color:#fff;font-weight:700;font-size:13px;margin:0 3px}
#shopper-length{font:inherit;font-size:20px;font-weight:700;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;width:118px}
#shopper-unit{font:inherit;font-size:15px;padding:11px 10px;border:1px solid var(--line-strong);border-radius:8px}
#shopper-length-error{color:var(--bad);font-weight:600}
.measure-note{font-size:13px}
.lnk{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;padding:0;justify-self:start}
#measure-card.enter{animation:card-in .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.shopper #ruler-a::before,body.shopper #ruler-b::before{content:attr(data-label);position:absolute;top:-36px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#17392d;border-radius:12px;padding:2px 9px;font-weight:700;font-size:15px;box-shadow:0 2px 8px #0003}
body.shopper #ruler-a::before{content:'1 = ' attr(data-label)}
body.shopper #ruler-b::before{content:'2 = ' attr(data-label)}
body.shopper.shopper-measuring #ruler-a,body.shopper.shopper-measuring #ruler-b{box-shadow:0 0 0 5px rgba(255,255,255,.55)}
/* The attention pulse is a child ring animated on transform and opacity only; an animated box-shadow on the dot itself rendered the dot faded or missing in a headless capture. */
.handle.ruler .pulse{display:none;position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.8);pointer-events:none}
body.shopper.shopper-measuring .handle.ruler .pulse{display:block;animation:ring-pulse 1.4s .6s 3 ease-out both}
body.shopper.shopper-measuring #ruler-b .pulse{animation-delay:.75s}
@keyframes ring-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2);opacity:0}}
body.shopper.shopper-measuring #ruler-line{stroke-width:3;stroke-dasharray:7 7;animation:line-in 1.4s linear infinite}
@keyframes line-in{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
body.shopper #handles{overflow:visible}

/* ---- loading on the photo ------------------------------------------- */
/* A chip along the top of the photo, not a curtain over it: the dots and
   the distance box stay usable while the detector downloads and runs. */
#measure-loading{position:absolute;left:10px;right:10px;top:10px;z-index:9;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(23,31,28,.8);color:#fff;pointer-events:none;backdrop-filter:blur(3px)}
#measure-loading[hidden]{display:none}
#measure-loading p{margin:0;font-weight:600;font-size:12.5px;line-height:1.3}
#measure-loading .loading-note{font-weight:400;font-size:11.5px;opacity:.85}
.loading-body{flex:1 1 auto;min-width:0;display:grid;gap:4px}
.loading-ring{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ring .9s linear infinite}
@keyframes ring{to{transform:rotate(360deg)}}
.loading-track{width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.loading-bar{height:100%;width:8%;border-radius:3px;background:#fff;transition:width .4s ease}
.loading-bar.busy{animation:busy 1.4s ease-in-out infinite}
@keyframes busy{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}

/* ---- phones ----------------------------------------------------------- */
@media(max-width:600px),(max-height:520px){
  body.shopper .top{position:static;padding:10px;gap:8px}
  body.shopper .top .tag{display:none}
  body.shopper .tools{width:100%;margin:0;justify-content:space-between}
  body.shopper .work{padding:8px 10px 24px}
  body.shopper #adjust-panel .num{flex-wrap:wrap}
  body.shopper #ref-pick{max-width:100%}
  body.shopper .bar .sel{width:100%}
  body.shopper .bar{gap:10px}
  .shopper-actions .tb{flex:1 1 45%}
  #measure-card{padding:12px}.measure-row{gap:8px}#shopper-length{width:104px}
}
@media(max-width:480px){
  /* short labels stay next to the icons: no icon-only mystery buttons */
  body.shopper .tb span,body.shopper .tb{font-size:12px!important}
  body.shopper .tb{padding:0 10px;gap:6px}
  body.shopper .top .tools .tb{flex:1 1 0;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  body.shopper *{scroll-behavior:auto!important;transition:none!important}
  #measure-card.enter,.tools-panel,.gcard.entering,body.shopper.shopper-measuring .handle.ruler .pulse,body.shopper.shopper-measuring #ruler-line,.loading-ring,.loading-bar.busy{animation:none!important}
}

/* internal size check (?sizecheck=1) */
#view #sizecheck-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#sizecheck-svg polygon{fill:none;stroke-linejoin:round}
#sc-ref.on{fill:rgba(47,210,122,.30);stroke:#2fd27a;stroke-width:2}
#sc-ref.off{stroke:#2fd27a;stroke-width:1.75;stroke-dasharray:7 5}
#sc-product.on{stroke:rgba(255,90,78,.95);stroke-width:1.5}
#sc-product.off{stroke:#ff5a4e;stroke-width:2;stroke-dasharray:7 5}
.sizecheck{max-width:1100px;margin:10px auto 0;padding:10px 14px;border:1px dashed #9aa39a;border-radius:10px}
.sizecheck-title{margin:0 0 6px;font:600 12px/1.3 system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#5d665d}
.sizecheck-row{display:flex;flex-wrap:wrap;gap:8px}
.sizecheck-row .tb[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:1px}
.sizecheck .sw{display:inline-block;width:14px;height:10px;margin-right:6px;border:2px solid;vertical-align:-1px}
.sizecheck .sw-product{border-color:#ff5a4e}
.sizecheck .sw-ref{border-color:#2fd27a;background:rgba(47,210,122,.3)}
.sizecheck .hint{margin:6px 0 0}
body.sizecheck-ref #download{display:none}

/* h3: measuring dots on the photo edge */
#ruler-loupe{position:absolute;z-index:40;width:116px;height:116px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.45);pointer-events:none;background:#2a2f2c}
#ruler-loupe[hidden]{display:none}
body.shopper #ruler-a.lbl-below::before,body.shopper #ruler-b.lbl-below::before{top:auto;bottom:-36px}
body.shopper #ruler-a.lbl-right::before,body.shopper #ruler-b.lbl-right::before{left:50%;transform:none}
body.shopper #ruler-a.lbl-left::before,body.shopper #ruler-b.lbl-left::before{left:auto;right:50%;transform:none}
/* while measuring, a swipe from a dot on the photo edge must not become the browser's back gesture */
html:has(body.shopper.shopper-measuring){overscroll-behavior:none}
body.shopper.shopper-measuring{overscroll-behavior:none}

/* h4: the loading card has a way out */
#measure-loading .loading-actions{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}
#measure-loading .loading-actions .lnk{pointer-events:auto;color:#fff;font-size:13px;min-height:32px}
/* h4: product dimensions and the scale state, side by side */
.scale-pill{display:inline-block;justify-self:start;align-self:start;width:fit-content;max-width:100%;margin:2px 0 0;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:#e8efe2;color:#24412f;vertical-align:1px}
.scale-pill[data-state="measured"]{background:#d9ecd9;color:#1d4a2a}
.scale-pill[data-state="off"]{background:#f6dcd4;color:#7a2512}
.scale-pill[hidden]{display:none}
.shopper-more{font-size:13px;color:var(--ink-2,#555)}
.shopper-more summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.shopper-more[hidden]{display:none}
.edit-sheet[hidden]{display:none}
/* h4: phones edit in a bottom sheet, with the photo above it */
@media(max-width:600px),(max-height:520px){
  .edit-sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:min(46vh, calc(var(--vvh,100vh) - 220px));overflow:auto;overscroll-behavior:contain;
    background:var(--paper,#fbfaf6);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);padding:6px 12px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(calc(-1 * var(--kb,0px)))}
  .sheet-grip{width:40px;height:4px;border-radius:2px;background:#c9cdc6;margin:2px auto 8px}
  #sheet-body > *{margin:0 0 8px}
  #sheet-body #measure-card{position:static;box-shadow:none;border:0;padding:0;background:none}
  #sheet-body #measure-card .measure-arrow{display:none}
  #sheet-body .shopper-actions{position:static;display:flex;flex-wrap:wrap;gap:6px}
  #sheet-body .tools-panel{position:static;margin:0;padding:0;border:0;box-shadow:none;background:none}
  #sheet-body .tools-panel .hint{display:none}
  body.sheet-on{padding-bottom:calc(var(--sheet-h,0px) + 12px)}
  body.sheet-on #stage{width:min(100%, calc((var(--vvh,100vh) - var(--sheet-h,0px) - 20px) * var(--stage-ar,.75)));margin-left:auto;margin-right:auto}
}

/* h4: on wider screens the photo fits the window while measuring or editing,
   so both ruler dots and the photo's edges can be reached without scrolling */
@media(min-width:601px) and (max-width:899px) and (min-height:521px){
  body.shopper #stage{width:min(100%, max(50%, calc((100vh - var(--shopper-top,0px) - 230px) * var(--stage-ar,.75))));margin-left:auto;margin-right:auto}
}

/* ---- h5: the folded product name, quarter turns, the test session -------- */
.sel-name{cursor:pointer;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sel-name[aria-expanded="true"]{-webkit-line-clamp:unset;display:block}
.turn-quick{display:flex;gap:6px;margin-top:4px}
.turn-quick .tb{min-height:44px;min-width:56px;justify-content:center}
.session-panel{margin:10px 0 0;padding:10px 12px;border:1px dashed #9aa39a;border-radius:10px}
.session-panel[hidden]{display:none}
.session-list{display:grid;gap:6px;margin-top:6px}
.session-item{display:grid;gap:1px;text-align:left;min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid var(--line,#d9d5c8);background:var(--paper,#fff);cursor:pointer;font:inherit}
.session-item .si-name{font-weight:600;font-size:13.5px}
.session-item .si-meta{font-size:12px;color:var(--ink-2,#555)}
.session-item.on{outline:2px solid #23523a;outline-offset:1px}
.session-item.synthetic{border-style:dashed}
/* ---- h5 desktop: photo on the left at window height, controls on the right */
@media(min-width:900px) and (min-height:521px){
  body.shopper .work{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto 1fr;column-gap:22px;max-width:1560px}
  body.shopper .work > #shopper-summary{grid-column:2;grid-row:1}
  body.shopper .work > #stage{grid-column:1;grid-row:1 / span 2;align-self:start;justify-self:center;position:sticky;top:calc(var(--shopper-top,0px) + 10px);
    width:min(100%, calc((100vh - var(--shopper-top,0px) - 28px) * var(--stage-ar,.75)))}
  body.shopper .work > #control-panel{grid-column:2;grid-row:2;align-self:start;min-width:0}
  body.shopper #control-panel .bar{flex-wrap:wrap}
  body.shopper #control-panel .bar .sel{flex-basis:100%}
  body.shopper #control-panel .bar .ctl{flex-basis:100%}
  body.shopper #measure-card .measure-arrow{display:none}
}
/* ---- h5 phones: the dock and its small panels ------------------------------ */
body.shopper .dock[hidden],body.shopper .dock-panel[hidden],.dock-sub[hidden]{display:none!important}
@media(max-width:600px),(max-height:520px){
  body.shopper .dock{position:fixed;left:0;right:0;bottom:0;z-index:28;display:flex;justify-content:space-around;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--paper,#fbfaf6);border-top:1px solid var(--line,#d9d5c8);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .dock-b{flex:1;min-width:44px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:12px;background:none;color:var(--ink,#1d2a22);font:600 11.5px/1.1 system-ui,sans-serif;cursor:pointer}
  .dock-b svg{width:20px;height:20px}
  .dock-b[aria-expanded="true"]{background:#e3eadc}
  body.shopper .dock-panel{position:fixed;left:8px;right:8px;bottom:calc(var(--dock-h,64px) + 6px);z-index:29;background:var(--paper,#fbfaf6);border:1px solid var(--line,#d9d5c8);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.14);padding:8px 10px}
  .dock-row{display:flex;align-items:center;gap:8px}
  .dock-row + .dock-row{margin-top:6px}
  .dock-row input[type=range]{flex:1;min-height:44px}
  .dock-row .tb{min-height:44px;min-width:60px;justify-content:center}
  .dock-val{min-width:44px;font-weight:700;text-align:right}
  .dock-arrows{justify-content:center}
  .dock-arrows .nb{width:52px;height:48px}
  .dock-sub .hint{margin:6px 0 0;text-align:center}
  #dock-rugs-panel{max-height:40vh;overflow:auto}
  body.dock-on{padding-bottom:calc(var(--dock-h,64px) + var(--dockpanel-h,0px) + 12px)}
  body.dock-on:not(.sheet-on) #stage{width:min(100%, calc((var(--vvh,100vh) - var(--dock-h,64px) - var(--dockpanel-h,0px) - 18px) * var(--stage-ar,.75)));margin-left:auto;margin-right:auto}
  /* the dock is the way in; the same controls stay below the photo as a second route */
  body.sheet-on .dock,body.sheet-on .dock-panel{display:none!important}
}

/* h6: a product that is still loading */
.session-item.pending{opacity:.7;border-style:dotted}
.session-item.pending .si-meta::after{content:' \00b7 loading'}

/* ---- h6: compact on small and short screens --------------------------- */
.dock-close{display:none}
@media(max-width:600px),(max-height:520px){
  body.shopper .dock-panel{padding-top:30px}
  .dock-close{display:flex;position:absolute;top:2px;right:4px;width:44px;height:30px;align-items:center;justify-content:center;border:0;background:none;color:var(--ink-2,#555);cursor:pointer}
  .dock-close svg{width:16px;height:16px}
  /* the badges on the photo: small, so the room stays visible */
  #estimate-badge{font-size:10.5px;padding:3px 8px;left:8px;bottom:8px}
  .sample-tag{font-size:9.5px;padding:3px 7px;letter-spacing:.04em;top:8px;left:8px}
  .session-item{min-height:44px;padding:4px 10px}
  .session-item .si-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .session-item .si-meta{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* a phone on its side: the dock is lower, the panel opens beside the photo, not over it */
@media(max-height:520px) and (orientation:landscape){
  body.shopper .dock{padding:3px 6px calc(3px + env(safe-area-inset-bottom))}
  .dock-b{min-height:44px;flex-direction:row;gap:6px;font-size:12px}
  .dock-b svg{width:18px;height:18px}
  body.shopper .dock-panel{left:auto;right:8px;top:8px;bottom:calc(var(--dock-h,48px) + 6px);width:min(42vw,360px);overflow:auto}
  #dock-rugs-panel{max-height:none}
  body.dock-on:not(.sheet-on) #stage{width:min(calc(100vw - var(--dockpanel-w,0px) - 24px), calc((var(--vvh,100vh) - var(--dock-h,48px) - 16px) * var(--stage-ar,.75)));margin-left:8px;margin-right:auto}
  body.dock-on{padding-bottom:calc(var(--dock-h,48px) + 10px)}
  /* the status lines above the photo stay short */
  body.dock-on .shopper-summary #shopper-size-status,body.dock-on .shopper-summary .shopper-more{display:none}
}

.scale-pill[data-state="modelled"]{background:#dce9f3;color:#1d4f73}
.gcard.room img{background:#e9e6df}

/* the card title sits above the darkening gradient, so it stays white */
.gcard.room .gname{z-index:1}

/* Same-store catalogue. The large texture loads only when a rug is selected. */
.store-catalogue .session-panel{border-style:solid}
.store-catalogue #session-list{max-height:48vh;overflow:auto;padding:3px}
.rug-search{width:100%;min-height:44px;border:1px solid #cbd3c9;border-radius:10px;padding:10px;font:inherit;margin:8px 0}
.product-card{grid-template-columns:56px minmax(0,1fr);column-gap:10px}
.product-card img{grid-row:1 / span 2;object-fit:contain;background:#eeeae2;border-radius:6px}
.product-card .si-name,.product-card .si-meta{grid-column:2;white-space:normal}
@media(max-width:600px),(max-height:520px){.store-catalogue #session-panel{display:none}.store-catalogue .dock{overflow-x:auto;justify-content:flex-start}.store-catalogue .dock-b{flex:1 0 46px}}