/* 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(65vw,1200px) + 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)}

/* 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)}
  .dr-low{--fr:9px}   /* a phone: only the frame at each edge, as above it, no wood */
  .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 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;--fr:14px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.07),transparent) var(--pad) 0/10px 100% no-repeat,
    linear-gradient(270deg,rgba(0,0,0,.07),transparent) calc(100% - var(--pad)) 0/10px 100% no-repeat,
    linear-gradient(90deg,#cfc7bd 0 calc(100% - 1px),#bdb5aa calc(100% - 1px)) calc(var(--pad) - var(--fr)) 0/var(--fr) 100% no-repeat,
    linear-gradient(90deg,#bdb5aa 0 1px,#cfc7bd 1px) calc(100% - var(--pad) + var(--fr)) 0/var(--fr) 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px,rgba(80,60,50,.06) 7px 8px,transparent 8px 13px) 0 0/calc(var(--pad) - var(--fr)) 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px,rgba(80,60,50,.06) 7px 8px,transparent 8px 13px) 100% 0/calc(var(--pad) - var(--fr)) 100% no-repeat,
    linear-gradient(#b9aea5,#b9aea5) 0 0/var(--pad) 100% no-repeat,
    linear-gradient(#b9aea5,#b9aea5) 100% 0/var(--pad) 100% no-repeat}   /* 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}