/*
 * Red Zone Store — Main Custom CSS
 * Theme: Salla / Yafa
 * Version: 1.60.0
 * Full change history: see CHANGELOG.md (kept there in full detail; this
 * header only lists the last few entries so this file stays small).
 * RZ-TESTIMONIALS-001: fixed the duplicate "عرض المزيد" button on
 * /testimonials — Salla's own infinite-scroll widget stacks a new
 * .s-infinite-scroll-wrapper per page load without removing the old
 * one; CSS now shows only the last one. CSS-only, JS unchanged.
 * RZ-CART-001: restyled the cart page (/cart) — item cards, the
 * coupon box, the order-summary card, the note/attachment button
 * and textarea, all forced to the site's dark/red identity
 * explicitly rather than relying on the theme's own dark-mode
 * classes (confirmed inconsistent — not every element on this page
 * carries a dark: variant). CSS-only, JS unchanged.
 * RZ-LOGIN-001: restyled the login modal's outer wrapper (overlay,
 * body, close button) to match brand colors, scoped strictly under
 * salla-modal.s-login-modal so it can never touch the search modal.
 * The actual login form is inside a cross-origin iframe
 * (accounts.salla.com) and cannot be restyled by our CSS — hard
 * browser security limit, not a shortcut taken. CSS-only, JS
 * unchanged.
 * RZ-PAGE-001: redesigned the 4 static content pages (About,
 * Return/Exchange, Privacy Policy, Contact) — .content.content--
 * single-page (shared template confirmed from real Inspect on 2 of
 * the 4 pages) gets the site's dark/red card treatment instead of
 * the theme's default white block; h1/.content-entry restyled to
 * match. CSS-only, JS unchanged.
 * RZ-HOME-011: 3 confirmed "حذف نهائي" requests — hid the statistics
 * -section divider, the FAQ-section divider, and the FAQ question's
 * chevron icon (which may have been visually doubling up with our
 * own RZ-HOME-002 chevron). CSS-only, JS unchanged.
 * RZ-MENU-026/025/024: fixed the drawer menu's vertical centering (a
 * real CSS-specificity conflict between two rules on the same <ul>)
 * and hid Yafa's own native divider line under the content.
 * CSS-only, JS unchanged.
 */

/* Store-wide font identity (RZ-PRODUCT-002): swapped in per your
   request to replace the raw browser default used across the site,
   Tajawal — a modern, high-legibility Arabic/Latin webfont common on
   professional Arabic e-commerce sites. This is a first-pass pick;
   if it's not the direction you want, tell me and I'll swap it for
   a different one, this is a one-line change. Must stay the very
   first rule in the file (only CSS comments are allowed before an
   @import). */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

body {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* =========================================================
   RZ-HEADER-001 — RZ Command Bar
   ========================================================= */

nav.main-navbar.rz-header {
  --rz-red: #e30613;
  --rz-red-rgb: 227, 6, 19;
  --rz-gold: #d4af37;
  --rz-ink: #07080b;
  --rz-header-height: 74px;

  width: min(calc(100% - 36px), 1320px) !important;
  height: var(--rz-header-height) !important;
  min-height: var(--rz-header-height) !important;
  top: 14px !important;
  z-index: 100 !important;
  padding: 9px 12px !important;
  overflow: visible !important;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% -80%, rgba(var(--rz-red-rgb), 0.16), transparent 46%),
    linear-gradient(135deg, rgba(7, 8, 11, 0.97), rgba(15, 16, 22, 0.92)) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(var(--rz-red-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition:
    top 240ms ease,
    height 240ms ease,
    min-height 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease !important;
}

/* Premium border. */
nav.main-navbar.rz-header::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.62;
  background: linear-gradient(
    110deg,
    transparent 9%,
    rgba(var(--rz-red-rgb), 0.5) 34%,
    rgba(212, 175, 55, 0.26) 50%,
    transparent 73%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hide Yafa's desktop category row; the native side menu remains functional. */
nav.main-navbar.rz-header > #mobile-menu,
nav.main-navbar.rz-header > .btn--close-sm {
  display: none !important;
}

/* Confirmed via Console (logoLinksCount: 2): Yafa renders TWO separate
   "Store Home Page" logo links in the header markup at all times (the
   same dual mobile/desktop-variant pattern already confirmed for the
   category menu items). Our script only enhances the first one it finds
   (adds .rz-header__logo, centers it, adds the light-sweep effect) — the
   second, un-enhanced copy was staying in the normal document flow and
   rendering as a plain, unstyled second logo, forcing the header to wrap
   onto two rows. Hide whichever copy our script did not enhance. */
nav.main-navbar.rz-header a[aria-label="Store Home Page"]:not(.rz-header__logo) {
  display: none !important;
}

nav.main-navbar.rz-header .rz-header__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px !important;
}

/* Menu trigger. */
nav.main-navbar.rz-header .rz-header__menu-trigger {
  display: flex !important;
  width: 104px;
  height: 44px;
  padding: 0 14px !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 9px !important;
  color: #f7f7f8 !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease;
}

nav.main-navbar.rz-header .rz-header__menu-trigger::after {
  content: "القائمة";
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

nav.main-navbar.rz-header .rz-header__menu-trigger svg {
  width: 23px;
  height: 23px;
  color: var(--rz-red);
  transition: transform 240ms ease, color 240ms ease;
}

nav.main-navbar.rz-header .rz-header__menu-trigger:hover,
nav.main-navbar.rz-header .rz-header__menu-trigger:focus-visible,
nav.main-navbar.rz-header.rz-menu-is-open .rz-header__menu-trigger {
  border-color: rgba(var(--rz-red-rgb), 0.46);
  background: rgba(var(--rz-red-rgb), 0.085);
  box-shadow: 0 8px 22px rgba(var(--rz-red-rgb), 0.12);
  transform: translateY(-1px);
}

nav.main-navbar.rz-header .rz-header__menu-trigger:hover svg,
nav.main-navbar.rz-header.rz-menu-is-open .rz-header__menu-trigger svg {
  color: #ff2632;
  transform: scaleX(1.08);
}

/* Centered animated logo on tablet and desktop. */
nav.main-navbar.rz-header .rz-header__logo {
  position: absolute !important;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 64px;
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: translate(-50%, -50%);
}

nav.main-navbar.rz-header .rz-header__logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60px;
  height: 60px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.45;
  background: radial-gradient(circle, rgba(var(--rz-red-rgb), 0.26), rgba(var(--rz-red-rgb), 0) 68%);
  animation: rz-logo-aura 4.4s ease-in-out infinite;
}

/* The duplicated transparent logo clips the sweep to the logo itself. */
nav.main-navbar.rz-header .rz-logo-sweep-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(-18% 0, -10% 0, -24% 100%, -32% 100%);
  animation: rz-logo-sweep 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

nav.main-navbar.rz-header .rz-header__logo > img {
  width: auto !important;
  height: 56px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.42));
  transform-origin: center;
  animation: rz-logo-float 3.8s ease-in-out infinite;
  transition: height 240ms ease, filter 240ms ease;
}

nav.main-navbar.rz-header .rz-logo-sweep-layer img {
  width: auto !important;
  height: 56px !important;
  object-fit: contain !important;
  opacity: 0.72;
  filter:
    brightness(1.65) saturate(0.72)
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.48))
    drop-shadow(0 0 8px rgba(212, 175, 55, 0.18));
  transform-origin: center;
  animation: rz-logo-float 3.8s ease-in-out infinite;
}

/* Action buttons. */
nav.main-navbar.rz-header .rz-header__actions {
  display: flex;
  align-items: center !important;
  flex: 0 0 auto;
  gap: 8px !important;
  margin: 0 !important;
}

nav.main-navbar.rz-header .rz-header__action {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  height: 42px !important;
  min-width: 42px;
  margin: 0 !important;
  color: #e9eaf0 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease;
}

nav.main-navbar.rz-header .rz-header__action:hover,
nav.main-navbar.rz-header .rz-header__action:focus-within,
nav.main-navbar.rz-header .rz-header__action:focus-visible {
  color: #fff !important;
  border-color: rgba(var(--rz-red-rgb), 0.42) !important;
  background: rgba(var(--rz-red-rgb), 0.08) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.26);
  transform: translateY(-2px);
}

nav.main-navbar.rz-header .rz-header__search {
  width: 42px;
  padding: 0 !important;
  overflow: hidden;
  color: #f5f6f8 !important;
  border-color: rgba(227, 6, 19, 0.2) !important;
  background:
    radial-gradient(circle at 72% 22%, rgba(227, 6, 19, 0.18), transparent 46%),
    rgba(255, 255, 255, 0.045) !important;
}

nav.main-navbar.rz-header .rz-search-symbol {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

nav.main-navbar.rz-header .rz-search-symbol::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 8px;
  right: 8px;
  border-radius: 50%;
  background: var(--rz-red);
  box-shadow: 0 0 9px rgba(var(--rz-red-rgb), 0.72);
}

nav.main-navbar.rz-header .rz-search-symbol svg {
  width: 20px;
  height: 20px;
  transition: transform 180ms ease;
}

nav.main-navbar.rz-header .rz-header__search:hover .rz-search-symbol svg,
nav.main-navbar.rz-header .rz-header__search:focus-visible .rz-search-symbol svg {
  transform: rotate(-7deg) scale(1.06);
}

nav.main-navbar.rz-header .rz-header__locale {
  width: auto !important;
  padding: 0 13px !important;
  gap: 0 !important;
  font-size: 12px !important;
  white-space: nowrap;
}

nav.main-navbar.rz-header .rz-header__user {
  width: 42px !important;
  /* RZ-HEADER-004 real root cause: `overflow: hidden` used to sit here
     too. `.rz-header__user` is added directly onto the `<salla-user-menu>`
     element itself (see setActionMetadata() in red-zone-main.js) — the
     SAME element Salla renders the signed-in customer's account dropdown
     panel inside (light DOM, a real child node, not Shadow DOM — this
     file already reaches `.s-user-menu-login-btn` inside it below, which
     would be impossible through a real Shadow boundary). `overflow:
     hidden` here was only ever needed to keep the small 42px avatar
     image tidy, but it silently clipped that whole dropdown panel into
     invisibility whenever a signed-in customer opened it — clicking
     still worked (Salla's own JS), the panel just rendered with zero
     visible size, which is exactly what was reported: "nothing happens
     at all". Confirmed via a real screenshot of the panel that should
     have opened. Moved the clip down to just the guest "login" button
     state below, the only state that actually needs it (containing its
     label inside the fixed 42px width) — the signed-in dropdown is no
     longer clipped by anything here. */
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-login-btn {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

nav.main-navbar.rz-header .rz-header__user img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

/* RZ-HEADER-005: real Inspect-confirmed markup for the signed-in
   customer's account dropdown, pasted directly from DevTools:

   <ul class="s-user-menu-dropdown-list">
     <li class="s-user-menu-dropdown-item">
       <a class="s-user-menu-dropdown-item-link" href="...">
         <i class="s-user-menu-dropdown-item-prefix"><svg>...</svg></i>
         <span class="s-user-menu-dropdown-item-title">...</span>
       </a>
     </li>
     ...
     <li class="s-user-menu-dropdown-item s-user-menu-dropdown-item-logout">...</li>
   </ul>

   Light DOM, real classes, living inside the same .rz-header__user
   element RZ-HEADER-004 just un-clipped. Only visual/decorative
   properties are touched here — no position/z-index/display, since it
   already opens and positions itself correctly with no help from this
   file (confirmed via a real screenshot). This re-skins it to match the
   drawer menu's established visual language — same dark card, red-glow
   hover, icon-badge treatment as .rz-menu__link/.rz-menu__icon
   elsewhere in this file — so it reads as the same product instead of a
   default, unstyled browser list. */
nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-list {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin: 0 !important;
  min-width: 232px;
  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(227, 6, 19, 0.15), transparent 26%),
    linear-gradient(180deg, #0a0b0f, #0e0f14 62%, #090a0d) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item {
  list-style: none !important;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-link {
  display: flex !important;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 10px !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  background: rgba(255, 255, 255, 0.028);
  color: #f0f1f4 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition:
    color 190ms ease,
    border-color 190ms ease,
    background-color 190ms ease,
    transform 190ms ease;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-link:hover,
nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-link:focus-visible {
  color: #fff !important;
  border-color: rgba(227, 6, 19, 0.34);
  background: rgba(227, 6, 19, 0.075);
  transform: translateX(-2px);
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-prefix {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  border: 1px solid rgba(227, 6, 19, 0.24);
  background: rgba(227, 6, 19, 0.08);
  color: #ff2934;
}

/* IcoMoon's inline SVGs carry no explicit fill on their <path>, so they
   render browser-default black unless told otherwise — currentColor
   picks up the badge's own red (or gold, for logout below). */
nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-prefix svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-title {
  flex: 1;
}

/* Logout: same gold-tinted treatment already used for the drawer menu's
   "عروض" highlight elsewhere in this file, separated with a divider so
   it reads as a distinct, final action rather than just another item. */
nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-logout {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
  border-color: rgba(212, 175, 55, 0.28);
  background: linear-gradient(110deg, rgba(212, 175, 55, 0.09), rgba(227, 6, 19, 0.055));
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-prefix {
  color: #f1c84d;
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.08);
}

/* RZ-HEADER-010 — real Inspect-confirmed markup, pasted directly from
   DevTools, for the one piece of the signed-in dropdown RZ-HEADER-005
   never touched: the greeting header sitting above the list.

   <div class="s-user-menu-dropdown-header">
     <img src="...avatar..." alt="...">
     <div class="s-user-menu-dropdown-header-content">
       <span>حيَّاك</span>
       <p>ميار</p>
     </div>
     <button class="s-user-menu-dropdown-header-close"><svg>...</svg></button>
   </div>

   Salla renders this as a flat, unstyled reddish-gray box — visually a
   different product from the dark-glass list card sitting right below
   it. Re-skinned as its own floating card using the exact same
   gradient/border/radius/shadow tokens as `.s-user-menu-dropdown-list`
   (RZ-HEADER-005) so header + list read as one consistent panel; the
   avatar gets a gold ring (this file's established "special/you"
   accent, already used for the logout row) as a small personalization
   touch; the close button is re-skinned with the same red icon-badge
   treatment as `.s-user-menu-dropdown-item-prefix`. Universal, not
   breakpoint-scoped — same as RZ-HEADER-005 — since this header renders
   identically in the dropdown on both mobile and desktop. */
nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(227, 6, 19, 0.15), transparent 26%),
    linear-gradient(180deg, #0a0b0f, #0e0f14 62%, #090a0d) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header img {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-content {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-content span {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-content p {
  margin: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  border: 1px solid rgba(227, 6, 19, 0.24);
  background: rgba(227, 6, 19, 0.08);
  color: #ff2934;
  transition:
    color 190ms ease,
    border-color 190ms ease,
    background-color 190ms ease,
    transform 190ms ease;
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-close:hover,
nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-close:focus-visible {
  color: #fff;
  border-color: rgba(227, 6, 19, 0.5);
  background: rgba(227, 6, 19, 0.16);
  transform: scale(1.06);
}

nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown-header-close svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor;
}

/* =========================================================
   RZ-ACCOUNT-001 — Account pages: desktop sidebar menu
   -----------------------------------------------------------
   Real Inspect-confirmed markup, pasted directly from DevTools
   on rzstore7.com/account/notifications: the account layout's
   desktop sidebar is <nav aria-label="Sidebar" class="... sidebar
   ...">, which wraps <salla-user-menu inline> — the SAME web
   component as the header dropdown, but here it renders
   <ul class="s-user-menu-inline"> instead of
   .s-user-menu-dropdown-list. The individual item classes
   (.s-user-menu-dropdown-item / -item-link / -item-prefix /
   -item-title / -item-logout) are identical to the header
   dropdown restyled in RZ-HEADER-005, so this mirrors that exact
   same chip-row / icon-badge / gold-logout treatment for
   consistency across both locations — new scoped rules were
   still needed since the outer list class and container differ.
   Only visible at the lg breakpoint: the wrapping div around
   <salla-user-menu inline> already carries Salla's own
   "hidden lg:block" (mobile has no equivalent sidebar — this is
   desktop-only real behavior, untouched here), so the nav's own
   background swap is wrapped in the same 1024px breakpoint this
   file already uses elsewhere, to avoid an empty dark box
   floating on mobile where the menu itself is not rendered. */
@media (min-width: 1024px) {
  nav[aria-label="Sidebar"].sidebar {
    background:
      radial-gradient(circle at 92% 4%, rgba(227, 6, 19, 0.15), transparent 26%),
      linear-gradient(180deg, #0a0b0f, #0e0f14 62%, #090a0d) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item {
  list-style: none;
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  background: rgba(255, 255, 255, 0.028);
  color: #f0f1f4 !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition:
    color 190ms ease,
    border-color 190ms ease,
    background-color 190ms ease,
    transform 190ms ease;
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-link:hover,
nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-link:focus-visible {
  color: #fff !important;
  border-color: rgba(227, 6, 19, 0.34);
  background: rgba(227, 6, 19, 0.075);
  transform: translateX(-2px);
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-prefix {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  border: 1px solid rgba(227, 6, 19, 0.24);
  background: rgba(227, 6, 19, 0.08);
  color: #ff2934;
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-prefix svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor;
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-title {
  flex: 1;
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-logout {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
  border-color: rgba(212, 175, 55, 0.28);
  background: linear-gradient(110deg, rgba(212, 175, 55, 0.09), rgba(227, 6, 19, 0.055));
}

nav[aria-label="Sidebar"].sidebar .s-user-menu-inline .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-prefix {
  color: #f1c84d;
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.08);
}

/* RZ-HEADER-006 (v1.41.0, EXPERIMENTAL position:fixed attempt on the
   wrong element, `.s-user-menu-toggler.opened`) was REVERTED in
   RZ-HEADER-007 (v1.42.0) after it broke the header avatar's trigger
   photo on mobile — see the CHANGELOG for that history.

   RZ-HEADER-008 — real, evidence-confirmed root-cause fix (not a guess
   this time): real DevTools Computed-panel values, read directly off
   the actual positioned element:

     .s-user-menu-toggler       → 32×0 box, no position/transform at all
                                    (confirmed via Computed filter — not
                                    the positioned element, despite the
                                    name; RZ-HEADER-006 targeted this by
                                    mistake, which is the likely reason
                                    it broke something else instead of
                                    fixing the real bug)
     .s-user-menu-dropdown      → position: fixed (Salla's own, real);
                                    top: -502px, right: 0, bottom: 0,
                                    left: 0; rendered box 420×564

   `top: -502px` is the real bug: Salla anchors this panel to open
   UPWARD from the trigger (right/left: 0 already give it a sensible
   full-width box — those are left untouched). That upward-opening
   default clearly assumes the trigger sits near the BOTTOM of the
   screen (like the bottom mobile nav we removed in RZ-MOBILENAV-001)
   — with our trigger in the TOP header, "open upward" pushes the
   whole 564px-tall panel above the visible viewport, exactly matching
   every screenshot of this bug. Fix: override just `top` (and
   `bottom`, so height recalculates against the new top instead of the
   old negative one) on the real positioned element this time —
   `.s-user-menu-dropdown`, not `.s-user-menu-toggler` — anchoring it
   just below the header instead. `right`/`left` are left alone since
   they already produce a correctly full-width box. A max-height +
   scroll is added as a safety net in case a shorter phone screen
   can't fit the whole panel. Mobile only (`max-width: 1023px`,
   matches this file's existing breakpoint) — desktop, already
   confirmed correct, is untouched. */
@media (max-width: 1023px) {
  nav.main-navbar.rz-header .rz-header__user .s-user-menu-dropdown {
    top: calc(var(--rz-header-height, 64px) + 16px) !important;
    bottom: auto !important;
    max-height: calc(100dvh - var(--rz-header-height, 64px) - 32px) !important;
    overflow-y: auto !important;
  }
}

/* RZ-HEADER-009 — real, code-confirmed root cause of the follow-up bug
   RZ-HEADER-008 exposed: the dropdown's vertical position was fixed, but
   the panel then rendered as a ~34px-wide vertical strip instead of full
   width, even though Salla's own `.s-user-menu-dropdown` rule is
   `width: 100%` and `left`/`right` both compute correctly to `0`.

   Traced by reading our OWN two existing rules that both touch the same
   element — `<salla-user-menu class="rz-header__action rz-header__user">`,
   the real trigger/host, one level above `.s-user-menu-toggler` — rather
   than guessing:

     1. Line ~1550 (inside the existing `max-width: 767px` block) forces
        every `.rz-header__action` icon button, including this one, down
        to `width: 36px !important` for mobile's compact header row. With
        its existing `1px` border, that renders as a 34px content box —
        the exact width DevTools showed on the dropdown itself.
     2. Line ~255 gives every `.rz-header__action` a decorative
        `transform: translateY(-2px)` hover-lift, also on `:focus-within`
        / `:focus-visible` — not just `:hover`. Opening the dropdown
        keeps focus on/inside this same 36px trigger button, so
        `:focus-within` stays true while it's open.

   A non-`none` `transform` on an ancestor creates a new CSS containing
   block for any `position: fixed` descendant. The moment the dropdown
   opens, `:focus-within` applies rule 2's transform to this same 36px-
   wide trigger button (rule 1) — so `.s-user-menu-dropdown`'s
   `width: 100%` starts resolving against THAT 36px box instead of the
   viewport, producing the narrow strip. `top`/`bottom` were unaffected
   by this since RZ-HEADER-008 set them as pixel/calc() values, not
   percentages — only percentage-based sizing is exposed to a changed
   containing block, which is why only `width` broke.

   Fix: neutralize just that transform, only on `.rz-header__user`
   (not the other header icon buttons, which keep their intentional
   hover-lift), only on mobile (`max-width: 1023px`, this file's existing
   breakpoint, covers the narrower 767px/359px squeeze too). This can't
   regress anything visible — it only cancels a 2px cosmetic lift while
   the account menu happens to be open/focused on mobile; desktop is
   completely untouched. `!important` guarantees it wins regardless of
   cascade order against the equal-specificity rule at line ~255. */
@media (max-width: 1023px) {
  nav.main-navbar.rz-header .rz-header__user:hover,
  nav.main-navbar.rz-header .rz-header__user:focus-within,
  nav.main-navbar.rz-header .rz-header__user:focus-visible {
    transform: none !important;
  }
}

nav.main-navbar.rz-header #theme-toggle {
  display: none !important;
}

/* Cart appears in the header only after Salla confirms a signed-in customer. */
nav.main-navbar.rz-header .rz-header__cart {
  display: none !important;
  width: 42px;
  height: 42px;
}

nav.main-navbar.rz-header[data-rz-auth="member"] .rz-header__cart {
  display: inline-flex !important;
}

nav.main-navbar.rz-header .rz-header__cart .s-cart-summary-wrapper {
  position: relative;
  display: flex !important;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: inherit !important;
}

nav.main-navbar.rz-header .rz-header__cart .s-cart-summary-content {
  display: none !important;
}

nav.main-navbar.rz-header .rz-header__cart .s-cart-summary-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  border: 2px solid #0b0c10;
  border-radius: 999px;
  background: var(--rz-red);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* Small accessible tooltips on pointer devices. */
@media (hover: hover) and (pointer: fine) {
  nav.main-navbar.rz-header [data-rz-label]::after {
    content: attr(data-rz-label);
    position: absolute;
    top: calc(100% + 10px);
    right: 50%;
    z-index: 5;
    padding: 6px 9px;
    pointer-events: none;
    color: #f5f5f7;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(8, 9, 12, 0.96);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translate(50%, -3px);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  nav.main-navbar.rz-header [data-rz-label]:hover::after,
  nav.main-navbar.rz-header [data-rz-label]:focus-visible::after,
  nav.main-navbar.rz-header [data-rz-label]:focus-within::after {
    opacity: 1;
    transform: translate(50%, 0);
  }
}

nav.main-navbar.rz-header a:focus-visible,
nav.main-navbar.rz-header button:focus-visible {
  outline: 2px solid var(--rz-gold) !important;
  outline-offset: 3px;
}

/* Compact state after scrolling. */
nav.main-navbar.rz-header.rz-header--scrolled {
  --rz-header-height: 64px;
  top: 8px !important;
  background:
    radial-gradient(circle at 50% -110%, rgba(var(--rz-red-rgb), 0.14), transparent 44%),
    linear-gradient(135deg, rgba(7, 8, 11, 0.985), rgba(13, 14, 19, 0.965)) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(var(--rz-red-rgb), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

nav.main-navbar.rz-header.rz-header--scrolled .rz-header__logo > img,
nav.main-navbar.rz-header.rz-header--scrolled .rz-logo-sweep-layer img {
  height: 49px !important;
}

/* =========================================================
   RZ Search — native Salla search, visually upgraded
   ========================================================= */

salla-modal.s-search-modal .s-modal-overlay {
  background: rgba(2, 3, 6, 0.82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  backdrop-filter: blur(8px) saturate(105%);
}

salla-modal.s-search-modal .s-modal-body {
  width: min(680px, calc(100vw - 32px)) !important;
  max-width: 680px !important;
  margin-top: max(18px, env(safe-area-inset-top)) !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid rgba(227, 6, 19, 0.24) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 86% -45%, rgba(227, 6, 19, 0.2), transparent 48%),
    linear-gradient(145deg, #101116, #090a0e) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

salla-modal.s-search-modal .s-modal-header {
  position: absolute !important;
  top: 20px;
  left: 20px;
  z-index: 130 !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
}

salla-modal.s-search-modal .s-modal-close {
  position: relative !important;
  z-index: 131 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center;
  color: #cfd0d5 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  pointer-events: auto !important;
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}

salla-modal.s-search-modal .s-modal-close:hover,
salla-modal.s-search-modal .s-modal-close:focus-visible {
  color: #fff !important;
  border-color: rgba(227, 6, 19, 0.38) !important;
  background: rgba(227, 6, 19, 0.1) !important;
}

salla-modal.s-search-modal .s-modal-close svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

salla-modal.s-search-modal .s-search-container,
salla-modal.s-search-modal .s-search-input-wrapper {
  background: transparent !important;
}

salla-modal.s-search-modal .s-search-input {
  height: 56px !important;
  padding: 0 46px 0 52px !important;
  color: #f7f7f9 !important;
  caret-color: #ff2934;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  font-size: 15px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

salla-modal.s-search-modal .s-search-input::placeholder {
  color: #8f929b !important;
  opacity: 1;
}

salla-modal.s-search-modal .s-search-input:focus {
  border-color: rgba(227, 6, 19, 0.58) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 0 0 3px rgba(227, 6, 19, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  outline: 0 !important;
}

salla-modal.s-search-modal .s-search-icon-wrap {
  color: #ff2934 !important;
}

salla-modal.s-search-modal .s-search-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}

salla-modal.s-search-modal .s-search-results {
  max-height: min(62vh, 540px) !important;
  margin-top: 8px;
  padding: 6px !important;
  overflow-y: auto;
  color: #f2f2f4 !important;
  border: 1px solid rgba(227, 6, 19, 0.16) !important;
  border-radius: 12px;
  background: #0d0e13 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48) !important;
}

salla-modal.s-search-modal .s-search-product {
  color: #f4f4f6 !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
  transition: background-color 160ms ease, border-color 160ms ease;
}

salla-modal.s-search-modal .s-search-product:hover,
salla-modal.s-search-modal .s-search-product:focus-visible {
  border-color: rgba(227, 6, 19, 0.16) !important;
  background: rgba(227, 6, 19, 0.08) !important;
}

salla-modal.s-search-modal .s-search-product-title {
  color: #f5f5f7 !important;
}

salla-modal.s-search-modal .s-search-product-price {
  color: #d4af37 !important;
}

salla-modal.s-search-modal .s-search-product-regular-price {
  color: #787b84 !important;
}

salla-modal.s-search-modal .s-search-product-image-container {
  overflow: hidden;
  border-radius: 9px;
  background: #15161c;
}

salla-modal.s-search-modal .s-search-product-image {
  object-fit: cover;
}

salla-modal.s-search-modal .s-search-no-results-placeholder {
  color: #a8abb4 !important;
}

/* =========================================================
   RZ Side Menu — native Yafa/Salla menu, visually upgraded
   ========================================================= */

/* RZ-MENU-001F: backdrop-filter removed here on purpose. On some Chromium
   builds (confirmed via chrome://gpu: Skia Graphite / Metal backend on
   Apple Silicon) a `position:fixed` element with `backdrop-filter` inside
   an off-canvas drawer that gets shown/moved by JS can end up on a GPU
   layer that never gets composited to the screen until something else
   (like opening DevTools) forces the whole page's layer tree to rebuild.
   Dropping backdrop-filter here removes that specific GPU code path.
   Slightly less soft-looking (no blur), background made a bit darker to
   compensate visually. If this fixes the "menu invisible without DevTools"
   bug, keep it; if not, revert and this was a case eliminated. */
.mm-ocd:has(.rz-menu) {
  background: rgba(2, 3, 6, 0.86) !important;
}

.mm-ocd:has(.rz-menu) .mm-ocd__content {
  width: min(430px, 92vw) !important;
  max-width: 430px !important;
  height: 100dvh !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-left: 1px solid rgba(var(--rz-red-rgb, 227, 6, 19), 0.22);
  background: #090a0e !important;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.52);
  /* RZ-MENU-004: belt-and-suspenders scroll fix. The inner
     ul.main-menu.rz-menu__list already has its own height:100%/
     overflow-y:auto, but that math only works if every ancestor in
     between has a real (non-auto) height — one gap in that chain and
     the list silently stops scrolling with no visible scrollbar.
     Making THIS element (the one true fixed-height ancestor, 100dvh)
     scrollable directly guarantees a scrollbar appears whenever the
     menu's real content is taller than the drawer, no matter what the
     inner elements are doing.

     RZ-MENU-007 added `overflow-x: hidden` here (and on TWO inner
     elements) to kill a left-right scrollbar. RZ-MENU-008: that broke
     up-down scrolling and the chevrons entirely — reverted. RZ-MENU-010:
     re-adding it now that RZ-MENU-009 removed the real cause of that
     regression — the old accordion used to open a THIRD nested
     scrollable box (`ul ul.rz-menu__open`, its own independent
     overflow-y:auto) directly inside these two, and forcing overflow-x
     on all three at once is what actually broke the scroll chain. That
     third box no longer exists at all in the new .rz-panel accordion
     (plain display:none/block, no overflow properties of its own) — so
     this is only re-applied to these original two fixed-height scroll
     owners, not three. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  /* RZ-MENU-011: the scroll-position correction red-zone-main.js applies
     on every drawer open must land instantly, not as an animated scroll —
     otherwise visitors would see the content visibly slide from the
     cropped/default position into the corrected one on every open. */
  scroll-behavior: auto !important;
}

.mm-ocd.mm-ocd--open:has(.rz-menu) .mm-ocd__content {
  transform: translate3d(0, 0, 0) !important;
}

body.mm-ocd-opened .mm-ocd:has(.rz-menu),
.mm-ocd.rz-drawer-force-open:has(.rz-menu) {
  z-index: 9999 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.mm-ocd-opened .mm-ocd:has(.rz-menu) .mm-ocd__content,
.mm-ocd.rz-drawer-force-open:has(.rz-menu) .mm-ocd__content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

.rz-menu,
.rz-menu.mm-spn,
.rz-menu .main-menu {
  color: #f3f3f5 !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(227, 6, 19, 0.17), transparent 26%),
    linear-gradient(180deg, #0a0b0f, #0e0f14 62%, #090a0d) !important;
}

.rz-menu > .rz-menu__desktop-source {
  display: none !important;
}

/* RZ-MENU-005: renamed from mm-spn--open (see red-zone-main.js). Yafa's
   own native mmenu drill-down addon ("spn") is still actively attached to
   this <nav> (real Inspect dump showed mm-spn--navbar / mm-spn--light
   classes and a data-mm-spn-title attribute we never write ourselves) —
   it was reacting to the old shared mm-spn--open/mm-spn--parent class
   names and applying its own real full-panel drill-down positioning on
   top of ours, which is exactly what pushed content outside the drawer's
   box, hid the intro card, and misaligned the chevrons. Now uses our own
   namespaced class instead, and red-zone-main.js actively strips any
   native mm-spn--open/mm-spn--parent classes the instant they appear so
   that native CSS never gets a chance to match. position/inset/width/
   height are also forced here with !important as a second layer of
   defense, in case the native addon's own rules are scoped broadly
   enough (e.g. ".mm-spn ul") to still match this element regardless of
   its own class name.

   RZ-MENU-025: real, code-level bug found (not guesswork) — this selector
   (.rz-menu.mm-spn > ul.rz-menu__list.rz-menu__open, 4 classes) has HIGHER
   specificity than the RZ-MENU-024 rule below on `.rz-menu
   ul.main-menu.rz-menu__list` (3 classes). Both match the exact same real
   <ul>. This rule's `display: block !important` was therefore silently
   beating RZ-MENU-024's `display: flex !important` every time — the
   vertical-centering fix could never have taken visual effect, no matter
   how correct its own rule was, because the box never actually became a
   flex container in the first place. Confirmed live: after publishing
   1.55.0, the deployed file was fetched directly and was byte-correct,
   yet the drawer still rendered exactly as before — this specificity
   conflict is why. Fixed by mirroring the same display/flex/padding
   values here too, so whichever of these two rules wins, the result is
   identical. Also added explicit `box-sizing: border-box` and `margin: 0`
   as a second layer of defense against the same width-overflow-then-
   clipped-by-.mm-spn's-own-overflow:hidden failure mode (Yafa's own
   `.mm-spn { overflow: hidden; clip-path: inset(0 0 0 0); }`, confirmed
   directly from their theme CSS, clips anything wider than itself — a
   content-box-sized child with added padding would render wider than
   100% and lose part of itself to that clip). */
.rz-menu.mm-spn > ul.rz-menu__list.rz-menu__open {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  justify-content: safe center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

.rz-menu ul ul {
  background:
    radial-gradient(circle at 92% 4%, rgba(227, 6, 19, 0.13), transparent 24%),
    linear-gradient(180deg, #0a0b0f, #0e0f14 62%, #090a0d) !important;
}

.rz-menu ul ul.rz-menu__open {
  z-index: 4 !important;
  overflow-y: auto !important;
}

/* RZ-MENU-005: the old mm-spn--parent-hides-intro rule was removed here.
   It was written for a real full-screen drill-down UX (a different
   "page" replaces the current one, so hiding the intro card made sense),
   but our RZ-MENU-004 accordion stays on the same screen and only
   expands/collapses in place — the intro card should always stay
   visible. It was also keyed to mm-spn--parent, a class we never add
   ourselves; its presence was Yafa's native addon reacting to our old
   class name (see above), which is exactly why the intro card was
   disappearing unexpectedly when a category was opened. */

/* RZ-MENU-024: real, decisive pixel-measurement evidence — comparing the
   drawer's own left/right edges against the intro card's edges AND every
   menu row's edges, independently at several points from top to bottom
   of a real screenshot — showed this list's content sitting flush
   against the drawer's RIGHT edge with almost no gap, while a large,
   consistent gap sat on the LEFT. The intro card and every row shared
   the exact same asymmetry, proving it's this shared parent list's own
   horizontal padding at fault, not any individual row or icon (those
   were already re-checked and are internally symmetric). Fetching
   Yafa's own bundled theme CSS directly confirmed the real cause: its
   native drill-down panel library ships `.mm-spn ul { padding-right:
   30%; padding-right: var(--mm-spn-panel-offset); left: 100%; width:
   130%; ... }`, plus a `.mm-spn.mm-spn--vertical ul { padding-right: 0;
   ... }` variant — bare tag + ancestor-class selectors that match this
   exact <ul> regardless of its own class name, the SAME structural-leak
   category already proven and fixed for position/width/left in
   RZ-MENU-022. `left`/`width`/`position` on this element are already
   forced safe by the RZ-MENU-005 rule above (`.rz-menu.mm-spn > ul...`),
   but nothing had forced `padding` yet — and this time it's our own
   `padding-inline: 13px` LOGICAL shorthand fighting Yafa's PHYSICAL
   `padding-right` declarations, which is exactly the kind of mixed
   logical/physical cascade that can resolve unpredictably, matching the
   real measured result (right side collapsed to ~0, left side left
   oversized). Fix: force the same intended 13px inset as explicit
   physical padding-left/padding-right instead of the logical shorthand —
   this site's dir is permanently rtl and never toggles to ltr, so
   physical values are safe here and remove the ambiguity entirely.

   RZ-MENU-024 also switches this list from plain block flow to a column
   flexbox with centered content, fixing the separate "everything sits
   stuck at the top with empty space below" complaint: this list is
   height:100% inside .mm-ocd__content, but block flow never centers
   short content vertically — it just leaves the leftover space at the
   bottom. `justify-content: safe center` is declared AFTER a plain
   `center` fallback on purpose (same var()-style fallback pattern Yafa's
   own CSS above uses): engines that understand `safe` use it — centers
   short content, but falls back to top-aligned/normal-scroll behavior
   the instant content is taller than the drawer, which is the standard
   fix for the classic "centered flexbox swallows the top of your
   scrollable content" bug; engines that don't understand `safe center`
   fail that one declaration only and keep the plain `center` line above
   it. This directly protects the hard-won scroll behavior from
   RZ-MENU-007/008/010/011 — overflow-x/overflow-y/scroll-behavior below
   are unchanged. */
.rz-menu ul.main-menu.rz-menu__list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  justify-content: safe center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(227, 6, 19, 0.55) transparent;
  /* RZ-MENU-011: see the matching comment on .mm-ocd__content above —
     same reasoning, this is the other of the two real RTL scroll owners. */
  scroll-behavior: auto !important;
}

.rz-menu ul.main-menu.rz-menu__list::-webkit-scrollbar {
  width: 5px;
}

.rz-menu ul.main-menu.rz-menu__list::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(227, 6, 19, 0.55);
}

/* RZ-MENU-004: Yafa renders TWO parallel copies of every category, at
   every nesting level — a mobile-format node (class contains
   "lg:hidden") and a desktop-dropdown-format duplicate (class
   contains "lg:!block", plus a ".sub-menu" wrapper div for its
   children). Normally Tailwind's own responsive classes show only one
   copy depending on real viewport width. This drawer is deliberately
   used as the ONLY menu at every breakpoint (mobile AND desktop), so
   both copies must be forced the same way at every level, not just
   the top one. The previous version of this rule used `>` (direct
   child only), so it only fixed the TOP level — every nested category
   still let Tailwind's real lg: breakpoint decide, which is why the
   desktop dropdown format (a squat, min-width, side-by-side flex
   panel meant to hang off a horizontal top-nav) was silently leaking
   into the vertical drawer for every subcategory, producing the messy
   side-by-side alignment. Using a plain descendant selector (no `>`)
   applies this at every depth, and the attribute-substring match
   avoids needing to escape Tailwind's literal "!" characters in a
   class selector. */
.rz-menu .sub-menu,
.rz-menu li[class*="lg:!block"] {
  display: none !important;
}

.rz-menu li[class*="lg:hidden"] {
  display: block !important;
}

/* RZ-MENU-004: collapsed-by-default accordion. Every nested <ul> inside
   the drawer's menu is hidden until its parent item is tapped (our own
   JS toggles the .rz-menu__open class — see setupMenuAccordion() in
   red-zone-main.js). Before this, nothing ever hid these lists, so the
   whole category tree rendered permanently expanded with no way to
   collapse it and no real scroll boundary.
   RZ-MENU-005: position/inset/width/height forced with !important here
   too, same belt-and-suspenders reasoning as the root-level rule above —
   this is exactly the nested level where Yafa's native mm-spn addon's
   own panel positioning was winning and pushing content outside the
   drawer's box. */
.rz-menu ul.main-menu.rz-menu__list ul {
  display: none;
}

.rz-menu ul.main-menu.rz-menu__list ul.rz-menu__open {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* RZ-MENU-005: our own accordion state (rz-menu__open) is the only class
   that should ever control open/closed. If Yafa's native mm-spn addon
   still manages to add its own state class to something inside our menu
   before red-zone-main.js's cleanup runs, this stops that class from
   getting any real positioning power — a plain static, in-flow block,
   nothing more — regardless of whatever the native addon's own CSS
   intended for it. */
.rz-menu ul[class*="mm-spn"] {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.rz-menu__has-children,
.rz-panel__item--parent {
  position: relative !important;
}

/* RZ-MENU-009c: the chevron used to be positioned absolute relative to
   the WHOLE <li> (.rz-menu__has-children / .rz-panel__item--parent),
   with top:50% centering it within that li's total height. That was
   fine while the li's only content was the toggle row (closed state) —
   but once opened, the li ALSO contains the entire expanded .rz-panel
   appended beneath the toggle, so top:50% centered the chevron in the
   middle of the whole expanded block instead of next to the toggle
   text, producing a stray arrow floating mid-list with nothing next to
   it (real-tested, confirmed by a live screenshot). Fix: the chevron is
   now inserted INSIDE the toggle itself (see red-zone-main.js) and
   positioned relative to the toggle's own fixed-height row only, so its
   vertical center never depends on how much content is expanded below
   it. */
.rz-menu__has-children > .rz-menu__link,
.rz-panel__item--parent > .rz-panel__toggle {
  position: relative !important;
}

/* RZ-MENU-013 — real DevTools-confirmed root cause of the "giant broken
   double-arrow instead of a small chevron" bug on every top-level
   has-children row (صُناع المحتوى, خدمات الديسكورد, etc.) — reported
   with a real screenshot + a real Computed/box-model dump of the exact
   element, `span.rz-menu__chevron`, selected live in DevTools.

   That box-model dump proved this rule's own `width: 8px` / `height: 8px`
   / `border-inline-end` / `border-bottom` were NOT the ones winning:
   the real computed box was content `0×0` with `padding: 13px 20px`
   and `border: 0` on every side — some other, unidentified rule (most
   likely part of Yafa's/Tailwind's own compiled CSS, whose load order
   relative to our Custom CSS field we don't control) was overriding
   our width/height/border/padding, while only `margin-top: -6px`
   (already correct in the dump) came from us. None of this rule's
   sizing properties had `!important` before, so any equal-or-later
   competing rule could win outright regardless of our selector's
   higher specificity. Forcing every box-defining property here with
   `!important` — including an explicit `padding: 0` and `border: 0`
   reset immediately before the two sides we actually want — makes this
   rule unconditionally win regardless of what else is fighting it,
   the same fix pattern already proven on RZ-HEADER-009/RZ-MENU-006.
   Purely restores the originally-intended tiny 8×8 corner arrow; no
   other visual property changes. */
.rz-menu__has-children > .rz-menu__link > .rz-menu__chevron,
.rz-panel__item--parent > .rz-panel__toggle > .rz-menu__chevron {
  position: absolute !important;
  top: 50% !important;
  inset-inline-end: 14px !important;
  width: 8px !important;
  height: 8px !important;
  margin: -6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-inline-end: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  opacity: 0.55 !important;
  transform: rotate(45deg) !important;
  transition: transform 190ms ease !important;
  pointer-events: none !important;
}

.rz-menu__has-children.rz-menu__item--open > .rz-menu__link > .rz-menu__chevron,
.rz-panel__item--parent.rz-menu__item--open > .rz-panel__toggle > .rz-menu__chevron {
  margin-top: -3px !important;
  transform: rotate(225deg) !important;
}

.rz-menu__has-children.rz-menu__item > .rz-menu__link {
  padding-inline-end: 34px !important;
}

/* RZ-MENU-016: real evidence this time is the actual live outerHTML of
   the drawer, pasted directly by the store owner — every has-children
   toggle has EXACTLY ONE real chevron element inside it
   (`<span class="rz-menu__chevron">`, confirmed for صُناع المحتوى,
   خدمات الديسكورد, المتاجر الإلكترونية, المنتجات الرقمية, سوشال ميديا —
   no duplicate chevron node anywhere in the real markup, and no leftover
   native toggle icon element either). So the second arrow visible next
   to every category cannot be a second DOM element — the only way CSS
   can paint content that isn't in the DOM tree is a ::before/::after
   pseudo-element, almost certainly part of Yafa's own bundled mmenu
   navigation-library CSS, which decorates any list item that
   structurally contains a nested <ul> with its own drill-down arrow —
   independent of any open/state class, which is why RZ-MENU-014/015's
   class-stripping MutationObserver never touched it (there was no class
   to strip; it isn't state-driven at all). Rather than guess Yafa's
   exact selector, this neutralizes ANY pseudo-element content directly
   on our own toggle elements — safe, since our own design's only
   visible indicator is the real .rz-menu__chevron span above; nothing
   of ours ever relies on ::before/::after content on the toggle. */
.rz-menu__has-children > .rz-menu__link::before,
.rz-menu__has-children > .rz-menu__link::after,
.rz-panel__item--parent > .rz-panel__toggle::before,
.rz-panel__item--parent > .rz-panel__toggle::after {
  content: none !important;
  display: none !important;
}

/* RZ-MENU-017: RZ-MENU-016 above targeted ::before/::after on the toggle
   element only, scoped by our own class names. The store owner's
   follow-up screenshot, taken after installing that fix, still showed
   the same second arrow, pixel-for-pixel unchanged — meaning either (a)
   the pseudo-element is not on the toggle span itself but on the <li>
   that wraps it, or on some other descendant, or (b) the update had not
   actually gone live yet in that test (Salla's editor needs an explicit
   "نشر"/Publish after Save, on top of a hard refresh — a real, easy step
   to miss, this project has hit it before). Handling (a) now with a
   single decisive, much broader rule instead of guessing another exact
   selector: this strips ::before/::after from the has-children/parent
   `<li>` itself AND every one of its descendants, at high specificity
   (#mobile-menu id + !important). This is safe to do this broadly
   because our own accordion (.rz-panel/.rz-panel__list/.rz-panel__item/
   .rz-panel__link/.rz-panel__toggle) is entirely custom-built by
   buildCustomPanel()/convertToCustomAccordion() in red-zone-main.js —
   class names that exist nowhere in Yafa's original markup or CSS (see
   RZ-MENU-009) — so nothing in this whole subtree was ever designed to
   carry a pseudo-element of ours; anything painted here that isn't our
   real .rz-menu__chevron span must be coming from Yafa's own generic,
   structural theme CSS (most likely matching on "list item with a
   nested list" regardless of class name, since the native, still-present
   <ul> is a real sibling inside .rz-menu__has-children — see RZ-MENU-014)
   and is safe to remove outright. ::marker is covered too as cheap
   additional insurance in case it's a list-style marker rather than a
   pseudo-element. If a second arrow is STILL visible after this exact
   version is confirmed live (Publish, not just Save, then a true hard
   refresh — or test in a private/incognito window to rule out cache
   entirely), the fastest way to close this for good is to right-click
   directly on that second arrow itself and choose Inspect, then send a
   screenshot of the Elements panel with it selected: that shows, with
   certainty, exactly what is painting it, and I can target that exact
   thing precisely instead of broadening the net again. */
#mobile-menu .rz-menu__has-children::before,
#mobile-menu .rz-menu__has-children::after,
#mobile-menu .rz-menu__has-children *::before,
#mobile-menu .rz-menu__has-children *::after,
#mobile-menu .rz-panel__item--parent::before,
#mobile-menu .rz-panel__item--parent::after,
#mobile-menu .rz-panel__item--parent *::before,
#mobile-menu .rz-panel__item--parent *::after {
  content: none !important;
  display: none !important;
}

#mobile-menu .rz-menu__has-children::marker,
#mobile-menu .rz-menu__has-children *::marker,
#mobile-menu .rz-panel__item--parent::marker,
#mobile-menu .rz-panel__item--parent *::marker {
  content: none !important;
}

/* RZ-MENU-026: real evidence — the store owner Inspected a faint line
   sitting across the middle of the drawer and sent a screenshot of it
   selected in DevTools: `ul.main-menu.lg\:hidden.rz-menu__list.rz-menu__
   open::before`, measuring 403.8 × 1 (i.e. a 1px-tall line spanning the
   full drawer content width). That is Yafa's own native mmenu CSS —
   confirmed directly from their theme file: `.mm-spn.mm-spn--navbar
   ul:before { border-top: 1px solid; content: ""; display: block;
   opacity: .15; position: fixed; top: inherit; width: 100%; z-index: 2;
   }` — a divider line their own vertical-navbar drill-down design paints
   above a submenu panel. It was always being generated on our own
   `<ul id="mobile-menu">`'s top-level list (real Inspect confirms our
   nav carries mm-spn--navbar directly), it just wasn't obviously visible
   while the menu's content sat stuck at the top (RZ-MENU-024/025) —
   centering the content moved it into plain view in the middle of the
   drawer. RZ-MENU-016/017 already strip ::before/::after pseudo-elements
   inside has-children items and their descendants, but never touched the
   top-level list itself, since nothing had pointed to it before now.
   Same fix, same safe reasoning: nothing in our own design relies on
   ::before/::after content on this <ul>, so removing it outright cannot
   affect anything of ours. */
#mobile-menu ul.main-menu.rz-menu__list::before,
#mobile-menu ul.main-menu.rz-menu__list::after {
  content: none !important;
  display: none !important;
}

/* RZ-MENU-009: fully independent accordion panel. This is brand-new DOM
   built by convertToCustomAccordion()/buildCustomPanel() in
   red-zone-main.js — not Yafa's own nested <ul>, which stays hidden and
   untouched (see red-zone-main.js RZ-MENU-009 comment). Kept as a plain
   display:none/display:block toggle on purpose — no scroll/overflow
   properties of its own, since a nested scroll container is exactly what
   caused the RZ-MENU-007/008 regression. It only ever grows the single
   outer .mm-ocd__content scroll container taller, the same proven-working
   scroll owner the drawer has always used.

   RZ-MENU-020: real screenshot evidence showed a row ("خدمات الديسكورد")
   whose chevron WAS rotated to the open position — proving the JS
   click-toggle logic ran and added the rz-panel--open class successfully —
   yet no expanded panel content appeared anywhere below it. That means the
   class toggle was succeeding while the visual show/hide was not, which is
   the exact same "un-!important'd rule loses the cascade to an
   unidentified competing rule" signature already proven and fixed four
   other times in this file (RZ-HEADER-009, RZ-MENU-006, RZ-MENU-013,
   RZ-MENU-019). Neither of these two rules had !important before this
   change. Forcing both is a pure specificity fix — it cannot change
   anything for anyone for whom this rule was already winning, and it
   fixes it for anyone for whom something else was silently overriding it.
   CSS-only, JS unchanged. */
.rz-panel {
  display: none !important;
}

.rz-panel.rz-panel--open {
  display: block !important;
}

/* RZ-MENU-022: real root cause found — fetched Yafa's own actual bundled
   theme CSS directly and confirmed it. Our `<nav id="mobile-menu">`
   carries mm-spn's base classes directly (mm-spn / mm-spn--light /
   mm-spn--navbar / mm-spn--main), and Yafa's own library ships a plain,
   TAG-based structural rule — `.mm-spn ul { position: fixed; left: ...;
   width: 130%; ... }` — meant for its native full-screen slide-in
   drill-down panels. This is a bare descendant selector: it matches ANY
   <ul> nested anywhere inside an .mm-spn element, at any depth, through
   any wrapper — completely independent of that <ul>'s own class name.
   RZ-MENU-009's whole rebuild strategy (give our accordion class names
   that exist nowhere in Yafa's markup) defeats Yafa's rules that key off
   class names, but this one keys off tag + ancestry only, so our
   `.rz-panel__list` was never actually safe from it — it was inheriting
   `position: fixed` + a large off-canvas `width`/`left` slide offset the
   whole time. That fully explains every symptom seen this round: the
   list is genuinely in the DOM with the right classes and `display:
   block !important` from RZ-MENU-009's own fix above, so it LOOKS like
   it should show — but `position: fixed` pulls it completely out of
   normal document flow (which is exactly why the rows below it never
   shifted down to make room, in every screenshot), and the inherited
   `left`/`width` then place it off-screen entirely. We never touched
   `position`/`width`/`left` on `.rz-panel`/`.rz-panel__list` before now
   because nothing suggested we needed to — `display` was the only
   property we'd seen fought over. Forcing all of them back to normal
   in-flow values here neutralizes that specific inherited rule
   regardless of its exact values, the same defensive pattern already
   used for `.rz-menu ul[class*="mm-spn"]` above; harmless for anyone for
   whom this wasn't the problem, since these are exactly the values a
   plain nested block element would have anyway. CSS-only, JS unchanged. */
.rz-panel,
.rz-menu .rz-panel__list {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* RZ-MENU-009 hotfix: the older blanket rule
   `.rz-menu ul.main-menu.rz-menu__list ul { display: none; }` (kept
   in place further down, still doing its job of permanently hiding
   Yafa's own native nested <ul>s) has higher selector specificity than
   a plain `.rz-panel__list { }` rule, and it matches ANY <ul> nested
   anywhere under the root list — including our brand-new
   .rz-panel__list, even though it sits inside an unrelated <div
   class="rz-panel">. That's why clicking correctly opened the .rz-panel
   wrapper (chevron rotated fine) while the actual list inside it stayed
   invisible. This forces our own list to always render — the wrapping
   .rz-panel div above is what actually controls show/hide. */
.rz-menu .rz-panel__list {
  display: block !important;
}

.rz-panel__list {
  margin: 6px 0 4px !important;
  padding-inline-start: 14px !important;
  margin-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.07);
  list-style: none;
}

.rz-panel__item {
  margin: 0;
}

.rz-panel__link,
.rz-panel__toggle {
  display: block;
  min-height: 50px !important;
  padding-block: 13px !important;
  padding-inline-end: 26px !important;
  padding-inline-start: 12px !important;
  color: #d0d1d6 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}

.rz-panel__link:hover,
.rz-panel__link:focus-visible,
.rz-panel__toggle:hover,
.rz-panel__toggle:focus-visible {
  color: #fff !important;
  background: rgba(227, 6, 19, 0.06) !important;
}

.rz-panel__item:first-child > .rz-panel__link,
.rz-panel__item:first-child > .rz-panel__toggle {
  color: #ff5b63 !important;
  font-weight: 800 !important;
}

.rz-panel__item:first-child > .rz-panel__link:hover,
.rz-panel__item:first-child > .rz-panel__link:focus-visible {
  color: #ffffff !important;
}

/* RZ-MENU-006: real Inspect-confirmed fix. This rule targets the toggle
   <span> of a nested category ("منصات البث" etc.), but our own
   .rz-menu__chevron is ALSO a direct-child <span> of the very same
   .rz-menu__has-children element (see setupMenuAccordion() in
   red-zone-main.js — it's inserted right after the toggle). Without the
   :not() exclusion, this rule's `padding-inline-end: 26px` was ALSO
   being applied to the tiny 8x8px chevron, stretching its content box
   from 8px to 34px wide — and since the chevron is a rotated square
   built from two borders, stretching its box like that turns the clean
   corner shape into the long broken diagonal streak you saw only on
   nested items (top-level items use an <a> toggle, not a <span>, so
   they were never touched by this rule — exactly matching what you
   reported: top-level arrows fine, nested ones broken). */
.rz-menu ul ul .rz-menu__has-children > span:not(.rz-menu__chevron) {
  display: block;
  padding-inline-end: 26px;
  cursor: pointer;
}

.rz-menu .rz-menu__intro {
  position: relative;
  z-index: 1;
  display: flex !important;
  min-height: 98px;
  margin: 10px 0 14px !important;
  padding: 15px 16px !important;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(227, 6, 19, 0.13), rgba(255, 255, 255, 0.025)),
    #101116 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rz-menu .rz-menu__intro::after {
  content: "";
  position: absolute;
  top: -46px;
  left: -22px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.2), transparent 67%);
}

.rz-menu .rz-menu__intro-logo {
  position: relative;
  z-index: 1;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.2);
}

.rz-menu .rz-menu__intro-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.42));
}

.rz-menu .rz-menu__intro-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.rz-menu .rz-menu__intro-copy strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.rz-menu .rz-menu__intro-copy span {
  color: #a9abb4;
  font-size: 12px;
  line-height: 1.5;
}

.rz-menu .rz-menu__item {
  margin: 7px 0 !important;
  border: 0 !important;
}

.rz-menu .rz-menu__link {
  display: flex !important;
  min-height: 56px !important;
  padding: 9px 12px !important;
  align-items: center;
  gap: 11px;
  color: #f0f1f4 !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition:
    color 190ms ease,
    border-color 190ms ease,
    background-color 190ms ease,
    transform 190ms ease;
}

.rz-menu .rz-menu__link:hover,
.rz-menu .rz-menu__link:focus-visible {
  color: #fff !important;
  border-color: rgba(227, 6, 19, 0.34) !important;
  background: rgba(227, 6, 19, 0.075) !important;
  transform: translateX(-2px);
}

/* RZ-MENU-019: real screenshot evidence (a zoomed crop of the icon badge
   next to "المتاجر الإلكترونية") showed the SVG icon rendering partly
   outside its own rounded box, spilling past the left edge instead of
   sitting centered inside it. This rule previously had no `!important`
   on the box's own width/height, and no `overflow` set at all (default
   `visible`) — the same un-!important'd-property-loses-the-cascade
   signature already proven real multiple times elsewhere in this file
   (RZ-HEADER-009, RZ-MENU-006, RZ-MENU-013), so the same forcing fix is
   applied here; `overflow: hidden` is added as a hard guarantee on top —
   whatever the icon's rendered size ends up being, it can now never
   visually escape its own badge shape, matching the intended design
   regardless of the exact competing rule. */
.rz-menu .rz-menu__icon {
  position: relative !important;
  display: grid !important;
  overflow: hidden !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  place-items: center !important;
  color: #ff2934;
  border: 1px solid rgba(227, 6, 19, 0.24);
  border-radius: 11px;
  background: rgba(227, 6, 19, 0.08);
}

/* RZ-MENU-023: real evidence — the store owner Inspected a broken icon
   ("صُناع المحتوى") and measured its own SVG path coordinates directly;
   they land almost perfectly centered inside the 24x24 viewBox on their
   own (well under 1px off on both axes), so the icon's own artwork was
   ruled out — this was never an "off-center icon design" issue like a
   font/asset quirk, it's a real layout bug. Yet the rendered result was
   visibly off toward the bottom-left of its 36px box, by a large,
   unmistakable margin — not a rounding error. Two icons ("تخفيضات",
   "بكجات ريد زون") rendered correctly while most others didn't, despite
   all of them sharing the exact same `.rz-menu__icon` wrapper markup and
   CSS class — so this isn't explained by a missing class or a
   special-cased selector either (checked: the only rule scoped to
   `.rz-menu__item--offers .rz-menu__icon` only changes color, never
   touches size or position). Rather than keep guessing why the grid's
   `place-items: center` isn't reliably winning for every icon, this
   switches to an entirely different, position-based centering method
   that doesn't depend on grid/flex alignment at all: the parent
   `.rz-menu__icon` is already `position: relative`, so the svg is
   absolutely positioned and centered with the classic
   top/left 50% + translate(-50%,-50%) technique — mathematically dead
   center regardless of whatever was interfering with alignment before.
   Safe for the two icons that already looked correct too, since
   centering an already-centered element this way is a no-op. */
.rz-menu .rz-menu__icon svg {
  width: 19px !important;
  height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.rz-menu .rz-menu__item--offers .rz-menu__link {
  border-color: rgba(212, 175, 55, 0.28) !important;
  background: linear-gradient(110deg, rgba(212, 175, 55, 0.09), rgba(227, 6, 19, 0.055)) !important;
}

.rz-menu .rz-menu__item--offers .rz-menu__icon {
  color: #f1c84d;
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.08);
}

.rz-menu .currency-lang-switcher {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.rz-menu .currency-lang-switcher > a {
  min-height: 50px !important;
  color: #c7c8ce !important;
  border: 1px dashed rgba(255, 255, 255, 0.11) !important;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025) !important;
}

/* Native nested panels stay familiar, with improved contrast.
   RZ-MENU-006: our .rz-menu__chevron is also a direct-child <span> of
   the same <li> (a sibling of the toggle, not just of
   .rz-menu__has-children — see setupMenuAccordion() in
   red-zone-main.js), so this rule's min-height: 50px !important was
   ALSO forcing the tiny absolutely-positioned 8px chevron into a 50px
   box before its 45deg rotation — almost certainly the main cause of
   the long broken diagonal streak (worse than the 26px padding-inline-end
   bug fixed just above it, which only widened the box). */
.rz-menu ul ul > li > a,
.rz-menu ul ul > li > span:not(.rz-menu__chevron) {
  min-height: 50px !important;
  color: #d0d1d6 !important;
  border-bottom-color: rgba(255, 255, 255, 0.065) !important;
}

.rz-menu ul ul > li > a:hover,
.rz-menu ul ul > li > a:focus-visible {
  color: #fff !important;
  background: rgba(227, 6, 19, 0.06) !important;
}

/* Yafa renders every subcategory level flattened inline (no drill-down
   panels), so without a visual rail each tapped category reads as one
   long, undifferentiated wall of text. A left rail per level plus a
   distinct "view all" row make the hierarchy legible. */
.rz-menu ul ul {
  padding-inline-start: 14px !important;
  margin-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.07);
}

.rz-menu ul ul > li:first-child > a {
  color: #ff5b63 !important;
  font-weight: 800 !important;
}

.rz-menu ul ul > li:first-child > a:hover,
.rz-menu ul ul > li:first-child > a:focus-visible {
  color: #ffffff !important;
}

.mm-ocd .rz-menu .btn--close,
.mm-ocd .rz-menu + .btn--close,
.mm-ocd .close-mobile-menu {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

/* Tablet. */
@media (max-width: 1023px) {
  nav.main-navbar.rz-header .rz-header__menu-trigger {
    width: 44px;
    padding: 0 !important;
  }

  nav.main-navbar.rz-header .rz-header__menu-trigger::after {
    display: none;
  }
}

/* Mobile first result: short header, no overlap, all native actions preserved. */
@media (max-width: 767px) {
  salla-modal.s-search-modal .s-modal-body {
    width: calc(100vw - 20px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(470px, calc(100dvh - 72px)) !important;
    flex: 0 0 auto !important;
    margin-top: max(10px, env(safe-area-inset-top)) !important;
    align-self: flex-start !important;
  }

  salla-modal.s-search-modal .s-search-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  salla-modal.s-search-modal .s-search-results {
    max-height: min(390px, calc(100dvh - 152px)) !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  nav.main-navbar.rz-header {
    --rz-header-height: 64px;
    width: calc(100% - 18px) !important;
    top: 8px !important;
    padding: 7px 8px !important;
    border-radius: 17px !important;
  }

  nav.main-navbar.rz-header.rz-header--scrolled {
    --rz-header-height: 58px;
    top: 5px !important;
  }

  nav.main-navbar.rz-header .rz-header__brand {
    min-width: 0;
    gap: 5px !important;
  }

  nav.main-navbar.rz-header .rz-header__menu-trigger {
    width: 38px;
    height: 38px;
    border-radius: 11px !important;
  }

  nav.main-navbar.rz-header .rz-header__menu-trigger svg {
    width: 21px;
    height: 21px;
  }

  /* On mobile the logo joins its group, preventing overlap with 4 member actions. */
  nav.main-navbar.rz-header .rz-header__logo {
    position: relative !important;
    top: auto;
    left: auto;
    width: 46px;
    height: 48px;
    flex: 0 0 46px;
    transform: none;
  }

  nav.main-navbar.rz-header .rz-header__logo::before {
    width: 48px;
    height: 48px;
  }

  nav.main-navbar.rz-header .rz-header__logo > img,
  nav.main-navbar.rz-header .rz-logo-sweep-layer img,
  nav.main-navbar.rz-header.rz-header--scrolled .rz-header__logo > img,
  nav.main-navbar.rz-header.rz-header--scrolled .rz-logo-sweep-layer img {
    height: 43px !important;
  }

  nav.main-navbar.rz-header .rz-header__actions {
    min-width: 0;
    gap: 4px !important;
  }

  nav.main-navbar.rz-header .rz-header__action,
  nav.main-navbar.rz-header .rz-header__cart,
  nav.main-navbar.rz-header .rz-header__cart .s-cart-summary-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
  }

  nav.main-navbar.rz-header .rz-header__locale {
    padding: 0 !important;
  }

  nav.main-navbar.rz-header .rz-header__locale span:nth-child(1),
  nav.main-navbar.rz-header .rz-header__locale span:nth-child(2) {
    display: none !important;
  }

  nav.main-navbar.rz-header .rz-header__locale span:nth-child(3) {
    display: inline !important;
    font-size: 12px;
    font-weight: 800;
  }

  nav.main-navbar.rz-header .rz-header__user img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }

  nav.main-navbar.rz-header .rz-header__cart .s-cart-summary-count {
    top: -7px;
    right: -6px;
  }
}

@media (max-width: 359px) {
  nav.main-navbar.rz-header {
    width: calc(100% - 12px) !important;
    padding-inline: 6px !important;
  }

  nav.main-navbar.rz-header .rz-header__actions {
    gap: 3px !important;
  }

  nav.main-navbar.rz-header .rz-header__action,
  nav.main-navbar.rz-header .rz-header__cart,
  nav.main-navbar.rz-header .rz-header__cart .s-cart-summary-wrapper {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  nav.main-navbar.rz-header .rz-header__logo {
    width: 42px;
    flex-basis: 42px;
  }

  nav.main-navbar.rz-header .rz-header__logo > img,
  nav.main-navbar.rz-header .rz-logo-sweep-layer img,
  nav.main-navbar.rz-header.rz-header--scrolled .rz-header__logo > img,
  nav.main-navbar.rz-header.rz-header--scrolled .rz-logo-sweep-layer img {
    height: 40px !important;
  }
}

@keyframes rz-logo-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.025);
  }
}

@keyframes rz-logo-aura {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.88;
    transform: scale(1.14);
  }
}

@keyframes rz-logo-sweep {
  0%,
  58% {
    opacity: 0;
    clip-path: polygon(-18% 0, -10% 0, -24% 100%, -32% 100%);
  }
  61% {
    opacity: 0.55;
  }
  74% {
    opacity: 0.55;
    clip-path: polygon(132% 0, 140% 0, 126% 100%, 118% 100%);
  }
  76%,
  100% {
    opacity: 0;
    clip-path: polygon(132% 0, 140% 0, 126% 100%, 118% 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  nav.main-navbar.rz-header,
  nav.main-navbar.rz-header *,
  nav.main-navbar.rz-header *::before,
  nav.main-navbar.rz-header *::after,
  .rz-menu,
  .rz-menu * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   RZ-HOME-001 — Homepage Redesign
   Animated background, "glass" section panels, unified
   looping hover-frame + zoom system for section/product
   cards, and a redesigned FAQ accordion.

   Selectors below are taken directly from a captured
   Inspect dump of the live homepage (2026-08-25) — see the
   project's homepage-structure-reference doc. Nothing here
   touches Swiper-controlled inline styles on
   .main-links-style-3-slider-single (the outer slide) —
   only the inner .main-links-style-3-slider-single-content
   box is styled/animated, so the carousel's own layout math
   is never desynced.
   ========================================================= */

/* ---- Shared design tokens, promoted to :root so every
   section below (not just the header) can use them ---- */
:root {
  --rz-red: #e30613;
  --rz-red-rgb: 227, 6, 19;
  --rz-gold: #d4af37;
  --rz-gold-rgb: 212, 175, 55;
  --rz-ink: #07080b;
}

/* ---- Page background: layered gradient instead of the old
   flat near-black fill ---- */
html {
  background: var(--rz-ink);
}

body {
  background-color: var(--rz-ink);
  background-image:
    radial-gradient(ellipse 1200px 760px at 50% -8%, rgba(var(--rz-red-rgb), 0.16), transparent 62%),
    radial-gradient(ellipse 900px 700px at 96% 22%, rgba(var(--rz-gold-rgb), 0.07), transparent 58%),
    radial-gradient(ellipse 800px 650px at 2% 68%, rgba(var(--rz-red-rgb), 0.06), transparent 55%),
    linear-gradient(180deg, #050506 0%, #0a0708 45%, #0c0808 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---- RZ-HOME-004: CSS-only falling stars ----
   Replaces the RZ-HOME-001 Three.js/WebGL starfield entirely.
   Even after scoping it to the homepage only and pausing every
   other animation (RZ-HOME-003), a continuous WebGL render loop
   was still too heavy on this machine (same Apple M5 + Skia
   Graphite/Metal combination already linked to the parked
   off-canvas-menu GPU issue) — so per the user's explicit choice,
   WebGL is dropped completely in favor of this.

   Two stacked radial-gradient "dot field" layers on body::before/
   ::after, each tiled via background-size and drifted downward by
   animating `transform: translateY()` by exactly one tile height
   (so it loops with zero visible seam). `transform` is the one
   CSS property the compositor can animate without re-painting
   every frame — there is no per-frame JavaScript at all, no GPU
   context, no CDN fetch. Effectively free next to the old
   approach. Scoped to html.rz-is-home (set by the tiny snippet at
   the top of red-zone-main.js) so it only runs on the homepage,
   same as before. */
html.rz-is-home body::before,
html.rz-is-home body::after {
  content: "";
  position: fixed;
  inset: -20% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  will-change: transform;
}

html.rz-is-home body::before {
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 90px 120px, rgba(var(--rz-gold-rgb), 0.8), transparent),
    radial-gradient(1.6px 1.6px at 150px 60px, rgba(var(--rz-red-rgb), 0.7), transparent),
    radial-gradient(1.2px 1.2px at 200px 180px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.6px 1.6px at 60px 200px, rgba(255, 255, 255, 0.6), transparent);
  background-size: 240px 240px;
  opacity: 0.55;
  animation: rz-stars-drift-a 46s linear infinite;
}

html.rz-is-home body::after {
  background-image:
    radial-gradient(1.2px 1.2px at 40px 80px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.6px 1.6px at 130px 40px, rgba(var(--rz-gold-rgb), 0.55), transparent),
    radial-gradient(1.2px 1.2px at 180px 150px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.6px 1.6px at 20px 170px, rgba(var(--rz-red-rgb), 0.5), transparent);
  background-size: 320px 320px;
  opacity: 0.4;
  animation: rz-stars-drift-b 70s linear infinite;
}

@keyframes rz-stars-drift-a {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(240px);
  }
}

@keyframes rz-stars-drift-b {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(320px);
  }
}

/* ============ Section "glass panel" backgrounds ============
   Deliberately no backdrop-filter/blur here — after the
   RZ-MENU-001 GPU-compositor saga, this build avoids
   backdrop-filter site-wide and gets the "glass" look from a
   translucent gradient fill + thin glow borders instead. */
.static-banners,
.main-links-style-3,
.social-banner,
.statistics,
.faq {
  position: relative;
  z-index: 1;
}

.main-links-style-3,
.social-banner,
.statistics,
.faq {
  background: linear-gradient(180deg, rgba(20, 14, 15, 0.55), rgba(10, 8, 9, 0.72));
  border-top: 1px solid rgba(var(--rz-red-rgb), 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ---- RZ-HOME-002: banner/header visual bridge ----
   The header (nav.main-navbar.rz-header) floats fixed over the
   very top of this banner. Previously the banner's own artwork
   started immediately with no transition, so the floating header
   pill read as a disconnected element dropped on top of a
   different design. This overlay fades the banner's top edge
   through the same dark/red tones as the header so the two feel
   like one continuous hero instead of two stacked blocks. It's a
   plain gradient (no blur, no JS) sitting above the banner image
   but z-index'd well below the header, which is position:fixed
   and always paints on top regardless. */
.static-banners::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(38vh, 320px);
  background: linear-gradient(
    180deg,
    rgba(7, 8, 11, 0.92) 0%,
    rgba(var(--rz-red-rgb), 0.16) 45%,
    rgba(7, 8, 11, 0) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* ---- RZ-HOME-010: banner content no longer hidden under the header ----
   The bridge above assumed the header overlapping the banner's own
   top edge was fine because the two were blended visually — but the
   user flagged that real banner content (baked into the hero image
   itself: badges, headline text, the mascot's top) was getting
   covered by the fixed header on every breakpoint, not just faded
   into it. Fix: push the banner down by the header's REAL measured
   height (see the matching JS block, RZ-HOME-010) instead of a
   guessed pixel value — `--rz-header-h` is a CSS custom property
   the JS keeps in sync with the header's actual rendered height at
   the current breakpoint, with a sane fallback for the brief moment
   before the JS has measured it on first paint. The ::before bridge
   above still draws through this new gap, so the header-to-banner
   transition still reads as one continuous hero — there's just
   genuine room now, so nothing real gets clipped underneath it. */
.static-banners {
  padding-top: var(--rz-header-h, 76px);
  box-sizing: border-box;
}

/* ============ Section headings ============
   RZ-HOME-002 removed the title/subtitle text and the moving
   divider animation, keeping just a plain static gradient line
   as a separator. RZ-HOME-007: per the user's explicit follow-up
   feedback, that's removed too — each of the 5 "Main Links"
   sections is already its own visually distinct block (own
   background panel, own spacing), so a thin line between them
   added nothing but empty space. The whole heading wrapper
   (title + subtitle + divider, all empty/hidden now) is collapsed
   to zero height instead of just hiding its contents, so no gap
   is reserved for it either — true "no wasted space", not just
   an invisible line. */
.main-links-style-3-heading {
  display: none !important;
}

/* ============ Unified card hover-frame + zoom system ============
   Same mask-based double-gradient-ring technique as the header's
   nav.main-navbar.rz-header::before above, reused here so the
   whole site shares one visual language. Here the frame sits ON
   TOP of the card (z-index:2, inset:0) rather than as an outer
   glow ring, since the card is filled edge-to-edge by an opaque
   product image and the frame needs to read over it. */
.main-links-style-3-slider-single-content {
  /* No border-radius override here on purpose — the card already
     carries its own intentional asymmetric corners from the theme
     (rounded-tr-xl rounded-tl-xl rounded-br-xl rounded-bl-none).
     Both pseudo-elements below use border-radius:inherit so the
     frame/glare always match whatever that real shape is. */
  position: relative;
  overflow: hidden;
  perspective: 900px;
  transform-style: preserve-3d;
  --rz-glare-x: 50%;
  --rz-glare-y: 50%;
  --rz-glare-o: 0;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease;
  will-change: transform;
}

.main-links-style-3-slider-single-content::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(var(--rz-red-rgb), 0.9),
    rgba(var(--rz-gold-rgb), 0.85) 35%,
    rgba(var(--rz-red-rgb), 0.35) 60%,
    rgba(var(--rz-gold-rgb), 0.85) 85%,
    rgba(var(--rz-red-rgb), 0.9)
  );
  background-size: 250% 250%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
  /* RZ-HOME-003: this used to loop forever on every card, all the
     time, whether visible/hovered or not — with up to ~30+ cards
     across the 5 sections, that's a lot of simultaneous background
     compositing running permanently and was flagged as part of the
     "site feels slower" report. The frame is now paused by default
     (a static dim ring) and only starts sweeping on hover/focus —
     same "intensifies when you interact with it" promise, at a
     fraction of the constant cost. */
  animation: rz-home-frame-sweep 2.4s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s ease;
}

/* Glare/box-shadow layer. RZ-HOME-002's JS updates --rz-glare-x/-y/-o
   on mousemove for a light sweep that follows the cursor (part of the
   3D-tilt effect); with no JS (or reduced-motion, where JS never
   attaches) the layer just stays fully transparent (--rz-glare-o:0),
   so this is purely additive and never required for the card to look
   right. */
.main-links-style-3-slider-single-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--rz-glare-x) var(--rz-glare-y),
    rgba(255, 255, 255, 0.28),
    transparent 55%
  );
  opacity: var(--rz-glare-o);
  box-shadow: 0 0 0 rgba(var(--rz-red-rgb), 0);
  transition: opacity 0.25s ease, box-shadow 0.45s ease;
  pointer-events: none;
  z-index: 2;
}

@keyframes rz-home-frame-sweep {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 250% 50%;
  }
}

.main-links-style-3-slider-single-content:hover,
.main-links-style-3-slider-single-content:focus-within {
  /* Fallback for touch/reduced-motion/no-fine-pointer, where
     RZ-HOME-002's JS never attaches and never sets an inline
     transform. On capable desktop pointers, the JS's inline
     transform (perspective + rotateX/rotateY + scale, updated on
     every mousemove) simply takes over — inline style always wins
     over this rule. */
  transform: scale(1.045);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
}

.main-links-style-3-slider-single-content:hover::before,
.main-links-style-3-slider-single-content:focus-within::before {
  opacity: 1;
  animation-play-state: running;
}

.main-links-style-3-slider-single-content:hover::after,
.main-links-style-3-slider-single-content:focus-within::after {
  box-shadow: 0 0 26px 2px rgba(var(--rz-red-rgb), 0.45);
}

.main-links-style-3-slider-single-content img {
  transition: transform 0.6s ease;
}

.main-links-style-3-slider-single-content:hover img {
  transform: scale(1.06);
}

/* Hero banner gets the same frame language, lighter touch */
.static-banners-single-default-image,
.static-banners-single-mobile-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.static-banners-single-default-image img,
.static-banners-single-mobile-image img {
  transition: transform 0.7s ease;
}

.static-banners-single-default-image:hover img,
.static-banners-single-mobile-image:hover img {
  transform: scale(1.03);
}

/* ============ FAQ redesign ============
   Native <details>/<summary> accordion — styled as glowing
   cards with an accent bar and a rotating chevron. True
   height-animation of native <details> needs JS; this stays
   CSS-only per project preference and instead animates color,
   glow, the chevron, and a fade-in for the revealed answer.

   RZ-HOME-002: the CLOSED state was reported coming out as a
   flat theme-default gray box (only the open item picked up any
   styling — most likely the theme's own native accent, not ours).
   These rules now carry !important on the core visual properties
   (background/border/radius/padding) so they win regardless of
   the theme's own specificity for this accordion, in both the
   open AND closed state. */
.faq {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.faq details {
  position: relative !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-inline-start: 3px solid rgba(var(--rz-red-rgb), 0.6) !important;
  border-radius: 12px !important;
  margin-bottom: 0.85rem !important;
  overflow: hidden !important;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.faq details[open] {
  border-inline-start-color: var(--rz-gold) !important;
  box-shadow: 0 10px 30px -14px rgba(var(--rz-red-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--rz-red-rgb), 0.09), rgba(255, 255, 255, 0.03)) !important;
}

.faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem !important;
  padding-inline-end: 2.6rem !important;
  color: #f2eee6 !important;
  font-weight: 600;
  transition: color 0.3s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid var(--rz-gold);
  border-bottom: 2px solid var(--rz-gold);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.faq details[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
  border-color: var(--rz-red);
}

.faq details > *:not(summary) {
  padding: 0 1.25rem 1.1rem !important;
  color: rgba(242, 238, 230, 0.78) !important;
  animation: rz-home-faq-fade 0.35s ease;
}

@keyframes rz-home-faq-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   RZ-HOME-011 — ثلاث طلبات "حذف نهائي"، كل الكلاسات مؤكدة ١٠٠٪ من
   انسبكتك الحقيقي بهالجولة.
   ========================================================= */

/* ---- أ) خط الفاصل تحت عنوان قسم "الإحصائيات" ----
   الكلاس المؤكد: statistics-heading-divider. هذا العنصر يحمل أيضاً
   كلاس مشترك (section-heading-divider) مستخدم كذلك بقسم الأسئلة
   الشائعة تحت — تعمّدت استهداف الكلاس المحدد statistics-heading
   -divider فقط، مو المشترك، عشان الإخفاء ما يمتد بالغلط لأي قسم
   ثاني يستخدم نفس الكلاس المشترك ولم تطلبي إخفاءه. */
.statistics-heading-divider {
  display: none !important;
}

/* ---- ب) نفس نوع الخط تحت عنوان قسم "الأسئلة الشائعة" ----
   نفس المنطق بالضبط: استهداف الكلاس المحدد faq-heading-divider
   فقط، بدون لمس الكلاس المشترك section-heading-divider. */
.faq-heading-divider {
  display: none !important;
}

/* ---- ج) أيقونة السهم بسؤال الأسئلة الشائعة ----
   الكلاس المؤكد من انسبكتك: faq-content-single-question-icon (span
   يغلف svg شكل شيفرون للأسفل). ملاحظة صريحة: قسم الأسئلة الشائعة
   عندنا فيه أصلاً سهم ذهبي متحرك من تصميمنا (.faq summary::after
   أعلاه بـRZ-HOME-002) — لو كان الشكل اللي وصفتيه بـ"للأسف" سببه
   ظهور سهمين فوق بعض (سهم سلة الأصلي + سهمنا)، هذا الإخفاء يحل
   الموضوع نهائياً بإزالة سهم سلة الأصلي واحد بس. إخفاء بصري بحت —
   ما يمسح أي منطق فتح/إغلاق السؤال. */
.faq-content-single-question-icon {
  display: none !important;
}

/* ============ Bottom mobile nav (nav.mobile-nav-bottom) ============
   RZ-HOME-003: round 1 (background/border directly on the real
   nav element with !important) had ZERO visible effect. Most
   likely cause: this nav's background comes from a Tailwind
   utility (bg-[var(--bg-primary)]) and Salla's Tailwind build may
   compile utilities with their own !important, which then wins
   the tie on source order against a plain class selector like
   ours. Rather than keep guessing at that specificity fight, this
   round paints an entirely NEW layer (::before, negative z-index)
   on top of whatever the nav's real background/border resolve to
   — same technique already proven on the header's own ::before
   ring. A new generated box has nothing to "win" against; it just
   paints. This is guaranteed visible regardless of how the real
   element's own background/border are set.
   Still a CONTAINER-level pass only (icon-level precision needs
   an Inspect dump of the inner markup, not available this round);
   the generic svg/a selectors below stay as an additive, harmless
   best-effort layer. */
/* RZ-MOBILENAV-001: this whole bar removed per explicit request — every
   button on it (الرئيسية/بحث/التصنيفات/السلة/حسابي) already exists in
   the top header (`nav.main-navbar.rz-header`), so it added nothing new,
   just duplicated existing navigation with its own unstyled default
   look. The account avatar that lived here (a separate, never-styled
   `<salla-user-menu>` instance — confirmed via real Inspect markup,
   `class="mobile-bottom-nav-user-connected"`) is removed along with it;
   account access on mobile now lives only in its one natural place, the
   top header's own avatar button. The rules below this comment
   (background overlay, icon color/hover, reduced-motion transitions)
   targeted this bar's old visible state and are left in place as inert
   historical record now that it's hidden — same pattern already used
   elsewhere in this file (e.g. RZ-PRODUCT-011) — removing them outright
   isn't needed since a `display: none` parent makes them moot. */
nav.mobile-nav-bottom {
  display: none !important;
  position: fixed;
  isolation: isolate;
}

/* RZ-HOME-007: the glowing red top border + box-shadow this
   overlay used to draw is removed per the user's explicit
   feedback — just a plain dark background now, no colored line. */
nav.mobile-nav-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(12, 8, 9, 0.92), rgba(6, 4, 5, 0.97));
  pointer-events: none;
  z-index: -1;
}

nav.mobile-nav-bottom svg {
  color: #e9e2d6;
  position: relative;
  z-index: 1;
  transition: color 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

nav.mobile-nav-bottom a:active svg,
nav.mobile-nav-bottom [aria-current="page"] svg,
nav.mobile-nav-bottom .active svg {
  color: var(--rz-red);
  filter: drop-shadow(0 0 8px rgba(var(--rz-red-rgb), 0.6));
  transform: scale(1.08);
}

nav.mobile-nav-bottom a {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

nav.mobile-nav-bottom a:active {
  transform: scale(0.94);
}

/* ============ Mobile tuning ============ */
@media (max-width: 768px) {
  .main-links-style-3-slider-single-content:hover,
  .main-links-style-3-slider-single-content:focus-within {
    transform: scale(1.02);
  }

  body {
    background-attachment: scroll;
  }
}

/* ============ Reduced motion: disable all RZ-HOME animation ============ */
@media (prefers-reduced-motion: reduce) {
  .main-links-style-3-slider-single-content::before,
  .faq details > *:not(summary),
  html.rz-is-home body::before,
  html.rz-is-home body::after {
    animation: none !important;
  }

  .main-links-style-3-slider-single-content,
  .main-links-style-3-slider-single-content::before,
  .main-links-style-3-slider-single-content::after,
  .main-links-style-3-slider-single-content img,
  .static-banners-single-default-image img,
  .static-banners-single-mobile-image img,
  .faq details,
  .faq summary,
  .faq summary::after,
  nav.mobile-nav-bottom svg,
  nav.mobile-nav-bottom a,
  footer a[aria-label="Store Homepage"],
  footer .s-menu-footer-item,
  footer .s-contacts-icon,
  footer .s-social-icon,
  footer .s-contacts-icon::before,
  footer .s-social-icon::before,
  footer .s-contacts-item .unicode,
  footer .copyright-text a,
  footer .s-payments-list-item,
  .product-card,
  .product-card::before,
  .product-card-actions-add-to-cart,
  .product-card-actions-wishlist,
  .prev-nav-button,
  .next-nav-button {
    transition: none !important;
  }

  .main-links-style-3-slider-single-content:hover,
  .main-links-style-3-slider-single-content:focus-within {
    transform: none !important;
  }

  .main-links-style-3-slider-single-content:hover img {
    transform: none !important;
  }

  .product-card:hover,
  .product-card-actions-add-to-cart:hover,
  .product-card-actions-wishlist:hover,
  .prev-nav-button:hover,
  .next-nav-button:hover {
    transform: none !important;
  }
}

/* =========================================================
   RZ-HOME-005 — Footer redesign + wider product row
   -----------------------------------------------------------
   Selectors below are taken directly from the footer HTML the
   user sent (2026-08-25) — logo link, .footer-wrapper, the
   footer menu (salla-menu source="footer" → .s-menu-footer-*),
   salla-contacts (.s-contacts-*), salla-social (.s-social-*),
   .copyright-text, and salla-payments (.s-payments-*). Nothing
   here was guessed.
   ========================================================= */

/* ---- Footer background/top edge ----
   Same overlay technique as the bottom mobile nav (RZ-HOME-003):
   a new ::before layer painted behind the content instead of
   fighting the Tailwind bg-[var(--bg-secondary)] utility for
   specificity. `footer` is used directly (not the arbitrary-value
   class) since there is exactly one <footer> landmark on the
   page — simpler and avoids the fragile escaping a class like
   .bg-\[var\(--bg-secondary\)\] would need. */
footer {
  position: relative;
  isolation: isolate;
}

/* RZ-HOME-009: trims the theme's default footer padding/gaps
   (gap-10, pb-20) down a bit per "خفف من المسافات الزايدة" — the
   footer content is more compact now anyway (centered logo block,
   tighter 3-panel grid), so the old generous spacing just read as
   extra empty room. */
footer .footer-wrapper {
  padding-bottom: 3rem !important;
  gap: 1.75rem !important;
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 7, 8, 0.97) 0%, rgba(5, 4, 5, 1) 100%);
}

/* RZ-HOME-007: the glowing gradient top-border line
   (footer::after) that used to sit above the footer is removed
   entirely per the user's explicit feedback — same reasoning as
   the section divider above, it's ruled out ("مساحة عالفاضي بدون
   فائدة"). The footer keeps its dark gradient background
   (footer::before) with no line above it now. */

/* ---- Logo + tagline block ----
   RZ-HOME-009: this block (logo + "ريد زون ستور.. شريكك المثالي...")
   used to align to the theme's default "start" edge (the right,
   on this RTL site) at desktop widths, reading as off to one side
   instead of a deliberate centered header. Forced centered on all
   breakpoints, with the tagline text a touch bigger and a subtle
   glow so it reads as a real statement, not caption text.
   `:first-child` here is the logo+tagline wrapper — the only other
   direct child of .footer-meta is the 3-column row targeted above
   via [class*="justify-between"]. */
footer .footer-meta > div:first-child {
  align-items: center !important;
  text-align: center;
}

footer .footer-meta > div:first-child > div {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

footer .footer-meta > div:first-child p {
  text-align: center;
  font-size: 1.05rem;
  color: #f2eee6;
  text-shadow: 0 0 18px rgba(var(--rz-red-rgb), 0.35), 0 0 32px rgba(var(--rz-gold-rgb), 0.15);
  max-width: 640px;
  margin-inline: auto;
}

footer a[aria-label="Store Homepage"] {
  display: inline-block;
  filter: drop-shadow(0 0 16px rgba(var(--rz-red-rgb), 0.45));
  transition: filter 0.3s ease, transform 0.3s ease;
}

footer a[aria-label="Store Homepage"]:hover {
  filter: drop-shadow(0 0 24px rgba(var(--rz-red-rgb), 0.7));
  transform: translateY(-2px);
}

/* ---- Section headings ("روابط مهمة" / "تواصل معنا") ----
   RZ-HOME-007: these used to carry a short gradient underline
   (h3::after) — removed per the user's explicit feedback ("فيه
   خطين لسه موجودين"), same "no more decorative lines" direction
   as the section divider and the footer/bottom-nav top borders. */
footer h3 {
  position: relative;
  display: inline-block;
  color: #f5f1ea;
  font-size: 18px;
  font-weight: 700;
}

/* ---- Footer content row layout ----
   RZ-HOME-007: per the user's real Inspect dump, the 3 groups
   here ("روابط مهمة" links, "تواصل معنا" contacts, social icons)
   sit in a `justify-content: between` flex row with no visual
   containment of their own — on a wide screen that spreads them
   to the far edges with a huge empty gap between, reading as
   "everything's floating off on its own side" (the user's exact
   complaint). Selector uses an attribute-substring match
   ([class*=...]) instead of the full Tailwind utility string, so
   it survives minor class-order changes from the theme while
   staying scoped to just this one row inside the footer.

   Fix: on desktop (matching the theme's own lg: breakpoint, so
   mobile's existing stacked layout is untouched) this becomes an
   even 3-column grid instead of edge-spread flex, and each of the
   3 groups gets its own contained "panel" (background/border/
   radius) — same glass-panel language used everywhere else on the
   site — so each group reads as one deliberate block instead of
   loose content floating in empty space.

   RZ-HOME-009: the panel content itself (heading + list) still
   inherited the theme's "start"-aligned (right-aligned, on this
   RTL site) alignment, so headings/links sat at the box's edge
   instead of centered in it — forced centered here, and the gap/
   padding trimmed down a bit per the "reduce the extra spacing"
   feedback. */
footer .footer-meta > div[class*="justify-between"] > div {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 1.25rem;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  text-align: center;
}

@media (min-width: 1024px) {
  footer .footer-meta > div[class*="justify-between"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: normal;
    align-items: start;
    gap: 1.25rem;
  }
}

footer .s-menu-footer-list,
footer .s-contacts-list {
  align-items: center;
}

/* The social-icons group is the only one of the 3 with no real
   heading in the markup, which is likely a big part of why it read
   as disconnected/"floating" — this adds a matching label purely
   decoratively (no real content is added/changed), styled exactly
   like the real h3 headings next to it. */
footer .contact-social {
  position: relative;
}

footer .contact-social::before {
  content: "تابعنا";
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #f5f1ea;
  margin-bottom: 1.25rem;
  text-align: center;
}

footer .s-social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ---- Footer link list ---- */
footer .s-menu-footer-item {
  position: relative;
  color: rgba(242, 238, 230, 0.72) !important;
  transition: color 0.25s ease, padding-inline-start 0.25s ease;
}

footer .s-menu-footer-item:hover {
  color: var(--rz-gold) !important;
  padding-inline-start: 6px;
}

/* ---- Contact + social icon badges ----
   Same mask-ring technique as the header/card frames, sized down
   into a small circular badge around each icon. */
footer .s-contacts-icon,
footer .s-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #f2eee6;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease, background 0.3s ease;
}

footer .s-contacts-icon svg,
footer .s-social-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* RZ-HOME-009: the social badges (salla-social) picked up an extra
   ring/background of their own from the theme's built-in styling
   for that component — layering under ours and reading as a messy
   double circle, unlike the contact badges (salla-contacts) which
   have no such theme defaults and looked clean. This resets the
   link and icon back to a flat base first, so only OUR mask-ring
   border below ends up visible — matching the contact icons
   exactly, as requested. */
footer .s-social-link a {
  display: inline-flex;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

footer .s-social-icon {
  border: none !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

footer .s-contacts-icon::before,
footer .s-social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--rz-red), var(--rz-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

footer .s-contacts-item:hover .s-contacts-icon,
footer .s-social-link a:hover .s-social-icon {
  color: var(--rz-gold);
  background: rgba(var(--rz-red-rgb), 0.12);
  box-shadow: 0 0 18px 2px rgba(var(--rz-red-rgb), 0.5);
  transform: scale(1.1);
}

footer .s-contacts-item:hover .s-contacts-icon::before,
footer .s-social-link a:hover .s-social-icon::before {
  opacity: 1;
}

footer .s-contacts-item .unicode {
  color: rgba(242, 238, 230, 0.72);
  transition: color 0.25s ease;
}

footer .s-contacts-item:hover .unicode {
  color: var(--rz-gold);
}

/* ---- Copyright line ---- */
footer .copyright-text a {
  color: var(--rz-gold);
  transition: color 0.25s ease;
}

footer .copyright-text a:hover {
  color: var(--rz-red);
}

/* ---- Payment method icons ----
   RZ-HOME-007: the user flagged this as the most important part
   to fix ("طرق الدفع اهم شي لا تنسى") — the previous near-black,
   barely-there badge (4% white background) gave almost no
   contrast against the footer's own dark background, so the
   brand logos (mada, Visa, STC Pay, Apple Pay...) — all designed
   for a light background — read as unclear/muddy. This is purely
   a decorative card/background around each existing payment logo
   image — the images themselves, their order, their href/click
   behavior, and the payments component are completely untouched,
   per the standing rule to never touch payment/order logic.

   RZ-HOME-009: follow-up — the first pass made them square and
   too large ("مربعة وكبيرة جداً"). Payment logos are naturally
   wider than tall, so forcing a square box either crops them or
   leaves dead padding — switched to a fixed HEIGHT with the width
   left to the logo's own aspect ratio (a real rectangle, not a
   square), and smaller overall. */
footer .s-payments-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

footer .s-payments-list-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  height: 34px;
  min-width: 48px;
  background: rgba(245, 243, 238, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  padding: 5px 9px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

footer .s-payments-list-item img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

footer .s-payments-list-item:hover {
  transform: translateY(-2px);
  border-color: var(--rz-gold);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}

/* ---- Copyright + payments bar ----
   RZ-HOME-009: was a `justify-between` row (copyright text on one
   edge, payment icons on the other) — per the user's request, this
   is now stacked and centered: payment icons on top, "جميع الحقوق
   محفوظة" underneath. column-reverse (not column) because the
   copyright text is the FIRST element in the real markup and the
   payments are second — reversing the visual order puts payments
   on top without touching the DOM/component order itself. */
footer div[class*="justify-between"][class*="py-4"] {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.9rem;
  text-align: center;
}

/* =========================================================
   RZ-HOME-006 — Wider product row (less dead space on desktop)
   -----------------------------------------------------------
   `.container` is a shared Tailwind utility used all over the
   site, so this override is scoped to ONLY the .container
   inside .main-links-style-3 sections — nothing else on the
   site is touched.

   This is a pure CSS max-width change, applied to the ancestor
   Swiper measures at INIT time — Swiper simply computes fresh,
   larger per-slide widths against whatever width it finds, so
   this carries none of the "overriding Swiper's own inline
   slide width after the fact" risk that was flagged earlier for
   directly resizing .main-links-style-3-slider-single. At wide
   desktop widths the 3-per-row cards were rendering small and
   centered inside a much wider section, leaving large empty
   margins on both sides — this lets the same 3 cards grow to
   fill more of that width instead.

   RZ-HOME-007: the first version of this fix used fixed values
   (1600px, jumping to 1800px above 1920px) — on the user's actual
   screen this overshot hard the other way, making the product
   images "أووووفففررر كبير" (way too big). Replaced with a single
   `clamp()` so the width scales continuously with the viewport
   instead of jumping at one fixed breakpoint, with a lower
   ceiling: never below 1024px (still meaningfully wider than the
   original narrow default that caused the empty-gutter complaint),
   never above 1360px (well under the old 1600-1800px that
   overcorrected into oversized cards), and 88% of the viewport
   width in between. */
.main-links-style-3 .container {
  max-width: clamp(1024px, 88vw, 1360px) !important;
}

/* =========================================================
   RZ-CATEGORY-001 — Category / product-listing page redesign
   -----------------------------------------------------------
   Sources: the real Inspect HTML dump of a category page
   (rzstore7.com/design-services/c1865626543) the user sent on
   2026-08-25/26, confirming: nav.breadcrumbs sits directly
   inside its own .container; .product-card wraps
   .product-card-content-media (image + the rating badge, whose
   own children are named .product-card-content-media-rating,
   -rating-icon and -rating-value) and
   .product-card-content-media-promotional-title (an absolute
   badge over the image); the two actions are
   .product-card-actions-add-to-cart and
   .product-card-actions-wishlist; the testimonials swiper
   renders each review inside .testimonials-slider .swiper-slide
   > div with the theme's own light `bg-[var(--bg-light)]` class,
   with heading .testimonials-heading-title and nav arrows
   .prev-nav-button / .next-nav-button. Every selector below is
   one of these confirmed classes — nothing here was guessed.

   Two exceptions, called out explicitly rather than guessed:
   (1) the rating classes are reused verbatim inside the
   testimonials cards (the theme itself force-resets them there
   with `!static !p-0 !pt-[2px]`), so every rating rule below is
   scoped under `.product-card-content-media` so it can never
   leak into testimonials; (2) the testimonial card's own inner
   text/avatar markup was not part of the dump, so its text/svg/
   avatar styling uses generic tag selectors (p, span, h3, h4,
   svg, img) scoped to the confirmed `.testimonials-slider
   .swiper-slide > div` container instead of invented component
   class names.
   ========================================================= */

/* ---- Top spacing: remove the dead gap between the fixed header
   and the grid on category-type pages ----
   RZ-CATEGORY-001c: real cause, confirmed from your Inspect dump —
   it was NEVER just .container's own padding. The real markup is:
     .container.\!pt-10           → 40px, we already override this
       nav.breadcrumbs.pt-16      → its OWN separate 64px, untouched
       div.py-4 (results count)   → 16px, left alone (see below)
       div.grid.py-3              → the actual product grid
   So the container fix from the last round DID apply (confirmed by
   specificity: our :has() selector out-ranks the theme's single
   !pt-10 class), but nav.breadcrumbs was independently adding its
   own 64px on top — nothing before had ever targeted it. That
   stacked 40+64=104px+ before the header-clearance math even started,
   which is the actual dead gap. Fixed by zeroing nav.breadcrumbs's
   own padding-top and letting the .container rule (the real measured
   header height, --rz-header-h, from RZ-HOME-010's JS) do the only
   job of clearing the fixed header. The results-count row
   (div.flex.py-4, currently rendering an empty <p> in the static
   dump) is left untouched — its <p> is very likely populated by JS
   after hydration (matches the "١١ منتج" count visible in your
   screenshot), so its own padding isn't excess, it's real content
   spacing. */
.container:has(nav.breadcrumbs) {
  padding-top: calc(var(--rz-header-h, 76px) + 14px) !important;
}

.container:has(nav.breadcrumbs) nav.breadcrumbs {
  padding-top: 0 !important;
}

/* RZ-CATEGORY-001d: you flagged the grid's own `py-3` (12px
   top+bottom) as still-unremoved — real class confirmed:
   div.grid.grid-cols-2.md:grid-cols-3.lg:grid-cols-7.gap-4.py-3,
   the direct child of the same breadcrumbs .container. Scoped to
   only that grid (not every .grid on the site) so it can't affect
   anything else. Only the top half is removed — the bottom padding
   is left alone, that's normal breathing room before whatever comes
   after the grid (pagination/footer), not part of the header-gap
   complaint. */
.container:has(nav.breadcrumbs) > div.grid {
  padding-top: 0 !important;
}

/* ---- Product card: frame + hover lift ----
   Was a bare, borderless block ("شكلها بدائي جداً جداً") — gets
   the same glass-panel + gradient mask-ring treatment already
   used on the header and the footer badges, so it reads as part
   of the same design instead of a new one-off style. */
.product-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.4;
  background: linear-gradient(
    135deg,
    rgba(var(--rz-red-rgb), 0.55),
    rgba(var(--rz-gold-rgb), 0.35) 55%,
    transparent 85%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 260ms ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--rz-red-rgb), 0.12);
}

.product-card:hover::before {
  opacity: 0.85;
}

/* ---- Rating: removed entirely ----
   RZ-CATEGORY-001b: user asked to drop it completely rather than
   reposition it further ("مو مرتب، يُفضل ازالته نهائي"). Kept
   scoped under .product-card-content-media so the testimonials
   swiper (which reuses the identical class names) is never
   touched — this hides the rating badge on product cards only. */
.product-card-content-media {
  display: flex;
  flex-direction: column;
}

.product-card-content-media .product-card-content-media-rating {
  display: none !important;
}

/* ---- Promotional / badge title ----
   RZ-CATEGORY-001b: the RZ-CATEGORY-001 red-ribbon restyle did not
   visibly take effect (still showing the theme's default yellow
   pill in the follow-up screenshots) — the theme's own utility
   classes on this element are winning the specificity tie.
   RZ-CATEGORY-001c: confirmed — remove it entirely ("نشيلها نهائي
   نعم، لانها فوق الصورة ومغطية على الصورة والتصميم"), same
   treatment as the rating. Requalified under .product-card so this
   still wins the specificity tie even as a hide rule. */
.product-card .product-card-content-media-promotional-title {
  display: none !important;
}

/* ---- Price: gold instead of the default white ----
   RZ-CATEGORY-001c: confirmed real class from your Inspect dump —
   .product-card-content-meta-pricing-current-not-discounted. Only
   this variant is confirmed; if any products show a discounted
   price (a "was/now" pair), that variant likely has a sibling class
   with a different suffix — send its Inspect too and it'll get the
   same treatment. */
.product-card .product-card-content-meta-pricing-current-not-discounted {
  color: var(--rz-gold) !important;
  font-weight: 700 !important;
}

/* ---- Add to cart: full-width bar flush with the card's bottom
   edge ----
   RZ-CATEGORY-001b: user asked for "مستطيل بالاسفل على كامل
   البطاقة" (rectangular, full card width, at the bottom) instead
   of a padded pill button. Visual restyle only —
   .product-card-actions-add-to-cart's own
   onclick="app.quickAddToCart(...)" handler is untouched.
   Note: this assumes the button is a direct (or near-direct) child
   of .product-card with no side-padding wrapper in between, per the
   component's flat naming convention — if your real markup wraps it
   in a padded container, it may not sit perfectly flush; send an
   Inspect of the button's immediate parent and this can be tightened. */
.product-card-actions-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  border: none !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, var(--rz-red), #a80410) !important;
  color: #fff !important;
  box-shadow: 0 -4px 14px -8px rgba(0, 0, 0, 0.4);
  transition: filter 200ms ease;
}

.product-card-actions-add-to-cart:hover {
  filter: brightness(1.08);
}

/* ---- Wishlist: circular icon badge, same language as the
   footer's contact/social icons ----
   Visual restyle only — .product-card-actions-wishlist's own
   onclick="app.toggleWishlist(...)" handler is untouched. */
.product-card-actions-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f2ead2 !important;
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease;
}

.product-card-actions-wishlist:hover {
  transform: translateY(-2px);
  border-color: var(--rz-gold) !important;
  color: var(--rz-gold) !important;
}

/* =========================================================
   Testimonials — dark-theme card, matching the rest of the site
   ========================================================= */

.testimonials-heading-title {
  border-color: rgba(var(--rz-gold-rgb), 0.35) !important;
}

/* RZ-CATEGORY-001b: "عرض الكل" — confirmed real markup:
   <a class="enhanced-products-slider-heading-action
   hover:!text-[rgba(0,0,0,0)]">. That Tailwind hover class makes
   the text turn fully transparent on hover (looks broken — "جاي من
   متجر ثاني") and the base state carries none of the site's own
   styling. Both the base and hover states are overridden here with
   matching or higher specificity so the transparent-on-hover bug
   can't win, and it's restyled as a small gold pill link matching
   the rest of the site instead of a bare, unstyled link. */
.enhanced-products-slider-heading-action {
  display: inline-flex !important;
  align-items: center;
  padding: 5px 14px !important;
  border: 1px solid rgba(var(--rz-gold-rgb), 0.35) !important;
  border-radius: 999px !important;
  color: var(--rz-gold) !important;
  font-size: 13px !important;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.enhanced-products-slider-heading-action:hover {
  color: var(--rz-ink) !important;
  background-color: var(--rz-gold) !important;
  border-color: var(--rz-gold) !important;
}

/* RZ-CATEGORY-001c: the underline under "عرض الكل" you flagged (but
   couldn't get the Inspect for) is this element's own ::before —
   caught it live in your DevTools screenshot: an absolutely
   positioned 1px gradient line pinned to the bottom of the link
   (background-image: linear-gradient(...), bottom: -4px, height:
   1px, width: 100%). Killed outright. */
.enhanced-products-slider-heading-action::before {
  display: none !important;
  content: none !important;
}

.prev-nav-button,
.next-nav-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f2ead2 !important;
  transition: transform 200ms ease, border-color 200ms ease;
}

.prev-nav-button:hover,
.next-nav-button:hover {
  border-color: var(--rz-gold) !important;
  transform: translateY(-2px);
}

/* The theme renders each review in a light bg-[var(--bg-light)]
   card — on this dark site that reads as a broken, disconnected
   block ("سيئة جداً"). Swapped for the same dark glass-panel +
   gradient-ring frame used on the product cards above. Text/svg/
   avatar color is set via generic tags scoped to this confirmed
   container (see the section header comment for why).

   RZ-CATEGORY-001d: real inner markup confirmed. The "empty box"
   look on a review with no written comment isn't a layout-order
   problem — the comment <p> genuinely exists but its real content
   is just whitespace ("  "), so it's not detectable with CSS
   :empty (which requires zero child nodes, not just no visible
   text) and there's no reliable cross-browser way to target
   "whitespace-only" from pure CSS. The actual reason it reads as a
   big blank void: the card carries the theme's own `!h-full`, and
   Swiper's default slide behavior stretches every slide to match
   the tallest one in the row — so a short/empty review gets
   stretched to match its longer neighbors, turning a small gap
   into a large one. Fixed at the real source: told the Swiper
   wrapper not to stretch slides, and let each card size to its own
   content instead. */
.testimonials-slider .swiper-wrapper {
  align-items: flex-start !important;
}

.testimonials-slider .swiper-slide > div {
  position: relative;
  isolation: isolate;
  height: auto !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  border-radius: 16px;
  padding: 22px !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.testimonials-slider .swiper-slide > div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.4;
  background: linear-gradient(
    135deg,
    rgba(var(--rz-red-rgb), 0.5),
    rgba(var(--rz-gold-rgb), 0.3) 55%,
    transparent 85%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.testimonials-slider .swiper-slide > div,
.testimonials-slider .swiper-slide > div p,
.testimonials-slider .swiper-slide > div span,
.testimonials-slider .swiper-slide > div h3,
.testimonials-slider .swiper-slide > div h4 {
  color: #ece6d8 !important;
}

.testimonials-slider .swiper-slide > div svg {
  color: var(--rz-gold);
  fill: currentColor;
}

/* RZ-CATEGORY-001d: real markup confirmed —
   .meta.flex.flex-row.justify-between holds .user-informations
   (avatar/name/date) on one side and .rating (wrapping the same
   .product-card-content-media-rating classes reused from the
   product card, forced !static by the theme) on the other. That
   header-row layout itself is fine; only sized the star icon/value
   up a bit — the theme's own inline svg width/height was 22px, so
   the previous 16px override here was actually shrinking it below
   the theme default instead of enlarging it. Fixed to genuinely be
   bigger than stock now. */
.testimonials-slider .swiper-slide > div .product-card-content-media-rating {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.testimonials-slider .swiper-slide > div .product-card-content-media-rating-icon {
  width: 24px;
  height: 24px;
  color: var(--rz-gold);
}

.testimonials-slider .swiper-slide > div .product-card-content-media-rating-value {
  font-weight: 700;
  color: #f2ead2;
}

.testimonials-slider .swiper-slide > div img {
  border-radius: 50%;
  border: 1.5px solid rgba(var(--rz-gold-rgb), 0.4);
}

/* =========================================================
   RZ-PRODUCT-001 — صفحة المنتج المفرد ("صفحة الإغراء")
   ------------------------------------------------------------
   جولة أولى (مبدئية) بناءً على انسبكت rzstore7.com/kick-package
   الحقيقي + قائمة الملاحظات. بعض الكلاسات هنا مؤكدة ١٠٠٪ من
   الانسبكت (محددة بالتعليق)، وبعضها "أفضل تخمين" مبني على نفس
   نمط تسمية Salla المستخدم بالكلاسات المؤكدة سابقاً (زي
   product-card-content-meta-pricing-current-not-discounted) —
   لو كلاس مو مطابق بالضبط، القاعدة ببساطة ما تطبّق ولا تكسر شي
   (فشل آمن)، وأي جزء بهالحالة معلّم بوضوح تحت. لو شي ما تغير
   بالمعاينة، ارسللي انسبكته الحقيقي وأثبته بدقة.
   ========================================================= */

/* ---- ١) الصور "ثابتة/متجمدة" ----
   مؤكد من الانسبكت: .product-details-media عندها lg:sticky top-0
   من الثيم. هذا يخليها تلتصق بالشاشة وهي تتحرك بغرابة (تتزاحم مع
   الهيدر الثابت، أو توقف حركتها في مكان غير متوقع) — وهذا الشي
   اللي وصفته إنه "ثابت ما يتحرك". الحل الأسهل والأضمن: نلغي
   السلوك اللاصق نهائياً وتصير الصور تتحرك طبيعي مع باقي المحتوى
   أثناء السكرول، زي أي عمود عادي. */
.product-details-media {
  position: static !important;
  top: auto !important;
}

/* ---- ٢) لمسة "الإطار الزجاجي" على عمود الصور ----
   نفس لغة التصميم المستخدمة بالهيدر/الفوتر/بطاقات المنتج —
   عشان صفحة المنتج تحس إنها جزء من نفس الهوية، مو تصميم منفصل. */
.product-details-media {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.55);
}

.product-details-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.4;
  background: linear-gradient(
    135deg,
    rgba(var(--rz-red-rgb), 0.5),
    rgba(var(--rz-gold-rgb), 0.3) 55%,
    transparent 85%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---- ٣) خانات الفورم (خيارات المنتج) غير واضحة ----
   مقصورة على salla-product-options فقط (العنصر المخصص لخيارات
   المنتج بصفحة التفاصيل) — ما تلمس أي فورم ثاني بالموقع، وبالتحديد
   ما تلمس مودال البحث نهائياً (قاعدة ثابتة). تشمل كل حقول
   الإدخال/الاختيار سواء كانت بكلاس Salla الرسمي s-form-control أو
   عناصر HTML الخام (input/select/textarea) كشبكة أمان. */
salla-product-options .s-form-control,
salla-product-options input:not([type="radio"]):not([type="checkbox"]),
salla-product-options select,
salla-product-options textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  color: #f2ead2 !important;
  padding: 10px 14px !important;
  transition: border-color 200ms ease, background-color 200ms ease;
}

salla-product-options .s-form-control::placeholder,
salla-product-options input::placeholder,
salla-product-options textarea::placeholder {
  color: rgba(242, 234, 210, 0.45) !important;
}

salla-product-options .s-form-control:focus,
salla-product-options input:focus,
salla-product-options select:focus,
salla-product-options textarea:focus {
  border-color: rgba(var(--rz-gold-rgb), 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--rz-gold-rgb), 0.12) !important;
}

salla-product-options label,
salla-product-options .s-form-label {
  color: #ece6d8 !important;
  font-weight: 600 !important;
}

/* ---- ٤) الزحمة فوق عنوان المنتج ----
   ⚠️ تخمين مبني على نمط التسمية (best-effort) — ما عندي انسبكت
   مؤكد لهالمنطقة بالذات. بدل ما "أشيل" عناصر ما أعرف هويتها بالظبط
   (خطر يضيع معلومة مهمة)، سويت تدرّج بصري: العنوان يصير هو الأبرز
   (أكبر + أبيض واضح)، وأي نص ثانوي حواليه (سعر متكرر/SKU/توفر...)
   يصغر ويخف لونه بدل ما يزاحم العنوان. لو النتيجة مو زي المتوقع،
   ابعثلي انسبكت المنطقة كاملة وأثبتها بدقة الجولة الجاية. */
.product-details-meta-title {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 800 !important;
  color: #f6f1e2 !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}

.product-details-meta-sku,
.product-details-meta-brand,
.product-details-meta-availability,
.product-details-meta-vendor {
  font-size: 12px !important;
  color: rgba(236, 230, 216, 0.55) !important;
  font-weight: 400 !important;
}

.product-details-meta-pricing,
.product-details-meta-price {
  color: var(--rz-gold) !important;
  font-weight: 700 !important;
}

/* ---- ٥) تمارا (Tamara) — قيد تقني حقيقي، مو تقصير ----
   ودّي أوضح هالنقطة بصراحة: ودجت تمارا (جوّا salla-installment)
   يترندر داخل Shadow DOM حقيقي (<template shadowrootmode="open">).
   هذا يعني إن الـCustom CSS بتاعنا (اللي يشتغل على الصفحة العادية)
   ما يقدر يوصّل جوّا هالحاجز نهائياً — مو إني ما حاولت، هذا قيد
   تقني من المتصفح نفسه. أقدر أتحكم بالمساحة/الهامش حوالين الودجت
   من برّا بس، مو بألوانها الداخلية أو حالة الـhover. لو الإضاءة
   الغريبة عند الـhover مزعجة فعلاً، الحل الوحيد يكون من إعدادات
   تمارا نفسها بلوحة تحكم سلة (لو فيه خيار مظهر/ثيم هناك)، مو من
   عندنا. حطيت بس مسافة نظيفة حوالين الودجت تحسباً: */
salla-installment {
  display: block;
  margin: 14px 0;
}

/* ---- ٦) التقييمات/التعليقات — RZ-PRODUCT-011: شيل نهائي ----
   طلبتِ نشيل ودجت التقييمات الرسمية من سلة (salla-comments) من
   صفحة المنتج بالكامل من جذورها — العنصر مؤكد من انسبكتك الحقيقي:
   <salla-comments item-id="..." type="product" class="hydrated">.
   خفيته بالكامل. القواعد اللي تحت (التنسيق الغامق/الذهبي) كانت
   تجميل لهذا الودجت من جولات سابقة — صارت بلا أثر الآن بما إنه
   مخفي بالكامل، تركتها بالكود كسجل تاريخي بس بلا ضرر. */
salla-comments[type="product"] {
  display: none !important;
}

.s-comments-header,
.s-reviews-summary-wrapper,
.s-comments-list {
  color: #ece6d8 !important;
}

.s-reviews-summary-wrapper {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  padding: 22px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.s-reviews-summary-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.4;
  background: linear-gradient(
    135deg,
    rgba(var(--rz-red-rgb), 0.5),
    rgba(var(--rz-gold-rgb), 0.3) 55%,
    transparent 85%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.s-progress-bar-wrapper .s-progress-bar {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

.s-progress-bar-wrapper .s-progress-bar-fill,
.s-progress-bar-fill {
  background: linear-gradient(90deg, var(--rz-gold), #f2d879) !important;
}

.s-comments-list .s-comment-item,
salla-comment-item {
  position: relative;
  isolation: isolate;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
  border: none !important;
  overflow: hidden;
}

.s-comments-list .s-comment-item *,
salla-comment-item * {
  color: #ece6d8 !important;
}

.s-comments-list .s-comment-item svg,
salla-comment-item svg {
  color: var(--rz-gold) !important;
  fill: currentColor;
}

/* ---- ٧) "العملاء اشترو أيضاً" — إخفاء كامل ----
   الكلاس المؤكد من الانسبكت: s-block--bundle-customers-also-bought.
   ضفت سلكتور احتياطي بنفس الجزء من الاسم كشبكة أمان بس بدون
   خطورة (لو ما طابق شي، ببساطة ما يأثر على أي شي ثاني). */
.s-block--bundle-customers-also-bought,
[class*="bundle-customers-also-bought"] {
  display: none !important;
}

/* ---- ٨) "منتجات قد تعجبك" — نفس مكوّن product-card المستخدم
   بالكاتقوري، فهي أصلاً وارثة كل تنسيقات RZ-CATEGORY-001/b/c/d
   (الإطار الزجاجي، إخفاء التقييم والشارة الترويجية، السعر
   الذهبي، زر الإضافة الكامل العرض) تلقائياً بدون أي كود إضافي.
   الإضافة هنا بس مسافة فاصلة نظيفة قبل القسم. */
salla-related-products,
.s-block--product-related {
  margin-top: 28px;
}

/* =========================================================
   RZ-PRODUCT-002 — صفحة المنتج، جولة ثانية (مبنية على انسبكت حقيقي)
   ------------------------------------------------------------
   كل الكلاسات هنا مؤكدة ١٠٠٪ من الانسبكت الحقيقي اللي رسلته هالمرة
   (زر الواتساب، وصف المنتج، الفورم بكل أقسامه). لا تخمين هالجولة.
   ========================================================= */

/* ---- ١) زر "للأسئلة والاستفسارات" — إزالة كاملة ----
   مؤكد: .whatsapp-contact-block. عندك زر واتساب عام بكل الواجهات
   فهذا مكرر — يتشال نهائي، مو بس بصفحة المنتج، بأي مكان يظهر فيه. */
.whatsapp-contact-block {
  display: none !important;
}

/* ---- ٢) وصف المنتج — إعادة تنسيق كاملة ----
   السبب الحقيقي وراء "الخط كبير وسيء": هذا ناتج محرر نصوص Quill
   الخام بدون أي تنسيق من الثيم — عناوين h2 وقوائم ul تاخذ المقاسات
   الافتراضية الضخمة للمتصفح، وكل سطر له لون عشوائي مثبت inline
   (style="color: rgb(...)") من المحرر نفسه. وحّدت كل هذا بنفس هوية
   الموقع: عناوين ذهبية بحجم معقول، نص أساسي بحجم القراءة الطبيعي
   (15px، نفس حجم النصوص الثانية بالموقع)، وألوان موحدة بدل الألوان
   العشوائية. الألوان inline لها أولوية عالية جداً، فاستخدمت
   !important بكل سطر (نفس أسلوبنا المعتاد) عشان تتغلب عليها. */
.product__description {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #d8d2c2 !important;
}

.product__description h2 {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--rz-gold) !important;
  margin: 22px 0 10px !important;
}

.product__description h2:first-child {
  margin-top: 4px !important;
}

.product__description h2 span,
.product__description h2 strong {
  color: inherit !important;
}

.product__description p,
.product__description li {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #d8d2c2 !important;
}

.product__description p span,
.product__description li span {
  color: inherit !important;
}

.product__description strong {
  color: #f2ead2 !important;
  font-weight: 700 !important;
}

.product__description ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px !important;
  padding-inline-start: 22px !important;
}

.product__description a {
  color: var(--rz-gold) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- ٣) الوصف مقصوص افتراضياً + زر "اظهار المزيد" ----
   الجافاسكربت (RZ-PRODUCT-002) يضيف كلاس rz-desc-collapsed ويحقن
   الزر تلقائياً — بس على الأوصاف الطويلة فعلاً (يقيس الطول الحقيقي
   أولاً، فوصف قصير ما يتلمس ولا ياخذ زر). لما توسّع الوصف، الصندوق
   حق الشراء تحته ينزل تلقائياً معه — هذا سلوك تخطيط عادي (block
   flow)، ما يحتاج كود إضافي. */
.product__description.rz-desc-collapsed {
  max-height: 220px;
  overflow: hidden;
  position: relative;
}

.product__description.rz-desc-collapsed::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 64px;
  background: linear-gradient(to top, var(--rz-ink, #07080b), transparent);
  pointer-events: none;
}

.rz-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 16px !important;
  border: 1px solid rgba(var(--rz-gold-rgb), 0.4) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--rz-gold) !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.rz-desc-toggle:hover {
  background: var(--rz-gold) !important;
  color: var(--rz-ink) !important;
}

/* ---- ٤) صندوق الشراء الموحّد ----
   طلبت الخيارات + المرفقات + زر أضف للسلة + اشترِ الآن + آبل باي
   كلهم "بلوك واحد" — هذي العناصر كلها فعلياً أبناء مباشرين لنفس
   <form class="product-form"> بنفس الترتيب اللي طلبته بالضبط، فبدل
   ما أنقل عناصر بالـDOM (خطر ومعقد بدون بناء فعلي)، حولت الـform
   نفسه للصندوق الزجاجي — كل أبناءه يصيرون تلقائياً "جوه" الصندوق
   بترتيبهم الطبيعي، بدون أي حركة دي أوم. */
form.product-form {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
  padding: 20px !important;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

form.product-form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.4;
  background: linear-gradient(
    135deg,
    rgba(var(--rz-red-rgb), 0.5),
    rgba(var(--rz-gold-rgb), 0.3) 55%,
    transparent 85%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

form.product-form .s-product-options-splitter {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 4px 0 !important;
}

/* المرفقات/الملاحظة — نفس مربع الخيارات */
form.product-form section.bg-transparent {
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

form.product-form .btn-tab.btn--collapse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  border: 1px solid rgba(var(--rz-gold-rgb), 0.35) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--rz-gold) !important;
  font-size: 13px !important;
  transition: background-color 200ms ease, color 200ms ease;
}

form.product-form .btn-tab.btn--collapse:hover {
  background: var(--rz-gold) !important;
  color: var(--rz-ink) !important;
}

form.product-form section.bg-transparent textarea.form-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  color: #f2ead2 !important;
}

/* صف السعر — RZ-PRODUCT-009: هذا هو نفسه العنصر اللي كنت تشوفه
   عائم فوق آبل باي. هذا سلكتور قديم وصحيح (موجود من RZ-PRODUCT-002)
   — الجولة الماضية حاولت أخفي عنصر سعر ثاني بسلكتور غلط
   (`.s-add-product-button-main > div...`) افترضت إنه نفس هذا
   العنصر، لكنه ما كان. هذا هو السطر الصحيح المؤكد الآن من
   انسبكتك — نخفيه بالكامل زي ما طلبت. */
form.product-form section.flex.py-2 {
  display: none !important;
}

/* صف الأزرار (RZ-PRODUCT-004 — تصحيح فوري):
   السلكتور اللي استخدمته الجولة الماضية (`:not(form.product-form
   section.sticky-product-bar)`) كان معقد أكثر من اللازم وسبب نتيجة
   عكسية — أخفى الأزرار كلها بدل ما يبقي نسخة وحدة بس. استبدلته
   بطريقة أبسط وأضمن مئة بالمئة: بدل ما أحدد "مين المكررة" بمنطق
   معقد، أستهدف مباشرة أي `.sticky-product-bar` هي "أخت" (sibling)
   للفورم نفسه بعد إغلاقه — وهذا بالضبط النسخة المكررة المؤكدة من
   الانسبكت (تجي مباشرة بعد `</form>`، بره الفورم تماماً). النسخة
   اللي جوّا الفورم ما تنطبق عليها هالقاعدة إطلاقاً لأنها مو "أخت"
   للفورم، هي بنت جواه — علاقة مختلفة تماماً، ما فيه أي تداخل ممكن
   بين الاثنين بهالطريقة. */
form.product-form + section.sticky-product-bar,
form.product-form ~ section.sticky-product-bar {
  display: none !important;
}

/* النسخة اللي جوّا الفورم: نفرض ظهورها صراحة (display:block) بدل
   ما نعتمد على الافتراضي بس، احتياط إضافي، بعدين نلغي أي التصاق
   ونخليها جزء طبيعي من صندوق الشراء.

   RZ-PRODUCT-005 — السبب الحقيقي الأخير (من الـComputed styles اللي
   رسلتها لي): سلة يستخدم كلاس `is-sticky-product-bar` (يضاف/يتشال
   بالجافاسكربت حسب موضع السكرول) يتحكم بمتغير Tailwind الداخلي
   `--tw-translate-y` + `opacity` + `transform` على القسم نفسه وعلى
   `salla-add-product-button` و`.sticky-product-bar__quantity` جواه.
   لما الكلاس مو موجود (الحالة الافتراضية)، القسم يكون مُزاح بعيد
   (transform: translateY بقيمة كبيرة) ومختفي (opacity قريب من 0) —
   هذا بالضبط سبب "اختفاء الأزرار تماماً" اللي شفته: صحح موضعها
   (position) بس الـtransform المخفي بقي شغال لأني ما لمسته الجولة
   الماضية. الحل: إلغاء الـtransform نهائياً وتثبيت opacity=1 بشكل
   دائم على القسم وعلى كل عنصر جواه يتحكم فيه سلة بنفس الطريقة —
   بقوة !important عشان يتغلب على قاعدة سلة بغض النظر عن وجود كلاس
   `is-sticky-product-bar` من عدمه. */
form.product-form section.sticky-product-bar,
form.product-form section.sticky-product-bar salla-add-product-button,
form.product-form section.sticky-product-bar .sticky-product-bar__quantity {
  --tw-translate-y: 0px !important;
  --tw-translate-x: 0px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

form.product-form section.sticky-product-bar {
  display: block !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

form.product-form section.sticky-product-bar .s-add-product-button-main {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

/* RZ-PRODUCT-008: "برا الثيم نهائي حرفياً" — الزر كان مستطيل أحمر
   مسطح بدون أي من لمسات الثيم (الحدود الذهبية الرفيعة، التوهج
   الأحمر الناعم) اللي مستخدمة بكل مكان تاني بالموقع (الهيدر،
   الفوتر، البطاقات). ضفت نفس اللغة البصرية هنا: حد ذهبي رفيع شفاف
   + توهج أحمر ناعم تحته + هايلايت داخلي خفيف فوق — بدل ما يكون
   مجرد مستطيل أحمر عادي. */
form.product-form .s-button-element.s-button-primary {
  border-radius: 12px !important;
  border: 1px solid rgba(var(--rz-gold-rgb), 0.35) !important;
  background: linear-gradient(135deg, var(--rz-red), #a80410) !important;
  padding: 0 14px !important;
  font-weight: 700 !important;
  width: 100%;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 10px 24px -12px rgba(var(--rz-red-rgb), 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: filter 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

form.product-form .s-button-element.s-button-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 14px 30px -12px rgba(var(--rz-red-rgb), 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

/* "اشترِ الآن" (salla-mini-checkout-widget): شكل الزر نفسه (الحدود
   والخلفية والشكل/الزوايا) داخل Shadow DOM حقيقي زي تمارا بالضبط —
   ما نقدر نلمسه. لكن الأيقونة والنص ("اشترِ الآن") يوصلوا كـslot من
   الـlight DOM العادي، فهذا الجزء بالذات قدرت أنسّقه.

   RZ-PRODUCT-013 — تراجعت عن كل تعديلات RZ-PRODUCT-012 على هالقاعدة
   (الحشوة، الحد الأدنى للارتفاع، تكبير وزن الخط، تكبير الأيقونة)
   بناءً على طلبك الصريح: "المقاس فقط، مو الشكل". رجّعتها لنفس شكلها
   الأصلي — بلا أي تغيير بصري. حل حجم الزر الآن صار بطريقة تانية
   بالكامل على مستوى الحاوية (شوفي salla-mini-checkout-widget تحت)،
   بدون ما ألمس شكل المحتوى هنا إطلاقاً. */
form.product-form .s-add-product-button-mini-checkout-content {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: var(--rz-gold) !important;
  font-weight: 600 !important;
}

/* آبل باي: زر Apple الرسمي داخل Shadow DOM كامل ومحكوم بقواعد Apple
   نفسها (ما ينفع ولا يصح نغيّر لونه/شكله) — بس مسافة حوله فقط. */
form.product-form salla-quick-buy {
  display: block;
  margin-top: 4px;
}

/* ---- تمارا: تصحيح — لون النص فعلاً قابل للتحكم ----
   تصحيح لمعلومة قلتها لك الجولة الماضية بشكل عام جداً: قلت إن
   Shadow DOM "يمنع الـCSS نهائياً" — هذا صحيح بس للخصائص الغير
   موروثة (زي الخلفية والحدود). لكن `color` خاصية *موروثة*، وودجت
   تمارا هنا ما يفرض لون خاص فيه (كلاسات الوضع الغامق/الفاتح
   الداخلية `tamara-summary-widget__dark/__light` مو مفعّلة على
   هالنسخة) — يعني لون النص فعلياً يورّث من عنصرنا الخارجي
   <tamara-widget> ويعبر حاجز الـShadow DOM بشكل طبيعي. هذا فرق
   حقيقي عن قيد آبل باي والحدود/الخلفية اللي فعلاً ما نقدر نلمسها.
   الحل: النص أبيض بالوضع العادي (كان أسود/رمادي وغير واضح على
   خلفية الموقع الغامقة)، ولما تحط الماوس يرجع لنفس اللون الغامق
   الأصلي اللي كان واضح على الخلفية الفاتحة اللي تطلع عند الـhover
   (نفس الشكل اللي قلت إنه "مضبوط" بالضبط). */
tamara-widget {
  color: #ffffff !important;
}

tamara-widget:hover {
  color: #16181d !important;
}

/* =========================================================
   RZ-PRODUCT-006 — إخفاء عنوان المنتج نهائياً + ترتيب أزرار
   صندوق الدفع اللاصق بالضبط زي ما طلبت
   ========================================================= */

/* العنصر مؤكد ١٠٠٪ من الانسبكت الحقيقي اللي رسلته:
   <h4 class="sticky-product-bar__name hidden max-w-1/2 pb-2">
     بكج تويتش | Twitch Package
   </h4>
   سلة حاطط عليه كلاس hidden (Tailwind display:none) من الأساس، لكن
   واضح إنه يبان أحياناً (زي ما وضّحت الصور). نفرض الإخفاء بقوة
   !important عشان يضل مختفي نهائياً ودائماً، بدون أي شرط. */
form.product-form section.sticky-product-bar .sticky-product-bar__name {
  display: none !important;
}

/* ==== RZ-PRODUCT-007 — تصحيح: الانسبكت الحقيقي اللي رسلته كشف إن
   ترتيبي السابق كان مبني على افتراض غلط بالتعشيش (nesting). الهيكل
   الحقيقي المؤكد الآن:

   section.sticky-product-bar
   ├── h4.sticky-product-bar__name           (مخفي، RZ-PRODUCT-006)
   ├── div.sticky-product-bar__pricing        (السعر)
   ├── input[hidden] (الكمية)
   └── salla-add-product-button               (مو Shadow DOM بمستواه هو)
        ├── div.s-add-product-button-main
        │    ├── salla-button (أضف إلى السلة)
        │    └── salla-mini-checkout-widget (اشترِ الآن)
        └── salla-quick-buy (آبل باي)

   يعني "آبل باي" مو جوّا .s-add-product-button-main زي ما كنت
   مفترض — هو أخوها، الاثنين جوّا salla-add-product-button مباشرة.
   هذا سبب فشل السلكتور السابق (`.s-add-product-button-main
   salla-quick-buy`) — ما كان يطابق أي عنصر فعلياً.

   الحل: نستخدم order على ٣ مستويات متداخلة عشان نوصل لكل عنصر
   بمكانه الحقيقي بالـDOM: */

/* المستوى ١ — داخل section.sticky-product-bar نفسه: السعر يطلع أول
   عنصر ظاهر (فوق كل شي)، وصندوق salla-add-product-button (اللي فيه
   آبل باي + صف الأزرار) يجي بعده. */
form.product-form section.sticky-product-bar {
  display: flex !important;
  flex-direction: column !important;
}

form.product-form section.sticky-product-bar .sticky-product-bar__pricing {
  order: 1;
  margin-bottom: 10px;
}

/* ==== قرار: شيل السعر من صندوق الدفع نهائياً ====
   السعر أصلاً موجود وواضح بمكانه الطبيعي فوق بمعلومات المنتج. لو
   حبيتي ترجعينه قوليلي بثانية وأرجعه.

   تصحيح (RZ-PRODUCT-009): الجولة الماضية خمّنت إن فيه "نسخة سعر
   ثانية" داخل .s-add-product-button-main وحطيت لها سلكتور
   (`.s-add-product-button-main > div.flex...`) — طلع التخمين غلط:
   العنصر الحقيقي اللي كان يبين هو `section.flex.py-2` (سطر السعر
   الأصلي، موجود ومستهدف من زمان بالكود، شوفي فوق) — سلكتوري الجديد
   ما كان يطابق شي أصلاً. خليت هالسطر هنا كـ safety net بلا ضرر
   (ما يطابق شي حالياً)، والحل الحقيقي فوق على section.flex.py-2. */
form.product-form section.sticky-product-bar .sticky-product-bar__pricing,
form.product-form section.sticky-product-bar .s-add-product-button-main > div.flex.whitespace-nowrap.gap-4.items-center {
  display: none !important;
}

form.product-form section.sticky-product-bar salla-add-product-button {
  order: 2;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

/* المستوى ٢ — داخل salla-add-product-button: آبل باي (salla-quick-buy)
   يطلع صف كامل العرض فوق، وصندوق الأزرار الثنائي (.s-add-product-
   button-main) يجي تحته. */
form.product-form section.sticky-product-bar salla-add-product-button > salla-quick-buy {
  order: 1;
  width: 100%;
  margin-top: 0 !important;
}

form.product-form section.sticky-product-bar salla-add-product-button > .s-add-product-button-main {
  order: 2;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
}

/* المستوى ٣ — داخل .s-add-product-button-main: أضف إلى السلة
   (salla-button) يمين، اشترِ الآن (salla-mini-checkout-widget) يسار،
   نفس الحجم بالضبط لكل واحد (النص RTL، فالـorder الأقل يبدأ من
   اليمين). */
form.product-form section.sticky-product-bar .s-add-product-button-main salla-button {
  order: 2;
  flex: 1 1 calc(50% - 5px) !important;
  width: calc(50% - 5px) !important;
  max-width: calc(50% - 5px) !important;
  min-width: 0;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

form.product-form section.sticky-product-bar .s-add-product-button-main salla-mini-checkout-widget {
  order: 3;
  flex: 1 1 calc(50% - 5px) !important;
  width: calc(50% - 5px) !important;
  max-width: calc(50% - 5px) !important;
  min-width: 0;
  height: 52px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

/* ملاحظة صراحة: ترتيب يمين/يسار مبني على سلوك flexbox القياسي مع
   RTL. لو بعد النشر طلع معكوس، قولي وأبدل رقمين بس (order: 2 ↔ 3)
   على salla-button و salla-mini-checkout-widget.

   RZ-PRODUCT-008 — سبب اختلاف حجم الزرين اللي لاحظتيه: خاصية
   `flex` هذي ما كانت معها `!important`، وسلة أحياناً يفرض flex-basis
   خاص بقوة !important على عناصره — فكان يتغلب علينا بصمت. ضفت
   !important + width/max-width صريحة عشان نضمن نص العرض بالضبط
   لكل زر، بغض النظر عن أي قاعدة داخلية من سلة.

   RZ-PRODUCT-009 — العرض تساوى بس الطول (height) لسه مختلف: زر
   "اشترِ الآن" (Shadow DOM) طوله يتحدد داخلياً بمحتواه هو، مو بموروث
   من المضيف تلقائياً. ثبّت الطولين على ٥٢px بالضبط + توسيط المحتوى
   بالفليكس على المضيفين الاثنين، عشان يطلعوا متطابقين تمام عرض
   وطول. */

/* =========================================================
   RZ-PRODUCT-010 — مسافة بين تمارا وآبل باي + محاولة جدية لتقريب
   حجم "اشترِ الآن" الداخلي أكثر
   ========================================================= */

/* ١) المسافة بين تمارا وصندوق الشراء اختفت لما شلنا "صف السعر"
   (section.flex.py-2) بالجولة الماضية — كان هو اللي يعطي فاصل
   بصري (border-top + padding) بين تمارا والأزرار. رجّعت المسافة
   بشكل مباشر بدل الاعتماد عليه: */
salla-installment {
  margin: 14px 0 22px !important;
}

form.product-form section.sticky-product-bar {
  margin-top: 6px !important;
}

/* ٢) حجم "اشترِ الآن" الداخلي — محاولة RZ-PRODUCT-010 (بـ`font-size`
   موروثة) واستبدالها لاحقاً بمحاولة RZ-PRODUCT-012 (تكبير حشوة
   المحتوى) — كلا المحاولتين كانتا تغيّرات على "الشكل" (حجم الخط،
   الحشوة، وزن الخط) مو بس "الحجم"، وطلبتِ صراحة بـRZ-PRODUCT-013
   التراجع عنهم والاكتفاء بحل حجم بحت بدون أي أثر بصري. شيلتهم
   بالكامل — شوفي الحل الجديد فوق (`align-items: stretch` على
   salla-mini-checkout-widget نفسه، بدل `center`). كذلك رجّعت حشوة
   زر "أضف إلى السلة" لقيمتها الأصلية (بدون تضييق اصطناعي كان الهدف
   منه "التقارب" مع الزر الثاني). */

/* لو بعد النشر لسه فيه فرق واضح بالحجم، هذا الآن سقف فني حقيقي (زر
   اشترِ الآن غالباً معه ارتفاع صريح مكتوب جوّا الـShadow Root نفسه،
   يتغلب حتى على `align-items: stretch` من برا) — ابعثيلي صورة قريبة
   جداً للزرين جنب بعض بعد Hard Refresh، وأقيس الفرق بالبيكسل. */

/* =========================================================
   RZ-PRODUCT-012 — إثبات فني مؤكد (مو تخمين) + محاولة أقوى لتقريب
   حجم "اشترِ الآن"، بناءً على الانسبكت الكامل اللي رسلتيه لثلاثة
   عناصر: زر أضف إلى السلة، زر اشترِ الآن، والمستطيل اللي يغلفهم.
   ========================================================= */

/* الإثبات: انسبكتك كشف إن salla-mini-checkout-widget يستخدم فعلياً
   Declarative Shadow DOM حقيقي:
     <salla-mini-checkout-widget ...>
       <template shadowrootmode="open">
         <button class="s-fast-checkout-button outline rtl">
           <slot name="widget-label">...</slot>
         </button>
       </template>
       <div slot="widget-label" class="s-add-product-button-mini-checkout-content">
         ...الأيقونة + "اشترِ الآن"...
       </div>
     </salla-mini-checkout-widget>

   يعني هذا مو افتراض ولا تخمين مني — هذا مكتوب حرفياً بالماركب اللي
   رسلتيه. بالمقابل، زر "أضف إلى السلة" (`<salla-button>`) ما فيه أي
   `<template shadowrootmode>` — الـ<button> بتاعه موجود مباشرة
   بالـlight DOM العادي، ولهذا قدرنا نلونه ونعدل حدوده وخلفيته
   وارتفاعه بالكامل من الجولة الأولى بدون أي مشكلة.

   النتيجة العملية: `.s-fast-checkout-button` نفسه (شكله، حدوده،
   خلفيته، انحناء زواياه) داخل الـShadow Root — سلكتور CSS عادي من
   برا **ما يقدر يوصله إطلاقاً**، ولا حتى ::part لأن سلة ما حاطة
   `part="..."` على العنصر الداخلي. فـ"نفس الشكل نسخ لصق" (نفس
   الحدود/الخلفية/الانحناء) مو ممكن تقنياً بـCSS بس — هذا سقف حقيقي
   مثبت بالدليل، مو عذر.

   لكن! المحتوى اللي جوّا الزر (`div.s-add-product-button-mini-checkout-content`)
   هو **light DOM عادي فعلياً** يوصل عن طريق slot — ده نقدر نتحكم
   فيه بالكامل ١٠٠٪. والمنطق: أغلب الأزرار (زي هذا) ارتفاعها الفعلي
   يتحدد تلقائياً من حجم محتواها + حشوة الزر نفسه (مو رقم ثابت
   مكتوب صراحة) — يعني لو كبّرنا محتوى الـslot (حشوة + حجم خط +
   الأيقونة)، الزر المرسوم فعلياً جواه Shadow DOM غالباً يكبر تبعاً
   له تلقائياً عشان يحتوي المحتوى الأكبر. جربت هالمرة: حشوة عمودية
   ١٥px + ارتفاع أدنى للمحتوى + تكبير الخط لـ٧٠٠ (bold) بدل ٦٠٠ عشان
   يتقارب بصرياً من وزن خط "أضف إلى السلة"، وتكبير الأيقونة لمقاس
   ثابت ٢٠×٢٠. هذا أقوى من محاولة الجولة الماضية (الاعتماد على وراثة
   `font-size` عبر حاجز الـShadow، اللي بقيت غير مؤكدة الأثر) لأنه ما
   يعتمد على وراثة غير مضمونة — يعتمد على قواعد تخطيط عادية (حجم
   المحتوى يأثر بحجم أبوه) يفترض إنها تشتغل بغض النظر عن حاجز الظل.

   أمانة كاملة: حتى لو نجحت هالمحاولة بتقريب **الحجم/الارتفاع**، شكل
   الزر نفسه (لون التعبئة، الحدود، زوايا الانحناء) بيضل شكل سلة
   الافتراضي (`outline rtl` — يعني على الأغلب زر بحد شفاف بلا تعبئة
   لونية، مو تدرّج أحمر زي أضف إلى السلة) — هذا الجزء فعلاً غير قابل
   للمس بـCSS خارجي، مهما جربنا.

   تحديث RZ-PRODUCT-013: طلبتِ صراحة "المقاس فقط، مو الشكل" — يعني
   تكبير وزن الخط والأيقونة والحشوة اللي سويتها هنا كانت تغيّر بالشكل
   البصري كأثر جانبي، وهذا مو مطلوب. رجّعت قاعدة
   `.s-add-product-button-mini-checkout-content` لشكلها الأصلي بالكامل
   (شوفي فوق)، وحليت الحجم بطريقة مختلفة تماماً ما تلمس أي خاصية
   بصرية إطلاقاً: `align-items: stretch` على مستوى الحاوية
   (salla-mini-checkout-widget) بدل `center` — فرضاً إن الزر الداخلي
   ما فيه ارتفاع صريح ثابت مكتوب جوّا الـShadow Root، هالخاصية تفرضه
   يتمدد تلقائياً ليملأ ارتفاع الحاوية (٥٢px) بالضبط، بدون أي لمس
   للون أو الخط أو الأيقونة. الإثبات الفني فوق (Shadow DOM الحقيقي)
   يبقى صحيح ١٠٠٪ — بس طريقة معالجة الحجم تغيّرت لتكون "حجم بحت". */

/* =========================================================
   RZ-LOADER-002: Salla's native full-screen page loader
   ========================================================= */

/* Real Inspect-confirmed markup (Salla's own base HTML, rendered before any
   theme JS runs — never created or injected by this project):

   <div id="fullscreen-loader" class="fullscreen-loader">
     <img src="[Salla-CDN logo]" alt="preloader-image-gif">
     <span class="text-3xl md:text-4xl text-white font-semibold">Redzone Store</span>
   </div>

   Deliberately does NOT touch `display`, visibility, or any class Salla's
   own script adds/removes to show or hide this element — only decorative
   properties are styled below, so the loader's real appear/disappear
   timing on every page load stays entirely Salla's, untouched. Getting
   that part wrong (e.g. forcing `display` with !important) risks the
   loader getting stuck on-screen forever, so it is intentionally left
   alone.

   RZ-LOADER-002 replaces RZ-LOADER-001's first attempt (a rotating conic
   halo + shimmering gradient text) after real feedback that it looked
   busy/cluttered rather than clean. Kept only the one piece that WAS
   liked — the calm breathing-logo pulse — and paired it with a simple
   three-dot loading indicator (a real DOM element added by
   red-zone-main.js, not a guessed pseudo-element position — see
   addLoaderDots() there — since a pure-CSS pseudo-element approach would
   need pixel offsets guessed with no live measurement to confirm them
   against, exactly what this project avoids). Animation speeds tightened
   (breathe 1.5s, dots 0.7s) per explicit "fast, not slow" request — both
   roughly twice the speed of the first RZ-LOADER-001 attempt. */

#fullscreen-loader {
  /* RZ-LOADER-003 real root cause: `position: relative` was added in
     RZ-LOADER-002 to contain the halo's `position: absolute` pseudo-
     elements from RZ-LOADER-001. Those pseudo-elements were removed when
     the halo was replaced with the three-dot indicator, but this
     declaration was accidentally left behind — and, as an ID selector,
     it had enough specificity to silently override Salla's own native
     `position: fixed` on this element (even with no !important on
     either side, equal-or-lower-specificity native rules still lose to
     an ID selector). That is what pulled the loader out of being a
     fixed full-screen overlay and into normal document flow, confirmed
     by a real screenshot: the loader box sitting at the top of the page
     with real homepage content visible right underneath it, instead of
     covering the whole viewport. Nothing here needs `position: relative`
     any more — .rz-loader-dots is a normal flex child, not an absolutely
     positioned one — so it is simply removed, restoring whatever
     position value Salla's own CSS sets. */

  /* Opaque on-brand backdrop instead of relying on whatever page content
     happened to be blurring through underneath (the old look, and part of
     why it read as inconsistent from load to load). Also drops any
     backdrop-filter GPU cost the native rule may have carried — the same
     class of compositing concern already documented elsewhere in this
     file (search "GPU code path"). */
  background:
    radial-gradient(circle at 50% 45%, rgba(227, 6, 19, 0.14), transparent 55%),
    linear-gradient(180deg, #050608, #0b0c11 60%, #050608) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* RZ-LOADER-003: a good-faith, zero-risk attempt at a smoother
     disappearance. This does NOT change WHEN or WHETHER Salla hides the
     loader (still entirely untouched) — it only adds a transition timing
     for opacity/visibility, in case Salla's own hide mechanism changes
     one of those two (a common pattern for exactly this kind of loader,
     specifically so it CAN fade). If Salla instead hides it via
     `display: none` or by removing the node from the DOM, neither of
     those is transitionable, so this line simply has no effect — not a
     risk either way. If the disappearance still looks abrupt after
     testing this, that itself tells us the hide mechanism is NOT
     opacity/visibility-based, and pinning the real one down would need a
     live Elements-panel diff of what changes at the exact moment the
     loader disappears. */
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

#fullscreen-loader img[alt="preloader-image-gif"] {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 16px rgba(227, 6, 19, 0.45));
  animation: rz-loader-breathe 1.5s ease-in-out infinite;
}

#fullscreen-loader span {
  position: relative;
  z-index: 1;
}

/* Three-dot loading indicator — real DOM node appended by
   addLoaderDots() in red-zone-main.js (RZ-LOADER-002), as the last child
   of #fullscreen-loader, right after the existing text. This is a real
   flex item alongside the logo/text (naturally spaced, no guessed pixel
   offsets), purely decorative (aria-hidden), never touches anything
   Salla's own script controls. */
.rz-loader-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.rz-loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  animation: rz-loader-dot-bounce 0.7s ease-in-out infinite;
}

/* Brand colors, per explicit request — the established red/gold palette
   used throughout this file, not arbitrary colors. */
.rz-loader-dots span:nth-child(1) {
  background: #e30613;
  animation-delay: 0s;
}

.rz-loader-dots span:nth-child(2) {
  background: #ff5b63;
  animation-delay: 0.09s;
}

.rz-loader-dots span:nth-child(3) {
  background: #ffd77a;
  animation-delay: 0.18s;
}

@keyframes rz-loader-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes rz-loader-dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fullscreen-loader img[alt="preloader-image-gif"],
  .rz-loader-dots span {
    animation: none !important;
  }
}

/* =========================================================
   RZ-PAGE-001 — إعادة تصميم صفحات المحتوى الثابتة
   (من نحن / الاستبدال والاسترجاع / سياسة الخصوصية / تواصل معنا)
   ------------------------------------------------------------
   الأربع صفحات كلها تستخدم نفس قالب "صفحة محتوى ثابتة" الموحّد من
   سلة — الغلاف مؤكد ١٠٠٪ من انسبكتك الحقيقي (صفحتي "من نحن" و
   "تواصل معنا" اللي رسلتيهم):
     div.flex.justify-center
       div.content.content--single-page.w-full.lg:w-10/12.bg-white
           .rounded.p-6.lg:p-8.mt-4.lg:mt-12
         h1
         .content-entry (p / strong / ul / li / a...)
         [salla-comments، بصفحتي من نحن وتواصل معنا]
   بما إن الأربع صفحات من نفس القالب الموحّد بسلة (صفحات محتوى ثابتة
   عادية، لا فرق تقني بينها)، نفس هذا الغلاف ينطبق عليهم الأربعة
   تلقائياً بقاعدة وحدة — بدون الحاجة لانسبكت منفصل لسياسة الخصوصية
   وصفحة الاستبدال والاسترجاع تحديداً. لو أي جزء طلع شكله مختلف
   بإحداهم بعد النشر، ابعثيلي انسبكتها وأثبته بدقة الجولة الجاية.

   .content--single-page عندها كلاس Tailwind الجاهز bg-white (خلفية
   بيضاء ثابتة من الثيم) — سلكتور .content.content--single-page
   (كلاسين) أقوى تلقائياً من .bg-white (كلاس وحيد)، فتغلبه بأمان مع
   !important بدون أي حاجة لتخمين إضافي.

   salla-comments (الودجت اللي يظهر بصفحتي من نحن وتواصل معنا) ماله
   قاعدة إخفاء هنا مقصودة — القواعد العامة الموجودة أصلاً بهذا الملف
   من RZ-PRODUCT-011 (.s-comments-header / .s-reviews-summary-wrapper
   / .s-comments-list / .s-comment-item) مو مقيّدة بصفحة المنتج بس،
   فتنطبق تلقائياً هنا كمان بنفس التصميم الغامق/الذهبي، بدون أي كود
   إضافي. */

.content.content--single-page {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #0e0f14, #0a0b0f 55%, #090a0d) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--rz-red-rgb), 0.06) !important;
  color: #d8d2c2 !important;
  overflow: hidden;
}

.content.content--single-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--rz-red-rgb), 0.5) 30%,
    rgba(var(--rz-gold-rgb), 0.5) 70%,
    transparent
  );
  pointer-events: none;
}

.content.content--single-page h1 {
  position: relative;
  display: inline-block;
  margin-bottom: 18px !important;
  padding-bottom: 12px;
  color: #f6f1e2 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 800 !important;
}

.content.content--single-page h1::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rz-red), var(--rz-gold));
}

.content-entry {
  color: #d8d2c2 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

.content-entry p {
  color: #d8d2c2 !important;
  margin-bottom: 14px !important;
}

.content-entry strong,
.content-entry b {
  color: #f2ead2 !important;
  font-weight: 700 !important;
}

.content-entry a {
  color: var(--rz-gold) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.content-entry a:hover {
  color: #ffffff !important;
}

.content-entry ul,
.content-entry ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 18px !important;
  padding-inline-start: 22px !important;
}

.content-entry li {
  color: #d8d2c2 !important;
}

.content-entry li::marker {
  color: var(--rz-gold);
}

.content-entry h2,
.content-entry h3 {
  color: var(--rz-gold) !important;
  font-weight: 700 !important;
  margin: 22px 0 10px !important;
}

/* =========================================================
   RZ-LOGIN-001 — مودال تسجيل الدخول (الغلاف الخارجي فقط)
   ------------------------------------------------------------
   ⚠️ قيد تقني حقيقي، مو تقصير: نموذج تسجيل الدخول نفسه (الحقول،
   وأزرار Apple/Facebook/Google) يترندر داخل iframe من نطاق خارجي
   مختلف تماماً (accounts.salla.com) — مؤكد من انسبكتك الحقيقي
   (`<iframe src="https://accounts.salla.com?...">` داخل
   .s-modal-body). حاجز أمان المتصفح (Same-Origin Policy) يمنع أي
   CSS من صفحتنا من الوصول لداخل iframe من نطاق ثاني نهائياً — قيد
   تقني صارم من المتصفح نفسه، ما فيه أي حل بـCSS بس. اللي نقدر نلمسه
   فعلياً هو غلاف المودال نفسه بس (الخلفية المعتمة خلفه، صندوق
   المودال، زر الإغلاق) — مو محتوى النموذج جوّا الـiframe.

   الهوية الحقيقية المؤكدة لمودال الدخول (من انسبكتك):
     salla-modal.s-login-modal.salla-modal.s-modal.s-modal-container
       .s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding
         (زر الإغلاق) + iframe[src="https://accounts.salla.com..."]

   قاعدة أمان صارمة: ممنوع لمس مودال البحث (salla-modal.s-search
   -modal) نهائياً — مؤكد شغال ١٠٠٪ باتفاق سابق. كل سلكتور تحت يبدأ
   حرفياً بـ salla-modal.s-login-modal، وهذا الكلاس ما ينطبق غير على
   مودال الدخول تحديداً — يستحيل تقنياً إنه يلمس مودال البحث أو أي
   مودال ثاني بالموقع. نفس نمط التسمية العام (.s-modal-overlay /
   .s-modal-body / .s-modal-header / .s-modal-close) مستخدم أصلاً
   بمودال البحث أعلاه بهذا الملف — أعدت استخدام نفس اللغة البصرية
   هنا (نفس الخلفية الغامقة/التوهج الأحمر/الحدود) عشان يحس المستخدم
   إنه نفس الهوية بكل مودالات الموقع.

   تعمّدت عدم لمس width/max-width هنا (خلافاً لمودال البحث) — مودال
   الدخول عنده كلاس s-modal-xs (حجم صغير مقصود من سلة، غالباً محسوب
   ليطابق حجم الـiframe الداخلي)، وتغيير العرض من برا قد يكسر تخطيط
   الفورم جوّا الـiframe. الحشوة (padding) + overflow:hidden على
   .s-modal-body يعطي زوايا مدوّرة نظيفة حوالين الـiframe بدون أي
   لمس لمحتواه. */

salla-modal.s-login-modal .s-modal-overlay {
  background: rgba(2, 3, 6, 0.82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  backdrop-filter: blur(8px) saturate(105%);
}

salla-modal.s-login-modal .s-modal-body {
  padding: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(227, 6, 19, 0.24) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 86% -45%, rgba(227, 6, 19, 0.2), transparent 48%),
    linear-gradient(145deg, #101116, #090a0e) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

salla-modal.s-login-modal .s-modal-body iframe {
  display: block;
  border-radius: 12px;
}

salla-modal.s-login-modal .s-modal-header {
  position: absolute !important;
  top: 20px;
  left: 20px;
  z-index: 130 !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
}

salla-modal.s-login-modal .s-modal-close {
  position: relative !important;
  z-index: 131 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center;
  color: #cfd0d5 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  pointer-events: auto !important;
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}

salla-modal.s-login-modal .s-modal-close:hover,
salla-modal.s-login-modal .s-modal-close:focus-visible {
  color: #ffffff !important;
  border-color: rgba(227, 6, 19, 0.38) !important;
  background: rgba(227, 6, 19, 0.1) !important;
}

salla-modal.s-login-modal .s-modal-close svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

/* =========================================================
   RZ-CART-001 — صفحة السلة (سلة التسوق)
   ------------------------------------------------------------
   كل الكلاسات هنا مؤكدة ١٠٠٪ من الانسبكت الكامل الحقيقي اللي
   رسلتيه لصفحة /cart بالكامل (بطاقات المنتجات، صندوق الكوبون،
   بطاقة الملخص، صف الملاحظات، زر الحذف). ملاحظة مهمة: الصفحة
   عندها كلاسات Tailwind لوضع غامق جاهزة من الثيم (زي dark:text
   -white)، لكن مو كل عنصر معه نسخة dark: (مثلاً textarea
   الملاحظة معها bg-gray-50 بس بدون أي dark: مقابلة) — يعني
   الاعتماد على تفعيل وضع الثيم الغامق وحده مو مضمون. كل قاعدة
   هنا تفرض ألوان هويتنا صراحة بـ!important، بغض النظر عن حالة
   الوضع الغامق عند الثيم.

   ⚠️ ملاحظة صراحة: `s-cart-summary-card--desktop` بالكلاس يلمّح
   إن فيه نسخة موبايل منفصلة لبطاقة الملخص (شريط سفلي لاصق
   بالغالب) مو موجودة بالدمب اللي رسلتيه. لو شكلها غير متوقع
   بالموبايل بعد النشر، ابعثيلي انسبكتها وأثبتها بدقة الجولة
   الجاية. */

/* ---- بطاقة كل منتج بالسلة ---- */
section.cart-item {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
}

section.cart-item h3,
section.cart-item h3 a {
  color: #f2ead2 !important;
}

section.cart-item h3 a:hover {
  color: var(--rz-gold) !important;
}

section.cart-item .item-price,
section.cart-item .item-regular-price {
  color: rgba(242, 234, 210, 0.5) !important;
}

section.cart-item .item-total,
section.cart-item p.text-primary {
  color: var(--rz-gold) !important;
}

section.cart-item .w-10.text-center {
  color: #f2ead2 !important;
}

section.cart-item img.lazy {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ---- زر "إضافة ملاحظة" — نفس المكوّن المستخدم بصفحة المنتج
   (form.product-form .btn-tab.btn--collapse أعلاه)، هنا بدون
   تقييد بـform.product-form عشان يغطي نموذج السلة كمان (نموذج
   مختلف، form#item-{id}). القيمة البصرية مطابقة تماماً لقصد
   التناسق. ---- */
.btn-tab.btn--collapse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px !important;
  border: 1px solid rgba(var(--rz-gold-rgb), 0.35) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--rz-gold) !important;
  font-size: 13px !important;
  transition: background-color 200ms ease, color 200ms ease;
}

.btn-tab.btn--collapse:hover {
  background: var(--rz-gold) !important;
  color: var(--rz-ink) !important;
}

section.cart-item textarea.form-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  color: #f2ead2 !important;
}

/* زر حذف المنتج (X الدائري) — لون أحمر هويتنا صراحة، بدل الاعتماد
   على "primary" الافتراضي لسلة (اللي قد يختلف حسب إعدادات المتجر). */
.btn--delete.s-button-element {
  background: linear-gradient(135deg, var(--rz-red), #a80410) !important;
  border: none !important;
}

/* ---- صندوق الكوبون ----
   الغلاف الخارجي (.shadow-default.bg-white) كلاس عام مستخدم لأكثر
   من مكوّن بالموقع على الأغلب — مقيّد هنا بـ:has(salla-cart-coupons)
   عشان يلمس بطاقة الكوبون تحديداً بس، بدون خطر يمتد لأي بطاقة
   ثانية بنفس الكلاس العام بمكان آخر. */
.shadow-default.bg-white:has(salla-cart-coupons) {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
}

.s-cart-coupons-coupon-label {
  color: #f2ead2 !important;
  font-weight: 600 !important;
}

#coupon-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  color: #f2ead2 !important;
}

#coupon-input::placeholder {
  color: rgba(242, 234, 210, 0.45) !important;
}

/* ---- بطاقة ملخص الطلب ---- */
.s-cart-summary-card-sheet {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
}

.s-cart-summary-card-sheet-title {
  color: #f2ead2 !important;
}

.s-cart-summary-card-line {
  color: rgba(242, 234, 210, 0.78) !important;
}

.s-cart-summary-card-bar {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

.s-cart-summary-card-bar-label-text,
.s-cart-summary-card-bar-count {
  color: #f2ead2 !important;
}

.s-cart-summary-card-bar-total {
  color: var(--rz-gold) !important;
}

/* =========================================================
   RZ-TESTIMONIALS-001 — تكرار زر "عرض المزيد" بصفحة /testimonials
   ------------------------------------------------------------
   مؤكد من انسبكتك الحقيقي: مكوّن سلة الجاهز لـ"التحميل اللانهائي"
   (s-infinite-scroll-wrapper / s-infinite-scroll-btn) — كل زر
   "عرض المزيد" يطلع جوّا غلاف s-infinite-scroll-wrapper خاص فيه،
   وحده. يعني الزرين المكررين اللي تشوفيهم مو زر واحد اتكرر جوّا
   نفس الغلاف — هذا غلافين منفصلين (كل صفحة تحميل تضيف غلافها
   الخاص)، والسبب إن سكربت سلة نفسه (مو كودنا، ما لمسناه ولا نقدر
   نلمسه) ما يشيل الغلاف القديم بعد ما يحمّل الصفحة الجديدة —
   فيتراكمون فوق بعض بالضبط زي ما وصفتيه ("يتكرر كل ما رحت
   لصفحة"). حل CSS-only بدون أي جافاسكربت جديد: نخفي كل الأغلفة
   المكررة ونخلي الغلاف الأخير بس (الأحدث، الأقرب لأسفل الصفحة)
   ظاهر — بس نفس نمط `:last-of-type` المستخدم فعلياً بأماكن ثانية
   بمشاريع مشابهة لضبط "آخر عنصر من نوعه" بدون معرفة عددهم مسبقاً.

   ⚠️ صراحة: هذا يفترض إن كل غلاف يضاف كـ"أخ" (sibling) لسابقه جوّا
   نفس الحاوية الأب، وإنه آخر `div` من نوعه بالحاوية (مافيه `div`
   ثاني يجي بعده بترتيب الـDOM) — افتراض معقول بناءً على انسبكتك،
   بس ما قدرت أتأكد منه ١٠٠٪ بدون رؤية الحاوية الأب كاملة. لو
   بعد النشر لسه فيه أي تكرار (أو اختفى الزر بالكامل بدل ما يبقى
   واحد بس)، ابعثيلي انسبكت للحاوية الأب اللي تلف كل الأغلفة
   وأثبتها بدقة. */
.s-infinite-scroll-wrapper:not(:last-of-type) {
  display: none !important;
}