/* نقل حرفي لـ Product Rail Gallery (DHxWHY، رخصة MIT) من React وTailwind إلى CSS عادي */
:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(14.5% 0 0);
  --muted-foreground: oklch(55.6% 0 0);
  --border: oklch(92.2% 0 0);
  --ring: oklch(70.8% 0 0);
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html, body { min-height: 100%; }
body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; line-height: 1.5; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }

.demo { display: flex; min-height: 100svh; width: 100%; align-items: center; justify-content: center; background: var(--background); }

.rail-hero { position: relative; isolation: isolate; width: 100%; overflow: hidden; background: var(--background); color: var(--foreground); }
.rail-hero__glow {
  pointer-events: none; position: absolute; inset: 0; z-index: -10;
  background:
    radial-gradient(120% 70% at 18% 0%, color-mix(in oklab, var(--foreground) 7%, transparent), transparent 62%),
    linear-gradient(to bottom, transparent 55%, color-mix(in oklab, var(--foreground) 5%, transparent));
}
.rail-hero__head { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1.5rem 0; text-align: center; }
.rail-hero__eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .28em; color: var(--muted-foreground); }
.rail-hero__title { text-wrap: balance; font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -.025em; }
@media (min-width: 640px) { .rail-hero__title { font-size: 1.875rem; line-height: 2.25rem; } }

.rail-stage { position: relative; margin-top: 1.25rem; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow-x: clip; }

.rail { pointer-events: none; position: absolute; inset-inline: 0; z-index: 0; }
.rail__shadow { position: absolute; inset-inline: 0; height: .75rem; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 10%, transparent); filter: blur(5px); }
.rail__bar {
  position: absolute; inset: 0; border-radius: 9999px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--muted-foreground) 35%, white) 0%, white 18%, color-mix(in oklab, var(--muted-foreground) 70%, white) 38%, var(--muted-foreground) 62%, color-mix(in oklab, var(--muted-foreground) 55%, black) 100%);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--foreground) 18%, transparent);
}
.rail__grain { position: absolute; inset: 0; border-radius: 9999px; opacity: .4; mix-blend-mode: overlay;
  background: repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in oklab, white 40%, transparent) 2px 3px, transparent 3px 7px); }
.rail__cap {
  position: absolute; top: 50%; height: 1.75rem; width: 1rem; transform: translateY(-50%); border-radius: 3px;
  background: linear-gradient(to right, color-mix(in oklab, var(--muted-foreground) 60%, white), var(--muted-foreground) 55%, color-mix(in oklab, var(--muted-foreground) 60%, black));
  box-shadow: 0 3px 6px color-mix(in oklab, var(--foreground) 18%, transparent);
}
.rail__cap--l { left: 6px; } .rail__cap--r { right: 6px; }
.rail__cap span { position: absolute; left: 50%; width: .25rem; height: .25rem; transform: translateX(-50%); border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 35%, transparent); }
.rail__cap span:first-child { top: .25rem; } .rail__cap span:last-child { bottom: .25rem; }

.garment { position: absolute; left: 0; cursor: pointer; border-radius: .75rem; outline: none; }
.garment:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.garment__swing { position: absolute; inset: 0; }
.garment__blur { pointer-events: none; position: absolute; inset: 0; }
.garment__shadow { position: absolute; display: block; inset: 0; background: black; opacity: .16; }
.garment__side, .garment__turn { position: absolute; inset: 0; }
.garment__turn { border-radius: .5rem; transform-style: preserve-3d; }
.garment__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.garment__face--back { transform: rotateY(180deg); }
.garment__drape { position: absolute; inset: 0; transform-origin: top; transform: skewX(var(--drape, 0deg)); }
.garment__face--back .garment__drape { transform: skewX(calc(var(--drape, 0deg) * -1)); }
.garment__shade { pointer-events: none; position: absolute; inset: 0; background: black; opacity: var(--shade, .2); }
.photo { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top; user-select: none; -webkit-user-drag: none; }

.tag { pointer-events: none; position: absolute; left: 50%; transform-origin: top; }
.tag__string { display: block; height: 14px; width: 1px; transform: translateX(3px); background: color-mix(in oklab, var(--foreground) 35%, transparent); }
.tag__card {
  position: relative; display: block; transform: translateX(calc(-50% + 3px)); white-space: nowrap;
  border-radius: 3px; border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
  background: var(--card); color: var(--card-foreground);
  padding: .5rem .375rem .25rem; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .025em;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--foreground) 18%, transparent);
}
.tag__hole { position: absolute; left: 50%; top: 3px; width: 3px; height: 3px; transform: translateX(-50%); border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 30%, transparent); }

.rail-dots { position: relative; z-index: 10; margin-top: .25rem; display: flex; justify-content: center; gap: .375rem; }
.rail-dots button { height: .375rem; width: .375rem; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 25%, transparent); transition: width .3s, background-color .3s; }
.rail-dots button:hover { background: color-mix(in oklab, var(--foreground) 45%, transparent); }
.rail-dots button[aria-current="true"] { width: 1.5rem; background: var(--foreground); }

.rail-foot { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 1.5rem 2rem; text-align: center; }
.rail-caption { min-height: 3.25rem; }
.rail-caption__name { font-size: .875rem; line-height: 1.25rem; font-weight: 500; animation: fade-in .3s ease; }
.rail-caption__desc { margin: .25rem auto 0; max-width: 42ch; font-size: 13px; line-height: 1.625; color: var(--muted-foreground); }
@keyframes fade-in { from { opacity: 0; } }
.shop {
  border-radius: 9999px; background: var(--foreground); color: var(--background); padding: .625rem 1.25rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: transform .15s, box-shadow .15s;
}
.shop:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }

/* نافذة القطعة */
.detail { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 1.5rem; color: var(--foreground); }
.detail__backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; transition: opacity .3s; }
.detail__close {
  position: absolute; right: 1.25rem; top: 1.25rem; z-index: 10; display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; padding: .375rem .75rem; font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .025em;
  color: var(--muted-foreground); opacity: 0; transition: opacity .3s, color .3s;
}
.detail__close:hover { color: var(--foreground); }
.detail__close svg { width: .875rem; height: .875rem; }
.detail__grid { position: relative; display: grid; width: 100%; max-width: 64rem; align-items: center; gap: 2.5rem; padding-top: 2.5rem; }
@media (min-width: 768px) { .detail__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
.detail__figure { position: relative; margin: 0 auto; aspect-ratio: 200 / 310; height: min(62vh, 560px); max-height: 100%; transform-origin: top; }
.detail__rod {
  position: absolute; left: 50%; height: 40vh; width: 3px; transform: translateX(-50%); border-radius: 9999px;
  top: calc(-40vh + 1.2903%);
  background: linear-gradient(to right, color-mix(in oklab, var(--muted-foreground) 50%, white), var(--muted-foreground), color-mix(in oklab, var(--muted-foreground) 50%, black));
}
.detail__spin { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; perspective: 1400px; }
.detail__spin:active { cursor: grabbing; }
.detail__inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.detail__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.detail__face--back { transform: rotateY(180deg); }
.detail__info { display: flex; flex-direction: column; gap: 1rem; text-align: center; opacity: 0; transform: translateY(.5rem); transition: opacity .5s .15s, transform .5s .15s; }
@media (min-width: 768px) { .detail__info { text-align: left; } }
.detail__count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--muted-foreground); }
.detail__name { font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -.025em; }
@media (min-width: 640px) { .detail__name { font-size: 1.875rem; line-height: 2.25rem; } }
.detail__desc { font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }
.detail__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; }
@media (min-width: 768px) { .detail__chips { justify-content: flex-start; } }
.detail__chips li { border-radius: 9999px; border: 1px solid var(--border); padding: .25rem .75rem; font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
.detail__sides { margin-top: .5rem; display: inline-flex; justify-content: center; gap: 1.5rem; }
@media (min-width: 768px) { .detail__sides { justify-content: flex-start; } }
.detail__sides button { position: relative; padding-bottom: .375rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); transition: color .15s; outline: none; }
.detail__sides button:hover, .detail__sides button[aria-pressed="true"] { color: var(--foreground); }
.detail__sides button span { position: absolute; inset-inline: 0; bottom: 0; height: 1px; transform-origin: left; transform: scaleX(0); background: var(--foreground); transition: transform .3s; }
.detail__sides button[aria-pressed="true"] span { transform: scaleX(1); }
.detail.is-in .detail__backdrop, .detail.is-in .detail__close { opacity: 1; }
.detail.is-in .detail__info { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .detail__backdrop, .detail__close, .detail__info, .rail-caption__name { transition: none; animation: none; }
}

/* ---------- s32brand: عربي من اليمين ---------- */
:root { --font-sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
.rail-hero__eyebrow { letter-spacing: .18em; }
.rail-hero__title { font-weight: 600; letter-spacing: 0; }
.rail-stage { direction: ltr; }
.tag__card { font-family: var(--font-sans); letter-spacing: 0; font-size: 9px; }
.detail__close { right: auto; left: 1.25rem; }
@media (min-width: 768px) { .detail__info { text-align: right; } .detail__chips, .detail__sides { justify-content: flex-start; } }
.detail__name { font-weight: 600; letter-spacing: 0; }
.detail__price { font-size: 1.125rem; font-weight: 500; }
.detail__price small { font-size: .8125rem; color: var(--muted-foreground); margin-inline-start: .25rem; }
.detail__sides button span { transform-origin: right; }
.detail__order {
  align-self: center; display: inline-flex; margin-top: .25rem; border-radius: 9999px; background: var(--foreground); color: var(--background);
  padding: .625rem 1.5rem; font-size: .875rem; font-weight: 500; text-decoration: none; transition: transform .15s;
}
@media (min-width: 768px) { .detail__order { align-self: flex-start; } }
.detail__order:hover { transform: translateY(-1px); }
.shop { text-decoration: none; display: inline-block; }
.brand-foot { padding: 0 1.5rem 1.5rem; text-align: center; font-size: 11px; color: var(--muted-foreground); }

.tag__card { direction: rtl; }
.detail__count { direction: ltr; unicode-bidi: isolate; }
@media (min-width: 768px) { .detail__count { text-align: right; } }
.detail__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
@media (min-width: 768px) { .detail__sizes { justify-content: flex-start; } }
.detail__sizes button { min-width: 2.75rem; height: 2.25rem; padding: 0 .75rem; border-radius: 9999px; border: 1px solid var(--border); font-size: .8125rem; color: var(--foreground); transition: background .2s, color .2s, border-color .2s; }
.detail__sizes button:hover { border-color: var(--foreground); }
.detail__sizes button[aria-checked="true"] { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.detail__sizes.is-missing { animation: nudge .35s; }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.detail__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.25rem; margin-top: .25rem; }
@media (min-width: 768px) { .detail__acts { justify-content: flex-start; } }
.detail__acts .detail__order { margin: 0; align-self: auto; border: 0; cursor: pointer; font-family: inherit; }
.detail__order.is-done { background: #2f6b3a; }
.detail__link { font-size: .8125rem; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 4px; }
.detail__link:hover { color: var(--foreground); }

@media (max-width: 760px) { .detail__figure { height: min(46svh, 420px); } .detail__grid { gap: 1.25rem; padding-top: 1.5rem; } .detail__info { gap: .75rem; } }