/* 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); }
.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); }

/* 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);
}
@media (min-width: 900px) { .slides { aspect-ratio: 21 / 8; } }
.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; }
.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-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%; }

/* 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; }
.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 { 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); }
.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 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-soft); color: var(--success); 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 */
.order-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.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 {
  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; }
}
.order-hero.tone-info { border-color: var(--info-line); }
.order-hero.tone-info .order-hero-icon { background: var(--info-soft); color: var(--info); }
.order-hero.tone-warning { border-color: var(--warning-line); background: var(--warning-soft); }
.order-hero.tone-warning .order-hero-icon { background: var(--surface-1); color: var(--warning); }
.order-hero.tone-success { border-color: var(--success-line); }
.order-hero.tone-success .order-hero-icon { background: var(--success-soft); color: var(--success); }
.order-hero.tone-danger { border-color: var(--danger-line); background: var(--danger-soft); }
.order-hero.tone-danger .order-hero-icon { background: var(--surface-1); color: var(--danger); }
/* «طلباتي» (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 */
.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; }
  .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))); }
.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; }