/* Customer site shell (templates/site/). Colours only via tokens.css.
   H7 (2026-10-11, decision 44): calm and tidy. The home is the categories, every page says
   little, one rhythm of spacing from 320 to 1920 wide, and soft motion that switches off
   when the device asks for less. Flat dark surfaces and 1px lines, the pictures first,
   gold only for the main action, the price and what is chosen. No glows, no slogans. */

.site { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); }
/* decision 117: a page never pans sideways on a phone; clip, not hidden, so the sticky header keeps working */
html, body { overflow-x: clip; }

/* «خلفية الموقع» (decision 97): a layer fixed behind the page (it stays while the page scrolls), drawn only by
   gradients and the logo; the panel shows the same in a small box (.bg-swatch). The flat black is no class. */
.site:is(.bg-aura, .bg-arena, .bg-carbon, .bg-mark, .bg-mist), .bg-swatch { position: relative; isolation: isolate; }
.site:is(.bg-aura, .bg-arena, .bg-carbon, .bg-mark, .bg-mist)::before,
.site:is(.bg-aura, .bg-arena, .bg-carbon, .bg-mark, .bg-mist)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bg-swatch { overflow: hidden; background: var(--bg); }
.bg-swatch::before, .bg-swatch::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
:is(.site, .bg-swatch).bg-aura::before { background: var(--bg-aura); }
:is(.site, .bg-swatch).bg-carbon::before { background: var(--bg-carbon); }
:is(.site, .bg-swatch).bg-arena::after { background: var(--bg-arena-glow); }
:is(.site, .bg-swatch).bg-arena::before {
  inset: 52% 0 0;
  background: var(--bg-arena-floor);
  -webkit-mask-image: var(--fade-up);
  mask-image: var(--fade-up);
}
:is(.site, .bg-swatch).bg-mark::before {
  inset: -30%;
  background: url("/static/brand/logo-mark-128.png") 0 0 / 92px 92px repeat;
  opacity: .055;
  transform: rotate(-14deg);
}
:is(.site, .bg-swatch).bg-mark::after { background: var(--bg-mark-glow); }
.bg-swatch.bg-mark::before { background-size: 34px 34px; opacity: .09; }
:is(.site, .bg-swatch).bg-mist::before { inset: -15%; background: var(--bg-mist); }
@media (prefers-reduced-motion: no-preference) {
  .site.bg-mist::before { animation: mist-drift 38s ease-in-out infinite alternate; }
}
@keyframes mist-drift {
  from { transform: translate3d(-3%, 2%, 0) rotate(-4deg); }
  to { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.06); }
}
.site-main { flex: 1; padding-bottom: var(--sp-10); }
@media (min-width: 900px) { .site-main { padding-bottom: var(--sp-16); } }
/* the fixed tab bar covers the bottom of a phone screen: the footer ends above it */
@media (max-width: 899px) { .has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } }
.site .container { max-width: 1240px; padding-inline: clamp(16px, 4vw, 32px); }

/* ---------- header: the logo alone on a phone (the tab bar has the rest) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--hairline);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  view-transition-name: site-header;
}
.site-header-in { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); height: 58px; }
.site-logo, .footer-logo { display: inline-flex; border-radius: var(--r-sm); }
.site-logo:focus-visible, .footer-logo:focus-visible { outline: none; box-shadow: var(--ring); }
.site-header .brand { gap: var(--sp-2); }
.site-header .brand-mark { width: 34px; height: 34px; }
.site-nav, .site-actions { display: none; }
@media (min-width: 900px) {
  .site-header-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); height: var(--header-h); }
  .site-logo { justify-self: start; }
  .site-nav { display: flex; gap: var(--sp-1); }
  .site-actions { display: flex; align-items: center; justify-self: end; gap: var(--sp-1); }
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-weight: 600;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.site-nav a:hover { color: var(--text); background: var(--surface-1); }
.site-nav a[aria-current="page"] { color: var(--silver); background: var(--surface-2); }
.site-nav a:focus-visible { outline: none; box-shadow: var(--ring); }

.icon-btn {
  position: relative;
  display: grid;
  place-content: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-full);
  color: var(--text-muted);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-current="page"] { color: var(--gold); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.site-actions .btn { margin-inline-start: var(--sp-1); }

/* ---------- sections ---------- */
.section { padding-block: var(--sp-8); }
.section-tight { padding-block: var(--sp-6); }
@media (min-width: 768px) { .section { padding-block: var(--sp-12); } .section-tight { padding-block: var(--sp-8); } }
.home-title, .section-title {
  margin-bottom: var(--sp-5);
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--silver);
}
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.section-head .section-title { margin: 0; }
.section-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: var(--touch);
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-weight: 600;
  transition: color var(--dur-1) var(--ease);
}
.section-more:hover { color: var(--gold); }

/* ---------- the home (H8, decision 45, proposal أ) ---------- */
.home-section { padding-top: var(--sp-8); }
@media (min-width: 768px) { .home-section { padding-top: var(--sp-12); } }
.section-title.with-icon { display: flex; align-items: center; gap: var(--sp-2); }
.title-icon { width: 22px; height: 22px; color: var(--gold); }

/* «لعبة الواجهة» (decision 96): the one bold thing on the home. The store's most wanted game, its own picture from
   inside the game across the page (or its cover, blurred), dark toward the text's side and the bottom; the name big,
   the price in gold, one button. Phone: the picture on top, the cover beside the name below it. */
.stage { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.stage-bg { position: absolute; inset: 0; z-index: -1; }
.stage-bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-bg-blur > img, .stage-bg > img.stage-bg-blur { filter: blur(30px) saturate(1.35); transform: scale(1.2); }
.stage-bg::after { content: ""; position: absolute; inset: 0; background: var(--stage-fade); }
.stage-in {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  padding-top: clamp(150px, 46vw, 260px);
  padding-bottom: var(--sp-6);
}
.stage-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--cover-art);
  box-shadow: var(--stage-rim);
}
.stage-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-body { display: grid; justify-items: start; gap: var(--sp-3); min-width: 0; }
.stage-cat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 2px var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--sink);
  color: var(--silver);
  font-size: var(--fs-13);
  font-weight: 600;
}
.stage-cat:hover { border-color: var(--gold-line); color: var(--text); }
.stage-cat:focus-visible { outline: none; box-shadow: var(--ring); }
.stage-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, .95rem + 3.2vw, 3.5rem);
  font-weight: 900;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.stage-name a { color: var(--silver); }
.stage-name a:hover { color: var(--text); }
.stage-name a:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: var(--ring); }
.stage-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.stage-price .price { font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); }
.stage-off { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-full);
  background: var(--danger); color: var(--on-strong); font-size: var(--fs-13); font-weight: 800; }
.stage-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.stage-actions .btn { flex: 1 1 150px; }
@media (min-width: 768px) {
  .stage-bg::after { background: var(--stage-side), var(--stage-light), var(--stage-fade); }
  .stage-in {
    grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 280px);
    align-items: center;
    gap: clamp(var(--sp-8), 6vw, var(--sp-16));
    min-height: clamp(440px, 42vw, 560px);
    padding-block: var(--sp-12);
  }
  .stage-body { grid-column: 1; grid-row: 1; max-width: 34rem; gap: var(--sp-4); }
  .stage-cover { grid-column: 2; grid-row: 1; border-radius: var(--r-lg); transform: rotate(-3deg); }
  .stage-actions { width: auto; }
  .stage-actions .btn { flex: 0 0 auto; }
}
/* the one moment on the home: the cover rises into its place, and a light runs over it once */
@media (prefers-reduced-motion: no-preference) {
  .stage-cover { animation: stage-rise var(--dur-3) var(--ease-out) 120ms backwards; }
  .stage-cover::after { content: ""; position: absolute; inset: 0; background: var(--sheen); transform: translateX(-120%);
    animation: stage-sheen 1.1s var(--ease-out) 520ms 1 forwards; pointer-events: none; }
  .stage-body { animation: stage-in var(--dur-3) var(--ease-out) backwards; }
}
@keyframes stage-rise { from { opacity: 0; transform: translateY(24px) rotate(0deg); } }
@keyframes stage-sheen { to { transform: translateX(120%); } }
@keyframes stage-in { from { opacity: 0; transform: translateY(10px); } }

/* the promo bar above every page (H8, H9 decision 46): the site's black with a fine gold line by
   default, or a ready colour, or the owner's own (/media/promo.css); three sizes; still, turning
   one message after another, or running along the bar */
.promo-bar {
  --promo-bg: var(--bg);
  --promo-fg: var(--silver);
  --promo-icon: var(--gold);
  --promo-line: var(--gold-line);
  --promo-h: 42px;
  --promo-fs: var(--fs-14);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--promo-line);
  background: var(--promo-bg);
  color: var(--promo-fg);
}
.promo-c-dark { border-bottom-color: transparent; background-image: var(--gold-fade); background-origin: border-box;
  background-position: bottom; background-size: 100% 1px; background-repeat: no-repeat; }
.promo-c-gold { --promo-bg: var(--gold); --promo-fg: var(--on-gold); --promo-icon: var(--on-gold); --promo-line: var(--gold-deep); }
.promo-c-silver { --promo-bg: var(--silver); --promo-fg: var(--bg); --promo-icon: var(--bg); --promo-line: var(--border-hover); }
.promo-c-red { --promo-bg: var(--promo-red); --promo-fg: var(--silver); --promo-icon: var(--silver); --promo-line: var(--promo-red); }
.promo-c-green { --promo-bg: var(--promo-green); --promo-fg: var(--silver); --promo-icon: var(--silver); --promo-line: var(--promo-green); }
.promo-c-blue { --promo-bg: var(--promo-blue); --promo-fg: var(--silver); --promo-icon: var(--silver); --promo-line: var(--promo-blue); }
.promo-c-purple { --promo-bg: var(--promo-purple); --promo-fg: var(--silver); --promo-icon: var(--silver); --promo-line: var(--promo-purple); }
.promo-size-s { --promo-h: 36px; --promo-fs: var(--fs-13); }
.promo-size-l { --promo-h: 52px; --promo-fs: var(--fs-16); }
.promo-in { display: flex; justify-content: center; }
.promo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--promo-h);
  padding: 4px var(--sp-4);
  color: var(--promo-fg);
  font-size: var(--promo-fs);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
@media (pointer: coarse) { .promo-item { min-height: max(var(--promo-h), var(--touch)); } }
.promo-in .promo-item { width: 100%; white-space: normal; }
.promo-size-l .promo-item { font-weight: 700; }
.promo-icon { flex: none; color: var(--promo-icon); }
.promo-no-icon .promo-icon { display: none; }
a.promo-item:hover { color: var(--promo-fg); }
a.promo-item:hover .promo-text { text-decoration: underline; text-underline-offset: 4px; }
a.promo-item:focus-visible { outline: none; box-shadow: inset var(--ring); }
.promo-go { flex: none; transition: transform var(--dur-2) var(--ease-out); }
a.promo-item:hover .promo-go { transform: translateX(-3px); }
/* «يتبدل»: one message after another (ds.js [data-promo-rotate]) */
.promo-mo-rotate .promo-in:not([hidden]) { animation: promo-in var(--dur-3) var(--ease-out); }
@keyframes promo-in { from { opacity: 0; transform: translateY(8px); } }
/* «يمشي»: the messages run toward the right, so a still eye reads them from their start */
.promo-track { display: flex; width: max-content; animation: promo-run 32s linear infinite; }
.promo-mo-marquee:hover .promo-track { animation-play-state: paused; }
.promo-run, .promo-group { display: flex; flex: none; }
.promo-run .promo-item { padding-inline: var(--sp-8); }
@keyframes promo-run { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }

/* banners: one at a time, cross-fading; ds.js [data-slider] moves them (swipe, dots, every few seconds) */
.hero { padding-top: var(--sp-4); }
@media (min-width: 768px) { .hero { padding-top: var(--sp-6); } }
.slider { position: relative; }
.slides {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
}
/* decision 117: wider on a computer only by «مقاس البانر» (ratio-wide, ratio-xwide); 16:9 = the picture as uploaded */
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease), visibility 0s; }
.slide-link { position: absolute; inset: 0; display: block; color: var(--text); }
.slide-link:focus-visible { outline: none; box-shadow: inset var(--ring); border-radius: var(--r-xl); }
.slide-media { position: absolute; inset: 0; overflow: hidden; }
.slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  /* a phone picture's too (117) */
.slide-media .slide-img { transition: opacity var(--dur-3) var(--ease); }
.slide-text {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: var(--sp-10) var(--sp-5) var(--sp-5);
  background: var(--shade);
}
@media (min-width: 768px) { .slide-text { padding: var(--sp-16) var(--sp-8) var(--sp-8); gap: var(--sp-2); } }
.slide-kicker { color: var(--silver); font-size: var(--fs-13); font-weight: 600; }
.slide-title { font-family: var(--font-head); font-size: clamp(1.25rem, .9rem + 2vw, 2.5rem); font-weight: 900; line-height: 1.2; color: var(--silver); }
.slide-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--on-gold);
  font-size: var(--fs-14);
  font-weight: 700;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.slide-link:hover .slide-btn { background: var(--gold-hover); }
.slide-link:active .slide-btn { transform: scale(.97); }
.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-top: calc(var(--touch) / -2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--header-bg);
  color: var(--text);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.slider-prev { inset-inline-start: var(--sp-4); }
.slider-next { inset-inline-end: var(--sp-4); }
@media (hover: hover) and (min-width: 900px) { .slider-arrow { display: grid; } .slider:hover .slider-arrow { opacity: 1; } }
.slider-arrow:focus-visible { opacity: 1; outline: none; box-shadow: var(--ring); }
.slider-arrow:hover { border-color: transparent; background: var(--gold); color: var(--on-gold); }
/* how a banner's words sit on its picture (H9, decision 46): place, height, size, colour, button, shade */
.slide-text { --slide-fg: var(--silver); color: var(--slide-fg); }
.slide-text.pos-center { justify-items: center; text-align: center; }
.slide-text.pos-end { justify-items: end; text-align: end; }
.slide-text.va-middle { inset: 0; align-content: center; }
.slide-text.size-s .slide-title { font-size: clamp(1rem, .85rem + 1.1vw, 1.75rem); }
.slide-text.size-l .slide-title { font-size: clamp(1.5rem, 1rem + 3vw, 3.25rem); }
.slide-text.tone-dark { --slide-fg: var(--bg); }
.slide-text.tone-dark .slide-title, .slide-text.tone-dark .slide-kicker { color: var(--bg); }
.slide-text.tone-gold .slide-title { color: var(--gold); }
.slide-text.shade-soft { background: var(--shade-soft); }
.slide-text.shade-none { background: none; }
.slide-text.tone-dark.shade-strong, .slide-text.tone-dark.shade-soft { background: var(--shade-light); }
.slide-text.va-middle.shade-strong { background: var(--scrim-strong); }
.slide-text.va-middle.shade-soft { background: var(--scrim-soft); }
.slide-text.va-middle.tone-dark.shade-strong, .slide-text.va-middle.tone-dark.shade-soft { background: var(--scrim-light); }
.slide-btn-light { background: var(--silver); color: var(--bg); }
.slide-btn-dark { background: var(--bg); color: var(--silver); }
.slide-btn-outline { border: 1px solid currentColor; background: transparent; color: var(--slide-fg); }
.slide-link:hover .slide-btn-light { background: var(--text); }
.slide-link:hover .slide-btn-dark { background: var(--surface-2); }
.slide-link:hover .slide-btn-outline { background: var(--hairline); }

.slider-dots { display: flex; justify-content: center; gap: 2px; padding-top: var(--sp-2); }
.slider-dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
@media (pointer: coarse) { .slider-dot { width: var(--touch); height: 32px; } }
.slider-dot > span { display: block; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--border-hover); transition: width var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease); }
.slider-dot.is-on > span { width: 22px; background: var(--gold); }
.slider-dot:focus-visible { outline: none; }
.slider-dot:focus-visible > span { box-shadow: var(--ring); }

/* categories (decisions 62, 63): one tile, every look. The owner picks it in «تصميم الأقسام» and the
   grid's classes carry it: cat-shape-*, cat-size-*, cat-layout-*, cat-name-*, cat-frame-*,
   cat-corner-*, cat-enter-*, cat-hover-*, cat-count-*, cat-badge-*. The columns follow the
   section's own width (.cat-wrap is a container), so the panel's phone and computer previews
   show exactly what the site shows. */
.cat-wrap { container-type: inline-size; }
.cat-grid {
  --cols: 2;
  --gap: var(--sp-3);
  --row-w: 44%;
  --ratio: 1 / 1;
  --rad: var(--r-lg);
  --ring: var(--ring-gold);
  --ring-w: 2px;
  --inner: 2px;
  --name-fs: var(--fs-16);
  --chip-pic: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.cat-grid > .cat-tile { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }

/* sizes: a phone first, then a tablet-wide section (600) and a computer (900) */
.cat-grid.cat-size-s { --cols: 3; --row-w: 30%; --name-fs: var(--fs-13); --chip-pic: 32px; }
.cat-grid.cat-size-m { --cols: 2; --row-w: 44%; --name-fs: var(--fs-16); --chip-pic: 40px; }
.cat-grid.cat-size-l { --cols: 1; --row-w: 80%; --name-fs: var(--fs-22); --chip-pic: 52px; }
.cat-grid.cat-shape-circle.cat-size-s { --cols: 4; --row-w: 24%; }
.cat-grid.cat-shape-circle.cat-size-m { --cols: 3; --row-w: 32%; }
.cat-grid.cat-shape-circle.cat-size-l { --cols: 2; --row-w: 46%; }
.cat-grid.cat-shape-wide.cat-size-s { --cols: 2; --row-w: 46%; }
.cat-grid.cat-shape-wide.cat-size-m { --cols: 1; --row-w: 72%; }
.cat-grid.cat-shape-wide.cat-size-l { --cols: 1; --row-w: 88%; }
@container (min-width: 600px) {
  .cat-grid.cat-size-s { --cols: 4; --row-w: 22%; }
  .cat-grid.cat-size-m { --cols: 3; --row-w: 31%; }
  .cat-grid.cat-size-l { --cols: 2; --row-w: 46%; }
  .cat-grid.cat-shape-circle.cat-size-s { --cols: 6; --row-w: 16%; }
  .cat-grid.cat-shape-circle.cat-size-m { --cols: 5; --row-w: 19%; }
  .cat-grid.cat-shape-circle.cat-size-l { --cols: 3; --row-w: 31%; }
  .cat-grid.cat-shape-wide.cat-size-s { --cols: 3; --row-w: 31%; }
  .cat-grid.cat-shape-wide.cat-size-m { --cols: 2; --row-w: 46%; }
  .cat-grid.cat-shape-wide.cat-size-l { --cols: 1; --row-w: 70%; }
}
@container (min-width: 900px) {
  .cat-grid { --gap: var(--sp-5); }
  .cat-grid.cat-size-s { --cols: 6; --row-w: 160px; --name-fs: var(--fs-16); }
  .cat-grid.cat-size-m { --cols: 4; --row-w: 240px; --name-fs: var(--fs-18); }
  .cat-grid.cat-size-l { --cols: 3; --row-w: 340px; --name-fs: var(--fs-28); }
  .cat-grid.cat-shape-circle.cat-size-s { --cols: 8; --row-w: 130px; }
  .cat-grid.cat-shape-circle.cat-size-m { --cols: 6; --row-w: 170px; }
  .cat-grid.cat-shape-circle.cat-size-l { --cols: 4; --row-w: 240px; }
  .cat-grid.cat-shape-wide.cat-size-s { --cols: 4; --row-w: 260px; }
  .cat-grid.cat-shape-wide.cat-size-m { --cols: 3; --row-w: 360px; }
  .cat-grid.cat-shape-wide.cat-size-l { --cols: 2; --row-w: 520px; }
}

/* a row that is swiped (or scrolled) instead of lines; centred while it fits */
.cat-grid.cat-layout-row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
  padding-block: var(--sp-2) var(--sp-3);
}
.cat-grid.cat-layout-row > .cat-tile { flex: 0 0 var(--row-w); scroll-snap-align: start; }
.cat-grid.cat-shape-chip > .cat-tile, .cat-grid.cat-shape-chip.cat-layout-row > .cat-tile { flex: 0 0 auto; }

/* shape, corners and frame */
.cat-grid.cat-shape-tall { --ratio: 3 / 4; }
.cat-grid.cat-shape-wide { --ratio: 16 / 10; }
.cat-corner-sharp { --rad: var(--r-sm); }
.cat-corner-soft { --rad: var(--r-lg); }
.cat-corner-round { --rad: var(--r-xl); }
.cat-grid.cat-shape-circle { --rad: 50%; }
.cat-frame-gold, .cat-frame-glow { --ring: var(--ring-gold); --ring-w: 2px; --inner: 2px; }
.cat-frame-silver { --ring: var(--ring-silver); --ring-w: 2px; --inner: 2px; }
.cat-frame-line { --ring: var(--border-strong); --ring-w: 1px; --inner: 0px; }
.cat-frame-none { --ring: transparent; --ring-w: 0px; --inner: 0px; }

.cat-tile {
  position: relative;
  display: grid;
  grid-template-areas: "pic";
  grid-template-columns: minmax(0, 1fr);
  align-content: start;  /* a taller neighbour (a two-line name) never stretches the picture */
  color: var(--text);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cat-tile-frame, .cat-tile-name { grid-area: pic; }
.cat-tile-frame { display: block; align-self: start; padding: var(--ring-w); border-radius: var(--rad); background: var(--ring); transition: box-shadow var(--dur-2) var(--ease); }
.cat-frame-glow .cat-tile-frame { box-shadow: 0 0 26px -8px var(--gold-line); }
.cat-tile-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border: var(--inner) solid var(--bg);
  border-radius: max(0px, calc(var(--rad) - var(--ring-w)));
  background: var(--cover-art);
  color: var(--silver);
}
.cat-tile-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease); }
.cat-tile-icon { display: grid; place-items: center; width: 30%; max-width: 72px; margin-bottom: 16%; transition: transform var(--dur-3) var(--ease-out); }
.cat-tile-icon .icon { width: 100%; height: auto; aspect-ratio: 1 / 1; stroke-width: 1.4; }
.cat-tile-media.is-art { background: var(--cat-art); }
.cat-tile-media.is-art .cat-tile-icon { color: var(--silver); filter: var(--icon-glow); }
.cat-tile-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-full);
  background: var(--scrim-strong);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1.3;
}
.cat-tile-badge .icon { width: 12px; height: 12px; color: var(--gold); }
.cat-size-s .cat-tile-badge { inset-block-start: 5px; inset-inline-start: 5px; padding: 4px; }
.cat-size-s .cat-tile-badge > span { display: none; }
.cat-badge-off .cat-tile-badge, .cat-shape-chip .cat-tile-badge { display: none; }

/* the name: on the picture's bottom (on), in its middle (center), or under it (below; a circle always) */
.cat-tile-name {
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 2px;
  margin: calc(var(--ring-w) + var(--inner));
  padding: 26% var(--sp-3) var(--sp-3);
  border-radius: 0 0 max(0px, calc(var(--rad) - var(--ring-w) - var(--inner))) max(0px, calc(var(--rad) - var(--ring-w) - var(--inner)));
  background: var(--shade);
  font-family: var(--font-head);
  font-size: var(--name-fs);
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.cat-tile-count { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }
.cat-count-off .cat-tile-count { display: none; }
.cat-size-s .cat-tile-name { padding: 30% var(--sp-2) var(--sp-2); }
.cat-size-l .cat-tile-name { padding: 22% var(--sp-4) var(--sp-4); }
@container (min-width: 900px) {
  .cat-size-m .cat-tile-name { padding-inline: var(--sp-4); padding-bottom: var(--sp-4); }
  .cat-size-l .cat-tile-name { padding-inline: var(--sp-5); padding-bottom: var(--sp-5); }
}
.cat-name-center .cat-tile-name {
  align-self: stretch;
  place-content: center;
  padding: var(--sp-3);
  border-radius: max(0px, calc(var(--rad) - var(--ring-w) - var(--inner)));
  background: var(--scrim-soft);
  text-align: center;
}
.cat-name-center .cat-tile-icon { width: 46%; max-width: 110px; margin-bottom: 0; opacity: .3; }
.cat-name-below .cat-tile, .cat-shape-circle .cat-tile { grid-template-areas: "pic" "name"; }
.cat-name-below .cat-tile-name, .cat-shape-circle .cat-tile-name {
  grid-area: name;
  align-self: start;
  margin: 0;
  padding: var(--sp-2) var(--sp-1) 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-body);
  font-size: calc(var(--name-fs) * .9);
  font-weight: 600;
  text-align: center;
}
.cat-name-below .cat-tile-icon, .cat-shape-circle .cat-tile-icon { margin-bottom: 0; opacity: 1; width: 30%; }
/* «بلا اسم (الصورة فقط)» (decision 117): the owner's designs carry their names. A category with a picture shows the
   picture alone (its name stays for screen readers: the same as .sr-only, so the panel's live preview follows the
   choice); the products' number, when it is on, sits small on the picture; a category without a picture, and the
   buttons («أزرار»), keep their names */
.cat-name-none:not(.cat-shape-chip) .cat-tile.has-pic .cat-tile-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cat-name-none:not(.cat-shape-chip) .cat-tile.has-pic { grid-template-areas: "pic"; }
.cat-name-none:not(.cat-shape-chip) .cat-tile.has-pic .cat-tile-name {
  grid-area: pic;
  align-self: end;
  justify-self: start;
  margin: calc(var(--ring-w) + var(--inner) + var(--sp-2));
  padding: 0;
  border-radius: var(--r-full);
  background: none;
}
.cat-name-none:not(.cat-shape-chip) .cat-tile.has-pic .cat-tile-count { padding: 2px 8px; border-radius: var(--r-full); background: var(--scrim-strong); color: var(--text); }

/* buttons: a small round picture with the name beside it, as wide as the name */
.cat-shape-chip .cat-tile {
  grid-template-areas: "pic name";
  grid-template-columns: var(--chip-pic) auto;
  align-items: center;
  column-gap: var(--sp-2);
  min-height: 44px;
  padding-block: 5px;
  padding-inline: 5px var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface-1);
}
.cat-shape-chip .cat-tile-frame { padding: 0; border-radius: 50%; background: none; }
.cat-shape-chip .cat-tile-media { border: 0; border-radius: 50%; }
.cat-shape-chip .cat-tile-icon { width: 58%; margin-bottom: 0; opacity: 1; }
.cat-shape-chip .cat-tile-name {
  grid-area: name;
  align-self: center;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-body);
  font-size: calc(var(--name-fs) * .9);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}
.cat-shape-chip.cat-frame-gold .cat-tile { border-color: var(--gold-line); }
.cat-shape-chip.cat-frame-silver .cat-tile { border-color: var(--text-faint); }
.cat-shape-chip.cat-frame-glow .cat-tile { border-color: var(--gold-line); box-shadow: 0 0 18px -8px var(--gold-line); }
.cat-shape-chip.cat-frame-none .cat-tile { border-color: transparent; }

/* pointing at it (a mouse; a finger only presses) */
@media (hover: hover) {
  .cat-hover-lift .cat-tile:hover { transform: translateY(-4px); }
  .cat-hover-lift .cat-tile:hover .cat-tile-frame { box-shadow: 0 16px 30px -16px var(--gold-line); }
  .cat-hover-zoom .cat-tile:hover .cat-tile-media > img:not(.lqip) { transform: scale(1.08); }
  .cat-hover-zoom .cat-tile:hover .cat-tile-icon { transform: scale(1.12); }
  .cat-hover-glow .cat-tile:hover .cat-tile-frame { box-shadow: 0 0 0 1px var(--gold), 0 0 28px -6px var(--gold-line); }
  .cat-hover-glow.cat-shape-chip .cat-tile:hover { border-color: var(--gold); box-shadow: 0 0 22px -8px var(--gold-line); }
  .cat-hover-lift.cat-shape-chip .cat-tile:hover { box-shadow: 0 12px 22px -14px var(--gold-line); }
  .cat-grid:not(.cat-hover-none) .cat-tile:hover .cat-tile-title { color: var(--gold); }
}
.cat-grid:not(.cat-hover-none) .cat-tile:active { transform: scale(.98); }
.cat-tile:focus-visible { outline: none; }
.cat-tile:focus-visible .cat-tile-frame, .cat-shape-chip .cat-tile:focus-visible { box-shadow: var(--ring); }

/* coming in when the page opens (none with «تقليل الحركة»); the panel replays it (.is-replay) */
@keyframes cat-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes cat-zoom { from { opacity: 0; transform: scale(.88); } }
@keyframes cat-slide { from { opacity: 0; transform: translateX(32px); } }
@media (prefers-reduced-motion: no-preference) {
  .cat-enter-rise > .cat-tile { animation: cat-rise var(--dur-4) var(--ease-out) backwards; }
  .cat-enter-zoom > .cat-tile { animation: cat-zoom var(--dur-4) var(--ease-out) backwards; }
  .cat-enter-slide > .cat-tile { animation: cat-slide var(--dur-4) var(--ease-out) backwards; }
  .cat-grid > .cat-tile:nth-child(2) { animation-delay: 60ms; }
  .cat-grid > .cat-tile:nth-child(3) { animation-delay: 120ms; }
  .cat-grid > .cat-tile:nth-child(4) { animation-delay: 180ms; }
  .cat-grid > .cat-tile:nth-child(5) { animation-delay: 240ms; }
  .cat-grid > .cat-tile:nth-child(6) { animation-delay: 300ms; }
  .cat-grid > .cat-tile:nth-child(7) { animation-delay: 360ms; }
  .cat-grid > .cat-tile:nth-child(8) { animation-delay: 420ms; }
  .cat-grid > .cat-tile:nth-child(n+9) { animation-delay: 480ms; }
  .cat-grid.is-replay > .cat-tile { animation: none; }
}

/* a row of products or reviews: swiped on a phone, a grid from a tablet up */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 44%);
  gap: var(--sp-3);
  margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
  padding: var(--sp-1) clamp(16px, 4vw, 32px) var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(16px, 4vw, 32px);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-wide { grid-auto-columns: minmax(260px, 82%); }
@media (min-width: 768px) {
  .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-inline: 0; padding: 0; overflow: visible; }
  .rail-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1240px) { .rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); } .rail-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* «مباع 120» (decision 45) */
.sold { display: inline-flex; align-items: center; gap: 4px; color: var(--text-faint); font-size: var(--fs-12); font-weight: 600; }
.sold > .icon { color: var(--gold); }
.sold-lg { font-size: var(--fs-14); }

/* ---------- reviews the owner picked (decision 38) ---------- */
.review-card { display: grid; align-content: start; gap: var(--sp-3); margin: 0; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.review-card-text { margin: 0; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.review-card-by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--text-faint); font-size: var(--fs-13); }
.review-card-name { color: var(--silver); font-weight: 700; }
/* decision 108: «آراء الزبائن» in five looks (site_home.REVIEW_LOOKS); «بطاقات» is the rail above */
.rv-spot { display: grid; gap: var(--sp-2); max-width: 760px; margin-inline: auto; border-radius: var(--r-xl); }
.rv-spot:focus-visible { outline: none; box-shadow: var(--ring); }
.rv-spot-stage { display: grid; }
.rv-spot-slide { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: var(--sp-4); margin: 0;
  padding: var(--sp-8) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--surface-1)); box-shadow: inset 0 1px 0 var(--gold-line);
  text-align: center; opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
.rv-spot-slide.is-on { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease), visibility 0s; }
.rv-spot-slide .stars .icon { width: 20px; height: 20px; }
.rv-spot-text { margin: 0; max-width: 34em; font-family: var(--font-head); font-size: clamp(1.125rem, 1rem + .9vw, 1.5rem);
  font-weight: 700; line-height: 1.7; color: var(--silver); white-space: pre-line; overflow-wrap: anywhere; text-wrap: balance; }
.rv-spot-slide .review-card-by { justify-content: center; }
@media (min-width: 768px) { .rv-spot-slide { padding: var(--sp-10) var(--sp-8); } }
/* a sliding row: the cards pass slowly; with «تقليل الحركة» one row that scrolls by hand, no copies */
.rv-marquee { overflow-x: auto; padding-block: var(--sp-2); scrollbar-width: none; }
.rv-marquee::-webkit-scrollbar { display: none; }
.rv-marquee-track { display: flex; width: max-content; }
.rv-marquee-set { display: flex; gap: var(--sp-4); padding-inline-end: var(--sp-4); }
.rv-marquee .review-card { width: min(320px, 78vw); }
.rv-dup { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rv-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 8%, var(--bg) 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--bg) 8%, var(--bg) 92%, transparent); }
  .rv-marquee-track { animation: pay-slide 70s linear infinite; }
  .rv-marquee .rv-dup { display: flex; }
  .rv-marquee:hover .rv-marquee-track, .rv-marquee:focus-within .rv-marquee-track { animation-play-state: paused; }
}
/* a wall: every picked review at once, in columns, each as long as it is */
.rv-wall { columns: 1; column-gap: var(--sp-4); }
.rv-wall > .review-card { margin-bottom: var(--sp-4); break-inside: avoid; }
@media (min-width: 640px) { .rv-wall { columns: 2; } }
@media (min-width: 1024px) { .rv-wall { columns: 3; } }
/* every rating's average and how many, with three reviews beside it */
.rv-score { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
.rv-score-sum { display: grid; justify-items: center; align-content: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-xl); background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--surface-1));
  box-shadow: inset 0 1px 0 var(--gold-line); text-align: center; }
.rv-score-num { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; }
.rv-score-num .num { font-family: var(--font-head); font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem); font-weight: 900; line-height: 1; color: var(--silver); }
.rv-score-of { color: var(--text-faint); font-weight: 700; }
.rv-score-sum .stars .icon { width: 22px; height: 22px; }
.rv-score-count { margin: 0; color: var(--text-muted); font-size: var(--fs-14); }
.rv-score-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 900px) { .rv-score { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); } .rv-score-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stars { display: flex; gap: 2px; color: var(--gold); }
.stars .icon { width: 16px; height: 16px; fill: currentColor; }

/* ---------- category page: a small picture beside the name ---------- */
.page-top { padding-top: var(--sp-6); }
@media (min-width: 768px) { .page-top { padding-top: var(--sp-10); } }
.cat-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.cat-head-thumb {
  position: relative;
  display: grid;
  place-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--cover-art);
  color: var(--text-muted);
}
.cat-head-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-3) var(--ease); }
@media (min-width: 768px) { .cat-head-thumb { width: 88px; height: 88px; border-radius: var(--r-lg); } .cat-head-thumb .icon { width: 30px; height: 30px; } }
.cat-head-text { display: grid; gap: var(--sp-1); min-width: 0; }
.cat-head-title { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.cat-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); color: var(--text-muted); font-size: var(--fs-14); }
.cat-head-sub .icon { color: var(--silver); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }

/* the small menu (details.menu) is in components.css: the panel uses it too */

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: start; }
  .pdp-media { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
@media (min-width: 1240px) { .pdp { grid-template-columns: 420px minmax(0, 1fr); gap: var(--sp-16); } }
.pdp-media .cover { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
@media (max-width: 899px) { .pdp-media { width: min(72%, 300px); justify-self: center; } }
.pdp-info { display: grid; align-content: start; gap: var(--sp-6); min-width: 0; }
.pdp-head { display: grid; gap: var(--sp-2); }
.pdp-cat { justify-self: start; color: var(--text-muted); font-size: var(--fs-14); font-weight: 600; transition: color var(--dur-1) var(--ease); }
.pdp-cat:hover { color: var(--gold); }
.pdp-title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.pdp-price { display: grid; gap: var(--sp-1); }
.pdp-price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.pdp-price .price-old { font-size: var(--fs-16); }
.pdp-save { color: var(--success); font-size: var(--fs-14); font-weight: 600; }
.pdp-asia { color: var(--text-faint); font-size: var(--fs-14); }

.buy-form { display: grid; gap: var(--sp-5); }
.buy-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.buy-actions > .btn { flex: 1 1 180px; }

/* the product's facts: quiet label / value rows between hairlines */
.spec { display: grid; border-top: 1px solid var(--border); }
.spec-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-14); }
.spec-row dt { flex: none; color: var(--text-faint); }
.spec-row dd { margin: 0; color: var(--text); font-weight: 600; text-align: end; }

.pdp-section { display: grid; align-content: start; gap: var(--sp-2); min-width: 0; }
.pdp-section-title { font-size: var(--fs-18); font-weight: 800; }
@media (min-width: 1240px) { .products-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- auth & checkout ---------- */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: calc(100dvh - var(--header-h) - 120px); padding-block: var(--sp-8); }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
@media (min-width: 1240px) { .checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-10); } }
.summary { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
@media (min-width: 900px) { .summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
/* on a phone the checkout's steps already show every amount: its side summary would repeat them */
@media (max-width: 899px) { .summary-side { display: none; } }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-14); }
.summary-total { padding-top: var(--sp-3); border-top: 1px solid var(--border); color: var(--text); font-weight: 700; }
/* a discount code (decision 37), folded until asked for */
.code-box { border-top: 1px solid var(--border); }
.code-box > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.code-box > summary::-webkit-details-marker { display: none; }
.code-box > summary:hover { color: var(--text); }
.code-box > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.code-box[open] > summary .disclosure-chevron { transform: rotate(180deg); }
.code-form { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.code-row { display: flex; gap: var(--sp-2); }
.code-row > .input { flex: 1; min-width: 0; }
.code-applied { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--success-line); border-radius: var(--r-sm); background: var(--success-soft); color: var(--text); font-size: var(--fs-14); }

/* ---------- footer: the logo, three links, the social icons ---------- */
.site-footer { border-top: 1px solid var(--border); }
.site-footer-in { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding-block: var(--sp-8) var(--sp-3); text-align: center; }
@media (min-width: 768px) { .site-footer-in { flex-direction: row; justify-content: space-between; padding-block: var(--sp-10) var(--sp-4); text-align: start; } }
.footer-logo .brand-mark { width: 32px; height: 32px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-5); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--text-muted); font-size: var(--fs-14); transition: color var(--dur-1) var(--ease); }
.footer-links a:hover { color: var(--gold); }
.social-box { display: grid; justify-items: center; gap: var(--sp-2); }
@media (min-width: 768px) { .social-box { justify-items: end; } }
.social-title { color: var(--text-faint); font-size: var(--fs-13); }
.social { display: flex; gap: var(--sp-2); }
.social a { display: grid; place-content: center; width: var(--touch); height: var(--touch); border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-muted); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.social a:hover { color: var(--gold); border-color: var(--gold-line); }
/* decision 86: «طرق الدفع», the payment companies' logos as small rounded tiles */
.pay-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3) var(--sp-2); border-top: 1px solid var(--border); }
@media (min-width: 768px) { .pay-strip { justify-content: flex-start; } }
.pay-strip-title { color: var(--text-faint); font-size: var(--fs-13); }
.pay-logos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pay-logos img { display: block; width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.footer-bottom { padding-block: var(--sp-2) var(--sp-6); color: var(--text-faint); font-size: var(--fs-13); text-align: center; }
@media (min-width: 768px) { .footer-bottom { text-align: start; } }

/* ---------- mobile tab bar & sticky action ---------- */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--hairline);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  view-transition-name: site-tabbar;
}
.tabbar a {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  color: var(--text-faint);
  font-size: var(--fs-12);
  font-weight: 600;
  transition: color var(--dur-1) var(--ease);
}
.tab-icon { position: relative; display: grid; place-content: center; width: 54px; height: 30px; border-radius: var(--r-full); transition: background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.tabbar .icon { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--gold); }
.tabbar a[aria-current="page"] .tab-icon { background: var(--gold-soft); }
.tabbar a:active .tab-icon { transform: scale(.92); }
.tabbar a:focus-visible { outline: none; box-shadow: inset var(--ring); border-radius: var(--r-md); }
@media (min-width: 900px) { .tabbar { display: none; } }

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--border);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  animation: site-up var(--dur-3) var(--ease-out) backwards;
}
.sticky-cta .grow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- sign-in shell & «حسابي» (phase B) ---------- */
.auth-main { padding-bottom: var(--sp-10); }
.auth-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--fs-13);
}
.auth-footer a { color: var(--text-muted); transition: color var(--dur-1) var(--ease); }
.auth-footer a:hover { color: var(--gold); }

.account { padding-block: var(--sp-8); }
.account-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); } }

/* ---------- design preview banner (staff only) ---------- */
.preview-banner { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--info-soft); color: var(--info); font-size: var(--fs-13); font-weight: 600; text-align: center; }
.preview-banner a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- small helpers of the store pages (C1) ---------- */
.price-stack { display: grid; gap: 2px; }
.fact { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-14); }
.fact .icon { flex: none; color: var(--silver); }

/* ---------- cart, checkout and orders (phase C2) ---------- */
.page-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
/* browser notifications (decision 57): one line under «طلباتي» and an order's title */
.push-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.push-box[hidden] { display: none; }
.push-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); color: var(--gold); }
.push-text { flex: 1 1 220px; min-width: 0; margin: 0; color: var(--text-muted); }
.page-title { margin-bottom: var(--sp-5); }

/* header and tab bar: the cart with its number of pieces */
.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--on-gold);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  animation: ds-pop var(--dur-2) var(--ease-out);
}
.tab-icon .cart-count { top: -3px; inset-inline-end: 6px; }
/* «طلباتي» in the header: orders that changed since they were opened (decision 52) */
.nav-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin-inline-start: var(--sp-1);
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--on-gold);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* cart lines */
.cart-list { display: grid; gap: var(--sp-3); }
.cart-line { display: flex; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.cart-line.has-problem { border-color: var(--warning-line); }
.cart-thumb { position: relative; flex: none; width: 72px; align-self: flex-start; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-sm); background: var(--cover-art); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb .cover-mark { font-size: var(--fs-13); }
.cart-thumb .cover-art .icon { width: 20px; height: 20px; }
.cart-line-body { display: grid; align-content: start; gap: var(--sp-2); flex: 1; min-width: 0; }
.cart-line-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.cart-line-name { font-family: var(--font-head); font-weight: 700; color: var(--silver); }
a.cart-line-name:hover { color: var(--gold); }
.cart-line-meta { font-size: var(--fs-13); color: var(--text-muted); }
.cart-line-time { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-13); }
.cart-line-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.price-end { justify-items: end; text-align: end; }

/* quantity: − 2 + (each button is a submit, works without JS) */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface-2); }
.qty-btn { display: grid; place-content: center; width: var(--touch); height: var(--touch); padding: 0; border: 0; border-radius: var(--r-full); background: none; color: var(--text); }
.qty-btn:hover { background: var(--surface-3); }
.qty-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.qty-btn:disabled { color: var(--text-faint); opacity: .45; cursor: default; background: none; }
.qty-value { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the product page's «العدد» (decision 74): the same pill, with a box to type in */
.qty-field { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.qty-field .label { margin: 0; }
.qty-input { width: 48px; height: var(--touch); padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-weight: 700; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* the mobile total bar above the tab bar */
.sticky-cta .price { display: block; }
@media (max-width: 899px) { .has-sticky-cta .has-tabbar { padding-bottom: calc(var(--tabbar-h) + 72px + env(safe-area-inset-bottom)); } }

/* checkout steps (ds.js [data-wizard] shows one at a time) */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.wizard .stepper { margin-bottom: var(--sp-2); }
.wizard [data-step]:not([hidden]) { animation: site-in var(--dur-3) var(--ease-out) backwards; }
.wizard-nav { display: flex; flex-wrap: wrap-reverse; gap: var(--sp-3); margin-top: var(--sp-2); }  /* on a phone «التالي» sits above «رجوع» */
.wizard-nav > .btn { flex: 1 1 200px; }
.wizard-nav > [data-step-back] { flex: 0 0 auto; }

/* payment account: details open under the chosen one */
.pay-choice { display: grid; gap: var(--sp-2); }
.pay-details { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1px dashed var(--gold-line); border-radius: var(--r-md); background: var(--surface-2); }
@supports selector(:has(*)) {
  .pay-details { display: none; }
  .pay-choice:has(> .option > input:checked) .pay-details { display: grid; animation: site-in var(--dur-2) var(--ease-out) backwards; }
}

/* order sent */
.done { display: grid; gap: var(--sp-4); max-width: 720px; margin-inline: auto; }
.done-head { display: grid; justify-items: center; gap: var(--sp-3); padding-block: var(--sp-4); text-align: center; }
.done-icon { display: grid; place-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--success); color: var(--on-strong); box-shadow: 0 0 0 8px var(--success-soft); animation: ds-pop var(--dur-4) var(--ease-out) backwards; }
.order-code {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  background: var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-head);
  font-size: var(--fs-22);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* the pieces of an order, each with its own number */
.pieces { display: grid; }
.piece { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--border); }
.piece:last-child { border-bottom: 0; }
.piece-thumb { display: grid; place-content: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-3); color: var(--silver); }
.piece-thumb img { width: 100%; height: 100%; object-fit: cover; }
.piece-name { font-weight: 700; color: var(--text); }
.piece-meta { font-size: var(--fs-13); color: var(--text-faint); }
.piece-end { display: grid; justify-items: end; gap: var(--sp-1); }

/* «طلباتي» */
.order-list { display: grid; gap: var(--sp-3); }
/* «طلباتي» in two groups: on its way, done (decision 58) */
.order-group { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.order-group-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-16);
  font-weight: 700; color: var(--text-muted); }
/* the site's bell «الإشعارات» (decision 58) */
.notice-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.notice-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start;
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.notice-row.is-new { border-color: var(--info-line); background: var(--info-soft); }
.notice-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted); }
.notice-row.is-new .notice-icon { color: var(--info); }
.notice-body { display: grid; gap: 4px; min-width: 0; }
.notice-title { margin: 0; font-weight: 700; color: var(--text); }
.notice-text { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.notice-meta { margin: 0; color: var(--text-faint); font-size: var(--fs-13); }
.order-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.order-card:hover { border-color: var(--border-hover); background: var(--surface-2); }
.order-card:active { transform: scale(.99); }
.order-card:focus-visible { outline: none; box-shadow: var(--ring); }
.order-thumb { display: grid; place-content: center; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-3); color: var(--silver); }
.order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-card-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.order-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.order-card-code { font-weight: 700; color: var(--text); white-space: nowrap; }
.order-card-names { color: var(--text-muted); font-size: var(--fs-14); }
.order-card-meta { display: block; color: var(--text-faint); font-size: var(--fs-13); }
.order-card-end { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.order-card-go { color: var(--text-faint); }
@media (max-width: 420px) { .order-card-go { display: none; } }
/* on a phone the price drops under the order, so the number stays on one line (decision 59) */
@media (max-width: 560px) {
  .order-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .order-thumb { width: 44px; height: 44px; }
  .order-card-end { grid-column: 2; }
}
.order-mini { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.order-mini .grow { display: grid; gap: 2px; }
.order-mini:hover .order-card-code { color: var(--gold); }

/* one order */
.receipt-link { display: block; border-radius: var(--r-sm); }
.receipt-link:focus-visible { outline: none; box-shadow: var(--ring); }
.receipt-thumb { width: 100%; max-height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }

/* ---------- policies, privacy, help (C3, calmer in H7) ---------- */
/* a jump to #review or #rules keeps the title below the sticky header */
section[id], details[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

.doc-hero { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-6); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--border); }
.doc-title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight: 900; }
.doc-updated { color: var(--text-faint); font-size: var(--fs-13); }
.doc-intro { max-width: 72ch; margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-16); }
.doc-intro a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
@media (min-width: 900px) { .doc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-12); align-items: start; } }
.doc-toc { display: grid; gap: var(--sp-2); }
@media (min-width: 900px) { .doc-toc { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }
.doc-toc-title { color: var(--text-faint); font-size: var(--fs-13); font-weight: 700; }
.doc-toc ol { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: toc; border-inline-start: 1px solid var(--border); }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: flex;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-14);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.doc-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.doc-toc a:hover { border-inline-start-color: var(--gold); color: var(--text); }
@media (max-width: 899px) {
  .doc-toc ol { display: flex; gap: var(--sp-2); padding-bottom: var(--sp-1); overflow-x: auto; border: 0; scrollbar-width: none; }
  .doc-toc ol::-webkit-scrollbar { display: none; }
  .doc-toc a { flex: none; min-height: 36px; align-items: center; margin: 0; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-full); white-space: nowrap; }
}

.doc-body { display: grid; gap: var(--sp-10); max-width: 74ch; color: var(--text-muted); counter-reset: docsec; }
.doc-section { display: grid; gap: var(--sp-3); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.doc-section > h2 { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-1); font-size: var(--fs-22); font-weight: 800; counter-increment: docsec; }
.doc-section > h2::before { content: counter(docsec, decimal-leading-zero); color: var(--gold); font-size: var(--fs-16); font-weight: 900; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .doc-section > h2 { font-size: var(--fs-28); } }
.doc-section h3 { margin-top: var(--sp-3); color: var(--silver); font-size: var(--fs-18); }
.doc-section ul, .doc-section ol { display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-6); }
.doc-section ul { list-style: disc; }
.doc-section ol { list-style: decimal; }
.doc-section li::marker { color: var(--gold); font-weight: 700; }
.doc-section strong { color: var(--text); }
.doc-section a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.doc-note { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-inline-start: 3px solid var(--info); background: var(--info-soft); color: var(--text); }
.doc-note .icon { flex: none; margin-top: 4px; color: var(--info); }

/* the rules of a category (services/category_rules.py) */
.rules { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules-variant { margin-top: var(--sp-2); color: var(--silver); font-family: var(--font-head); font-weight: 700; }
.rule { --rule-c: var(--info); --rule-line: var(--info-line); display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--border); border-top: 2px solid var(--rule-c); border-radius: var(--r-sm); background: var(--surface-1); }
.rule-success { --rule-c: var(--success); --rule-line: var(--success-line); }
.rule-warning { --rule-c: var(--warning); --rule-line: var(--warning-line); }
.rule-danger { --rule-c: var(--danger); --rule-line: var(--danger-line); }
.rule-title { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--rule-c); font-weight: 700; }
.rule-list { display: grid; gap: var(--sp-1); padding-inline-start: var(--sp-5); list-style: disc; color: var(--text); font-size: var(--fs-14); }

/* help: questions beside a contact card */
.help { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) { .help { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .help-contact { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

/* error page */
.error-page { display: grid; justify-items: center; gap: var(--sp-3); max-width: 560px; margin-inline: auto; padding-block: var(--sp-10); text-align: center; }
.error-icon { display: grid; place-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--surface-2); color: var(--gold); }
.error-code { color: var(--text-faint); font-family: var(--font-head); font-size: var(--fs-14); font-weight: 700; letter-spacing: .12em; }
.error-actions { justify-content: center; margin-top: var(--sp-2); }

/* the Telegram username check under a field (the design guide's older sample) */
.tg-found { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-13); }
.tg-found.is-ok { color: var(--success); }
.tg-found.is-warn { color: var(--warning); }
.rating-pair { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .rating-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the wallet (decision 28): «محفظتي», «حسابي», the checkout ---------- */
.wallet-use { color: var(--text-faint); font-size: var(--fs-13); }
.wallet-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); }
.wallet-mini:hover { border-color: var(--gold-line); }
.wallet-mini:focus-visible { outline: none; box-shadow: var(--ring); }
.wallet-mini-kind { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-14); }
.wallet-mini-amount { justify-self: end; color: var(--gold); font-weight: 800; }
.wallet-change { flex: none; color: var(--text-muted); font-weight: 700; }
.wallet-change.is-plus { color: var(--success); }
.input-code { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.wallet-note { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gold-line); border-radius: var(--r-md); background: var(--gold-soft); color: var(--text); font-size: var(--fs-14); }
.wallet-note .icon { flex: none; color: var(--gold); }
.summary-minus { color: var(--success); }

/* ---------- whose Telegram account (decision 31) ---------- */
.tg-card { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); animation: site-in var(--dur-2) var(--ease-out) backwards; }
.tg-card.is-ok { border-color: var(--success-line); }
.tg-card.is-warn { border-color: var(--warning-line); }
.tg-card.is-info { border-color: var(--info-line); }
.tg-avatar { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
  border-radius: var(--r-full); background: var(--surface-3); color: var(--silver); font-weight: 700; }
.tg-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tg-body { display: grid; gap: 2px; min-width: 0; }
.tg-title { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.tg-card.is-warn .tg-title { color: var(--warning); }
.tg-card.is-wait .tg-title { color: var(--text-muted); font-weight: 600; }
.tg-user { font-size: var(--fs-13); color: var(--text-muted); justify-self: start; }
.tg-sub { font-size: var(--fs-13); color: var(--text-muted); overflow-wrap: anywhere; }
.tg-confirm { margin-top: var(--sp-2); }
/* a field people never see (a bot fills it): off the screen, not display:none (some bots skip those) */
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- motion (H7): short and soft; base.css turns it off for «reduce motion» ---------- */
@keyframes site-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes site-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* tiles and cards rise one after the other when the page opens */
  .reveal > * { animation: site-in var(--dur-4) var(--ease-out) backwards; }
  .reveal > :nth-child(2) { animation-delay: 50ms; }
  .reveal > :nth-child(3) { animation-delay: 100ms; }
  .reveal > :nth-child(4) { animation-delay: 150ms; }
  .reveal > :nth-child(5) { animation-delay: 200ms; }
  .reveal > :nth-child(6) { animation-delay: 250ms; }
  .reveal > :nth-child(7) { animation-delay: 300ms; }
  .reveal > :nth-child(8) { animation-delay: 350ms; }
  .reveal > :nth-child(n+9) { animation-delay: 400ms; }
  /* further down: they rise as they scroll into view (browsers that can) */
  @supports (animation-timeline: view()) {
    .reveal-scroll > * { animation: site-in linear backwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  /* pages cross-fade; the header and the tab bar stay put */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); animation-timing-function: var(--ease); }
}

/* pictures (H8): their own colours blurred at once (the 16px preview inlined in the page), then
   the picture fades in over it when it arrives (ds.js marks it), with a soft sheen until then */
.lqip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.15); pointer-events: none; }
.cover > img:not(.lqip) { position: relative; }
.js img[data-fade] { opacity: 0; }
.js img[data-fade].is-in { opacity: 1; }
.cover > img { transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease); }
.js :is(.cover, .cat-tile-media, .slide-media, .cat-head-thumb):has(> img[data-fade]:not(.is-in))::after,
.js .slide-media:has(> picture > img[data-fade]:not(.is-in))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--shimmer);
  animation: ds-shimmer 1.4s linear infinite;
  pointer-events: none;
}
/* «الأدمن بانتظارك» (decision 59): the time is a deadline to write, said under it */

/* the order page's first card (decision 59): where it is, and the one thing to do now */
.order-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start;
  margin-bottom: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); }
.order-hero-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted); }
.order-hero-body { display: grid; gap: var(--sp-1); min-width: 0; }
.order-hero-title { margin: 0; color: var(--text); font-size: var(--fs-22); font-weight: 800; line-height: var(--lh-tight); }
.order-hero-text { margin: 0; color: var(--text-muted); }
.order-hero-time { margin: var(--sp-1) 0 0; color: var(--text); font-weight: 700; }
.order-hero-action { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) {
  .order-hero { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .order-hero-action { grid-column: auto; }
}
/* decision 93 «ألوان الحالة»: each state in its colour, a soft tint from the card's corner and a filled icon */
.order-hero.tone-info { border-color: var(--info-line);
  background: linear-gradient(160deg, var(--info-glow) 0%, var(--info-soft) 55%, var(--surface-1) 100%); }
.order-hero.tone-info .order-hero-icon { background: var(--info); color: var(--on-strong); }
.order-hero.tone-warning { border-color: var(--warning-line);
  background: linear-gradient(160deg, var(--warning-glow) 0%, var(--warning-soft) 55%, var(--surface-1) 100%); }
.order-hero.tone-warning .order-hero-icon { background: var(--warning); color: var(--on-strong); }
.order-hero.tone-success { border-color: var(--success-line);
  background: linear-gradient(160deg, var(--success-glow) 0%, var(--success-soft) 55%, var(--surface-1) 100%); }
.order-hero.tone-success .order-hero-icon { background: var(--success); color: var(--on-strong); }
.order-hero.tone-danger { border-color: var(--danger-line);
  background: linear-gradient(160deg, var(--danger-glow) 0%, var(--danger-soft) 55%, var(--surface-1) 100%); }
.order-hero.tone-danger .order-hero-icon { background: var(--danger); color: var(--on-strong); }
.order-hero .send-end { border-color: var(--border-strong); background: var(--sink); }
.timeline::before { background: linear-gradient(var(--success), var(--border)); }
.tl-item.is-done .tl-dot { box-shadow: 0 0 0 4px var(--success-soft); }
/* «ادعُ صديقك» (decision 94): the reward as a price (gold), the link to copy and share, three real steps */
.invite-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); max-width: 640px; margin-inline: auto; }
.invite-hero { display: grid; justify-items: center; gap: var(--sp-3); padding-block: var(--sp-4); text-align: center; }
.invite-hero-icon { display: grid; place-content: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--surface-2); color: var(--silver); box-shadow: 0 0 0 8px var(--surface-1); }
.invite-lead { color: var(--text); font-size: var(--fs-18); text-wrap: balance; }
.invite-prize { color: var(--gold); }
.invite-link > span { white-space: normal; overflow-wrap: anywhere; }  /* the whole link shows, on two lines if need be */
.invite-share { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.invite-share .btn { flex: 1 1 160px; }
.invite-steps { display: grid; gap: var(--sp-3); }
.invite-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3);
  color: var(--text); }
.invite-step-n { display: grid; place-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); color: var(--silver); font-weight: 700; }
.invite-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.invite-number { display: grid; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface-1); text-align: center; }
.invite-number .num { color: var(--text); font-size: var(--fs-28); font-weight: 800; }
/* «طلباتي»: what needs the customer or went wrong is tinted, the rest only edged */
.order-card.tone-warning { border-color: var(--warning-line); background: linear-gradient(160deg, var(--warning-soft), var(--surface-1) 65%); }
.order-card.tone-danger { border-color: var(--danger-line); background: linear-gradient(160deg, var(--danger-soft), var(--surface-1) 65%); }
.order-card.tone-info { border-color: var(--info-line); }
.order-card.tone-success { border-color: var(--success-line); }
/* one order, in one order of reading (decision 92): the number once, the card of what to do now (with the Telegram
   steps inside it), then the products and the steps; the payment on the side */
.order-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-5); }
.order-top-id { display: grid; gap: var(--sp-1); min-width: 0; }
.order-title { text-wrap: balance; }
.order-hero-note { margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-14); overflow-wrap: anywhere; }
.order-hero-more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--hairline); overflow-wrap: anywhere; }
.order-block { margin-bottom: var(--sp-5); }
/* «صحّح طلبك» (decision 105): the new receipt under the same number, inside the first card */
.fix-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); max-width: 560px; }
.fix-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.fix-pay { color: var(--text); font-weight: 600; }
.fix-more { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.fix-more > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-3);
  color: var(--text-muted); cursor: pointer; list-style: none; }
.fix-more > summary::-webkit-details-marker { display: none; }
.fix-more > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }
.fix-more[open] > summary { color: var(--text); }
.fix-more > .field { padding: 0 var(--sp-3) var(--sp-3); }
.fix-send { justify-self: stretch; }
@media (min-width: 560px) { .fix-send { justify-self: start; } }
.fix-other { justify-self: start; }
/* «إلغاء الطلب وإرجاع الفلوس» (decision 106): where his money goes back, inside the first card */
.refund-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); max-width: 560px; }
.refund-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); }
.refund-line { color: var(--text); font-weight: 600; }
/* decision 107: an Asiacell card sent back, its codes folded under «عرض الكود» */
.refund-card > .copy-field { margin: 0 var(--sp-3) var(--sp-2); }
/* the whole code on one line, never cut: the copy button goes under it when the line is short */
.refund-card .copy-field { flex-wrap: wrap; padding-block: var(--sp-1); }
.refund-card .copy-field > span { flex: 1 0 auto; overflow: visible; text-overflow: clip; }
.refund-card .copy-field > .btn { margin-inline-start: auto; }
.refund-card > .hint { padding: 0 var(--sp-3) var(--sp-3); }
.send-number { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); max-width: 560px; }
.order-grid .push-box { margin-bottom: 0; }
.send-lead { color: var(--text); font-weight: 600; }
.send-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.send-end { display: grid; gap: 2px; min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2); }
.send-k { color: var(--text-faint); font-size: var(--fs-12); }
.send-v { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.send-arrow { display: grid; place-items: center; color: var(--text-faint); }
.send-go { justify-self: stretch; }
@media (min-width: 560px) { .send-go { justify-self: start; } }
/* «طلباتي» (decision 59): a little bar (received, paid, delivered) and what to do now */
.order-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 180px; margin-top: var(--sp-2); }
.op-step { height: 4px; border-radius: var(--r-full); background: var(--surface-3); }
.op-step.is-done { background: var(--success); }
.order-progress.is-failed .op-step.is-done { background: var(--danger); }
.order-card-hint { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--warning);
  font-size: var(--fs-13); font-weight: 700; }
.order-card-hint .icon { flex: none; }
.order-card-hint.is-calm { color: var(--text-muted); font-weight: 600; }

.orders-todo { margin-bottom: var(--sp-4); color: var(--warning); }

/* =========================================================== the site's motions (decision 66)
   Switched on or off in the panel («الرئيسية والإعلان ← الحركات»): the shell carries motion-<key>.
   «blur», «count», «spot» and «smooth» are run by ds/site-motion.js (GSAP, ScrollTrigger and Lenis from
   static/vendor/); «star» and «rays» are CSS only. The ideas of «blur», «star», «rays» and «spot» come
   from React Bits (David Haz, MIT + Commons Clause), drawn again in the store's colours. Every motion
   stays still for a visitor who asked for less motion. */
@property --star-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.bw { display: inline-block; }  /* one word of a title that comes out of a blur */
.bw-run { direction: ltr; unicode-bidi: isolate; }  /* English words of a title, kept in their order */
.btn-star { position: relative; isolation: isolate; }

@media (prefers-reduced-motion: no-preference) {
  /* «blur»: a title waits for its words; if the script never comes, it shows by itself */
  .motion-blur [data-blur-words]:not(.is-split) { animation: blur-guard var(--dur-3) 1.2s var(--ease-out) backwards; }
  @keyframes blur-guard { from { opacity: 0; filter: blur(8px); } }

  /* «star»: a light that runs round the main button (React Bits «Star Border») */
  .motion-star .btn-star::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--star-a), transparent 0 64%, var(--gold-line) 76%, var(--silver) 84%, var(--gold) 88%, transparent 96%);
    -webkit-mask: linear-gradient(var(--on-gold) 0 0) content-box, linear-gradient(var(--on-gold) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--on-gold) 0 0) content-box exclude, linear-gradient(var(--on-gold) 0 0);
    pointer-events: none;
    animation: star-spin 3.4s linear infinite;
  }
  @keyframes star-spin { to { --star-a: 360deg; } }

  /* «rays»: soft gold beams from the top, swaying slowly behind the banner (React Bits «Light Rays») */
  .motion-rays .hero { position: relative; isolation: isolate; overflow-x: clip; }  /* the turning beams never widen the page (117) */
  .motion-rays .hero::before {
    content: "";
    position: absolute;
    inset: -10% 0 auto;
    height: min(560px, 120vw);
    z-index: -1;
    background: repeating-conic-gradient(from 180deg at 50% 0%, var(--gold-soft) 0deg 2.2deg, transparent 2.2deg 10deg);
    -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 0%, var(--on-gold) 0%, transparent 74%);
    mask-image: radial-gradient(ellipse 58% 72% at 50% 0%, var(--on-gold) 0%, transparent 74%);
    filter: blur(5px);
    transform-origin: 50% 0%;
    pointer-events: none;
    animation: rays-sway 14s ease-in-out infinite alternate;
  }
  @keyframes rays-sway { from { transform: rotate(-4deg); opacity: .7; } to { transform: rotate(4deg); opacity: 1; } }
}

/* «spot»: a gold light under the mouse on the cards (React Bits «Spotlight Card»), a mouse only */
@media (hover: hover) and (pointer: fine) {
  .motion-spot .cat-tile-frame { position: relative; }
  .motion-spot .product-card::after, .motion-spot .cat-tile-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--gold-soft), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease);
  }
  .motion-spot .product-card:hover::after, .motion-spot .cat-tile:hover .cat-tile-frame::after { opacity: 1; }
}

/* «smooth»: Lenis's own rules (lenis.css), and no CSS smooth scrolling on top of it */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================== more of the site's motions (decision 67)
   «shine» and «parallax» are CSS only; «tilt» and «morph» get a little help from ds/site-motion.js (no library).
   «morph» is a view transition between two pages with one name, «product-cover», on one element of each page:
   the card the customer picked (.vt-hero), the product page's picture, and the cart line just added (.is-new).
   A browser without view transitions just opens the page. Nothing here moves for a visitor who asked for less. */
@media (prefers-reduced-motion: no-preference) {
  /* «shine»: a soft light passes over the offer's flag and «فوري» every few seconds (React Bits «Shiny Text») */
  .motion-shine :is(.cover-flag-sale, .cat-tile-badge) { overflow: hidden; }
  .motion-shine :is(.cover-flag-sale, .cat-tile-badge)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--sheen);
    transform: translateX(110%);
    animation: flag-shine 6s var(--ease) 1.5s infinite;
    pointer-events: none;
  }
  @keyframes flag-shine { 0%, 72% { transform: translateX(110%); } 100% { transform: translateX(-110%); } }

  /* «parallax»: the banner's picture moves a little slower than the page as it scrolls away (browsers that can) */
  @supports (animation-timeline: view()) {
    .motion-parallax .hero { view-timeline: --hero block; }
    .motion-parallax .hero .slide-media img:not(.lqip) {
      animation: banner-depth linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    @keyframes banner-depth { to { transform: translateY(24%); } }
  }

  /* «morph»: one picture goes from page to page */
  .motion-morph .pdp-media .cover,
  .motion-morph .vt-hero,
  .motion-morph .cart-line.is-new .cart-thumb { view-transition-name: product-cover; }
  .motion-morph.vt-picked :is(.pdp-media .cover, .cart-line.is-new .cart-thumb) { view-transition-name: none; }  /* a card picked here has it */
  ::view-transition-group(product-cover) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(product-cover), ::view-transition-new(product-cover) { height: 100%; object-fit: cover; }
  /* the line just added to the cart glows once the picture has landed */
  .motion-morph .cart-line.is-new { animation: cart-arrive 1.6s var(--ease-out) .35s backwards; }
  @keyframes cart-arrive { from { box-shadow: 0 0 0 1px var(--gold-line), 0 0 28px var(--gold-soft); } to { box-shadow: 0 0 0 0 transparent; } }
}

/* «tilt»: the product page's picture leans towards the mouse with a soft light on it (React Bits «Tilted Card»),
   a mouse only; ds/site-motion.js gives --tilt-x/--tilt-y and where the light is */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-tilt .pdp-media { perspective: 900px; }
  .motion-tilt .pdp-media .cover {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 500ms var(--ease-out);
  }
  .motion-tilt .pdp-media .cover.is-tilting { transition-duration: 120ms; }
  .motion-tilt .pdp-media .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 30%), var(--glare), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
    pointer-events: none;
  }
  .motion-tilt .pdp-media .cover.is-tilting::before { opacity: 1; }
}

/* =========================================================== the cart without leaving the page (decision 68)
   ds/site-cart.js: «أضف للسلة» stays on the product page; with «صورة المنتج تنتقل معه» on, a copy of the
   product's picture (.cart-fly, placed and sized by the script) flies into the cart button. */
.cart-fly { position: fixed; z-index: calc(var(--z-toast) + 1); pointer-events: none; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-3); will-change: transform, opacity; }
.cart-fly > .cover { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }

/* =========================================================== «الميزانية» and «رجوع» (decision 69) */
/* the category page's two menus sit together at the toolbar's end; «الميزانية» holds ready ranges and a typed one */
.toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.budget-menu .menu-list { min-width: min(250px, calc(100vw - 2 * var(--sp-4))); }
/* decision 117 (the phone check): «الميزانية» opens from the toolbar's own end, never past the screen on a 320 phone */
.toolbar-end { position: relative; }
.toolbar-end > .budget-menu { position: static; }
.budget-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-1); border-top: 1px solid var(--border); }
.budget-form-title { margin: 0; color: var(--text-muted); font-size: var(--fs-13); font-weight: 600; }
.budget-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.budget-fields .input { height: 40px; min-height: 40px; padding-inline: var(--sp-3); font-size: var(--fs-14); }

/* «رجوع» in the header: at its start on a phone (the logo stays in the middle), before the logo on a computer.
   data-history-back goes back to the page before when there is one of ours, else to the page above it. */
.site-header-in { position: relative; }
.site-start { display: contents; }
.back-btn { position: absolute; inset-inline-start: var(--sp-2); inset-block: 0; margin-block: auto; }
@media (min-width: 900px) {
  .site-start { display: flex; align-items: center; gap: var(--sp-2); justify-self: start; }
  .back-btn { position: relative; inset: auto; margin: 0; }
}

/* =========================================================== «عروض الإيميل» (decision 71): /subscribe and its links */
.offer-card { display: grid; justify-items: center; gap: var(--sp-4); max-width: 460px; margin: var(--sp-6) auto var(--sp-10); padding: var(--sp-8) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-1); text-align: center; }
.offer-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--gold-line); border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold); }
.offer-icon.is-done { border-color: var(--border-strong); background: var(--surface-2); color: var(--success); }
.offer-icon.is-off { border-color: var(--border-strong); background: var(--surface-2); color: var(--warning); }
.offer-title { margin: 0; font-family: var(--font-head); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); color: var(--silver); text-wrap: balance; }
.offer-text { margin: 0; max-width: 36ch; color: var(--text-muted); line-height: 1.9; }
.offer-form { display: grid; gap: var(--sp-3); width: 100%; }
.offer-form .field { text-align: start; }
.offer-note { margin: 0; color: var(--text-faint); font-size: var(--fs-13); line-height: 1.8; }

/* ---------- «جوائزي» (decision 74): a card per reward, its code while it can be used, «استخدمها بالسلة» ---------- */
.reward-cards { display: grid; gap: var(--sp-3); max-width: 760px; margin: 0; padding: 0; list-style: none; }
.reward-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center;
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.reward-card.is-ready { border-color: var(--border-strong); }
.reward-card.is-done { border-style: dashed; }
.reward-icon { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); color: var(--silver); }
.reward-body { display: grid; gap: 2px; min-width: 0; }
.reward-title { margin: 0; color: var(--silver); font-weight: 700; overflow-wrap: anywhere; }
.reward-meta { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }
.reward-code { margin: var(--sp-1) 0 0; color: var(--text); font-weight: 700; letter-spacing: .08em; }
.reward-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); }
@media (min-width: 640px) {
  .reward-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .reward-side { grid-column: auto; justify-content: flex-end; }
}
/* the cart: the customer's ready rewards, one tap each */
.reward-picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.reward-picks > p { flex-basis: 100%; margin: 0; }
.reward-picks > form { margin: 0; }
/* the order's review: what rating it earns (decision 74) */
.review-gift { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: var(--fs-14); }

/* «تطبيق المتجر» (decision 74): the store on the phone's home screen */
.app-page { display: grid; gap: var(--sp-4); max-width: 640px; }
.app-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.app-hero .page-title { margin: 0 0 var(--sp-1); }
.app-hero p { margin: 0; }
.app-hero-icon { width: 72px; height: 72px; border-radius: 22%; box-shadow: 0 0 0 1px var(--border-strong); }
@media (min-width: 768px) { .app-hero-icon { width: 88px; height: 88px; } }
.app-on { margin: 0; padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text); }
.app-on .icon { color: var(--success); }
.app-gift { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start;
  padding: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface-1); }
.app-gift-body { display: grid; gap: var(--sp-1); min-width: 0; }
.app-gift-title { margin: 0; color: var(--silver); font-size: var(--fs-16); overflow-wrap: anywhere; }
.app-gift-body p { margin: 0; }
.app-how { display: grid; gap: var(--sp-3); }
.app-install { justify-self: start; }
.app-steps { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); list-style: none;
  counter-reset: app-step; }
.app-steps li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sp-2); align-items: center;
  counter-increment: app-step; color: var(--text); }
.app-steps li::before { content: counter(app-step); display: grid; place-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--surface-2); color: var(--gold); font-weight: 700; font-size: var(--fs-13); }
.app-steps li .icon { color: var(--silver); }

/* «عجلة الحظ» (decision 74; decision 75): the wheel beside its words, «آخر الفائزين» and the chances */
.wheel-page { display: grid; gap: var(--sp-5); }
.wheel-head .page-title { margin: 0 0 var(--sp-1); }
.wheel-head p { margin: 0; }
.wheel-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
@media (min-width: 768px) { .wheel-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wheel-side { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; max-width: 440px; }
.wheel-note { margin: 0; color: var(--text); }
.wheel-note .icon { color: var(--gold); }
.wheel-result { margin: 0; padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text); font-weight: 700; }
.wheel-result.is-won { border-color: var(--gold-line); color: var(--silver); }
.wheel-odds { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); list-style: none; }
.wheel-odds li { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--text); }
.wheel-odds .num { color: var(--silver); font-weight: 700; }
.winners { display: grid; gap: var(--sp-2); min-width: 0; padding: var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-1); }
.winners-title { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }
.winners-title .icon { color: var(--gold); }
.winners-strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--bg) 12%, var(--bg) 88%, transparent); }
.winners-move { display: flex; width: max-content; }
.winners-track { display: flex; gap: var(--sp-5); margin: 0; padding: 0 0 0 var(--sp-5); list-style: none; }
.winners-track li { display: inline-flex; gap: var(--sp-2); white-space: nowrap; color: var(--text); font-size: var(--fs-14); }
.winners-track b { color: var(--silver); }
.winners-track span { color: var(--gold); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .winners-move { animation: winners-run 36s linear infinite; }
  .winners-strip:hover .winners-move { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .winners-strip { mask-image: none; }
  .winners-move, .winners-track { width: auto; flex-wrap: wrap; }
  .winners-track[aria-hidden] { display: none; }
}
@keyframes winners-run { to { transform: translateX(50%); } }

/* «مبروك» (decision 75): the prize in the middle of the screen, gold sparks, and its button */
.win-dialog { width: min(92vw, 380px); padding: var(--sp-6) var(--sp-5) var(--sp-5); border: 1px solid var(--gold-line);
  border-radius: var(--r-lg); background: var(--surface-1); color: var(--text); text-align: center; overflow: hidden; }
.win-icon { display: grid; place-content: center; width: 72px; height: 72px; margin: 0 auto var(--sp-3); border-radius: 50%;
  background: var(--gold-gradient); color: var(--on-gold); box-shadow: var(--gold-glow); }
.win-icon .icon { width: 34px; height: 34px; }
.win-dialog.is-lost .win-icon { background: var(--surface-3); color: var(--silver); box-shadow: none; }
.win-title { margin: 0 0 var(--sp-2); color: var(--silver); font-size: var(--fs-28); }
.win-prize { margin: 0 0 var(--sp-2); color: var(--gold); font-size: var(--fs-18); font-weight: 800; overflow-wrap: anywhere; }
.win-note { margin: 0 0 var(--sp-4); color: var(--text-muted); }
.win-actions { display: grid; gap: var(--sp-2); }
.win-actions form { margin: 0; display: grid; }
.win-sparks { position: absolute; inset: 0; pointer-events: none; }
.win-spark { position: absolute; top: 72px; left: 50%; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); opacity: 0; }
.win-spark:nth-child(3n) { background: var(--silver); }
.win-dialog.is-lost .win-sparks { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .win-dialog[open] .win-spark { animation: spark-fly 1.1s var(--ease-out) .1s both; }
  .win-dialog[open] .win-icon { animation: win-pop .5s var(--ease-out) both; }
}
.s1 { --sx: -110px; --sy: -40px; } .s2 { --sx: 110px; --sy: -36px; } .s3 { --sx: -80px; --sy: 60px; }
.s4 { --sx: 84px; --sy: 64px; } .s5 { --sx: -140px; --sy: 10px; } .s6 { --sx: 140px; --sy: 14px; }
.s7 { --sx: -40px; --sy: -70px; } .s8 { --sx: 44px; --sy: -72px; } .s9 { --sx: -120px; --sy: 90px; }
.s10 { --sx: 120px; --sy: 92px; } .s11 { --sx: -10px; --sy: 110px; } .s12 { --sx: 12px; --sy: -96px; }
@keyframes spark-fly { 0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(160deg) scale(.4); } }
@keyframes win-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* «جرّب حظك» on the home page (decision 75): a small gold button above the tab bar, while the wheel turns */
.luck-fab { position: fixed; inset-inline-end: var(--sp-4); bottom: calc(var(--tabbar-h, 64px) + var(--sp-3) + env(safe-area-inset-bottom));
  z-index: 30; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-4);
  border-radius: var(--r-full); background: var(--gold-gradient); color: var(--on-gold); font-weight: 800;
  box-shadow: var(--gold-glow); text-decoration: none; }
.luck-fab:focus-visible { outline: none; box-shadow: var(--ring), var(--gold-glow); }
@media (min-width: 900px) { .luck-fab { bottom: var(--sp-6); } }
@media (prefers-reduced-motion: no-preference) {
  .luck-fab { animation: luck-in .5s var(--ease-out) .6s both; }
  .luck-fab .icon { animation: luck-wiggle 2.6s ease-in-out 1.2s infinite; }
}
@keyframes luck-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes luck-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 92% { transform: rotate(10deg); } }

/* «استلم هديتك» (decision 75): the product, then the username and the policies */
.claim-page { display: grid; gap: var(--sp-4); max-width: 560px; }
.claim-product { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center;
  padding: var(--sp-4); border: 1px solid var(--gold-line); border-radius: var(--r-lg); background: var(--surface-1); }
.claim-thumb { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2); }
.claim-thumb.cover-art { display: grid; place-content: center; color: var(--gold); }
.claim-name { margin: 0; color: var(--silver); font-weight: 800; overflow-wrap: anywhere; }
.claim-meta { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--fs-13); }
.claim-free { color: var(--gold); font-weight: 800; }

/* =========================================================== the search (decision 80)
   The header: a pill on a computer (with «/»), an icon on a phone facing «رجوع». The box is a <dialog>:
   a panel under the header on a computer, the whole screen on a phone. site-search.js fills it. */
html.search-open { overflow: hidden; }
.search-btn { position: absolute; inset-inline-end: var(--sp-2); inset-block: 0; margin-block: auto; }
@media (min-width: 900px) { .search-btn { display: none; } }
.search-pill { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 220px; height: 42px; margin-inline-end: var(--sp-2); padding-inline: var(--sp-3) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-1); color: var(--text-faint); font-size: var(--fs-14); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.search-pill span { flex: 1; }
.search-pill .icon { color: var(--gold); }
.search-pill:hover { border-color: var(--gold-line); background: var(--surface-2); color: var(--text-muted); }
.search-pill:focus-visible { outline: none; box-shadow: var(--ring); }
.search-kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 6px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-faint); font: 600 var(--fs-12)/1 var(--font-body); }
@media (max-width: 1139px) { .search-pill { min-width: 0; width: 42px; padding: 0; justify-content: center; } .search-pill span, .search-kbd { display: none; } }

.search-dialog { width: min(680px, calc(100% - 32px)); max-width: none; max-height: min(80dvh, 720px); margin: calc(var(--header-h) + var(--sp-3)) auto auto; padding: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-xl); background: var(--surface-1); box-shadow: var(--shadow-3); }
.search-dialog[open] { display: flex; flex-direction: column; }
@keyframes search-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes search-up { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: no-preference) { .search-dialog[open] { animation: search-in var(--dur-2) var(--ease-out); } }
@media (max-width: 639px) {
  .search-dialog { width: 100%; height: 100dvh; max-height: none; margin: 0; padding-top: env(safe-area-inset-top); border: 0; border-radius: 0; }
  @media (prefers-reduced-motion: no-preference) { .search-dialog[open] { animation-name: search-up; } }
}

.search-bar, .search-page-bar { display: flex; align-items: center; gap: var(--sp-2); }
.search-bar { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); }
.search-bar-icon { display: grid; place-items: center; color: var(--gold); }
.search-input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 17px; outline: none; }
.search-input::placeholder { color: var(--text-faint); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; width: var(--touch); height: var(--touch); border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-muted); }
.search-clear:hover { background: var(--surface-2); color: var(--text); }
.search-close { min-height: var(--touch); padding-inline: var(--sp-3); border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; }
.search-close:hover { background: var(--surface-2); color: var(--text); }
.search-clear:focus-visible, .search-close:focus-visible { outline: none; box-shadow: var(--ring); }
.search-progress { height: 2px; }
.search-dialog.is-loading .search-progress { background: linear-gradient(90deg, transparent, var(--gold), transparent) no-repeat; background-size: 40% 100%; animation: search-bar 1s linear infinite; }
@keyframes search-bar { from { background-position: -60% 0; } to { background-position: 160% 0; } }

.search-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-1) var(--sp-3) var(--sp-4); }
.search-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.search-section-title { margin: 0; color: var(--text-faint); font-size: var(--fs-12); font-weight: 700; }
.search-link { min-height: var(--touch); padding-inline: var(--sp-2); border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-13); font-weight: 600; }
.search-link:hover { color: var(--text); }
.search-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); }
.search-chip, .search-cat { font: inherit; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding-inline: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); color: var(--text); font-size: var(--fs-14); font-weight: 600; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.search-chip .icon, .search-cat .icon { color: var(--text-faint); }
.search-chip:hover, .search-chip.is-active, .search-cat:hover { border-color: var(--gold-line); background: var(--surface-3); }
.search-chip:focus-visible, .search-cat:focus-visible { outline: none; box-shadow: var(--ring); }
.search-chip-count, .search-cat-count { color: var(--text-faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.search-chip.is-recent { padding-inline-end: var(--sp-2); font-weight: 500; }
.search-chip-x { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); color: var(--text-faint); }
.search-chip-x:hover { background: var(--surface-3); color: var(--text); }
.search-list { display: grid; gap: 2px; }
.search-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 76px; padding: var(--sp-2); border-radius: var(--r-md); color: var(--text); transition: background var(--dur-1) var(--ease); }
.search-item:hover, .search-item.is-active { background: var(--surface-2); }
.search-item.is-active { box-shadow: inset 0 0 0 1px var(--gold-line); }
.search-item:focus-visible { outline: none; box-shadow: var(--ring); }
.search-thumb { display: grid; place-items: center; width: 48px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--cover-art); color: var(--text-faint); }
.search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-item.is-out .search-thumb img { opacity: .55; }
.search-item-body { display: grid; gap: 3px; min-width: 0; }
.search-item-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 700; line-height: 1.35; }
.search-item-name mark { background: none; color: var(--gold); }
.search-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--text-faint); font-size: var(--fs-13); }
.search-fast { display: inline-flex; align-items: center; gap: 2px; color: var(--silver); }
.search-fast .icon { color: var(--gold); fill: currentColor; }
.search-price { display: grid; justify-items: end; gap: 2px; text-align: end; }
.search-price .price { font-size: var(--fs-16); }
.search-from { color: var(--text-muted); font-size: var(--fs-12); }
.search-out { color: var(--text-faint); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.search-all { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 52px; margin-top: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--gold); font-weight: 700; }
.search-all:hover, .search-all.is-active { border-color: var(--gold-line); background: var(--gold-soft); }
.search-none { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4) var(--sp-4); color: var(--text-muted); text-align: center; }
.search-none .icon { color: var(--text-faint); }
.search-none-title { margin: 0; color: var(--silver); font-size: var(--fs-18); font-weight: 800; }
.search-none-text { margin: 0; }
.search-did { padding-inline: 2px; border: 0; background: transparent; font: inherit; color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* the results page (/search) */
.search-page-bar { margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface-1); }
.search-page-bar:focus-within { border-color: var(--gold-line); box-shadow: var(--ring); }
.search-page-bar .btn { border-radius: var(--r-full); }
.search-head { margin: var(--sp-6) 0 var(--sp-4); }
.search-title { margin: 0; color: var(--silver); font-family: var(--font-head); font-size: clamp(20px, 3vw, 28px); overflow-wrap: anywhere; }
.search-sub { margin: var(--sp-2) 0 0; color: var(--text-muted); }
.search-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.search-section { margin: var(--sp-8) 0 var(--sp-4); color: var(--silver); font-size: var(--fs-18); }
.search-more { margin-top: var(--sp-5); color: var(--text-muted); text-align: center; }

/* =========================================================== pictures from inside the game (decision 81)
   Under the product's picture, two by two; site-gallery.js opens them in .shot-viewer (the whole screen). */
html.viewer-open { overflow: hidden; }
.pdp-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.pdp-shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--cover-art); transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out); }
.pdp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-shot:hover { border-color: var(--gold-line); }
.pdp-shot:focus-visible { outline: none; box-shadow: var(--ring); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pdp-shot:hover { transform: translateY(-2px); } }
.shot-viewer { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); }
.shot-viewer[open] { display: grid; place-items: center; }
.shot-viewer::backdrop { background: transparent; }
@media (prefers-reduced-motion: no-preference) { .shot-viewer[open] { animation: shot-in var(--dur-2) var(--ease-out); } }
@keyframes shot-in { from { opacity: 0; } }
.shot-viewer-img { max-width: min(94vw, 1280px); max-height: 82dvh; border-radius: var(--r-md); box-shadow: var(--shadow-3); object-fit: contain; user-select: none; -webkit-user-drag: none; touch-action: pan-y pinch-zoom; }
.shot-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface-1); color: var(--silver); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.shot-btn:hover { border-color: var(--gold-line); color: var(--gold); }
.shot-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.shot-prev { inset-inline-start: var(--sp-4); top: 50%; translate: 0 -50%; }
.shot-next { inset-inline-end: var(--sp-4); top: 50%; translate: 0 -50%; }
.shot-close { top: calc(var(--sp-4) + env(safe-area-inset-top)); inset-inline-end: var(--sp-4); }
.shot-count { position: absolute; bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); inset-inline: 0; margin: 0; color: var(--text-muted); font-size: var(--fs-14); text-align: center; }
@media (max-width: 639px) { .shot-prev, .shot-next { top: auto; bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); translate: none; } }

/* «المفضلة» on the product page (decision 82) */
.pdp-fav { margin-top: var(--sp-2); }
.fav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: var(--touch); border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.fav-toggle:hover { border-color: var(--gold-line); color: var(--text); }
.fav-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

/* =========================================================== the six looks of those pictures (decision 83)
   gallery: the cover and the pictures in one sliding row (scroll-snap; it swipes without the script), small
   pictures under it; row / grid: under the cover; cinema: the first picture wide and dimmed behind the top of the
   page; wide: a section of big pictures sliding sideways; bento: one big and three small. */
.pdp-shots.is-row { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }  /* one line, 1 to 6 */
.pdp-stage { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow-2); }
.pdp-slides { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp-slides::-webkit-scrollbar { display: none; }
.pdp-slides:focus-visible { outline: none; box-shadow: inset var(--ring); }
.pdp-slide { position: relative; display: grid; flex: 0 0 100%; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; scroll-snap-align: start; background: var(--bg); }
.pdp-media .pdp-slide > .cover { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.pdp-slide-shot > img:not(.lqip) { position: relative; width: 100%; height: auto; object-fit: contain; }
.pdp-slide-shot > .lqip { opacity: .55; }
.stage-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: var(--touch); height: var(--touch); border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--header-bg); color: var(--silver); translate: 0 -50%; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease); }
.stage-btn:hover { border-color: var(--gold-line); color: var(--gold); }
.stage-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.stage-prev { inset-inline-start: var(--sp-2); }
.stage-next { inset-inline-end: var(--sp-2); }
@media (hover: hover) { .pdp-stage .stage-btn { opacity: 0; } .pdp-stage:hover .stage-btn, .pdp-stage .stage-btn:focus-visible { opacity: 1; } }
.pdp-thumbs { display: grid; grid-auto-columns: minmax(0, 84px); grid-auto-flow: column; gap: 6px; margin-top: var(--sp-2); }  /* one line, the cover and up to 6 */
.pdp-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--cover-art); color: var(--text-faint); cursor: pointer; transition: border-color var(--dur-1) var(--ease); }
.pdp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { border-color: var(--gold-line); }
.pdp-thumb.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line); }
.pdp-thumb:focus-visible { outline: none; box-shadow: var(--ring); }

.pdp-cinema { position: relative; height: clamp(200px, 34vw, 430px); margin-bottom: calc(-1 * clamp(130px, 22vw, 300px)); overflow: hidden; }
.pdp-cinema img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-cinema::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, var(--bg) 100%); }
.has-cinema { position: relative; z-index: 1; }

.pdp-inside { margin-top: var(--sp-10); }
.pdp-inside .pdp-section-title { margin-bottom: var(--sp-4); }
.pdp-wide { display: grid; grid-auto-columns: max(280px, 46%); grid-auto-flow: column; gap: var(--sp-3); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--sp-2); scroll-snap-type: x mandatory; scrollbar-width: thin; }
@media (max-width: 639px) { .pdp-wide { grid-auto-columns: 86%; } }
.pdp-inside-shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--cover-art); scroll-snap-align: start; transition: border-color var(--dur-1) var(--ease); }
.pdp-inside-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-inside-shot:hover { border-color: var(--gold-line); }
.pdp-inside-shot:focus-visible { outline: none; box-shadow: var(--ring); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pdp-inside-shot > img:not(.lqip) { transition: transform var(--dur-4) var(--ease-out); }
  .pdp-inside-shot:hover > img:not(.lqip) { transform: scale(1.04); }
}
.pdp-bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-3); }
.pdp-bento > .pdp-inside-shot:first-child { grid-row: span 3; aspect-ratio: auto; min-height: 100%; }
@media (max-width: 639px) {
  .pdp-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .pdp-bento > .pdp-inside-shot:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}

/* =========================================================== «طرق الدفع» on the home (decision 87): four looks */
.pay-home img { display: block; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-3); }
/* cards: the logo, the name, a short line */
.pay-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pay-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.pay-card { display: grid; justify-items: center; gap: 6px; padding: var(--sp-5) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-align: center; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.pay-card img { width: 56px; height: 56px; margin-bottom: var(--sp-1); }
.pay-card-name { color: var(--text); font-weight: 700; }
.pay-card-note { color: var(--text-muted); font-size: var(--fs-13); }
@media (hover: hover) { .pay-card:hover { border-color: var(--gold-line); transform: translateY(-2px); } }
/* a strip: the title and big logos in one band */
.pay-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); box-shadow: inset 0 1px 0 var(--gold-line); }
.pay-band-title { font-size: 1.5rem; font-weight: 800; }
.pay-band-sub { color: var(--text-muted); }
.pay-band-logos { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pay-band-logos img { width: 64px; height: 64px; }
@media (max-width: 639px) { .pay-band { justify-content: center; padding: var(--sp-5) var(--sp-4); text-align: center; } .pay-band-logos { justify-content: center; } .pay-band-logos img { width: 56px; height: 56px; } }
/* a sliding row: the logos pass slowly (with «تقليل الحركة»: one still row, no copies) */
.pay-marquee { overflow: hidden; padding-block: var(--sp-2); -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 10%, var(--bg) 90%, transparent); mask-image: linear-gradient(90deg, transparent, var(--bg) 10%, var(--bg) 90%, transparent); }
.pay-marquee-track { display: flex; justify-content: center; width: 100%; }
.pay-marquee-set { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pay-dup { display: none; }
.pay-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-4) 6px 6px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text); font-weight: 700; white-space: nowrap; }
.pay-chip img { width: 48px; height: 48px; border-radius: var(--r-full); }
@media (prefers-reduced-motion: no-preference) {
  .pay-marquee-track { justify-content: flex-start; width: max-content; animation: pay-slide 40s linear infinite; }
  .pay-marquee-set { flex-wrap: nowrap; padding-inline-end: var(--sp-3); }
  .pay-marquee ul.pay-dup { display: flex; }
  .pay-marquee li.pay-dup { display: inline-flex; }
  .pay-marquee:hover .pay-marquee-track { animation-play-state: paused; }
}
@keyframes pay-slide { from { transform: translateX(0); } to { transform: translateX(50%); } }
/* the three steps of paying, the logos in the first */
.pay-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pay-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pay-step { position: relative; display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.pay-step-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--gold); color: var(--on-gold); font-weight: 800; }
.pay-step-title { color: var(--text); font-size: 1.125rem; font-weight: 700; }
.pay-step-text { color: var(--text-muted); font-size: var(--fs-14); }
.pay-step-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-step-logos img { width: 36px; height: 36px; border-radius: var(--r-sm); }

/* =========================================================== the closed site (decision 90): one card in the middle
   of the dark, a gold glow behind it, the countdown in gold boxes, the help links under it.
   Decision 109: three designs (.gate-look-calm, -stage, -ticket) and the sign-up card of «التسجيل المسبق» (.pre) */
.gate-body { background: var(--bg); }
.gate { position: relative; display: grid; place-items: center; align-content: center; gap: var(--sp-5); min-height: 100vh; min-height: 100dvh; padding: var(--sp-8) var(--sp-4); overflow: hidden; }
.gate-glow { position: absolute; inset: -30% -10% auto; height: 80%; background: radial-gradient(ellipse at 50% 40%, var(--gold-soft) 0%, transparent 60%); pointer-events: none; }
.gate-card { position: relative; display: grid; justify-items: center; gap: var(--sp-3); width: min(100%, 560px); padding: var(--sp-8) var(--sp-6); border: 1px solid var(--gold-line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-1) 88%, transparent); box-shadow: var(--shadow-2), inset 0 1px 0 var(--gold-line); text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gate-logo .brand-mark { width: 52px; height: 52px; }
.gate-logo .brand-name { font-size: 1.35rem; }
.gate-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); padding: 4px var(--sp-3); border: 1px solid var(--gold-line); border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold); font-size: var(--fs-13); font-weight: 700; }
.gate-title { font-family: var(--font-head); font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 900; line-height: 1.25; text-wrap: balance; }
.gate-text { max-width: 42ch; color: var(--text-muted); line-height: 1.8; }
.gate-count { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); direction: ltr; }
.gate-unit { display: grid; justify-items: center; gap: 4px; min-width: 64px; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg); }
.gate-unit.is-zero[data-gate-unit="d"] { display: none; }
.gate-num { color: var(--gold); font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gate-label { color: var(--text-faint); font-size: var(--fs-12); direction: rtl; }
.gate-count.is-done .gate-num { color: var(--text-faint); }
.gate-when { color: var(--silver); font-weight: 700; }
.gate-help { display: grid; justify-items: center; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.gate-help-title { color: var(--text-faint); font-size: var(--fs-14); }
.gate-help-links { justify-content: center; }
.gate-foot { position: relative; color: var(--text-faint); font-size: var(--fs-13); }
.gate-pre { width: 100%; margin-top: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
@media (max-width: 479px) { .gate-card { padding: var(--sp-6) var(--sp-4); } .gate-unit { min-width: 56px; } .gate-num { font-size: 1.5rem; } }

/* «التسجيل المسبق» (decision 109): the gift in gold on top, then the steps — done (green ✓), now (its form, a gold
   edge), later (faint) — and «تم» with his number */
.pre { display: grid; gap: var(--sp-3); width: 100%; min-width: 0; text-align: start; }
.pre-gift { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gold-line); border-radius: var(--r-md); background: var(--gold-soft); }
.pre-gift-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--gold); color: var(--on-gold); }
.pre-gift-body { min-width: 0; }
.pre-gift-label { color: var(--text-muted); font-size: var(--fs-13); }
.pre-gift-value { color: var(--gold); font-size: var(--fs-16); font-weight: 800; line-height: 1.5; text-wrap: balance; }
.pre-head { display: grid; gap: 6px; }
.pre-title { font-family: var(--font-head); font-size: var(--fs-18); font-weight: 800; line-height: 1.4; text-wrap: balance; }
.pre-text { color: var(--text-muted); font-size: var(--fs-14); line-height: 1.8; }
.pre-count { color: var(--silver); font-size: var(--fs-13); }
.pre-fields { display: grid; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.pre-steps { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pre-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); }
.pre-step.is-now { border-color: var(--gold-line); box-shadow: inset 0 1px 0 var(--gold-line); }
.pre-step.is-done { background: transparent; }
.pre-step.is-later .pre-step-name { color: var(--text-muted); }  /* muted, never faded: small text keeps 4.5:1 */
.pre-dot { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-muted); font-size: var(--fs-13); font-weight: 700; }
.pre-step.is-now .pre-dot { border-color: var(--gold); color: var(--gold); }
.pre-step.is-done .pre-dot { border-color: var(--success-line); background: var(--success-soft); color: var(--success); }
.pre-step-body { display: grid; gap: var(--sp-2); min-width: 0; }
.pre-step-name { color: var(--text); font-weight: 700; }
.pre-step-note { color: var(--text-muted); font-size: var(--fs-13); line-height: 1.7; overflow-wrap: anywhere; }
.pre-warn { color: var(--warning); }
.pre-form { display: grid; gap: var(--sp-2); }
.pre-inline { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
@media (min-width: 420px) { .pre-inline { grid-template-columns: minmax(0, 1fr) auto; } }
.pre-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.pre-done { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); border: 1px solid var(--success-line); border-radius: var(--r-md); background: var(--success-soft); text-align: center; }
.pre-done-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--success); color: var(--on-strong); }
.pre-done-title { font-family: var(--font-head); font-size: var(--fs-18); font-weight: 800; }
.pre-done-text { color: var(--text-muted); font-size: var(--fs-14); }
.pre-number { display: inline-flex; align-items: baseline; gap: 6px; margin-top: var(--sp-1); padding: 4px var(--sp-3); border: 1px dashed var(--gold-line); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-13); }
.pre-number .num { color: var(--gold); font-size: var(--fs-16); font-weight: 800; letter-spacing: .04em; }
.pre-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1); font-size: var(--fs-13); }

/* «العدّاد الكبير» (stage): the numbers are the page; a faint DS behind them; the sign-up on the side on a computer */
.gate-look-stage { place-items: stretch; justify-items: center; }
.gate-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.gate-mark img { width: min(78vw, 640px); height: auto; opacity: .05; filter: grayscale(1); }
.gate-stage { position: relative; display: grid; gap: var(--sp-8); width: min(100%, 1180px); align-items: center; }
.gate-stage-main { display: grid; justify-items: center; gap: var(--sp-4); min-width: 0; text-align: center; }
.gate-stage-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); }
.gate-stage-top .gate-badge { margin-top: 0; }
.gate-look-stage .gate-title { font-size: clamp(1.9rem, 6vw, 3.4rem); }
.gate-count.is-big { gap: 0; margin-top: 0; }
.gate-count.is-big .gate-unit { min-width: 0; padding: 0 clamp(.6rem, 2.4vw, 1.4rem); border: 0; border-radius: 0; background: none; }
.gate-count.is-big .gate-unit + .gate-unit { border-inline-start: 1px solid var(--border-strong); }
.gate-count.is-big .gate-num { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-head); font-size: clamp(2rem, 11vw, 6.4rem); font-weight: 900; letter-spacing: -.02em; }
.gate-count.is-big.is-done .gate-num { background: none; color: var(--text-faint); }
.gate-count.is-big .gate-label { color: var(--text-muted); font-size: var(--fs-13); }
.gate-stage-side { display: grid; gap: var(--sp-4); width: 100%; max-width: 480px; justify-self: center; }
.gate-stage-side .pre { padding: var(--sp-5); border: 1px solid var(--border-strong); border-radius: var(--r-xl); background: color-mix(in srgb, var(--surface-1) 92%, transparent); box-shadow: inset 0 1px 0 var(--gold-line), var(--shadow-3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gate-stage-side .gate-help { margin-top: 0; }
@media (min-width: 960px) {
  .gate-stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .gate-look-stage:not(.has-pre) .gate-stage { grid-template-columns: minmax(0, 1fr); }
  .gate-look-stage.has-pre .gate-stage-main { justify-items: start; text-align: start; }
  .gate-look-stage.has-pre .gate-stage-top { justify-content: flex-start; }
  .gate-look-stage.has-pre .gate-count.is-big { justify-content: flex-end; }  /* the numbers read left to right, under a title on the right */
  .gate-look-stage.has-pre .gate-count.is-big .gate-num { font-size: clamp(2.4rem, 5.2vw, 4.6rem); }  /* four pairs in the column */
  .gate-look-stage.has-pre .gate-count.is-big .gate-unit:last-child { padding-inline-end: 0; }
  .gate-stage-side { justify-self: stretch; }
}

/* «التذكرة» (ticket): the opening's ticket — the countdown on top, a torn line with two notches, the gift and the
   sign-up on the stub, his number like a stamp */
.ticket { position: relative; display: grid; width: min(100%, 520px); border: 1px solid var(--gold-line); border-radius: var(--r-xl); background: var(--surface-1); box-shadow: var(--shadow-3), var(--gold-glow); }
.ticket-top { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-xl) var(--r-xl) 0 0; background: radial-gradient(120% 90% at 50% 0%, var(--gold-soft), transparent 62%); text-align: center; }
.ticket-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; }
.ticket-row .gate-badge { margin-top: 0; }
.ticket .gate-logo .brand-mark { width: 40px; height: 40px; }
.ticket .gate-logo .brand-name { font-size: 1.1rem; }
.ticket-tear { position: relative; height: 0; margin: 0 var(--sp-5); border-top: 2px dashed var(--border-strong); }
.ticket-tear::before, .ticket-tear::after { content: ""; position: absolute; top: -15px; width: 15px; height: 30px; border: 1px solid var(--gold-line); background: var(--bg); }  /* a bite out of each side */
.ticket-tear::before { left: calc(-1 * var(--sp-5) - 1px); border-left: 0; border-radius: 0 30px 30px 0; }
.ticket-tear::after { right: calc(-1 * var(--sp-5) - 1px); border-right: 0; border-radius: 30px 0 0 30px; }
.ticket-stub { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.ticket-stub .gate-help { margin-top: 0; padding-top: 0; border-top: 0; }
.gate-look-ticket .pre-gift { flex-direction: column; padding: var(--sp-4); border-style: dashed; text-align: center; }
.gate-look-ticket .pre-gift-value { font-family: var(--font-head); font-size: clamp(1.2rem, 5vw, 1.9rem); font-weight: 900; line-height: 1.35; }
.gate-look-ticket .pre-head { justify-items: center; text-align: center; }
.gate-look-ticket .pre-number { padding: 6px var(--sp-4); border: 2px solid var(--gold); border-radius: var(--r-sm); transform: rotate(-4deg); }
.gate-look-ticket > .gate-help { width: min(100%, 520px); margin-top: 0; border-top: 0; }
@media (max-width: 479px) { .ticket-top, .ticket-stub { padding-inline: var(--sp-4); } .ticket-tear { margin-inline: var(--sp-4); }
  .ticket-tear::before { left: calc(-1 * var(--sp-4) - 1px); } .ticket-tear::after { right: calc(-1 * var(--sp-4) - 1px); } }

@media (prefers-reduced-motion: no-preference) {
  .gate-glow { animation: gate-glow 6s var(--ease) infinite alternate; }
  .gate-card, .gate-stage-side { animation: site-in .6s var(--ease-out) backwards; }
  .gate-count.is-big .gate-unit { animation: gate-rise .7s var(--ease-out) backwards; }
  .gate-count.is-big .gate-unit:nth-child(2) { animation-delay: .08s; }
  .gate-count.is-big .gate-unit:nth-child(3) { animation-delay: .16s; }
  .gate-count.is-big .gate-unit:nth-child(4) { animation-delay: .24s; }
  .ticket { animation: ticket-in .8s var(--ease-out) backwards; }
  .gate-look-ticket .pre-number { animation: ticket-stamp .5s var(--ease-out) .3s backwards; }
}
@keyframes gate-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes gate-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ticket-in { from { opacity: 0; transform: translateY(28px) scale(.98); } }
@keyframes ticket-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } }

/* «الدعم» on every page (decision 99): a dark round button at the start side (the luck button is at the end), above
   the tab bar on a phone; its number = his tickets with an answer he has not read */
.support-fab { position: fixed; inset-inline-start: var(--sp-4); bottom: calc(var(--tabbar-h, 64px) + var(--sp-3) + env(safe-area-inset-bottom));
  z-index: 30; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: var(--touch); min-height: var(--touch); padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--header-bg); color: var(--silver); font-weight: 700;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-2); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.support-fab:hover { border-color: var(--gold-line); color: var(--text); }
.support-fab:focus-visible { outline: none; box-shadow: var(--ring); }
.support-fab .icon { color: var(--gold); }
.support-fab-label { display: none; }
.support-fab-count { position: absolute; top: -4px; inset-inline-end: -4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full); background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 800; }
@media (max-width: 899px) { .has-sticky-cta .support-fab { bottom: calc(var(--tabbar-h, 64px) + 72px + var(--sp-3) + env(safe-area-inset-bottom)); } }  /* above the buy bar */
@media (min-width: 900px) { .support-fab { bottom: var(--sp-6); padding: 0 var(--sp-4); } .support-fab-label { display: inline; } }
@media (prefers-reduced-motion: no-preference) { .support-fab { animation: luck-in .5s var(--ease-out) .8s both; } }

/* =========================================================== decision 117: the home's banners, sliding rows, strip
   and the desktop skin. Every look is a class from a fixed list (banner_look.py, row_look.py, site_skin.py). */

/* ---------- «مقاس البانر»: 16:9 everywhere (the picture as uploaded, nothing cut), or wider on a computer; on a
   phone a square or 4:5 frame once a banner has its own phone picture; and the banner edge to edge ---------- */
.slides.ratio-full { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .slides.ratio-wide { aspect-ratio: 21 / 8; }
  .slides.ratio-xwide { aspect-ratio: 3 / 1; }
}
@media (max-width: 767px) {
  .slides.mratio-1x1 { aspect-ratio: 1 / 1; }
  .slides.mratio-4x5 { aspect-ratio: 4 / 5; }
  .slide-media .lqip-desk { display: none; }
}
@media (min-width: 768px) { .slide-media .lqip-phone { display: none; } }
.slide-media > picture { display: contents; }
.slide-media.focus-top img { object-position: 50% 0; }
.slide-media.focus-bottom img { object-position: 50% 100%; }
.hero.is-bleed > .container { max-width: none; padding-inline: 0; }
.hero.is-bleed .slides { border-inline: 0; border-radius: 0; }
.hero.is-bleed .slide-link:focus-visible { border-radius: 0; }
.hero.is-bleed .slider-dots { padding-inline: var(--sp-4); }
.hero-second { padding-top: var(--sp-8); }

/* ---------- «حركة البانر»: how the next banner comes (the fade above is the first), a slow zoom on the picture while
   it shows, and its words rising in after it. The one leaving stays under the new one (.is-leaving, ds.js), and a
   step back comes from the other side (.is-back). Nothing moves with «تقليل الحركة»: the banner changes at once. */
@media (prefers-reduced-motion: no-preference) {
  .tr-slide .slide { opacity: 1; transform: translateX(-100%); transition: visibility 0s linear 700ms; }
  .tr-slide.is-back .slide { transform: translateX(100%); }
  .tr-slide .slide.is-on, .tr-slide.is-back .slide.is-on { transform: none; transition: transform 700ms var(--ease-out), visibility 0s; }
  .tr-slide .slide.is-leaving { visibility: visible; transform: translateX(100%); transition: transform 700ms var(--ease-out), visibility 0s; }
  .tr-slide.is-back .slide.is-leaving { transform: translateX(-100%); }

  .tr-zoom .slide { transform: scale(1.08); transition: opacity 900ms var(--ease), transform 0s linear 900ms, visibility 0s linear 900ms; }
  .tr-zoom .slide.is-on { transform: none; transition: opacity 900ms var(--ease), transform 1400ms var(--ease-out), visibility 0s; }

  .tr-wipe .slide { opacity: 1; clip-path: inset(0 0 0 100%); transition: visibility 0s linear 900ms; }
  .tr-wipe.is-back .slide { clip-path: inset(0 100% 0 0); }
  .tr-wipe .slide.is-on, .tr-wipe.is-back .slide.is-on { z-index: 1; clip-path: inset(0); transition: clip-path 900ms var(--ease-out), visibility 0s; }
  .tr-wipe .slide.is-leaving, .tr-wipe.is-back .slide.is-leaving { visibility: visible; clip-path: inset(0); }

  .has-kenburns .slide:is(.is-on, .is-leaving) .slide-media { animation: kenburns 9s var(--ease) both; }
  @keyframes kenburns { from { scale: 1; } to { scale: 1.08; } }

  /* (a title that «blur» shows word by word keeps its own entrance) */
  .slide.is-on .slide-text > :not([data-blur-words]), .site:not(.motion-blur) .slide.is-on .slide-text > [data-blur-words] {
    animation: slide-rise 700ms var(--ease-out) 280ms backwards;
  }
  .slide.is-on .slide-text > :nth-child(2) { animation-delay: 380ms; }
  .slide.is-on .slide-text > :nth-child(3) { animation-delay: 480ms; }
  @keyframes slide-rise { from { opacity: 0; translate: 0 14px; } }
}

/* ---------- «شريط الصور»: very wide pictures running along the page. The pictures twice in one track; it moves half
   its width and starts again, so it never ends (its time grows with its length: ticker-len-N, N thousand pixels a
   copy). Paused under the mouse, a finger (.is-held, ds.js) or the keyboard. With «تقليل الحركة»: one still row
   that scrolls by hand, no copies. */
.ticker {
  --ticker-h: 64px;
  --ticker-sec: 20s;
  --ticker-len: 1;
  --ticker-gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-block: var(--sp-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker-size-s { --ticker-h: 44px; }
.ticker-size-l { --ticker-h: 96px; }
@media (min-width: 768px) {
  .ticker { --ticker-gap: var(--sp-4); margin-top: var(--sp-8); }
  .ticker-size-s { --ticker-h: 72px; }
  .ticker-size-m { --ticker-h: 110px; }
  .ticker-size-l { --ticker-h: 160px; }
}
.ticker-speed-slow { --ticker-sec: 30s; }
.ticker-speed-fast { --ticker-sec: 12s; }
.ticker-track { display: flex; width: max-content; }
.ticker-set { display: flex; gap: var(--ticker-gap); margin: 0; padding: 0; padding-inline-end: var(--ticker-gap); list-style: none; }
.ticker-item { flex: none; }
.ticker-link { display: block; border-radius: var(--r-md); }
.ticker-link:focus-visible { outline: none; box-shadow: var(--ring); }
.ticker-img { display: block; width: auto; max-width: none; height: var(--ticker-h); border-radius: var(--r-md); }
.ticker-dup, .ticker-rep { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 4%, var(--bg) 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--bg) 4%, var(--bg) 96%, transparent);
  }
  .ticker .ticker-dup { display: flex; }
  .ticker .ticker-rep { display: block; }
  .ticker-track { animation: ticker-run calc(var(--ticker-sec) * var(--ticker-len)) linear infinite; }
  .ticker-dir-left .ticker-track { animation-direction: reverse; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.is-held .ticker-track { animation-play-state: paused; }
}
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(50%); } }
.ticker-len-1 { --ticker-len: 1; } .ticker-len-2 { --ticker-len: 2; } .ticker-len-3 { --ticker-len: 3; } .ticker-len-4 { --ticker-len: 4; }
.ticker-len-5 { --ticker-len: 5; } .ticker-len-6 { --ticker-len: 6; } .ticker-len-7 { --ticker-len: 7; } .ticker-len-8 { --ticker-len: 8; }
.ticker-len-9 { --ticker-len: 9; } .ticker-len-10 { --ticker-len: 10; } .ticker-len-11 { --ticker-len: 11; } .ticker-len-12 { --ticker-len: 12; }
.ticker-len-13 { --ticker-len: 13; } .ticker-len-14 { --ticker-len: 14; } .ticker-len-15 { --ticker-len: 15; } .ticker-len-16 { --ticker-len: 16; }
.ticker-len-17 { --ticker-len: 17; } .ticker-len-18 { --ticker-len: 18; } .ticker-len-19 { --ticker-len: 19; } .ticker-len-20 { --ticker-len: 20; }

/* ---------- «الصفوف المتحركة»: a row that slides sideways, in a frame (.row-frame, data-row) that site-rows.js
   watches. The card at the row's far edge fades (and blurs) so people swipe; once the row has been moved the same
   soft edge shows on its first side; a row that fits shows none. .is-start / .is-end / .is-fit come from the script
   (without it the rows still scroll, with no edge). On a computer «شريط يتسحب» keeps the products one line with
   «السابق» / «التالي» (a mouse only). The edge ignores the pointer. */
@property --row-fs { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --row-fe { syntax: "<length>"; inherits: true; initial-value: 0px; }
.row-frame {
  --row-fade: 56px;
  --row-blur: 3px;
  --row-cover: 22%;
  --row-out: 0px;
  --row-fs: 0px;
  --row-fe: 0px;
  position: relative;
  transition: --row-fs var(--dur-2) var(--ease), --row-fe var(--dur-2) var(--ease);
}
.row-str-medium { --row-fade: 88px; --row-blur: 6px; --row-cover: 28%; }
.row-str-strong { --row-fade: 130px; --row-blur: 10px; --row-cover: 34%; }
@media (max-width: 767px) { .row-rail { --row-out: clamp(16px, 4vw, 32px); } }  /* a phone's row reaches the screen's edges */
.row-frame.is-ready:not(.row-edge-none):not(.is-fit):not(.is-end) { --row-fe: var(--row-fade); }
.row-frame.is-ready:not(.row-edge-none):not(.is-fit):not(.is-start) { --row-fs: var(--row-fade); }
.row-frame.is-ready:not(.row-edge-none) > [data-row-track] {
  -webkit-mask-image: linear-gradient(to left, transparent 0, var(--bg) var(--row-fs), var(--bg) calc(100% - var(--row-fe)), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, var(--bg) var(--row-fs), var(--bg) calc(100% - var(--row-fe)), transparent 100%);
}
.row-edge-blur::before, .row-edge-blur::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 2;
  width: var(--row-cover);
  -webkit-backdrop-filter: blur(var(--row-blur));
  backdrop-filter: blur(var(--row-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.row-edge-blur::before {
  inset-inline-start: calc(-1 * var(--row-out));
  -webkit-mask-image: linear-gradient(to left, var(--bg), transparent);
  mask-image: linear-gradient(to left, var(--bg), transparent);
}
.row-edge-blur::after {
  inset-inline-end: calc(-1 * var(--row-out));
  -webkit-mask-image: linear-gradient(to right, var(--bg), transparent);
  mask-image: linear-gradient(to right, var(--bg), transparent);
}
.row-edge-blur.is-ready:not(.is-fit):not(.is-end)::after, .row-edge-blur.is-ready:not(.is-fit):not(.is-start)::before { opacity: 1; }
.row-frame.is-hinting > [data-row-track] { scroll-snap-type: none; }
@media (min-width: 768px) {
  .row-desk-row > .rail {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 220px;
    gap: var(--sp-4);
    margin-inline: 0;
    padding: var(--sp-1) 0 var(--sp-2);
    overflow-x: auto;
    scroll-padding-inline: 0;
  }
}
.row-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-top: calc(var(--touch) / -2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--header-bg);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.row-prev { inset-inline-start: calc(-1 * var(--sp-2)); }
.row-next { inset-inline-end: calc(-1 * var(--sp-2)); }
.row-btn:hover { border-color: transparent; background: var(--gold); color: var(--on-gold); }
.row-btn:focus-visible { outline: none; box-shadow: var(--ring); }
@media (hover: hover) and (pointer: fine) { .row-btn:not([hidden]) { display: grid; } }

/* ---------- «غلاف الكمبيوتر»: the owner's picture behind the page on wide screens, seen on the right and the left of
   the content (a fixed layer under everything; the content sits on a solid column over it); with a link the two side
   margins open it. Below 1200px nothing of it shows (its picture is never fetched there: loading="lazy", not drawn). */
.site-skin, .skin-side { display: none; }
@media (min-width: 1200px) {
  .site.has-skin { --skin-col: min(1240px, calc(100% - 160px)); isolation: isolate; }
  .site-skin { position: fixed; inset: 0; z-index: -1; display: block; pointer-events: none; }
  .site-skin > img { width: 100%; height: 100%; object-fit: cover; }
  .site.has-skin .site-main, .site.has-skin .site-footer {
    width: var(--skin-col);
    margin-inline: auto;
    background: var(--bg);
    box-shadow: var(--skin-edge);
  }
  .site.has-skin .site-main { position: relative; z-index: 1; }
  .site.has-skin .site-footer, .site.has-skin .promo-bar { position: relative; z-index: 1; }
  .skin-side {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: calc((100% - var(--skin-col)) / 2);
  }
  .skin-side-start { inset-inline-start: 0; }
  .skin-side-end { inset-inline-end: 0; }
  .skin-side:focus-visible { outline: none; box-shadow: inset var(--ring); }
}

/* «معاينة الرئيسية» (decision 117): the panel's own frame shows the home; nothing in it opens or sends */
.site.is-preview a, .site.is-preview form { pointer-events: none; }

/* =========================================================== «كل الألعاب», the letter bar and the tags (decision 119)
   /games: the choices in a side column on a computer, in a bottom sheet on a phone (.games-sheet, ds.js opens it);
   without the script the column follows the games («#filters»). Every choice is a link; the chosen ones gold. */
.games-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-4); }
.games-title { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 900; line-height: 1.2; }
.games-count { margin: 0; color: var(--text-muted); font-size: var(--fs-14); font-weight: 600; }
.games-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.games-main { min-width: 0; }
.games-side { order: 2; display: grid; align-content: start; gap: var(--sp-5); min-width: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); }
.js .games-side { display: none; }
.games-side-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--silver); font-family: var(--font-head); font-weight: 800; }
.games-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.games-filter-btn { min-height: var(--touch); }
.games-filter-count { display: inline-grid; place-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full); background: var(--gold); color: var(--on-gold); font-size: var(--fs-12); font-weight: 800; }
@media (min-width: 960px) {
  .games-layout { grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
  .games-side, .js .games-side { display: grid; order: 0; position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: calc(100dvh - var(--header-h) - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain; }
  .games-filter-btn { display: none; }
}
@media (min-width: 1240px) { .games-layout { grid-template-columns: 280px minmax(0, 1fr); } .games-main .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gf-group { display: grid; gap: var(--sp-2); min-width: 0; }
.gf-title { margin: 0; color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-13); font-weight: 700; }
.gf-list { display: grid; gap: 2px; }
.gf-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-14); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.gf-link:hover { background: var(--surface-2); }
.gf-link:focus-visible { outline: none; box-shadow: var(--ring); }
.gf-link[aria-current="true"] { background: var(--gold-soft); color: var(--gold); font-weight: 700; }
.gf-name { min-width: 0; overflow-wrap: anywhere; }
.gf-count { color: var(--text-faint); font-size: var(--fs-12); font-weight: 600; }
.gf-link[aria-current="true"] .gf-count, .tag-filter[aria-current="true"] .gf-count { color: inherit; }
.gf-chips { gap: 6px; }
.gf-budget { margin: 0; padding-inline: 0; }
.tag-filter { gap: 6px; }
.tag-filter[aria-current="true"] .tag-dot { box-shadow: 0 0 0 2px var(--gold-soft); }
.games-sheet .modal-body { display: grid; gap: var(--sp-5); }
.games-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); }
.games-pager-at { color: var(--text-muted); font-size: var(--fs-14); }
/* what is chosen, each a link that takes it off, and «مسح الكل» */
.picked-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.picked-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--gold-line); border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold); font-size: var(--fs-14); font-weight: 600; transition: background var(--dur-1) var(--ease); }
.picked-chip:hover { background: var(--surface-2); }
.picked-chip:focus-visible, .picked-clear:focus-visible { outline: none; box-shadow: var(--ring); }
.picked-clear { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-2); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-14); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.picked-clear:hover { color: var(--gold); }
@media (pointer: coarse) { .picked-chip, .picked-clear { min-height: var(--touch); } }
/* the letter bar: «#», A–Z then the Arabic letters, one sliding line on a phone; the current one gold */
.letter-bar { display: flex; gap: 4px; margin: 0 0 var(--sp-4); padding-block: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.letter-link { display: inline-grid; flex: none; place-content: center; min-width: var(--touch); height: var(--touch); padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-1); color: var(--text); font-weight: 700; direction: ltr; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.letter-link.is-ar { direction: rtl; font-family: var(--font-head); }
.letter-link:not(.is-ar) + .letter-link.is-ar { margin-inline-start: var(--sp-3); }
.letter-link:hover { border-color: var(--border-hover); color: var(--gold); }
.letter-link:focus-visible { outline: none; box-shadow: var(--ring); }
.letter-link[aria-current="true"] { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
@media (min-width: 960px) { .letter-bar { flex-wrap: wrap; overflow: visible; } .letter-link { min-width: 38px; height: 38px; } }
/* the category page's tag chips, under its own filters: one sliding line each on a phone */
.tag-rows { display: grid; gap: var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.tag-row { flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; padding-block: 2px; scrollbar-width: none; }
.tag-row > .chip-link { flex: none; }
@media (min-width: 960px) { .tag-row { flex-wrap: wrap; overflow: visible; } }
/* the product page: its «الفئة» and «التصنيف» as links */
.pdp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag-link { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-13); transition: border-color var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); }
.tag-link:hover { filter: brightness(1.15); }
.tag-link:focus-visible { outline: none; box-shadow: var(--ring); }
@media (pointer: coarse) { .tag-link { height: var(--touch); } }
/* the home's «تصفّح حسب التصنيف»: one sliding row on a phone, wrapping tiles on a computer */
.genre-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); gap: var(--sp-3); margin: 0; padding: 0 0 var(--sp-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; list-style: none; scrollbar-width: none; }
.genre-row > li { min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) { .genre-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: visible; } }
.genre-tile { display: flex; align-items: center; gap: var(--sp-3); min-height: 72px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }
.genre-tile:hover { border-color: var(--gold-line); box-shadow: var(--card-glow); }
.genre-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.genre-icon { display: grid; flex: none; place-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-md); }
.genre-icon .icon { width: 22px; height: 22px; }
.genre-text { display: grid; gap: 2px; min-width: 0; }
.genre-name { color: var(--silver); font-family: var(--font-head); font-weight: 800; overflow-wrap: anywhere; }
.genre-count { color: var(--text-faint); font-size: var(--fs-13); }
@media (prefers-reduced-motion: no-preference) { @media (hover: hover) { .genre-tile:hover { transform: translateY(-2px); } } }