/* صفحه اول: رگال تمام‌صفحه (کد اختصاصی ماریا، هم‌رفتار با رفرنس) */
body.home {
  height: 100svh; overflow: hidden;
  background-color: #e9e8e4;
  --ink: #151513;
  --paper: #e9e8e4;
}
.home-stage { position: fixed; inset: 0; }

/* هدر */
.h-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: max(10.4vh, 64px); padding: 0 2.2vw;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: opacity .35s;
}
.h-side { display: flex; gap: 22px; font-size: 12px; letter-spacing: .06em; color: var(--ink); }
.h-side.end { justify-content: flex-end; }
.h-side a:hover { opacity: .6; }
.h-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--purple); }
.h-logo b { font-size: max(4.3vh, 28px); font-weight: 800; }
.h-logo small { font-size: 9px; letter-spacing: .35em; color: #6c675f; margin-top: 3px; }
.h-cart .badge { position: static; display: inline; background: none; color: inherit; font-size: inherit; min-width: 0; height: auto; padding: 0; font-weight: 400; }
.h-cart .badge:not(:empty)::before { content: '('; } .h-cart .badge:not(:empty)::after { content: ')'; }

/* صحنه رگال */
.scene { position: absolute; inset: 0; transition: filter .5s, opacity .5s; }
.scene.dim { filter: blur(8px); opacity: .25; }
.rail { position: absolute; z-index: 200; transform: translateY(-50%); }
.rail-tube {
  position: absolute; inset: 0; border-radius: 99px;
  background:
    linear-gradient(90deg, transparent 32%, rgba(40,40,38,.28) 37%, rgba(40,40,38,.1) 44%, transparent 50%, transparent 82%, rgba(40,40,38,.25) 88%, transparent 93%),
    linear-gradient(#7d7e7a 0%, #c9cac5 18%, #fbfbf8 38%, #e2e3df 55%, #9c9d98 80%, #5f605c 100%);
}
.rail-cap {
  position: absolute; top: 50%; width: 10px; transform: translateY(-50%); border-radius: 2px;
  background: linear-gradient(#6c6d69 0%, #bdbeb9 22%, #f6f6f3 42%, #c4c5c0 62%, #7a7b77 100%);
}
.rail-cap.s { right: -6px; } .rail-cap.e { left: -6px; }

.r-layer { position: absolute; width: 0; height: 0; }
.r-item { position: absolute; outline: none; }
.r-layer.body { filter: drop-shadow(0 6px 8px rgba(20, 20, 18, .08)); }
.r-g { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; perspective: 900px; }
.r-card { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.r-lay { position: absolute; pointer-events: none; }
.r-pc { position: absolute; inset: 0; }
.r-piece { position: absolute; inset: 0; }
.r-pc svg, .r-pc img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.r-contact { position: absolute; top: 0; left: -5px; width: 10px; height: 1.5px; border-radius: 1px; background: rgba(20, 20, 18, .3); filter: blur(.4px); }
.r-item.gone .r-layer { opacity: 0; }

.r-caption {
  position: absolute; z-index: 220; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 12px; color: #66645e; letter-spacing: .01em; transition: opacity .15s; opacity: 0;
}
.r-caption.on { opacity: 1; }
@media (max-width: 640px) { .r-caption { display: none; } }

.see-all {
  position: absolute; left: 50%; top: 90%; transform: translate(-50%, -50%); z-index: 20;
  height: 32px; padding: 0 19px; border: 1px solid var(--ink); border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .04em; color: var(--ink);
  transition: background .2s, color .2s, opacity .35s;
}
.see-all:hover { background: var(--ink); color: var(--paper); }

.home .marquee { position: absolute; z-index: 25; height: max(4.3vh, 32px); background: var(--purple); }
.home .marquee-track { animation-duration: 72s; font-size: 14px; font-weight: 800; color: #e4d6f5; }
.home .marquee-track span { padding: 0 10px; }

.focusing .h-top, .focusing .see-all { opacity: 0; pointer-events: none; }

/* حالت تمرکز (نمای بزرگ) */
.focus { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.focus.on { pointer-events: auto; }
.f-img { position: absolute; transform-origin: 0 0; filter: drop-shadow(0 8px 10px rgba(20, 20, 18, .1)); will-change: transform; }
.f-img svg, .f-img img { width: 100%; height: 100%; display: block; object-fit: contain; }
.f-img.anim { transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.f-img.swap { transition: opacity .22s, transform .22s; }
.f-close {
  position: absolute; top: 26px; left: 2.6vw; font-size: 11px; letter-spacing: .14em; color: var(--ink);
  display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .3s;
}
.f-arrow {
  position: absolute; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; color: var(--ink);
  opacity: 0; transition: opacity .3s;
}
.f-arrow::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--ink); border-radius: 50%; transition: background-color .2s; }
.f-arrow:hover::before { background: rgba(21, 21, 19, .08); }
.f-arrow svg { position: relative; }
.f-arrow.r { right: 6vw; } .f-arrow.l { left: 6vw; }
.f-info {
  position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center;
  opacity: 0; transition: opacity .3s, top .45s cubic-bezier(.22, 1, .36, 1);
}
.focus.ready .f-close, .focus.ready .f-arrow, .focus.ready .f-info { opacity: 1; }
.f-name { font-size: 24px; font-weight: 400; line-height: 32px; color: var(--ink); text-align: center; padding: 0 16px; }
.f-seg {
  position: relative; margin-top: 24px; height: 32px; width: 152px; padding: 3px; box-sizing: border-box;
  border: 1px solid var(--ink); border-radius: 999px; display: grid; grid-template-columns: 1fr 1fr;
}
.f-knob { position: absolute; top: 3px; bottom: 3px; right: 3px; width: calc(50% - 3px); background: var(--ink); border-radius: 999px; transition: transform .25s; }
.f-seg[data-v="back"] .f-knob { transform: translateX(-100%); }
.f-seg button { position: relative; z-index: 1; font-size: 11px; letter-spacing: .1em; color: var(--ink); transition: color .25s; }
.f-seg button.lit { color: var(--paper); }
.f-cta { margin-top: 24px; font-size: 11px; letter-spacing: .12em; color: var(--ink); border-bottom: 1px solid var(--ink); line-height: 16px; }
@media (max-width: 640px) {
  .h-side { gap: 12px; font-size: 11px; }
  .f-arrow.r { right: 3vw; } .f-arrow.l { left: 3vw; }
  .f-name { font-size: 19px; }
}


/* Wall and metal rail geometry from aradazr/fancy-clothes. */
body.home {
    background-color: var(--paper);
    background-size: 46px 37px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='37' viewBox='0 0 46 37'%3E%3Cg fill='none' stroke='%23151513' stroke-opacity='.05' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='23' cy='21' r='4.5'/%3E%3Cpath d='M23 16.5 V14.5 c0-1.6 2.2-1.8 2.2-3.2'/%3E%3C/g%3E%3C/svg%3E");
    background-position: top;
    transition: background-color .9s
}

.rail {
    height: var(--rod);
    z-index: 200;
    position: absolute;
    transform: translateY(-50%)
}

.rail-tube {
    border-radius: calc(var(--rod) / 2);
    background: linear-gradient(90deg, #0000 32%, #28282647 37%, #2828261a 44%, #0000 50% 82%, #28282640 88%, #0000 93%), linear-gradient(#7d7e7a 0%, #c9cac5 18%, #fbfbf8 38%, #e2e3df 55%, #9c9d98 80%, #5f605c 100%);
    position: absolute;
    inset: 0 14px;
    box-shadow: 0 5px 6px -3px #14141238
}

.rail-end {
    width: 14px;
    height: 34px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.rail-end.l {
    left: 0
}

.rail-end.r {
    right: 0
}

.rail-plate {
    background: linear-gradient(90deg, #cfd0cc, #f1f1ee 45%, #d6d7d3);
    border-radius: 3px;
    position: absolute;
    inset: 0 3px;
    box-shadow: 0 1px 2px #1414122e, inset 0 0 0 .5px #14141226
}

.rail-plate:before,
.rail-plate:after {
    content: "";
    background: radial-gradient(circle at 35% 35%, #f4f4f2, #8e8f8b);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    position: absolute;
    left: 50%
}

.rail-plate:before {
    top: 4px
}

.rail-plate:after {
    bottom: 4px
}

.rail-cap {
    width: 10px;
    height: calc(var(--rod) + 5px);
    background: linear-gradient(#6c6d69 0%, #bdbeb9 22%, #f6f6f3 42%, #c4c5c0 62%, #7a7b77 100%);
    border-radius: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.rail-end.l .rail-cap {
    left: 12px
}

.rail-end.r .rail-cap {
    right: 12px
}

.r-pc img { object-fit: fill; }
.r-item:focus-visible .r-layer.body { filter: drop-shadow(0 0 3px #3d1f5e66); }
.scene::after { content: ''; position: absolute; top: 0; left: 0; width: var(--rack-width, 100%); height: 1px; pointer-events: none; }
.f-seg[hidden] { display: none; }
.f-seg[data-v="side"] .f-knob { transform: translateX(-100%); }
.focus:not(.on) { visibility: hidden; }
.f-img img { object-fit: fill; }
@media (max-width: 640px) {
  .scene { overflow-x: auto; overflow-y: hidden; direction: ltr; scrollbar-width: none; touch-action: pan-x; }
  .scene::-webkit-scrollbar { display: none; }
  .h-side, .f-info { direction: rtl; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .f-img.anim, .f-img.swap { transition-duration: 0.01ms; }
}