/* ==========================================================================
   THE WARDROBE - Marketplace only (2026-10-02). The figure before the
   product page: the wardrobe the owner drew the page from, with the same
   grid. The name on the top shelf and the clothes on the rail are the title
   and the gallery, the glass shelves the five how-to steps, the two door
   handles Copy Script and Copy URL, the plaque the rating, the folded stack
   the description, the two drawers the two similar products. The dashed line
   is the fold.

   - The drawing is ONE inline SVG (aria-hidden), in scene units 1000 x 660.
     The pins and notes are HTML placed in the same units through --x/--y, so
     the numbers and the drawing cannot drift. The notes are the text a
     screen reader gets; the drawing says nothing the notes do not.
   - The pins carry the numbers of the product page's own parts (01-05 in its
     caption), and the screenshot after it carries the same pins, so the two
     can be read one against the other.
   - Wood, clothes and brass are pinned in both themes, like a photograph.
     Only the room turns: wall, floor, skirting, the leader lines.
   - Below 900px the notes leave the wall and become a list under the
     drawing, and the drawing crops to the wardrobe (--wd-x0/--wd-vw): at a
     phone's width a 13px note beside a wardrobe is 7px.
   ========================================================================== */

.wd{
  --wd-wall:#f5f0e8;--wd-wall-2:#ebe3d5;--wd-light:#fffdf8;
  --wd-floor:#dcc9ae;--wd-floor-2:#c8b291;
  --wd-skirt:#faf7f1;--wd-skirt-line:rgba(70,50,30,.2);--wd-plank:rgba(90,60,30,.13);
  --wd-lead:#8a7f70;
  --wd-vw:1000;--wd-x0:0;
}
html.dark .wd{
  --wd-wall:#211f1b;--wd-wall-2:#1a1815;--wd-light:#3b3427;
  --wd-floor:#2d271f;--wd-floor-2:#221d17;
  --wd-skirt:#2b2824;--wd-skirt-line:rgba(255,255,255,.08);--wd-plank:rgba(255,255,255,.05);
  --wd-lead:#9d9384;
}
.wd-s-wall{stop-color:var(--wd-wall)}
.wd-s-wall2{stop-color:var(--wd-wall-2)}
.wd-s-light{stop-color:var(--wd-light)}
.wd-s-floor{stop-color:var(--wd-floor)}
.wd-s-floor2{stop-color:var(--wd-floor-2)}
.wd-skirt{fill:var(--wd-skirt)}
.wd-skirt-line{fill:var(--wd-skirt-line)}
.wd-plank{fill:var(--wd-plank)}
.wd-t{font-family:var(--sans)}

.wd-box{position:relative}
.wd-stage{position:relative;aspect-ratio:1000/660;border-radius:14px;overflow:hidden;background:var(--wd-wall);box-shadow:0 0 0 1px var(--line)}
.wd-art{position:absolute;top:0;left:calc(var(--wd-x0) / var(--wd-vw) * -100%);width:calc(1000 / var(--wd-vw) * 100%);height:100%;display:block}
.wd-fold-line{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:7 6}
.wd-lead{fill:none;stroke:var(--wd-lead);stroke-width:1}
.wd-lead-end{fill:var(--wd-lead)}

/* Pins - the part numbers, on the drawing and on the screenshot. Centred
   with margins, never a transform: .rise owns transform. */
.wd-pin{position:absolute;left:calc((var(--x) - var(--wd-x0)) / var(--wd-vw) * 100%);top:calc(var(--y) / 660 * 100%);
  width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:grid;place-items:center;
  font:700 10.5px/1 var(--sans);letter-spacing:.02em;color:var(--on-acc);background:var(--acc-fill);
  box-shadow:0 0 0 2.5px #fff,0 4px 10px -2px rgba(0,0,0,.45);pointer-events:none}
.wd-pin--dot{width:12px;height:12px;margin:-6px 0 0 -6px}
.wd-pin--shot{left:var(--px);top:var(--py)}

/* The notes on the wall, beside what they point at. */
.wd-notes{position:absolute;left:0;top:0;width:100%;aspect-ratio:1000/660;margin:0;padding:0;list-style:none;pointer-events:none}
.wd-note{position:absolute;top:calc(var(--y) / 660 * 100%);width:17.6%;display:flex;align-items:flex-start;gap:7px;font:500 13px/1.42 var(--sans);color:var(--text)}
.wd-note--l{left:2%}
.wd-note--r{left:80.4%}
.wd-note b{flex:none;width:20px;height:20px;margin-top:-1px;border-radius:50%;display:grid;place-items:center;font:700 9.5px/1 var(--sans);color:var(--on-acc);background:var(--acc-fill)}
.wd-note span b{display:inline;width:auto;height:auto;margin:0;border-radius:0;background:none;font:inherit;font-weight:700;color:var(--ink)}
.wd-note .wd-dot{width:10px;height:10px;margin:5px 5px 0}
.wd-note--fold{left:80.4%;height:0;display:block}
.wd-note--fold span{position:absolute;left:0;width:100%;font:700 11px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.wd-f1{bottom:7px}
.wd-f2{top:7px}

@media (max-width:899px){
  .wd{--wd-vw:600;--wd-x0:200}
  .wd-stage{aspect-ratio:600/660}
  .wd-lead,.wd-lead-end{display:none}
  .wd-notes{position:static;aspect-ratio:auto;display:grid;gap:14px 24px;margin-top:18px;pointer-events:auto}
  .wd-note{position:static;width:auto;gap:10px;font-size:15px;line-height:1.5}
  .wd-note b{width:22px;height:22px;margin-top:0;font-size:10px}
  .wd-pin{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:9.5px}
  .wd-pin--dot{width:10px;height:10px;margin:-5px 0 0 -5px}
  .wd-note--fold{height:auto;display:flex;flex-direction:column;gap:2px;margin-left:10px;padding-left:20px;border-left:2px dashed var(--acc)}
  .wd-note--fold span{position:static;font-size:11.5px}
}
@media (min-width:560px) and (max-width:899px){
  .wd-notes{grid-template-columns:1fr 1fr}
}