/* ==========================================================================
   IGGAK — the mirror
   One grid, two arrangements: side panel on desktop, stacked on phones.
   ========================================================================== */

html,body{height:100%}
body{overflow:hidden;overscroll-behavior:none}

.mirror{
  height:100vh;height:100svh;height:100dvh;
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"bar bar" "stage panel" "tray tray";
  padding-top:var(--safe-t);
}
.bar{grid-area:bar}.stage-wrap{grid-area:stage}.panel{grid-area:panel}.tray{grid-area:tray}

/* The .sheet wrapper only exists for phones. Dissolving it here keeps .tray
   and .panel as direct grid children, so the desktop layout is exactly what
   it was before the wrapper was introduced. */
.sheet{display:contents}
.grip{display:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ==========================================================================
   PHONES — the mirror is the point, so the stage keeps the whole viewport and
   everything else rides in a sheet over it.

   The old rule stacked bar/stage/tray/panel as four grid rows. With a 44svh
   panel and a ~120px tray, the stage was left roughly a third of the screen
   in portrait, which is why the face came out small and the controls felt
   crammed. Now the stage is full height and the sheet overlaps it.
   ========================================================================== */

@media(max-width:920px){
  .mirror{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"bar" "stage";
  }

  /* How much of the sheet shows when collapsed: grip + brands + rail.
     Enough to change frame and size without ever opening it. */
  :root{--peek:10.5rem}

  .sheet{
    display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:8;
    max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--black);
    border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;
    transform:translateY(calc(100% - var(--peek) - var(--safe-b)));
    transition:transform .3s var(--ease);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .sheet[data-open=true]{transform:translateY(0)}

  /* Collapsed, the sheet must not swallow vertical scroll it cannot use. */
  .sheet:not([data-open=true]){overflow-y:hidden}

  .grip{
    display:block;position:sticky;top:0;z-index:2;
    width:100%;padding:.6rem 0 .45rem;border:0;
    background:var(--black);cursor:pointer;
    touch-action:manipulation;
  }
  .grip::before{
    content:'';display:block;width:36px;height:4px;margin:0 auto;
    border-radius:999px;background:rgba(237,230,217,.3);
  }
  .sheet[data-open=true] .grip::before{background:var(--bronze)}

  /* Leave room for the collapsed sheet so the face is never behind it.
     Absolute children of .stage-wrap resolve against its PADDING box, whose
     bottom edge is still the bottom of the viewport — so these offsets are
     measured from there, not from the padded content edge. Hence each one
     clears --peek in full rather than the reduced padding. */
  .stage-wrap{padding-bottom:calc(var(--peek) - 1.5rem)}
  /* + ‎--safe-b‎: برگه‌ی جمع‌شده آن‌قدر هم بالاتر می‌آید (‎transform‎ِ بالا). */
  .curtain{padding-bottom:calc(var(--peek) + var(--safe-b) + 1.5rem)}
  .hint{bottom:calc(var(--peek) + var(--safe-b) + .7rem)}
  /* stacked clear of the hint pill, which is ~2rem tall */
  .stage-btns{top:auto;bottom:calc(var(--peek) + var(--safe-b) + 3.4rem);right:.7rem}

  .panel{max-height:none;overflow:visible;
    padding:.9rem 1rem calc(1.4rem + var(--safe-b))}
  .tray{background:transparent}
}

/* Landscape phone: a bottom sheet would leave no mirror at all, so the sheet
   becomes a side panel instead and the stage keeps the rest. */
@media(max-width:920px) and (orientation:landscape) and (max-height:540px){
  .mirror{grid-template-columns:minmax(0,1fr) 300px;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"bar bar" "stage sheet"}
  .sheet{grid-area:sheet;position:static;transform:none;max-height:none;
    overflow-y:auto;border-radius:0;border-top:0;border-left:1px solid var(--line)}
  .sheet:not([data-open=true]){overflow-y:auto}
  .grip{display:none}
  .stage-wrap{padding-bottom:0}
  .hint{bottom:.8rem}
  .stage-btns{top:.7rem;bottom:auto}
}

/* --- bar ----------------------------------------------------------------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.65rem 1rem;background:var(--black)}
.bar .back,.bar .note{font-family:var(--data);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-dim);text-decoration:none;white-space:nowrap}
.bar .back:hover{color:var(--bronze)}
@media(max-width:640px){.bar .note{display:none}}

/* --- stage --------------------------------------------------------------- */
.stage-wrap{position:relative;background:#040506;display:grid;place-items:center;
  overflow:hidden;min-height:0}
#ig-view,#ig-gl{max-width:100%;max-height:100%}
#ig-gl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#ig-view[hidden],#ig-gl[hidden]{display:none}
#ig-cam{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* debug overlay sits on the stage and mirrors with it */
.dbg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;max-width:100%;max-height:100%}
.dbg[hidden]{display:none}

/* calibration panel — development only, opened with ?calibrate=1 */
.calpanel{position:absolute;left:.7rem;bottom:.7rem;z-index:5;width:min(300px,80vw);
  background:rgba(8,9,10,.92);border:1px solid var(--line);border-radius:2px;
  padding:.75rem .85rem;display:grid;gap:.4rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  max-height:70%;overflow-y:auto}
.calpanel[hidden]{display:none}
.calrow{display:grid;grid-template-columns:56px 1fr 46px;gap:.5rem;align-items:center;
  font-family:var(--data);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-dim)}
.calrow input[type=range]{width:100%;accent-color:var(--bronze);height:22px}
.calrow select{background:var(--panel);color:var(--bronze);border:1px solid var(--line);
  font-family:var(--data);font-size:.6rem;padding:.25em;border-radius:2px}
.calrow b{color:var(--bronze);font-weight:600;text-align:right}
.calacts{display:flex;gap:.35rem;margin-top:.35rem}
.calacts .btn{flex:1;padding:.6em .4rem;font-size:.55rem;letter-spacing:.08em;min-height:34px}
.calout{font-family:var(--data);font-size:.55rem;color:var(--bronze);background:var(--panel);
  border:1px solid var(--line);padding:.5rem;margin:.4rem 0 0;white-space:pre-wrap;
  max-height:120px;overflow:auto}

/* rail thumbnail slot: SVG placeholder, replaced by a render of the real GLB */
.rthumb{display:block;width:100%}
.rthumb img{width:100%;height:auto;display:block}

.stage-btns{position:absolute;top:.7rem;right:.7rem;z-index:4;display:grid;gap:.5rem}
.icon{width:46px;height:46px;border-radius:50%;border:1px solid rgba(200,145,89,.35);
  background:rgba(8,9,10,.7);color:var(--bronze);display:grid;place-items:center;
  cursor:pointer;font-size:1.05rem;line-height:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.icon:active{background:var(--bronze);color:var(--black)}
.icon[hidden]{display:none}

.curtain{position:absolute;inset:0;z-index:6;display:grid;place-content:center;
  justify-items:center;gap:1.1rem;text-align:center;padding:1.5rem;
  background:rgba(8,9,10,.95);overflow-y:auto}
.curtain[hidden]{display:none}
.curtain h2{font-family:var(--display);font-size:clamp(1.4rem,5vw,2.2rem);margin:0;
  text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.curtain p{max-width:44ch;color:var(--bone-dim);margin:0;font-size:.88rem;line-height:1.65}
.curtain code{font-family:var(--data);font-size:.82em;color:var(--bronze)}
.spin{width:30px;height:30px;border-radius:50%;border:2px solid rgba(200,145,89,.22);
  border-top-color:var(--bronze);animation:sp .9s linear infinite}
.spin[hidden]{display:none}
@keyframes sp{to{transform:rotate(360deg)}}

.hint{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);z-index:4;
  max-width:90%;font-family:var(--data);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;text-align:center;padding:.6em 1.05em;border-radius:999px;
  background:rgba(8,9,10,.85);border:1px solid rgba(200,145,89,.28);
  color:var(--bronze);margin:0}
.hint[hidden]{display:none}

/* کانتکستِ WebGL از دست رفت: پیغام و دکمه‌ی تازه کردن، بالای تصویر. */
.gl-lost{position:absolute;top:.8rem;inset-inline:.8rem;margin-inline:auto;width:fit-content;z-index:6;
  display:flex;align-items:center;gap:.7rem;line-height:1.5;
  padding:.5rem .6rem .5rem 1rem;border-radius:999px;background:rgba(8,9,10,.92);
  border:1px solid rgba(210,116,63,.55);color:var(--bone);font-size:.82rem}
.gl-lost .btn{padding:.35em .9em;font-size:.76rem;white-space:nowrap}

/* diagnostics, shown only when something fails */
.diag{font-family:var(--data);font-size:.6rem;line-height:1.8;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:.8rem 1rem;max-width:min(90vw,520px);color:var(--bone-dim);
  max-height:34vh;overflow:auto;white-space:pre-wrap;word-break:break-all}
.diag .ok{color:var(--bronze)}
.diag .bad{color:var(--warn)}
.diag[hidden]{display:none}

/* --- panel --------------------------------------------------------------- */
.panel{background:var(--black);padding:1rem;overflow-y:auto;display:grid;
  align-content:start;gap:.9rem;-webkit-overflow-scrolling:touch}
/* mobile padding + height now come from the .sheet block above */

.pname{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.panel h2{font-family:var(--display);font-size:1.2rem;margin:.15rem 0 0;font-weight:400;
  text-transform:uppercase;letter-spacing:.07em;line-height:1.2}
.sub{margin:.25rem 0 0;font-size:.78rem;color:var(--bone-dim)}

/* ── رنگ‌بندی‌های همین مدل ────────────────────────────────────────────
   سواچ‌ها مربع‌اند و نه دایره: عکسِ سواچِ لوکسوتیکا خودش مربع است و
   بریدنش به دایره، لبه‌ی رنگیِ فریم را می‌خورد. */
.colours{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-block-end:.5rem}
.colours[hidden]{display:none}
.cwbtn{display:grid;place-items:center;inline-size:34px;block-size:34px;padding:2px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:2px;cursor:pointer;
  overflow:hidden;transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.cwbtn img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.cwbtn .dot{inline-size:100%;block-size:100%;display:block}
.cwbtn:hover{border-color:var(--bronze)}
.cwbtn:focus-visible{outline:2px solid var(--bronze);outline-offset:1px}
.cwbtn[aria-pressed=true]{border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze) inset}
/* بدونِ مدلِ سه‌بعدی: هست، ولی اینجا دیدنی نیست. کم‌رنگ و با خطِ اریب،
   تا از «انتخاب‌شدنی ولی خاموش» فرق کند. */
.cwbtn.is-off{opacity:.42;position:relative}
.cwbtn.is-off::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top left,transparent calc(50% - .5px),
    var(--bone-dim) calc(50% - .5px),var(--bone-dim) calc(50% + .5px),transparent calc(50% + .5px))}
.cwbtn.is-off:hover{opacity:.75}
@media(max-width:700px){.cwbtn{inline-size:40px;block-size:40px}}

.sizes{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.szbtn{font-family:var(--data);font-size:.62rem;letter-spacing:.08em;padding:.5em .85em;
  min-height:36px;border-radius:2px;border:1px solid rgba(237,230,217,.2);
  background:transparent;color:var(--bone-dim);cursor:pointer}
.szbtn[aria-pressed=true]{background:var(--bronze);border-color:var(--bronze);
  color:var(--black);font-weight:600}

.verdict{border:1px solid var(--bronze);padding:.8rem .9rem;display:grid;gap:.28rem;border-radius:2px}
.verdict[data-tone=ok]{border-color:rgba(200,145,89,.45)}
.verdict[data-tone=warn]{border-color:var(--warn)}
.verdict strong{font-family:var(--display);font-size:1.05rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em}
.verdict small{font-family:var(--data);font-size:.58rem;letter-spacing:.04em;
  color:var(--bone-dim);line-height:1.75}

details.more{border:1px solid var(--line);border-radius:2px}
details.more>summary{list-style:none;cursor:pointer;padding:.7rem .85rem;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;font-family:var(--data);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:'+';color:var(--bronze);font-size:1rem}
details.more[open]>summary::after{content:'\2013'}
.more-body{padding:0 .85rem .85rem;display:grid;gap:.9rem}

.mrow{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.5rem 0;border-bottom:1px dashed rgba(200,145,89,.14);
  font-family:var(--data);font-size:.6rem;letter-spacing:.1em}
.mrow:last-child{border-bottom:0}
.mrow span{color:var(--bone-dim);text-transform:uppercase}
.mrow b{color:var(--bronze);font-weight:600;font-size:.8rem;letter-spacing:.02em}
.mrow b.pending{color:var(--bone-dim)}

.tune{display:grid;gap:.7rem}
.tune label{display:grid;gap:.3rem;font-family:var(--data);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.tune input[type=range]{width:100%;accent-color:var(--bronze);height:28px}
.acts{display:flex;flex-wrap:wrap;gap:.45rem}
.acts .btn{flex:1 1 130px;padding:.8em .9rem;font-size:.58rem;letter-spacing:.12em}
.foot{font-family:var(--data);font-size:.56rem;letter-spacing:.05em;line-height:1.9;
  color:rgba(237,230,217,.4);margin:0}

/* --- tray: brand filter + frame rail ------------------------------------- */
/* min-width:0 is the fix for the rail not scrolling on desktop.

   A grid item defaults to `min-width:auto`, which refuses to shrink below its
   content's min-content width. .rail's cards are `flex:0 0 140px` and cannot
   shrink, so .rail's min-content width was the sum of ALL of them. .tray and
   .rail therefore expanded to fit every card instead of clipping, which meant
   overflow-x:auto never engaged: scrollWidth === clientWidth, there was nothing
   to scroll, and setting scrollLeft did nothing. The whole grid overflowed and
   body{overflow:hidden} clipped it, so it merely LOOKED like a scroller.

   Mobile was unaffected because the sheet there is position:fixed with
   left/right pinned, which constrains the width by other means — which is
   exactly why it worked in device emulation and not on the desktop layout. */
.tray{display:grid;grid-template-rows:auto auto;min-height:0;min-width:0;
  background:var(--panel)}
.rail,.brands{min-width:0}
.brands{display:flex;gap:.4rem;overflow-x:auto;padding:.55rem .75rem;
  border-bottom:1px solid rgba(200,145,89,.14);-webkit-overflow-scrolling:touch}
.brands::-webkit-scrollbar{display:none}

.rail{display:flex;gap:1px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;background:var(--line)}
.rail{scrollbar-width:none}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:rgba(200,145,89,.35)}
.ritem{flex:0 0 140px;scroll-snap-align:start;background:var(--black);border:0;
  padding:.6rem .7rem;display:grid;gap:.2rem;justify-items:start;cursor:pointer;
  color:inherit;text-align:left}
.ritem[aria-pressed=true]{background:var(--ice-deep)}
.ritem svg{width:100%;height:auto}
/* The thumbnail starts as inline SVG and is swapped for a rendered <img>.
   Without a reserved box the lazy image lays out at 0x0 first and shifts
   everything when it arrives — 92 of them was the CLS warning in the console. */
.rthumb{display:block;width:100%;aspect-ratio:2 / 1}
.rthumb img,.rthumb svg{width:100%;height:100%;object-fit:contain;display:block}
.rh{font-family:var(--data);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.rn{font-size:.73rem;font-weight:600;line-height:1.2}
.rs{font-family:var(--data);font-size:.52rem;color:var(--bronze);letter-spacing:.03em}
@media(max-width:920px){
  .ritem{flex:0 0 122px;padding:.5rem .6rem;min-height:44px}
  .brands{padding:.5rem .75rem;gap:.45rem}
  .szbtn{min-height:44px;font-size:.66rem;padding:.5em 1em}
  .icon{width:52px;height:52px;font-size:1.15rem}
  /* Fade the trailing edge so a clipped card reads as "scrolls", not "broken" */
  .rail,.brands{
    -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0 92%,transparent 100%);
  }
}

/* ---------------------------------------------------------------- admin panel
   Only ever rendered under ?admin=1. The customer build never sees it, so
   these rules are inert in normal use. */
#ig-adminWrap{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem}
#ig-adminWrap .stamp{margin:.85rem 0 .4rem;color:var(--bronze)}
#ig-adminWrap .stamp:first-child{margin-top:0}
#ig-adminWrap .calrow{display:flex;align-items:center;gap:.5rem;margin:.3rem 0}
#ig-adminWrap .calrow>span{flex:0 0 5.5rem;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-dim,#8e8880)}
#ig-adminWrap select,#ig-adminWrap input[type=range]{flex:1;min-width:0}
#ig-adminWrap input[type=color]{flex:0 0 3rem;height:28px;padding:0;border:1px solid var(--line);
  background:none;cursor:pointer}
#ig-adminWrap input[type=checkbox]{flex:0 0 auto;width:18px;height:18px}
#ig-adminWrap .calrow>b{flex:0 0 2.6rem;text-align:right;font-family:var(--mono,monospace);
  font-size:.68rem;color:var(--bronze)}
#ig-adminWrap .calacts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
#ig-adminWrap .calout{max-height:30vh;overflow:auto;font-size:.6rem;margin-top:.6rem}
@media(max-width:920px){
  #ig-adminWrap .calrow>span{flex-basis:4.5rem}
  #ig-adminWrap select,#ig-adminWrap input[type=range]{min-height:32px}
}

/* Admin toggle in the bar. Revealed by mirror.js only under ?admin=1. */
.adminlink{margin-left:.8rem;padding:.3em .7em;border:1px solid var(--bronze);
  border-radius:2px;font-family:var(--mono,monospace);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);
  text-decoration:none;white-space:nowrap}
.adminlink[hidden]{display:none}
@media(hover:hover){.adminlink:hover{background:var(--bronze);color:var(--black,#0a0a0a)}}

/* Environment picker in the customer panel. */
.envpick{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 .2rem}
.envpick>span{flex:0 0 auto;font-family:var(--mono,monospace);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.envpick select{flex:1;min-width:0;min-height:40px;background:transparent;
  color:var(--paper,#f2efe9);border:1px solid var(--line);border-radius:2px;
  padding:.35em .5em;font-family:var(--mono,monospace);font-size:.72rem}
@media(max-width:920px){.envpick select{min-height:44px}}

/* --------------------------------------------------------- drag to scroll
   The rails pan with a mouse via pointer events in mirror.js. These rules stop
   the browser fighting that: text selection and native image drag both start
   on mousedown and would otherwise hijack the gesture. */
.rail,.brands{cursor:grab;touch-action:pan-x}
.rail.dragging,.brands.dragging{
  cursor:grabbing;user-select:none;scroll-behavior:auto;
  /* scroll-snap-type on .rail pulls scrollLeft back to the nearest card after
     every assignment. A JS drag sets scrollLeft on each pointermove, so snap
     was undoing the drag in real time and it looked like nothing happened.
     Snap is switched off for the duration and restored on release. */
  scroll-snap-type:none;
}
.rail.dragging .ritem{scroll-snap-align:none}
/* Deliberately NOT pointer-events:none on the children.

   That rule broke every click on both rails: with children non-interactive, the
   mousedown/mouseup target became the rail itself, so the delegated handlers'
   e.target.closest('.ritem') / closest('.chip') matched nothing and neither
   frame nor house could be selected. A genuine drag is already prevented from
   counting as a click by the swallow in mirror.js, which is the correct place
   for it — that check knows how far the pointer actually travelled. */
/* Thumbnails are inline SVG inside buttons; both are draggable by default. */
.rail img,.rail svg,.brands img,.brands svg,.ritem{-webkit-user-drag:none;user-select:none}

/* --------------------------------------------------------------- dropdowns
   The option list of a native <select> is drawn by the OS, not the page, so
   almost no CSS reaches it. `color-scheme: dark` is the one property Chrome
   and Edge do honour — it tells the platform to draw the popup with its dark
   widgets, which is why the list came out white on a black page without it.
   The option rules below cover the browsers that do style the list. */
:root{color-scheme:dark}
select,#ig-adminWrap select,.envpick select{color-scheme:dark}
select option,select optgroup{
  background-color:#141312;
  color:#f2efe9;
}
select option:checked,select option:hover{
  background-color:#3a2c1c;
  color:#e8c79a;
}

/* --- لینک ناشناخته از ووکامرس ---------------------------------------------
   یک SKU غلط نباید بی‌صدا فریم دیگری نشان دهد. */
.skuwarn{
  position:absolute;inset-inline:0;top:0;z-index:9;margin:0;
  /* روی گوشی بالای برگه، درست روی دستگیره می‌نشیند؛ بی‌این، لمسِ دستگیره
     به هشدار می‌خورد و برگه باز نمی‌شد. هشدار چیزِ کلیک‌خوردنی ندارد. */
  pointer-events:none;
  padding:.8em 1.2em;text-align:center;
  background:var(--warn);color:var(--black);
  font-family:var(--data);font-size:.72rem;
}
.panel .buy{margin-top:.9rem;width:100%}

/* --- برگشت به صفحه‌ی محصول ----------------------------------------------
   «→ جزئیات فریم» حالا راهِ اصلیِ بیرون رفتن است؛ پررنگ‌تر از یادداشت،
   و روی گوشی دستِ کم ۴۴ پیکسل برای لمس. */
.bar .back{display:inline-flex;align-items:center;min-height:32px;color:var(--bronze)}
.bar .back:hover,.bar .back:focus-visible{color:var(--bronze-lit)}
@media(max-width:920px){
  .bar .back{min-height:44px;padding-inline:.5rem;margin-inline-start:-.5rem;
    font-size:.68rem;letter-spacing:.08em}
}

/* --- میزِ زیرِ آینه (js/mirror.js: paintRail) --------------------------- */
.tray-head{display:flex;align-items:center;gap:.6rem;min-width:0;
  padding:.45rem .75rem;border-bottom:1px solid rgba(200,145,89,.14)}
.tray-label{font-size:.72rem;color:var(--bone-dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.tray-msg{flex:1 1 auto;min-width:0;font-size:.7rem;color:var(--bronze-lit);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-link{flex:0 0 auto;min-height:32px;padding:.25em .8em;border-radius:999px;cursor:pointer;
  border:1px solid rgba(200,145,89,.32);background:transparent;color:var(--bronze);
  font:inherit;font-size:.7rem;white-space:nowrap}
.tray-link[hidden]{display:none}
@media(hover:hover){.tray-link:hover{background:var(--bronze);color:var(--black)}}
.tray-link:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* کارت = دکمه‌ی فریم + (اختیاری) «×»/«+» کنارش. دکمه در دکمه نامعتبر است،
   پس «×» خواهرِ ‎.ritem‎ است و روی گوشه‌اش می‌نشیند. */
.rcard{position:relative;flex:0 0 140px;display:flex;scroll-snap-align:start;background:var(--black)}
.rcard>.ritem{flex:1 1 auto;min-width:0}
.rail.dragging .rcard{scroll-snap-align:none}
.rx{position:absolute;top:.3rem;inset-inline-end:.3rem;z-index:1;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;padding:0;
  border:1px solid rgba(237,230,217,.22);background:rgba(8,9,10,.82);
  color:var(--bone-dim);font-size:1rem;line-height:1;cursor:pointer}
/* ناحیه‌ی لمس بزرگ‌تر از دایره‌ی دیدنی (۴۴ پیکسل روی گوشی). */
.rx::before{content:'';position:absolute;inset:-6px}
.rx.rplus{color:var(--bronze);border-color:rgba(200,145,89,.45)}
@media(hover:hover){
  .rx:hover{background:var(--warn);border-color:var(--warn);color:var(--black)}
  .rx.rplus:hover{background:var(--bronze);border-color:var(--bronze)}
}
.rx:focus-visible,.radd:focus-visible,.ritem:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px}

.radd{flex:0 0 120px;display:grid;place-content:center;justify-items:center;gap:.25rem;
  padding:.6rem .7rem;border:0;background:var(--black);color:var(--bronze);cursor:pointer;
  font:inherit;font-size:.72rem;text-align:center;scroll-snap-align:start}
.radd-plus{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px dashed rgba(200,145,89,.55);font-size:1.15rem;line-height:1}
.radd small{font-size:.62rem;color:var(--bone-dim)}
@media(hover:hover){.radd:hover .radd-plus{background:var(--bronze);color:var(--black);border-style:solid}}

@media(max-width:920px){
  .rcard{flex:0 0 122px}
  .rx{width:30px;height:30px;top:.2rem;inset-inline-end:.2rem}
  .rx::before{inset:-7px}
  .radd{flex:0 0 108px;min-height:44px}
  .tray-head{padding:.35rem .75rem}
  .tray-link{min-height:36px}
  /* جای تنگ: پیغام (اگر هست) جای دکمه‌ها را می‌گیرد تا خوانده شود. */
  .tray-msg:not(:empty) ~ .tray-link{display:none}
}

/* --- پنجره‌ی جست‌وجو (js/mirror-picker.js) -------------------------------
   ‎<dialog>‎ در لایه‌ی بالاست؛ روی برگه‌ی گوشی (‎.sheet‎، z-index ۸) هم
   بی‌نیاز به ‎z-index‎ می‌نشیند. */
.pk{padding:0;border:1px solid var(--line);border-radius:6px;background:var(--black);color:var(--bone);
  width:min(940px,94vw);height:min(660px,88vh);height:min(660px,88dvh);max-width:none;max-height:none;
  overflow:hidden}
.pk:not([open]){display:none}
.pk::backdrop{background:rgba(4,5,6,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pk-box{height:100%;display:grid;grid-template-rows:auto auto auto auto auto minmax(0,1fr)}
.pk-head{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem .5rem}
.pk-head h2{margin:0;font-size:1rem;font-weight:600}
.pk-desk{flex:1;font-size:.72rem;color:var(--bone-dim)}
.pk-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--bone);font-size:1.3rem;line-height:1;cursor:pointer}
.pk-x:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.pk-search{padding:0 1rem .5rem;position:relative}
/* دکمه‌ی پاک‌کردن خودمان: ‎×‎ِ بومیِ type=search روی هر مرورگر فرق دارد و
   روی اندروید کوچک‌تر از انگشت است. */
.pk-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pk-clear{position:absolute;inset-inline-end:1.25rem;top:50%;transform:translateY(calc(-50% - .25rem));
  width:36px;height:36px;border-radius:50%;border:0;background:rgba(200,145,89,.14);color:var(--bone);
  font-size:1.1rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.pk-clear[hidden]{display:none}
.pk-search input{padding-inline-end:3rem}
/* پیشنهادهای تکمیلِ خودکار */
.pk-sug{display:flex;gap:.35rem;padding:0 1rem .5rem;overflow-x:auto;scrollbar-width:none}
.pk-sug::-webkit-scrollbar{display:none}
.pk-sug[hidden],.pk-sug:empty{display:none}
.pk-s{flex:0 0 auto;min-height:36px;padding:0 .85rem;border-radius:999px;border:1px dashed rgba(200,145,89,.45);
  background:transparent;color:var(--bone);font:inherit;font-size:.8rem;cursor:pointer;white-space:nowrap}
.pk-s::before{content:"\2315";margin-inline-end:.35rem;opacity:.6}
.pk mark{background:transparent;color:var(--bronze-lit);font-weight:700}
.pk-sec{margin:.6rem .4rem .25rem;font-size:.68rem;color:var(--bronze);letter-spacing:.04em}
.pk-sec:first-child{margin-top:.1rem}
/* ۱۶ پیکسل یا بیشتر: کمتر از این، آیفون روی فوکوس زوم می‌کند. */
.pk-search input{width:100%;min-height:48px;padding:.5em .9em;border-radius:8px;
  border:1px solid rgba(200,145,89,.35);background:var(--panel);color:var(--bone);
  font:inherit;font-size:16px}
.pk-search input:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 2px rgba(200,145,89,.25)}
.pk-brands{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1rem .5rem;max-height:6.2rem;overflow-y:auto}
.pk-n{opacity:.6}
.pk-msg{margin:0;padding:0 1rem;font-size:.75rem;color:var(--bronze-lit)}
.pk-msg:not(:empty){padding-bottom:.4rem}

.pk-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:0;border-top:1px solid var(--line)}
.pk-results{overflow-y:auto;min-height:0;padding:.5rem .6rem 1rem;overscroll-behavior:contain}
.pk-count{margin:.1rem .4rem .4rem;font-size:.68rem;color:var(--bone-dim)}
.pk-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pk-empty{padding:1.2rem .6rem;color:var(--bone-dim);font-size:.82rem;line-height:1.8}
.pk-item{width:100%;display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:.8rem;
  padding:.45rem .6rem;min-height:56px;border:1px solid transparent;border-radius:4px;
  background:var(--panel);color:inherit;font:inherit;text-align:start;cursor:pointer}
.pk-item[aria-pressed=true]{border-color:var(--bronze);background:var(--ice-deep)}
@media(hover:hover){.pk-item:hover{border-color:rgba(200,145,89,.45)}}
.pk-item:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px}
.pk-ithumb svg{width:96px;height:auto;display:block}
.pk-itext{display:grid;gap:.1rem;min-width:0}
.pk-ih{font-size:.62rem;color:var(--bone-dim);letter-spacing:.06em}
.pk-in{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-ic{font-size:.7rem;color:var(--bone-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-tags{display:grid;gap:.2rem;justify-items:end}
.pk-tag{font-size:.6rem;padding:.15em .6em;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(200,145,89,.45);color:var(--bronze-lit)}
.pk-tag.is-face{background:var(--bronze);border-color:var(--bronze);color:var(--black)}
.pk-more{margin:.8rem auto 0;display:flex}
.pk-more[hidden]{display:none}

.pk-prev{overflow-y:auto;min-height:0;padding:1rem;border-inline-start:1px solid var(--line);
  background:var(--panel);display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:.35rem}
.pk-hint{margin:2rem 0;color:var(--bone-dim);font-size:.82rem;line-height:1.8;text-align:center}
.pk-back{display:none}
.pk-pthumb{aspect-ratio:2 / 1;display:grid;place-items:center;background:var(--black);border-radius:4px;
  margin-bottom:.5rem}
.pk-pthumb img,.pk-pthumb svg{width:100%;height:100%;object-fit:contain;display:block}
.pk-ph{margin:0;font-size:.68rem;color:var(--bone-dim);letter-spacing:.08em}
.pk-pn{margin:0;font-size:1.1rem;font-weight:600}
.pk-pc{margin:0;font-size:.78rem;color:var(--bone-dim)}
.pk-pm{margin:.3rem 0 .5rem;display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  font-size:.78rem;color:var(--bronze)}
.pk-price{color:var(--bone)}
.pk-acts{display:grid;gap:.45rem}
.pk-acts .btn{width:100%}
.pk-acts .btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.pk-link{justify-self:center;padding:.6rem .4rem;min-height:44px;display:inline-flex;align-items:center;
  color:var(--bronze);font-size:.78rem;text-decoration:none}
.pk-link:hover{color:var(--bronze-lit);text-decoration:underline}
.pk-note{margin:.2rem 0 0;font-size:.72rem;color:var(--bone-dim);line-height:1.7}
.pk-note.is-warn{color:var(--warn)}

/* گوشی: تمام‌صفحه، و پیش‌نمایش جای فهرست را می‌گیرد (با «بازگشت»). */
@media(max-width:700px){
  /* ‎--pk-vh‎ / ‎--pk-top‎ از ‎visualViewport‎ (js/mirror-picker.js): با صفحه‌کلیدِ
     باز، پنجره به اندازه‌ی جای خالیِ بالای آن کوچک می‌شود. */
  .pk{width:100vw;height:100vh;height:var(--pk-vh,100dvh);border:0;border-radius:0;margin:0;
    inset:var(--pk-top,0) 0 auto 0;max-height:none;
    padding-top:var(--safe-t);padding-bottom:0}
  .pk-head{padding:.5rem 1rem .35rem}
  .pk-body{grid-template-columns:1fr;position:relative}
  .pk-results{padding-bottom:calc(1rem + var(--safe-b))}
  /* صفحه‌کلید باز: جا را به نتیجه‌ها بده. */
  .pk.is-typing .pk-brands,.pk.is-typing .pk-count,.pk.is-typing .pk-desk{display:none}

  /* پیش‌نمایش = برگه‌ای از پایین روی نتیجه‌ها؛ فهرست پشتش می‌ماند. */
  .pk-body::after{content:"";position:absolute;inset:0;background:rgba(4,5,6,.6);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .pk.has-prev .pk-body::after{opacity:1;pointer-events:auto}
  .pk-prev{position:absolute;inset:auto 0 0 0;z-index:1;max-height:88%;
    border-inline-start:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -12px 32px rgba(0,0,0,.5);padding:0 1rem calc(1rem + var(--safe-b));
    transform:translateY(105%);transition:transform .25s var(--ease);visibility:hidden}
  .pk.has-prev .pk-prev{transform:none;visibility:visible}
  .pk-back{display:grid;justify-items:center;gap:.3rem;width:100%;min-height:44px;padding:.5rem 0 .2rem;
    border:0;background:transparent;color:var(--bone-dim);font:inherit;font-size:.72rem;cursor:pointer;
    position:sticky;top:0;background:var(--panel);z-index:1}
  .pk-grab{width:40px;height:4px;border-radius:2px;background:rgba(236,230,218,.3)}
  .pk-pthumb{aspect-ratio:2.4 / 1;margin-bottom:.3rem}
  /* دو دکمه‌ی اصلی کنارِ هم، زیرِ شست. */
  .pk-acts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pk-acts .btn{min-width:0;padding-inline:.6rem;white-space:normal;line-height:1.3}
  .pk-acts .pk-link{grid-column:1 / -1}
  .pk-brands{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;scrollbar-width:none}
  .pk-brands::-webkit-scrollbar{display:none}
  .pk-item{grid-template-columns:72px minmax(0,1fr) auto;min-height:60px}
  .pk-ithumb svg{width:72px}
}
@media(prefers-reduced-motion:no-preference){
  .pk[open]{animation:pk-in .22s var(--ease)}
  @keyframes pk-in{from{opacity:0;transform:translateY(12px)}}
}