/* The rack in the shop's dressing (Deidih, 2026-11-04, after the owner's video of the shop): the rack keeps its shirts,
   its size and its movement; behind it stands a tall unit like the shop's, a pale frame around a dark grey wood back,
   a shelf over the rail and the rail running from side to side, on the shop's pale greige wood wall and white tiles.
   Painted with gradients and an SVG noise image only: no CSS filter on these layers (WebKit). */
.rk-wall{--frame:18px;--inner:calc(min(72vw,1320px) + 28px);   /* the rail and its two brackets fit inside the unit */
  background-color:#b9aea5;
  background-image:
    radial-gradient(120% 55% at 30% 0%,rgba(255,255,255,.26),transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 45%,rgba(40,30,25,.2) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px,rgba(80,60,50,.05) 9px 10px,transparent 10px 23px,rgba(255,255,255,.05) 23px 25px,transparent 25px 41px),
    repeating-linear-gradient(90deg,transparent 0 179px,rgba(60,45,40,.26) 179px 180px)}
.rk-wall::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .34 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:150px 420px}
.rk-rack,.rk-cap,.rk-all,.rk-avail{position:relative;z-index:1}   /* above the unit, which is painted behind them */

/* the unit: from under the header down to the floor */
.rk-wall>.rk-unit{position:absolute;z-index:0;top:calc(76px + env(safe-area-inset-top,0px));bottom:var(--frame);left:50%;
  width:calc(var(--inner) + var(--frame) * 2);transform:translateX(-50%);pointer-events:none;
  border:solid #cfc7bd;border-width:var(--frame) var(--frame) 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),14px 0 28px -10px rgba(40,30,25,.35),-14px 0 28px -10px rgba(40,30,25,.35),
    inset 0 0 0 1px rgba(0,0,0,.1),inset 14px 0 22px -12px rgba(0,0,0,.5),inset -14px 0 22px -12px rgba(0,0,0,.45),inset 0 18px 22px -14px rgba(0,0,0,.55);
  background:
    radial-gradient(55% 22% at 50% 30%,rgba(255,255,255,.12),transparent 70%),
    radial-gradient(70% 20% at 50% 68%,rgba(255,255,255,.07),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px,rgba(0,0,0,.06) 7px 8px,transparent 8px 17px,rgba(255,255,255,.03) 17px 18px,transparent 18px 29px),
    #4a4648}
.rk-unit::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .02' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:130px 360px}
/* the frame's edges catch the light */
.rk-unit::after{content:"";position:absolute;top:calc(var(--frame) * -1);bottom:0;left:calc(var(--frame) * -1);right:calc(var(--frame) * -1);pointer-events:none;
  border:solid rgba(255,255,255,.4);border-width:1px 1px 0}
/* the dressing goes on under the rack: a pale board across, the top of its lower part (.dr-low, js/dressing.js) */
.rk-wall>.rk-base{position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--frame);pointer-events:none;
  background:linear-gradient(180deg,#e3ddd4 0%,#d3ccc2 60%,#bdb5aa 100%);box-shadow:0 1px 0 rgba(0,0,0,.08)}

/* a pale shelf over the rail, side to side in the unit (it follows the rail, wherever the rack sits) */
.rk-rack::before{content:"";position:absolute;z-index:0;left:-14px;right:-14px;top:-58px;height:20px;pointer-events:none;
  background:linear-gradient(180deg,#e3ddd4 0%,#d3ccc2 55%,#b6aea3 100%);box-shadow:0 10px 16px rgba(0,0,0,.45)}
.rk-bar{background:linear-gradient(180deg,#f1efe9 0%,#b9b5ab 45%,#7f7b73 70%,#c9c5bb 100%);box-shadow:0 8px 10px -4px rgba(0,0,0,.55)}

/* the rack stands still from the first moment (Deidih, 2026-11-04: «فيكس لا يتحرك إذا دخلت أو خرجت»): the rail is there
   whole, the shirts appear on their hooks without sliding in, the name and buttons don't rise, and the row keeps the
   shirts' height before the photos arrive, so nothing jumps */
.rk-bar,.rk-cap,.rk-all,.rk-avail{animation:none!important}
.rk-go .rk-hit{animation:none!important;transition:opacity .35s ease}
.rk-row{min-height:calc(var(--W) * 1.36 + 14px)}
/* under the shop's spotlights the shirts throw a darker shadow on the grey wood */
.rk-fc img{filter:drop-shadow(6px 14px 10px rgba(0,0,0,.42))}

/* the name and the buttons are inside the unit now: light on the dark wood */
.rk-cap{color:#f4f1ec}
.rk-cap span{color:#c9c2b8}
.rk-all{background:#f4f1ec;color:#111}
.rk-all:hover{background:#fff}
.rk-avail{border-color:#f4f1ec;color:#f4f1ec}
.rk-avail:hover{background:#f4f1ec;color:#111}

@media (max-width:860px){
  .rk-wall{--frame:9px;--inner:calc(100vw - 18px)}
  .rk-wall .rk-fc img{filter:none!important}   /* WebKit paints a white box where a drop-shadowed shirt passes the screen's edge (the phone's rail slides); on the dark wood the shadow hardly showed */
  .rk-wall>.rk-unit{top:calc(64px + env(safe-area-inset-top,0px))}
  .rk-rack::before{left:0;right:0;top:-46px;height:16px}
  /* the compartment above the shelf is beige like the frame around it (Deidih, 2026-11-06): from the frame down to the
     shelf, over the dark wood and its shading. js/dressing.js sets --shelf (the shelf moves with the screen's height) */
  .rk-wall>.rk-top{display:block;position:absolute;z-index:0;pointer-events:none;left:50%;transform:translateX(-50%);width:var(--inner);
    top:calc(64px + var(--frame) + env(safe-area-inset-top,0px));height:var(--shelf,0px);background:#cfc7bd}
}
.rk-top{display:none}

/* the lower part of the dressing, from the rack down to the contact: only its two sides, a strip of the shop's pale wood
   and the frame in the page's side margins, the pieces in the middle stay on white. Ends on the shop's floor above the
   contact. js/dressing.js sets its top and height (they change with the kind shown in the shop). */
main{position:relative}
.dr-low{position:absolute;z-index:0;left:0;right:0;pointer-events:none;
  background:linear-gradient(#b9aea5,#b9aea5) 0 0/calc(var(--pad) * .5) 100% no-repeat,linear-gradient(#b9aea5,#b9aea5) 100% 0/calc(var(--pad) * .5) 100% no-repeat}   /* one plain strip of the shop's wood on each side (Deidih, 2026-11-04: no frame line), half the margin: white between it and the pieces */   /* the wood runs under the frame: no white line between them */
/* where the dressing ends: its plinth on the shop's white tiles, right above the contact */
#plaza-contact::before{content:"";display:block;height:44px;
  background:linear-gradient(180deg,#d3ccc2 0,#bdb5aa 14px,rgba(0,0,0,.2) 14px,transparent 30px),repeating-linear-gradient(90deg,transparent 0 119px,#d2d2d5 119px 120px) 0 14px/100% 30px no-repeat,#ececee}