/* ============================================================
   home.css: the home page's stage (owner-approved mock index-g,
   2026-11-10). A row of fitting rooms drawn as inline SVG: closed
   curtains edge to edge, the middle room half open, a rounded
   mirror hung centred on its back wall with half of it behind the
   curtain, «تفصيلة» alone as live text centred in the visible half
   (owner 2026-11-10), two
   wine bags on the floor. Wine curtains by day, pink at night.
   One drawing per layout (wide, and the tall one under 760px),
   scaled by --k (home.js sets it from the stage's width).
   Colours: the --room-*, --curtain-*, --mirror-* and --bag-*
   tokens in site.css.
   ============================================================ */

.q-stage{--k:.82;--H:780px;--ft:660;position:relative;width:100%;height:calc(var(--k) * var(--H));overflow:hidden;direction:ltr;
  margin-top:clamp(16px,3vw,48px);background:var(--wall)}
.q-floor{position:absolute;left:0;right:0;bottom:0;top:calc(var(--k) * var(--ft) * 1px);background:var(--floor);border-top:2px solid var(--floor-edge)}
.q-stage .props{position:absolute;top:0;left:50%;width:1440px;height:var(--H);transform:translateX(-50%) scale(var(--k));transform-origin:50% 0;pointer-events:none}
.q-stage .props.tall{display:none;width:720px}
.cb-svg{position:absolute;display:block;max-width:none;overflow:visible;user-select:none}

/* the drawing's parts */
.cb-svg .cb-in{fill:var(--room-in)}
.cb-svg .cb-skirt{fill:var(--room-skirt);stroke:var(--room-line);stroke-width:2}
.cb-svg .cb-ca{fill:var(--curtain-a)}
.cb-svg .cb-cb{fill:var(--curtain-b)}
.cb-svg .cb-fold{fill:none;stroke:var(--curtain-fold);stroke-opacity:var(--curtain-fold-o);stroke-width:1.6;stroke-linecap:round}
.cb-svg .cb-out{fill:none;stroke:var(--room-line);stroke-width:2.6;stroke-linejoin:round}
.cb-svg .cb-rail{stroke:var(--room-rail);stroke-width:4;stroke-linecap:round}
.cb-svg .cb-ring{fill:var(--room-ring);stroke:var(--room-line);stroke-width:1.8}
.cb-svg .cb-post{fill:var(--room-post);stroke:var(--room-line);stroke-width:2.6}
.cb-svg .cb-pelmet{fill:var(--room-pelmet);stroke:var(--room-line);stroke-width:2.6}
.cb-svg .cb-cap{stroke:var(--room-line);stroke-width:1.6;stroke-opacity:.7}
.cb-svg .cb-hang{stroke:var(--room-line);stroke-width:2}
.cb-svg .cb-hook{fill:var(--mirror-frame);stroke:var(--room-line);stroke-width:1.6}
.cb-svg .cb-frame{fill:var(--mirror-frame)}
.cb-svg .cb-glass{fill:var(--mirror-glass)}
.cb-svg .cb-shine{fill:none;stroke:var(--mirror-shine);stroke-width:3;stroke-linecap:round}
.cb-svg .cb-word{font-family:var(--d-ar);fill:var(--mirror-word)}

/* ---------- phones: the tall drawing ---------- */
@media (max-width:760px){
  .q-stage{--k:.444;--H:980px;--ft:790}
  .q-stage .props.wide{display:none}
  .q-stage .props.tall{display:block}
}

/* the slogan headline (owner 2026-11-10): one line on wide screens, broken after the comma on phones */
@media (min-width:761px){
  .q-slogan span{display:inline}
  .site-quiet .q-shop .q-slogan{line-height:1.25}
}