/* Miga-Photobook — stylesheet
 * Split out of index.html so visual tweaks (colours, sizes, the
 * product rows, the cards) live in one small file instead of being
 * hunted for inside five thousand lines of markup and logic.
 * Loaded by index.html; the two files must be uploaded together. */

  :root{
    /* لوحة «ب — استوديو». الأرضية فحمي محايد بدل الأسود المزرق، والنص
       الثانوي رمادي دافي بدل البنفسجي الفاتح — البنفسجي كان تباينه 11.5:1
       (ممتاز) ومع ذلك بيدّي إحساس الغبش، لأن التلوين نفسه بيوحي بالبهتان. */
    --ink:#131316;
    --ink-2:#1c1c20;
    --ink-3:#26262b;
    --paper:#f4f1ea;
    --paper-dim:#cfc8bf;
    --brass:#e8b64a;
    --brass-dim:#c8992f;
    /* الأخضر 12.9:1 والوردي 8.7:1 على الأرضية الجديدة — كانوا 11.5 و6.4 */
    --sage:#4ff0c0;
    --steel:#5cb8ff;
    --rose:#ff8fb8;
    --line:rgba(244,241,234,0.15);
  }

  /* ============================================================
     نظام التصميم — المرحلة ١ (أساس بس، مش مطبّق على حاجة لسه)
     ============================================================
     الهدف: أي حجم خط أو مسافة أو ظل جديد يتاخد من هنا، مش يتكتب رقم
     جديد بالإيد. المقاسات القديمة (12.5px وأخواتها) فضلت زي ما هي —
     هتتحول تدريجيًا في المراحل الجاية، مرحلة مقاس واحد في كل مرة، مع
     فحص كامل بعد كل مرحلة. */
  :root{
    /* --- مقاسات الخط: سلّم واحد بدل أرقام متفرقة --- */
    --text-xs: 12px;    /* شارات صغيرة، حواشي */
    --text-sm: 12.5px;  /* نص ثانوي، وصف تحت العنوان — القيمة الأكتر استخدامًا فعليًا في الملف */
    --text-base: 14px;  /* النص الأساسي في الموقع */
    --text-md: 15px;
    --text-lg: 16px;    /* عناوين المنتجات، أزرار رئيسية */
    --text-xl: 18px;
    --text-2xl: 20px;   /* عناوين أقسام صغيرة */
    --text-3xl: 24px;
    --text-4xl: 28px;
    --text-5xl: 34px;   /* H1 على الموبايل */
    --text-6xl: 44px;   /* H1 على الشاشات الكبيرة */

    /* --- المسافات: شبكة ٤px، بدل أرقام عشوائية --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 72px;

    /* --- عرض المحتوى: كان رقم ثابت (1180px/1080px) متكرر في تسع قواعد
       مختلفة (الهيدر، الهيرو، شريط الأقسام، أقسام الكروت، الأسعار،
       الفوتر) — على أي لابتوب أعرض من ~1310px (يعني كل لابتوب تقريبًا:
       1366، 1440، 1536 بعد تكبير العرض 125%، 1920...) كان بيسيب فراغ
       متماثل كبير يمين وشمال، وكل حاجة تحت هيدفعنا نكبّر نفس الرقم في
       تسع أماكن. دلوقتي رقم واحد مرن (clamp): بيفضل 1180px بالظبط لغاية
       ~1310px عرض شاشة زي ما هو (مفيش أي تغيير على تابلت/لابتوب صغير)،
       وبعدها بيكبر تدريجيًا مع عرض الشاشة لغاية سقف 1520px (فوتر أضيق
       شوية بسقف 1320px عشان أعمدة الروابط القصيرة متتمططش أكتر من
       اللازم) — بدل ما يفضل فراغ ميت، المحتوى نفسه (كروت، خط، تباعد)
       بياخد المساحة الإضافية. */
    --container-w: clamp(1180px, 90vw, 1520px);
    --container-w-narrow: clamp(1080px, 82vw, 1320px);

    /* --- زوايا الاستدارة: أربع درجات بس بدل ثمنية مبعثرة --- */
    --radius-sm: 8px;    /* أزرار، شارات */
    --radius-md: 12px;
    --radius-lg: 16px;   /* كروت، لوحات */
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* --- ظلال الارتفاع: ثلاث درجات هادية بروح Linear/Midjourney —
       ظل ناعم منتشر بدل ظل حاد، وحافة داخلية خفيفة بدل بريق زجاجي.
       دي إضافة جنب --glass-lift الموجودة، مش بديل ليها — التبديل
       هيحصل قاعدة قاعدة في مرحلة لاحقة، مش هنا. */
    --elev-1:
      0 1px 2px rgba(0,0,0,0.28),
      inset 0 1px 0 rgba(255,255,255,0.05);
    --elev-2:
      0 10px 28px rgba(0,0,0,0.38),
      inset 0 1px 0 rgba(255,255,255,0.08);
    --elev-3:
      0 20px 48px rgba(0,0,0,0.46),
      inset 0 1px 0 rgba(255,255,255,0.10);
    /* توهج نحاسي خفيف لعناصر التركيز/الـhover المميزة — بديل أرقى من
       التوهج القوي، بيستخدم لون البراند نفسه (--brass) مش لون جديد. */
    --glow-brass: 0 0 0 1px rgba(232,182,74,0.35), 0 8px 22px rgba(232,182,74,0.16);
  }
  html[data-theme="light"]{
    /* نفس الثلاث درجات، مبنية على ظل غامق خفيف بدل الأسود الكامل —
       اتساقًا مع فلسفة --glass-lift الموجودة للوضع النهاري. */
    --elev-1:
      0 1px 2px rgba(60,45,15,0.10),
      inset 0 1px 0 rgba(255,255,255,0.7);
    --elev-2:
      0 10px 24px rgba(60,45,15,0.14),
      inset 0 1px 0 rgba(255,255,255,0.6);
    --elev-3:
      0 18px 40px rgba(60,45,15,0.18),
      inset 0 1px 0 rgba(255,255,255,0.5);
    --glow-brass: 0 0 0 1px rgba(200,153,47,0.4), 0 8px 20px rgba(200,153,47,0.14);
  }

  /* ===== Day mode — same variable names, repainted for a light surface.
     Everything built on the variables above (the large majority of the
     site) follows automatically; a few literal dark backgrounds meant for
     framing photos/devices are left as-is on purpose, the same way a photo
     mat stays dark in a bright room. Category accent hues are deepened
     slightly here so text and icons keep enough contrast on a light
     background — same identity, tuned for the new surface. */

  /* ---- متغيّرات الطبقة الزجاجية ----
     معرّفة هنا فوق عشان أي قاعدة تحت تقدر تستخدمها، ومعرّفة مرة تانية
     للوضع النهاري: هناك السطح أبيض، فالتدرّج الأبيض والحد الأبيض بيختفوا
     تمامًا — والكارت كان بيفضل من غير حد خالص. الوضع النهاري بياخد
     تدرّج وحد غامقين بدل الفاتحين. */
  :root{
    --glass-sheen: linear-gradient(180deg,
      rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.024) 22%, rgba(255,255,255,0) 58%);
    --glass-sheen-soft: linear-gradient(180deg,
      rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 26%, rgba(255,255,255,0) 62%);
    --glass-edge: rgba(255,255,255,0.15);
    --glass-lift:
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(0,0,0,0.45),
      0 8px 22px rgba(0,0,0,0.34);
    --glass-lift-sm:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 3px 10px rgba(0,0,0,0.26);
  }
  html[data-theme="light"]{
    --glass-sheen: linear-gradient(180deg,
      rgba(255,255,255,0.9) 0%, rgba(0,0,0,0.012) 60%, rgba(0,0,0,0.03) 100%);
    --glass-sheen-soft: linear-gradient(180deg,
      rgba(255,255,255,0.7) 0%, rgba(0,0,0,0.015) 70%);
    --glass-edge: rgba(0,0,0,0.14);
    --glass-lift:
      inset 0 1px 0 rgba(255,255,255,0.9),
      inset 0 -1px 0 rgba(0,0,0,0.06),
      0 6px 18px rgba(60,45,15,0.14);
    --glass-lift-sm:
      inset 0 1px 0 rgba(255,255,255,0.8),
      0 2px 8px rgba(60,45,15,0.10);
  }

  html[data-theme="light"]{
    --ink:#faf7f0;
    --ink-2:#ffffff;
    --ink-3:#ece6d6;
    --paper:#211c10;
    --paper-dim:#6b6455;
    --brass:#a8710a;
    --brass-dim:#8a5c08;
    --sage:#0e8f6c;
    --steel:#1c6fcf;
    --rose:#c93368;
    --line:rgba(30,25,10,0.14);
  }
  /* ===== Header / under-image accent color ===== deliberately its own
     variable pair, not tied to --ink above — the header bar and the dark
     placeholder behind product images are meant to always read as a dark
     "photo mat" regardless of light/dark mode (see the day-mode comment
     above), so switching one of these 6 options never interacts with the
     light/dark toggle. "black" (the original look) is the default with no
     attribute needed; the other 5 are selected from the admin panel by
     setting data-accent on <html>, read from /site-config's colorTheme
     field via the bootstrap script in index.html's <head>. */
  /* 15 سبتمبر 2026: كل الـ6 تصميمات كانت لون واحد مصمت (flat) — طلب ماجدي
     تحويلها لتصميمات "لامعة وشيك" فعلية. كل --header-bg دلوقتي عبارة عن
     طبقتين: توهج ناعم فى ركن واحد (بلون مميز لعائلة التصميم، شفافية واطية
     14-18% عشان يفضل غامق) + تدرّج مائل بتلات درجات من نفس العائلة اللونية،
     بدل اللون المصمت. القيمة دي بتتحط كطبقة كاملة جوه header{background:...}
     (اللي فيها طبقة لمعة بيضاء خفيفة فوق كل ده أصلاً) — فمفيش داعي نلمس
     header{} نفسها. عمدًا من غير أي حركة/أنيميشن (تدرّج وتوهج ثابتين
     تمامًا) — الهيدر ظاهر فى كل صفحة وكل تمرير، ومشروع الموقع ده شال قبل
     كده أكتر من حركة زخرفية مشابهة (لمعة اللوجو، بانر العرض) لأنها كانت
     بتستهلك بطارية/تهنيج على أندرويد من غير فايدة وظيفية حقيقية — نفس
     المبدأ اتطبق هنا. --panel-bg و--media-bg فضلوا زي ما هم بالظبط (لون
     مصمت بسيط) لأنهم مساحات "مات محايدة" خلف المحتوى، مش المفروض ياخدوا
     اهتمام بصري زي الهيدر. */
  :root{
    --header-bg:
      radial-gradient(circle at 88% -15%, rgba(255,201,77,0.16), transparent 55%),
      linear-gradient(135deg, rgba(28,28,34,0.95) 0%, rgba(12,12,16,0.95) 55%, rgba(6,6,8,0.96) 100%);
    /* نسخة معتمة تمامًا من نفس اللون. الهيدر بيستخدم الشفاف عشان العلامة
       المائية تبان من وراه؛ الدرج الجانبي لأ — الدرج بيقفل على الصفحة،
       وأي شفافية بتخلي الشريط الإعلاني يطلع من خلاله ويشتبك مع الكلام. */
    --panel-bg: #0c0c10;
    --media-bg: #150c26;
  }
  html[data-accent="brown"]{
    --header-bg:
      radial-gradient(circle at 88% -15%, rgba(255,196,120,0.18), transparent 55%),
      linear-gradient(135deg, #3d2a1a 0%, #2b1d14 55%, #1a1109 100%);
    --panel-bg:#2b1d14;
    --media-bg:#241a12;
  }
  html[data-accent="emerald"]{
    --header-bg:
      radial-gradient(circle at 88% -15%, rgba(70,224,166,0.16), transparent 55%),
      linear-gradient(135deg, #163527 0%, #10241d 55%, #081712 100%);
    --panel-bg:#10241d;
    --media-bg:#122e22;
  }
  html[data-accent="wine"]{
    --header-bg:
      radial-gradient(circle at 88% -15%, rgba(255,112,152,0.14), transparent 55%),
      linear-gradient(135deg, #3a1522 0%, #2a1018 55%, #180a0f 100%);
    --panel-bg:#2a1018;
    --media-bg:#2f121a;
  }
  html[data-accent="navy"]{
    --header-bg:
      radial-gradient(circle at 88% -15%, rgba(122,171,255,0.16), transparent 55%),
      linear-gradient(135deg, #16213d 0%, #10182b 55%, #080c18 100%);
    --panel-bg:#10182b;
    --media-bg:#121c33;
  }
  html[data-accent="red"]{
    --header-bg:
      radial-gradient(circle at 88% -15%, rgba(255,122,132,0.15), transparent 55%),
      linear-gradient(135deg, #431823 0%, #33121a 55%, #1f0b10 100%);
    --panel-bg:#33121a;
    --media-bg:#3a151f;
  }
  /* ===== Living background watermark ===== */
  /* A slow-drifting collage of the site's own product photos, heavily faded and
     blurred, plus a diagonal repeating "Miga-Photobook" wordmark — reads as texture,
     not content. Fixed behind everything; #appRoot is raised above it so it never
     interferes with legibility or interaction. */
  #appRoot{ position:relative; z-index:1; }
  .site-watermark-bg{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    background:#000; /* pure black, matching the brand's dark/gold look — no blue tint */
  }
  .wm-photos{
    position:absolute; inset:-12% -6%; width:112%; height:124%;
    display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:230px; gap:16px;
    /* Was a permanent 34s drift animation — now a still texture. With this,
       the circle showcase, and the hero strip all animating non-stop at the
       same time, it read as visual noise competing for attention rather
       than atmosphere. A still backdrop still gives the "living background"
       depth without fighting the page's one intentional motion moment. */
    will-change:auto;
  }
  @media(max-width:760px){ .wm-photos{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:180px; } }
  .wm-photos img{
    width:100%; height:100%; object-fit:cover; border-radius:18px;
    /* من 0.28 لـ 0.10، والـ blur اتشال (8 سبتمبر 2026): الوشوش في الخلفية
       كانت بتزاحم صور المنتجات — والخلفية دي مفروض تبقى ملمس مش محتوى.
       شيل الـ blur كمان بيوفّر شغل رسم على 24 صورة ثابتة. */
    filter:grayscale(35%) brightness(1.05); opacity:0.10;
  }
  .wm-logo-layer{
    position:absolute; inset:-35% -15%; display:flex; flex-direction:column; justify-content:space-between;
    transform:rotate(-13deg);
  }
  .wm-logo-row{
    display:flex; gap:64px; white-space:nowrap;
    font-family:'Rakkas','Readex Pro',serif;
    font-size:52px; color:var(--brass); opacity:0.05; letter-spacing:4px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:clip;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Readex Pro', sans-serif;
    /* الوزن 500 هو أهم سطر في الملف ده: 124 عنصر كانوا بيرثوا الوزن 400،
       والخط العربي الخفيف على أرضية غامقة بيبان رفيع ومغبّش مهما كان
       تباينه عالي. و16px بدل 15px الافتراضي في أغلب العناصر. */
    font-size:16px;
    font-weight:500;
    line-height:1.75;
    min-height:100vh;
    overflow-x:clip;
    /* Clips any element that overflows the viewport horizontally (even by a
       sub-pixel rounding amount from a grid/gap combination) so the page can
       never shift sideways off-center — the exact symptom reported: the
       mobile view sitting slightly right of center instead of flush. Every
       intentional horizontal-scroll area on the page (category pills, the
       testimonials row, etc.) already scrolls within its own container via
       its own overflow-x:auto, so this doesn't affect any of them. */
  }
  /* Site-wide brand-colored scrollbars — a slim gold thumb on a dark track
     everywhere the browser would otherwise draw its flat grey default
     (the admin panel's tall modal, its horizontal tab strip, any overflow
     list). Applied on :root/body so it's the fallback for every scrollable
     element on the page; the pills-strip rule above still wins locally
     where it's more specific, so nothing there needs to change. Chromium/
     Safari via ::-webkit-scrollbar*, Firefox via scrollbar-color/-width. */
  *{
    scrollbar-width:thin; scrollbar-color:var(--brass) var(--ink-3);
  }
  *::-webkit-scrollbar{
    width:8px; height:8px;
  }
  *::-webkit-scrollbar-track{
    background:var(--ink-3); border-radius:100px;
  }
  *::-webkit-scrollbar-thumb{
    background:var(--brass); border-radius:100px; border:2px solid var(--ink-3);
  }
  *::-webkit-scrollbar-thumb:hover{
    background:var(--brass-dim);
  }
  *::-webkit-scrollbar-corner{
    background:var(--ink-3);
  }
  h1,h2,.display{
    font-family:'Rakkas', 'Readex Pro', serif;
    font-weight:400;
    letter-spacing:0.3px;
  }
  h3{font-family:'Readex Pro', sans-serif; font-weight:700; letter-spacing:0.1px;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; transition:transform .12s ease;}
  button:active{transform:scale(0.96);}

  /* ===== Sprocket strip motif ===== */
  .sprockets{
    height:14px;
    background-image: radial-gradient(circle, var(--ink) 3px, transparent 3.5px);
    background-size: 22px 14px;
    background-position: 10px center;
    background-color: var(--brass-dim);
    opacity:0.55;
  }

  /* ===== Promo marquee ===== */
  /* Motion audit (14 سبتمبر 2026): كانت شريط سكرول مستمر بلا توقف — أُوقفت
     الحركة بالكامل (مش بس prefers-reduced-motion) لأنها ضجة بصرية مستمرة
     بدون قيمة وظيفية حقيقية، عكس هدف "Premium/Clean". رسالة العرض (الخصم
     الحقيقي) هي القيمة الفعلية، فبقيت كاملة وواضحة، ثابتة، بتلف على أكتر من
     سطر لو احتاجت بدل ما تتحرك أو تتقص. نسخة الـHTML المكررة (كانت لازمة
     بس عشان وهم اللفّة المستمرة) اتشالت — سطر واحد بس دلوقتي. */
  .promo-marquee{
    position:relative; z-index:49;
    background:linear-gradient(90deg, var(--brass-dim), var(--brass), var(--brass-dim));
    padding:5px 16px; line-height:1.35; text-align:center;
  }
  .promo-marquee-track{
    display:block;
  }

  /* الشريط أرضيته ذهبية فاتحة، فالأحمر لازم يبقى غامق عشان يتقرا:
     ‎#c40d0d‎ تباينه 3.3:1 (تحت المعيار)، ‎#8f0c0c‎ تباينه 5.0:1. */
  .promo-marquee-track .mq-price{
    background:rgba(26,19,5,0.14); padding:1px 7px; border-radius:6px;
    font-weight:700; letter-spacing:0;
  }
  .promo-marquee-track .mq-mega{
    color:#8f0c0c; font-weight:700; font-size:1.12em;
  }
  .promo-marquee-track .mq-line{
    display:inline;
    font-size:var(--text-sm); font-weight:700; color:#1a1305; letter-spacing:0.3px;
    font-family:'Readex Pro', sans-serif;
    text-shadow:0 1px 0 rgba(255,255,255,0.25);
  }

  /* ===== Header ===== */
  .sticky-top-group{
    position:sticky; top:0; z-index:55;
    display:flex; flex-direction:column;
    /* الطي بالـtransform مش بالارتفاع — ده الفرق بين CLS=0.71 وCLS=0.
       أي تغيير في الارتفاع هنا بيحرّك الصفحة كلها تحت صباع الزائر. */
    transition:transform .24s ease;
    will-change:transform;
  }
  .sticky-top-group.hdr-collapsed{
    transform:translate3d(0, calc(-1 * var(--hdrUtilH, 0px)), 0);
  }
  @media(prefers-reduced-motion: reduce){ .sticky-top-group{ transition:none; } }
  /* Collapsed state — hides the utility strip (lang/theme/view toggles,
     "track order") and the promo banner entirely, and shrinks the
     logo/login row's padding, leaving just: a slim brand row + the category
     pills row. transitions are on the specific properties that change
     (max-height/opacity/padding) rather than `all`, so this stays smooth
     without accidentally animating unrelated hover states elsewhere in the
     header. */
  /* الشريط العلوي بيبهت وهو ماشي لفوق. مفيش max-height ولا padding
     بيتحركوا — دول خصائص تخطيط، وتحريكهم هو اللي كان بينطّ الصفحة. */
  .hdr-collapsed .header-utility{
    opacity:0; pointer-events:none;
    transition:opacity .16s ease;
  }
  .header-utility, #softLaunchBanner{
    transition:opacity .22s ease .04s;
  }
  /* .search-box gets the same expanded-state max-height/transition as the
     other two utility-strip elements above, but deliberately WITHOUT
     overflow:hidden here — this is the actual root cause of "search results
     don't work": #searchDropdown is an absolutely-positioned child that
     renders BELOW the input row (top:calc(100% + 8px)), extending past
     .search-box's own short bounding box on purpose, like any normal
     dropdown/autocomplete. With overflow:hidden on .search-box itself, that
     entire dropdown was clipped to zero visible pixels on EVERY search, on
     every device, regardless of scroll position — the dropdown was always
     being populated with correct, matching results (confirmed by reading
     its DOM content directly), they simply had no visible area to render
     into. overflow:hidden is still correct and kept on the .hdr-collapsed
     rule above, where the whole search box is genuinely collapsing away and
     hiding its dropdown along with it is the right behavior. */
  .search-box{ overflow:visible; }
  /* صندوق البحث والبانر بقوا يفضلوا ظاهرين أثناء السكرول — كانوا بيختفوا،
     والبحث كان بيروح من تحت إيد الزائر أول ما ينزل. وحجم اللوجو ثابت:
     تغييره كان بيغيّر ارتفاع الصف، وده تخطيط. */
  /* ===== Category pills row (Option 1 + visible pills) — same #catNav
     element and click logic as the dropdown version, restyled to render as
     an always-visible horizontal-scroll strip instead of a hidden panel.
     The trigger button stays in the DOM (hidden) so nothing in the existing
     dropdown-open/close JS needs to change. */
  .cat-dropdown.cat-pills-mode{max-width:var(--container-w); margin:0 auto; padding:0 24px 10px;}
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu{
    position:static; display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:transparent; border:none; padding:2px 0 6px; box-shadow:none; min-width:auto;
    overscroll-behavior-x:contain;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button{
    display:inline-block; width:auto; white-space:nowrap; flex-shrink:0;
    background:transparent; color:var(--paper-dim); border:1px solid var(--line);
    padding:6px 14px; border-radius:100px; font-size:13px; font-weight:600;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button:hover,
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button.active{
    color:var(--ink); background:var(--brass); border-color:var(--brass);
  }
  /* Brand-colored scrollbar for the pills strip — a slim gold thumb on a
     dark track instead of the browser's default flat grey bar, so even the
     scroll hint reads as part of the site's own look rather than generic
     chrome. Chromium/Safari via ::-webkit-scrollbar*, Firefox via the
     scrollbar-color/-width properties (both applied for full coverage). */
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu{
    scrollbar-width:thin; scrollbar-color:var(--brass) var(--ink-3);
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar{
    height:6px;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar-track{
    background:var(--ink-3); border-radius:100px;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar-thumb{
    background:var(--brass); border-radius:100px;
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu::-webkit-scrollbar-thumb:hover{
    background:var(--brass-dim);
  }
  @media(max-width:700px){
    .cat-dropdown.cat-pills-mode{padding:0 16px 14px;}
  }

  header{
    /* التدرّج فوق var(--header-bg) مش بدله — عشان ثيمات الألوان
       (بني/زمردي/نبيتي/كحلي/أحمر) تفضل شغالة زي ما هي. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 44%),
      var(--header-bg);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.12);
    /* backdrop-filter:blur() removed (5 سبتمبر 2026) — this header sits inside
       .sticky-top-group (position:sticky), and sticky/fixed + backdrop-filter
       is a well-known Android Chrome (Blink) rendering bug: it repaints/flickers
       and stutters while scrolling. Safari and any browser on iOS (forced to
       use WebKit, even "Chrome") never hit this path, which is exactly why it
       only showed up on Android Chrome. --header-bg is already ~94% opaque by
       default (and fully solid on the colored accent themes), so dropping the
       blur has no visible cost. */
    border-bottom:1px solid var(--line);
  }
  /* ===== Utility strip — the quiet, secondary controls (language, theme,
     device-preview, order tracking) live here in a thin bar above the main
     navigation, instead of competing for attention with categories/search/
     login in one crowded row. This is what turns "random-looking buttons"
     into a deliberate two-tier hierarchy: main row = what most visitors do
     every visit, utility strip = preferences most visitors never touch.
     Padding here is deliberately tight — with the whole header now sticky,
     every extra pixel of height here is permanently-visible screen real
     estate on mobile, not just a one-time cost at the top of the page. */
  .header-utility{
    max-width:var(--container-w); margin:0 auto; padding:4px 24px;
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    border-bottom:1px solid var(--line);
  }
  .util-link{
    background:transparent; border:none; color:var(--paper-dim); font-size:var(--text-sm);
    padding:4px 4px; text-decoration:underline; text-decoration-color:transparent;
    transition:color .18s ease, text-decoration-color .18s ease;
  }
  .util-link:hover{color:var(--brass); text-decoration-color:var(--brass);}
  /* nav-wrap بقى عمود من صفين: صف الاسم (.nav-top) وصف البحث (.search-row).
     كان صف واحد بيلفّ، وده اللي خلّى التوسيط الرأسي للاسم يحسب الصفين
     مع بعض ويركب على البحث. */
  .nav-wrap{
    max-width:var(--container-w); margin:0 auto; padding:8px 24px;
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
  }
  /* ===== Compact header mode — an admin-panel toggle (see #headerModeSelect)
     that swaps the always-visible utility strip for a hamburger button
     opening a side drawer, so the header takes up less permanent screen
     height. Classic mode (default) keeps the old behavior exactly. */
  /* 14 سبتمبر 2026: كان الزرار مستطيل مقرّب الحواف (52×38) عشان لمس مريح
     وقت ما كان أيقونة خطوط بس. دلوقتي وهو ممكن يبقى صورة بروفايل حقيقية،
     ماجدي طلب دائرة واضحة نظيفة بدل "مربع فيه صورة" — فالزرار نفسه بقى
     دائرة (40×40، هدف لمس قياسي) والصورة بتملاه بالكامل بدل ما تكون صورة
     صغيرة عايمة جواه. العرض بقى أصغر شوية من 52 لكنه أعرض من الارتفاع
     القديم (38) فالمساحة اللي بتاخدها من صف الهيدر لسه كافية للمس، وبما
     إنه دلوقتي أضيق شوية من الشكل القديم، اسم الموقع جنبه كسب مساحة مش
     خسرها (نفس ميكانيزم .nav-top > .logo{flex:1 1 auto} تحت). */
  /* 21 سبتمبر 2026 (طلب ماجدي): تكبير دائرة زرار الهامبرجر/صورة العميل شوية
     (40 → 44px) عشان تبان أوضح وألمس بسهولة أكتر، مع تعويض الفرق (4px) بتقليل
     البادينج الرأسي لـ.nav-wrap فوق (10→8px عادي، 8→6px موبايل) عشان ارتفاع
     صف الهيدر الكلي يفضل زي ما هو بالظبط أو أقل، مش أكبر. */
  .hamburger-btn{
    display:flex; background:transparent; border:1px solid var(--line); color:var(--paper);
    width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center;
    flex-shrink:0; position:relative;
  }
  /* لما العميل يكون مسجّل دخول وعنده صورة بروفايل، #hamburgerAvatarImg
     بيحل محل #hamburgerMenuIcon جوه نفس الزرار (شايف JS في
     populateDrawerProfileFields) — الزرار نفسه مابيتغيرش حجمه أو مكانه،
     فمفيش أي خطورة على توسيط اسم الموقع بجنبه. الصورة بقت بتملأ الدائرة
     بالكامل (40×40) بدل ما تكون صورة صغيرة (26×26) عايمة جوه إطار أكبر —
     أوضح وأعلى جودة ظاهرة، بنفس الإحساس اللي جوه الدرج بالظبط.
     15 سبتمبر 2026: overflow:hidden اتنقل من هنا لـ.hamburger-icon-clip
     (span جديد لافّ الصورة/الأيقونة بس) عشان عداد السلة الجديد (كمان جوه
     الزرار ده) يقدر يبان شويه بره حدود الدائرة (ركن الزرار) من غير ما
     يتقص — الزرار نفسه (بحدوده المربعة 40×40) فضل زي ما هو تمامًا. */
  .hamburger-icon-clip{
    width:100%; height:100%; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .hamburger-btn img{
    width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
  }
  /* عداد السلة الظاهر على زرار الهمبرجر/الأفاتار — نفس الزرار سواء أظهر
     أيقونة القائمة (زائر) أو صورة البروفايل (بعد تسجيل الدخول)، فبيغطي
     الحالتين اللي طلبهم ماجدي بزرار واحد بس من غير أي عنصر هيدر جديد
     (يحافظ على توسيط اللوجو - راجع header-overlap-root-cause-absolute-centering). */
  .cart-badge{
    position:absolute; top:-3px; inset-inline-end:-3px; z-index:2;
    min-width:18px; height:18px; padding:0 4px; border-radius:999px;
    background:#e05252; color:#fff; font-size:11px; font-weight:700; line-height:1;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--ink);
  }
  /* ⚠ كان بيظهر في الوضع المطوي بس. بقى الباب **الوحيد** للحساب بعد شيل
     زرار التسجيل — وشريط وضع «الشكل الحالي» مافيهوش أي مدخل للحساب خالص،
     فلو فضل مشروط كان أي تحويل للوضع التاني هيقفل التسجيل نهائيًا.
     باب الحساب مايتعلّقش على إعداد شكل. */
  html[data-header-mode="compact"] .header-utility{ display:none !important; }
  .side-drawer-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:98;
    opacity:0; visibility:hidden; transition:opacity .22s ease;
  }
  .side-drawer-backdrop.open{ opacity:1; visibility:visible; }
  .side-drawer{
    position:fixed; top:0; bottom:0; inset-inline-end:0; width:300px; max-width:86vw;
    background:var(--panel-bg); border-inline-start:1px solid var(--line); z-index:99;
    transform:translateX(100%); transition:transform .26s ease;
    display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  }
  html[dir="rtl"] .side-drawer{ transform:translateX(-100%); }
  .side-drawer.open{ transform:translateX(0); }
  html[dir="rtl"] .side-drawer.open{ transform:translateX(0); }
  .side-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line); font-weight:700; color:var(--paper);
  }
  .side-drawer-head .close-x{ background:transparent; border:none; color:var(--paper); font-size:22px; line-height:1; padding:4px 8px; }
  /* الاسم بمقاس الهيدر عرضه 275 بكسل، والمتاح في رأس الدرج 226 — الزيادة
     كانت بتدفع زرار (×) بره الدرج بالكامل وتلزّق الاسم الإنجليزي في الحافة.
     المقاسات دي للدرج بس؛ الهيدر ما اتغيرش. */
  .side-drawer-logo{
    display:flex; align-items:center; gap:5px; font-weight:700; font-size:16px;
    color:var(--paper); min-width:0; overflow:hidden;
  }
  .side-drawer-logo .logo-accent{ color:var(--brass); }
  .side-drawer-head .close-x{ flex-shrink:0; }
  .side-drawer-footer{
    margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:16px 18px; border-top:1px solid var(--line); color:var(--paper-dim);
    font-size:var(--text-sm); text-decoration:none; direction:ltr;
  }
  .side-drawer-footer:hover{ color:var(--brass); }

  /* ---- Profile section: always visible, works for guests and signed-in
     customers alike. Purpose-built for this 300px column — nothing here is
     shared with the wide desktop header bar, so there's nothing else to
     conflict with. ---- */
  .side-drawer-profile{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    padding:20px 18px; border-bottom:1px solid var(--line);
  }
  .drawer-avatar{
    position:relative; width:64px; height:64px; border-radius:50%;
    border:1.5px solid var(--brass); background:var(--ink-2); overflow:visible;
    display:flex; align-items:center; justify-content:center; color:var(--brass);
    padding:0; align-self:center; margin-bottom:4px; flex-shrink:0;
  }
  .drawer-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .drawer-avatar-edit-badge{
    position:absolute; inset-inline-end:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%;
    background:var(--brass); color:var(--ink); display:flex; align-items:center; justify-content:center;
    /* 15 سبتمبر 2026: كانت --header-bg (لون واحد مصمت وقتها) — دلوقتي
       --header-bg بقى تدرّج (طبقتين)، ومش صالح كـborder-color. الدرج
       نفسه خلفيته --panel-bg (فضل لون مصمت زي ما هو)، وده أصلاً الأصح
       سياقيًا هنا (الشارة دي فوق افتار جوه الدرج، مش جوه الهيدر). */
    border:2px solid var(--panel-bg);
  }
  .drawer-input{
    width:100%; box-sizing:border-box; background:var(--ink); border:1px solid var(--line);
    border-radius:10px; padding:11px 14px; color:var(--paper); font-size:var(--text-base); font-family:inherit;
  }
  .drawer-input:focus{ outline:none; border-color:var(--brass); }
  .drawer-input::placeholder{ color:var(--paper-dim); }
  .drawer-text-link{
    background:transparent; border:none; color:var(--brass); font-size:13px; text-align:center;
    padding:4px; width:100%;
  }

  /* ---- Settings rows: language / appearance / view mode / orders ---- */
  .side-drawer-body{ padding:14px 18px 22px; display:flex; flex-direction:column; gap:16px; }
  .side-drawer-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .side-drawer-row-label{ font-size:var(--text-base); color:var(--paper); }
  .drawer-select{
    background:var(--ink); color:var(--paper); border:1px solid var(--line); border-radius:9px;
    padding:7px 10px; font-size:13px; font-family:inherit; flex-shrink:0; min-width:110px;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a44c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:left 8px center; background-size:14px;
    padding-inline-start:26px;
  }
  html[dir="rtl"] .drawer-select{ background-position:left 8px center; }
  .drawer-select:focus{ outline:none; border-color:var(--brass); }
  .drawer-switch{
    position:relative; width:46px; height:26px; border-radius:99px; background:var(--ink);
    border:1px solid var(--line); padding:0; flex-shrink:0;
  }
  .drawer-switch-knob{
    position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px; border-radius:50%;
    background:var(--paper-dim); transition:inset-inline-start .18s ease, background .18s ease;
  }
  .drawer-switch.is-night .drawer-switch-knob{ inset-inline-start:22px; background:var(--brass); }
  .drawer-link-row{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:var(--ink); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; font-size:var(--text-base); color:var(--paper);
  }
  .drawer-link-row:hover{ border-color:var(--brass); color:var(--brass); }
  .drawer-link-row svg{ flex-shrink:0; }
  html[dir="rtl"] .drawer-link-row svg{ transform:scaleX(-1); }
  .logo{
    font-size:20px; letter-spacing:0.5px; color:var(--paper); font-weight:600;
    display:flex; align-items:center; gap:10px; min-width:0;
  }
  .logo-mark{flex-shrink:0;}
  /* شارة العلامة (الكتاب+الكاميرا) — 14 سبتمبر 2026: العلامة بقت جوه شارة
     دائرية خفيفة بجوار الاسم (مش بينه وبين نفسه زي الترتيب القديم)، بارتفاع
     قريب من ارتفاع السطرين مع بعض. نفس الشارة مستخدمة في هيدر الصفحة وأعلى
     الفوتر (.footer-lockup) — قواعد المقاس لكل واحدة تحت. */
  .logo-badge{
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    border-radius:50%; overflow:hidden; position:relative;
    background:radial-gradient(circle at 35% 30%, rgba(232,182,74,0.22), rgba(232,182,74,0.05) 70%);
    border:1px solid rgba(232,182,74,0.35);
  }
  /* تحديث 15 سبتمبر 2026 (مراجعة ثانية): ماجدي أوضح إنه عايز الحلقة الذهبية
     "بنفس الشكل تمام" زي الصورة اللي بعتها بالظبط — مش حلقة CSS بديلة.
     الصورة اتعدّلت (الحلقة + الأيقونة موجودين بالكامل زي الأصل، والنص
     المطبوع تحت الأيقونة بس اتشال/اتغطى بخلفية متطابقة، لأنه هيبقى غير
     مقروء في مقاس 34-40px وهو مكرر أصلاً مع اسم الموقع الحي جنبه) — فبقت
     الحلقة نفسها جزء من بكسلات الصورة. الحدّ/التوهج اللي كان بيتولد بـCSS
     اتشال هنا عشان ما تتكررش حلقتين فوق بعض؛ خلفية الشارة الأساسية
     (radial-gradient + border 1px من قاعدة .logo-badge) كمان بتتشال هنا
     عشان الصورة نفسها بقت تغطي الدائرة بالكامل (حلقة + خلفية غامقة).
     درج القائمة الجانبية لسه بالعلامة القديمة (SVG) — ماجدي ماطلبش تغييره. */
  .logo .logo-badge, .footer-lockup .logo-badge{
    border:none; background:transparent; box-shadow:none;
  }
  .logo .logo-badge .logo-mark-img, .footer-lockup .logo-badge .logo-mark-img{
    width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
  }
  /* الاسمين بقوا سطرين فوق بعض (العربي فوق منتصف الإنجليزي بالظبط —
     align-items:center هي اللي بتعمل التوسيط ده) بدل صف أفقي واحد. */
  .logo-text-stack{
    display:flex; flex-direction:column; align-items:center; min-width:0; gap:2px;
  }
  /* ══════════ اللوجو الثنائي اللغة ══════════
     ميجا فوتوبوك (فوق) · Miga-Photobook (تحت) · والعلامة بجوارهم بارتفاع
     السطرين (في RTL العلامة أول عنصر فبتظهر أقصى اليمين).

     التدرّج الذهبي متحطّ على .logo/.footer-lockup نفسها، والأولاد بيرثوا
     الشفافية — فنفس الموجة بترسم الاسمين مع بعض كوحدة واحدة.

     ملحوظة: العلامة (SVG) لونها متحدد بـstroke="var(--brass)" صراحةً،
     فالـcolor:transparent اللي فوق مابيأثرش عليها. */
  .logo, .side-drawer-logo, .footer-lockup{
    /* اللوجو علامة ثابتة — ترتيبه ما ينعكسش مع اتجاه الصفحة. من غير السطر
       ده، الصفحة الإنجليزية (dir=ltr) كانت بتقلب الترتيب فيبقى
       Miga-Photobook · العلامة · ميجا فوتوبوك — مرآة للمطلوب.
       (الفحص صاده: «العربي على اليمين» كان بيفشل على /en/ وعلى الرئيسية
       بعد تبديل اللغة، وبينجح على العربي والأدمن.) */
    direction:rtl;
    background:linear-gradient(90deg, var(--brass) 0%, var(--brass) 34%,
               #fff6d0 50%, var(--brass) 66%, var(--brass) 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    background-position:0% 0%;
  }
  /* موجة ذهبية مرة واحدة بس (14 سبتمبر 2026): موجة الشعار القديمة كانت
     بتتحرك للأبد كل 7.5 ثانية — اتشالت بالكامل في تدقيق الحركة بنفس
     اليوم لأنها كانت حركة زخرفية بحتة من غير أي وظيفة. لما ماجدي طلب "هوك"
     بصري لاسم الموقع، الحل الوسط المتفق عليه: موجة واحدة بس أول ما الصفحة
     تفتح (حوالي 1.2 ثانية) وتقف تمامًا عند نفس الوضع الثابت المستخدم في كل
     مكان تاني (0% 0% — نفس شكل شعار الدرج الثابت) — إحساس "جذاب من أول
     نظرة" من غير رجوع لحركة أبدية بلا داعي. مطبّقة على شعار الهيدر وشعار
     الفوتر بس، مش على شعار الدرج (عشان درج مفتوح أصلاً فيه حركة كفاية). */
  @keyframes logoSheenOnce{
    0%{ background-position:190% 0%; }
    100%{ background-position:0% 0%; }
  }
  /* 15 سبتمبر 2026: ماجدي لاحظ إن اللمعة مكنتش بتبان — كانت فعليًا 1.2
     ثانية بس (أسرع من الـ2 ثانية المتفق عليها)، فسهل إنها تفوت لو حد
     مركزش في نفس اللحظة. اتزودت لـ2 ثانية بالظبط، بنفس المبدأ: مرة واحدة
     بس عند فتح الصفحة، وبتوقف نهائيًا (مش متكررة). */
  .logo, .footer-lockup{
    animation:logoSheenOnce 2s cubic-bezier(.22,.61,.36,1) 0.15s 1 both;
  }
  /* الاسم في نص الصف الأول بالظبط — بتلات خانات، مش بتثبيت مطلق.

     التثبيت المطلق كان بيشيل الاسم من ترتيب الصف: مش بيزق حاجة ولا حاجة
     بتزقه. النتيجة إن أي زرار يكبر جنبه بيركب عليه في صمت — حصل ٣ مرات
     (زرار الأدمن على الموبايل، وزرار «تسجيل الدخول» على الديسك توب بتداخل
     94 بكسل، والاسم في الدرج). دلوقتي الجنبين بياخدوا نفس العرض بالظبط
     (flex:1 1 0) فالاسم بيقع في النص رياضيًا وهو جوه الترتيب — الزراير
     بتزقه بدل ما تركب عليه. */
  .nav-top{
    position:relative; width:100%;
    display:flex; align-items:center;
    /* gap:0 مقصود. لو فيه فجوة بين الهامبرجر وخانة الاسم، خانة الاسم
       بتبدأ بعد الفجوة — فنص الخانة بيبقى مزاح نص الفجوة عن نص «باقي
       السطر» اللي العين بتشوفه (اتقاس: 5px). بصفر، الخانة بتغطي باقي
       السطر بالظبط والاسم بيتمركز فيه تمامًا. الفراغ حوالين الاسم جاي
       من إنه أضيق من الخانة أصلاً. */
    gap:0;
  }
  /* شعار متحرك بالصور (طلب ماجدي 21 سبتمبر — عدّة تصحيحات في نفس اليوم):
     1) مش خلفية خلف الاسم — الصورة بتحل محل شارة اللوجو (.logo-badge)
        واسم الموقع الذهبي (.logo-text-stack) بالكامل (الصور فيها الأيقونة
        + الاسم مطبوعين جواها من التصميم اللي بعته ماجدي).
     2) "تكون في المساحة كلها... والهامبرجر راكب عليه... مش في المنتصف
        لتشمل كل المساحة" — الصورة بتملأ .nav-top بالكامل حافة لحافة (مش
        صندوق صغير متمركز)، والهامبرجر عايم فوقها بـz-index (نفس فكرة
        الإصدار الأول قبل التصحيح، لكن دلوقتي مع إخفاء الاسم/الشارة
        الحقيقيين بدل ما يفضلوا ظاهرين فوق الصورة).
     لما الوضع "مجموعة صور متحركة" مفعّل، JS بيخفي الشارة والاسم الحقيقيين
     ويحط الصورة خلف .nav-top كله؛ لو الميزة معطّلة أو فشل التحميل، الشعار
     النصي الأصلي بيفضل ظاهر زي ما هو دايمًا (تحسين تدريجي، صفر مخاطرة). */
  .nav-top > .nav-side, .nav-top > .logo{ position:relative; z-index:1; }
  .navbar-bg-crossfade{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  /* عنصر <img> حقيقي (مش CSS background-image) عشان اسم الموقع يفضل قابل
     للفهرسة/الأرشفة من جوجل حتى والصورة ظاهرة بدل النص — background-image
     مالوش alt نهائي، يعني كان هيشيل ذكر اسم الموقع من الهيدر تمامًا في
     محركات البحث طول ما الميزة مفعّلة.
     object-fit:contain مش cover (تصحيح: ماجدي لاحظ إن أجزاء من الصورة —
     الأيقونة أو النص — كانت بتتقص/تختفي). السبب: .nav-top عرضه بيختلف
     جدًا بين الموبايل (~350px) والديسك توب العريض (~1500px) بنفس الارتفاع
     (44px) — يعني نسبة الصندوق بتتراوح من ~8:1 لحد ~30:1. cover كان
     بيكبّر الصورة عشان "تغطي" الصندوق العريض جدًا على الديسك توب، وده
     بيقص جزء كبير من عرضها (فبيضيع الأيقونة أو طرف من النص). contain
     بيضمن ظهور الصورة كاملة دايمًا مهما كان عرض الصف — الخلفية الطبيعية
     لـheader (غامقة أصلاً) بتظهر حوالين الصورة، فبصريًا لسه حاسس إنه
     "ملي المساحة" لأن مفيش حدود واضحة أو مربع فاضح حوالين الصورة. */
  .navbar-bg-crossfade-frame{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    opacity:0; transition:opacity 0.45s ease; display:block;
  }
  .navbar-bg-crossfade-frame.is-active{ opacity:1; }
  @media(prefers-reduced-motion: reduce){
    .navbar-bg-crossfade-frame{ transition:none; }
  }
  /* أداة عامة لنص مقروء لقارئ الشاشة بس (مش ظاهر بصريًا) — مستخدمة هنا
     عشان اسم الموقع يفضل معلن صوتيًا لما الصورة تحل محل النص الحقيقي. */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  /* بعد ما زرار التسجيل اتشال، الصف بقى خانتين: الهامبرجر بعرضه الطبيعي،
     والاسم بياخد **باقي السطر** ومتمركز فيه هو. مش توسيط على عرض الصف كله
     — ده كان هيخلّيه مزاح ناحية الهامبرجر. */
  .nav-side{
    flex:0 0 auto; min-width:0;
    display:flex; align-items:center; gap:8px;
  }
  .nav-top > .logo{ flex:1 1 auto; min-width:0; justify-content:center; margin:0; }
  /* 15 سبتمبر 2026: الميكانيزم فوق (الاسم ياخد "باقي السطر" ويتمركز فيه)
     كان مظبوط لما الصف كله ضيق (موبايل) — "باقي السطر" و"الصف كله" كانا
     تقريبًا نفس الحاجة. على شاشة لابتوب عادية (١٣٦٦ فما فوق)، container-w
     المرن فوق بيوسّع .nav-wrap لغاية ١٥٢٠px، و"باقي السطر بعد الهامبرجر"
     (٤٠px بس) بقى مختلف جدًا عن نص الصف الحقيقي — النتيجة: الاسم بيتمركز
     صح رياضيًا لكن بصريًا بيبان مزاح، وفجوة كبيرة غير متماثلة بينه وبين
     الهامبرجر. الحل هنا محصور على الشاشات الأعرض من الموبايل بس (٧٠٠px+)
     عشان الميكانيزم القديم المضبوط على الموبايل يفضل زي ما هو بالظبط:
     ثلاث خانات شبكة (هامبرجر ٤٠px | الاسم يملأ الباقي ومتمركز فيه | خانة
     فاضية ٤٠px مطابقة) — الاسم بقى في نص الصف الحقيقي كله، مش نص "الباقي". */
  @media(min-width:701px){
    /* minmax(40px, max-content) على الخانة الأولى (مش 40px ثابت): زرار
       الأدمن (#adminOpenBtn) بيتحط جوه .nav-side ده برضو وبيتشال إخفاؤه
       في وضع الأدمن — لو ثبّتنا الخانة على 40px بالظبط، ظهوره كان هيتقصّ
       أو يركب على الاسم. minmax بتخلّي الخانة تكبر تلقائيًا لو ظهر، وبرضو
       تفضل 40px بالظبط في الحالة العادية (زرار الهامبرجر بس) — يعني نفس
       عرض الخانة الفاضية التالتة، فالاسم بيتمركز صح فعليًا. */
    .nav-top{ display:grid; grid-template-columns:minmax(40px, max-content) 1fr 40px; }
    .nav-top > .nav-side{ grid-column:1; }
    .nav-top > .logo{ grid-column:2; }
    .nav-top::after{ content:""; grid-column:3; }
  }
  /* شارة الهيدر: 40px قطر، العلامة جواها 22px (نفس مقاس الزرار الدائري
     الجديد بجنبها بالظبط — إحساس متسق بين الطرفين). */
  .logo .logo-badge{ width:40px; height:40px; }
  .logo .logo-badge .logo-mark{ width:22px; height:22px; }
  .logo .lg-en, .side-drawer-logo .lg-en{
    font-size:20px; font-weight:700; letter-spacing:0.2px; white-space:nowrap;
  }
  .logo .lg-ar, .side-drawer-logo .lg-ar{
    font-size:18px; font-weight:700; letter-spacing:0.3px; white-space:nowrap;
  }
  /* رأس الدرج عرضه المتاح 226 بكسل بس (300 ناقص الحشو وزرار الإغلاق).
     بمقاس الهيدر المحتوى بياخد 264 — الزيادة كانت بتضغط الأولاد فيطلع
     الكلام بره صناديقه ويتراكب. flex-shrink:0 بيمنع الضغط، والمقاسات دي
     بتخلّي المحتوى 213 بكسل فيقعد جوه براحته. (شعار الدرج فضل بترتيبه
     الأفقي القديم — مش جزء من إعادة تصميم 14 سبتمبر.) */
  .side-drawer-logo > *{ flex-shrink:0; }
  .side-drawer-logo .lg-en{ font-size:var(--text-base); }
  .side-drawer-logo .lg-ar{ font-size:var(--text-sm); }
  .side-drawer-logo .logo-mark{ width:22px; height:22px; }

  /* بقى جوه ترتيب الصف، فلازم يسع جنب الزراير على الشاشة الصغيرة بدل ما
     يزحف. المقاسات دي مقيسة: عند 360 بكسل الصف كله بيقعد جوه من غير زحف.
     15 سبتمبر 2026 (تحديث تاني): ماجدي أكّد إنه عايز شارة الهيدر ثابتة
     40px في كل المقاسات — "بنفس مقاس دايرة الأفاتار بالظبط" (زرار
     #hamburgerBtn ثابت 40px برضه من غير أي تصغير على الموبايل). فالشارة
     بقت ثابتة 40px هنا كمان، والمساحة اتعوّضت بتصغير اسم الموقع نفسه بدل
     الشارة — اتقاس على 360px ومفيش زحف. */
  @media(max-width:560px){
    .logo{ gap:7px; }
    .logo .lg-en{ font-size:15px; }
    .logo .lg-ar{ font-size:13.5px; }
  }
  @media(max-width:380px){
    .logo .lg-en{ font-size:12.5px; }
    .logo .lg-ar{ font-size:11.5px; }
  }
  /* Readex Pro أقصى وزن فيه 700 وإحنا واصلينه. الزيادة في السُمك بحد رفيع
     حوالين الحروف بنفس لون التدرّج — أنضف من إن المتصفح يصنع وزن مزيّف.
     15 سبتمبر 2026: الحدّ اتزوّد من 0.4px لـ0.7px بعد ملاحظة ماجدي إن سُمك
     اسم الموقع كان لسه شكله رفيع — إحساس أوضح وأتقل من غير ما نغيّر
     الخط نفسه. */
  .logo .lg-en, .logo .lg-ar,
  .side-drawer-logo .lg-en, .side-drawer-logo .lg-ar,
  .footer-lockup .lg-en, .footer-lockup .lg-ar{
    -webkit-text-stroke:0.7px var(--brass);
  }
  /* الاسمين ماياخدوش تدرّج خاص بيهم — الموجة بتاعة الأب هي اللي بترسمهم */
  .logo .lg-ar, .side-drawer-logo .lg-ar, .footer-lockup .lg-ar,
  .logo .lg-en .logo-accent, .side-drawer-logo .lg-en .logo-accent,
  .footer-lockup .lg-en .logo-accent{
    background:none; animation:none; -webkit-text-fill-color:inherit;
  }
  @media(prefers-reduced-motion: reduce){
    .logo, .side-drawer-logo, .footer-lockup{ animation:none; }
  }
  @media(max-width:520px){
    .logo{ gap:8px; }
    .logo .lg-en{ font-size:15px; }
    .logo .lg-ar{ font-size:13.5px; }
    /* زرار الحساب أيقونة بس: الاسم الثلاثي محتاج العرض ده. الأيقونة موجودة
       أصلًا جوه الزرار، فبنخفي الكلمة بس. */
    #accountOpenBtn{ width:44px; height:44px; padding:0; justify-content:center; gap:0; }
    #accountOpenBtn > span:not(.icon-badge){ display:none; }
  }
  /* المعاينة جوه إطار الموبايل عرضها 378 بكسل مهما كان عرض المتصفح، لكن
     استعلامات الميديا فوق بتقيس عرض **المتصفح**. فعلى شاشة عريضة الزرار
     كان بياخد شكله الكامل بالكلام (143 بكسل) جوه خانة عرضها 38 — فيطلع
     بره خانته ويدفن الاسم العربي تحته. القاعدة دي بتدّي جوه الإطار نفس
     الشكل المضغوط، وبس على الشاشات العريضة عشان التليفون الحقيقي ما يتأثرش. */
  @media(min-width:521px){
    body.view-mode-mobile #accountOpenBtn{ width:44px; height:44px; padding:0; justify-content:center; gap:0; }
    body.view-mode-mobile #accountOpenBtn > span:not(.icon-badge){ display:none; }
    body.view-mode-mobile .logo{ gap:8px; }
    body.view-mode-mobile .logo .lg-en{ font-size:15px; }
    body.view-mode-mobile .logo .lg-ar{ font-size:13.5px; }
  }
  .logo-accent{color:var(--brass);}
  nav.cats{display:flex; gap:6px; flex-wrap:wrap;}
  nav.cats button{
    background:transparent; color:var(--paper-dim);
    padding:9px 16px; border-radius:100px; font-size:14.5px;
    border:1px solid transparent; transition:.22s;
  }
  nav.cats button:hover, nav.cats button.active{
    color:var(--ink); background:var(--paper); border-color:var(--paper);
    box-shadow:0 3px 10px rgba(0,0,0,0.2);
  }

  /* ===== Categories dropdown (replaces the row of pill buttons) ===== */
  .cat-dropdown{position:relative;}
  .cat-dropdown-btn{
    display:flex; align-items:center; gap:10px;
    background:transparent; color:var(--paper); border:1.5px solid var(--brass);
    padding:11px 20px; border-radius:10px; font-size:17px; font-weight:700;
    transition:.2s;
  }
  .cat-dropdown-btn:hover{background:rgba(255,201,77,0.08);}
  .cat-dropdown-btn .cdi{display:flex; align-items:center; font-size:20px; line-height:1;}
  .cat-dropdown-btn .cdi svg{width:1em; height:1em; display:block;}
  .cat-dropdown-btn .cdc{font-size:15px; transition:transform .18s; margin-inline-start:2px;}
  .cat-dropdown.open .cat-dropdown-btn .cdc{transform:rotate(180deg);}
  .cat-dropdown-menu{
    display:none; position:absolute; top:calc(100% + 8px); inset-inline-end:0;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:6px; min-width:210px; z-index:60; box-shadow:0 12px 30px rgba(0,0,0,0.35);
  }
  .cat-dropdown.open .cat-dropdown-menu{display:block;}
  .cat-dropdown-menu button{
    display:block; width:100%; text-align:inherit; background:transparent; color:var(--paper-dim);
    padding:12px 15px; border-radius:8px; font-size:16px; font-weight:700; border:none;
  }
  .cat-dropdown-menu button:hover, .cat-dropdown-menu button.active{
    background:var(--paper); color:var(--ink);
  }
  .admin-bell-btn{position:relative;}
  .admin-bell-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:20px; padding:0 5px; border-radius:10px;
    background:#e0524a; color:#fff; font-size:var(--text-sm); font-weight:700;
    line-height:1; margin-inline-start:-2px;
  }

  /* ===== Collapsible sections (How it works / Testimonials / About / FAQ) —
     opened and closed entirely by their tile/tab trigger elsewhere on the
     page (the category tiles grid, or the section-tabs row), which already
     display that section's name and icon; no separate header is rendered
     inside the section itself, so nothing repeats it. ===== */
  .cat-section.collapsible > .cs-body{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .cat-section.collapsible.open > .cs-body{max-height:100000px;}
  .cat-section.collapsible > .cs-body > *:first-child{margin-top:20px;}

  /* The 52px/16px vertical padding below comes from the shared .cat-section
     rule further down and applies to the <section> itself, not to .cs-body —
     so a CLOSED collapsible section was still reserving ~68px of empty,
     transparent vertical space even with its content fully hidden. With 8
     category sections plus 4 more (why-us/how-it-works/testimonials/about/
     faq) closed by default, that space stacks up into a large gap where the
     fixed watermark background shows through clearly instead of staying a
     subtle texture in a normal margin. Zeroing it while closed, and only
     restoring it once .open is added, removes that gap without touching how
     an opened section looks. */
  .cat-section.collapsible{ padding:0 24px; transition:padding .25s ease; }
  .cat-section.collapsible.open{ padding:52px 24px 16px; }
  body.view-mode-mobile .cat-section.collapsible{ padding:0 16px; }
  body.view-mode-mobile .cat-section.collapsible.open{ padding:36px 16px 10px; }

  /* Tab panel (لماذا / كيف يعمل / من نحن / أسئلة شائعة): a plain
     visible/hidden swap, not an animated accordion expand — whichever tab
     is selected just appears, instantly, in this one fixed spot right
     below the tab row. No scrolling needed since nothing else competes for
     space here; only one .tab-panel is ever shown at a time. */
  #sectionTabPanel{ position:relative; }
  #sectionTabPanel .cat-section.tab-panel{ display:none; padding:28px 24px 16px; }
  #sectionTabPanel .cat-section.tab-panel.active{ display:block; }
  body.view-mode-mobile #sectionTabPanel .cat-section.tab-panel{ padding:20px 16px 10px; }

  /* Quick-nav row: one row of bold, large tab buttons that jump to and open
     each of the sections below (why-us / how it works / testimonials /
     about / faq), so a visitor finds all of it at a glance instead of
     scrolling past five separate stacked headers. */
  /* 15 سبتمبر 2026: كانت عمود واحد (كل زرار ياخد صف كامل لوحده) — 5
     أزرار = 5 صفوف طويلة فاضية جوها كتير. بقت شبكة عمودين، فبقت 3 صفوف
     بس (آخر زرار "أسئلة شائعة" لوحده فى صفه، بنفس المقاس بالظبط زي
     الباقي — مفيش تكبير أو تمديد ليه، حسب الطلب "بمقاسات متساوية"). */
  .section-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 28px;
  }
  .section-tab-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; min-height:66px; box-sizing:border-box; text-align:center;
    background:var(--ink-2); border:1.5px solid var(--brass); color:var(--paper);
    padding:10px 16px; border-radius:14px;
    font-size:18px; font-weight:700; letter-spacing:0.2px; font-family:inherit;
    line-height:1.3; transition:.2s;
  }
  .section-tab-btn:hover{background:rgba(255,201,77,0.08);}
  .section-tab-btn.active{
    background:var(--brass); color:var(--ink); border-color:var(--brass);
  }
  .section-tab-btn.active .icon-badge{border-color:var(--ink); color:var(--ink);}
  @media(max-width:700px){
    .section-tab-btn{font-size:14.5px; min-height:60px; padding:8px 10px; gap:8px;}
  }
  @media(max-width:480px){
    .section-tab-btn{font-size:13px; gap:6px;}
    .section-tab-btn .icon-badge{width:26px; height:26px; flex:none;}
    .section-tab-btn .icon-badge svg{width:14px; height:14px;}
  }
  /* All tab buttons stay visible side by side at all times now — only the
     active one's background highlights which panel is currently showing
     below. No more hiding the other four when one is selected. */

  /* Admin orders: total/completed/pending counts, click to expand a live table */
  .order-stats-bar{
    display:flex; align-items:center; gap:22px; cursor:pointer; user-select:none; flex-wrap:wrap;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:16px 20px; margin-bottom:16px;
  }
  .order-stat{display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
  .order-stat-num{font-size:26px; font-weight:700; color:var(--brass); line-height:1;}
  .order-stat-label{font-size:var(--text-sm); color:var(--paper-dim);}
  .order-stats-chevron{margin-inline-start:auto; color:var(--brass); font-size:15px; transition:transform .2s;}
  .order-stats-bar.open .order-stats-chevron{transform:rotate(180deg);}
  #orderStatsTable{
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:10px; margin-bottom:16px; font-size:13.5px;
  }
  #orderStatsTable table{width:100%; border-collapse:collapse;}
  #orderStatsTable th, #orderStatsTable td{padding:8px 10px; text-align:inherit; border-bottom:1px solid var(--line);}
  #orderStatsTable th{color:var(--paper-dim); font-weight:600; font-size:var(--text-sm);}

  /* Admin dashboard landing tab (added 2026-09-17) */
  .dash-attention-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
  .dash-attn-tile{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; cursor:pointer; text-align:start; font-family:inherit;
    transition:border-color .15s, transform .1s;
  }
  .dash-attn-tile:hover{border-color:var(--brass-dim);}
  .dash-attn-tile:active{transform:scale(0.98);}
  .dash-attn-num{font-size:28px; font-weight:700; color:var(--brass); line-height:1;}
  .dash-attn-num.dash-attn-alert{color:#e08a2b;}
  .dash-attn-label{font-size:var(--text-sm); color:var(--paper-dim);}
  .dash-stats-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
  .dash-stat{display:flex; flex-direction:column; gap:2px;}
  .dash-stat-num{font-size:22px; font-weight:700; color:var(--brass); line-height:1; font-variant-numeric:tabular-nums;}
  .dash-stat-label{font-size:12.5px; color:var(--paper-dim);}
  @media (max-width:640px){
    .dash-attention-grid{grid-template-columns:1fr;}
    .dash-stats-grid{grid-template-columns:repeat(2, 1fr);}
  }

  /* Category pricing + coupons + price history (added 2026-09-17) */
  .category-pricing-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
  .category-pricing-grid .field{margin:0;}
  @media (max-width:640px){ .category-pricing-grid{grid-template-columns:1fr;} }

  /* Category management: edit/hide/delete/add (added 2026-09-18) */
  .admin-cat-manage-row{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .admin-cat-manage-row:last-child{border-bottom:none;}
  .admin-cat-manage-row .cat-manage-id{
    min-width:70px; font-size:11.5px; opacity:0.55; font-family:monospace;
  }
  .admin-cat-manage-row input[type="text"]{
    max-width:150px; flex:1 1 120px;
  }
  .cat-manage-hidden-badge{
    font-size:11px; color:var(--brass); margin-inline-start:4px;
  }
  @media (max-width:640px){
    .admin-cat-manage-row{gap:6px;}
    .admin-cat-manage-row input[type="text"]{max-width:none; flex-basis:100%;}
  }

  .coupon-row{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:10px 14px; margin-bottom:8px;
  }
  .coupon-row.coupon-inactive{opacity:0.55;}
  .coupon-code{font-family:'DejaVu Sans Mono', monospace; font-weight:700; color:var(--brass); letter-spacing:0.5px;}
  .coupon-meta{font-size:12.5px; color:var(--paper-dim); flex:1 1 auto; min-width:160px;}
  .coupon-actions{display:flex; gap:6px; margin-inline-start:auto;}
  .coupon-actions button{
    background:none; border:1px solid var(--line); border-radius:8px; color:var(--paper);
    padding:5px 10px; font-size:12.5px; cursor:pointer;
  }
  .coupon-actions button:hover{border-color:var(--brass-dim);}
  .coupon-form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:12px;}
  .coupon-form-grid .field{margin:0;}

  .price-history-row{
    display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;
  }
  .price-history-row:last-child{border-bottom:none;}
  .price-history-date{color:var(--paper-dim); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums;}

  /* Product hide/show toggle (added 2026-09-17) */
  .admin-product-row.product-hidden{opacity:0.5;}
  .product-hidden-badge{
    display:inline-block; font-size:11px; color:#e08a2b; border:1px solid #e08a2b;
    border-radius:6px; padding:1px 6px; margin-inline-start:6px;
  }

  .order-type-badge{
    display:inline-block; font-size:var(--text-sm); font-weight:700; padding:3px 10px; border-radius:100px;
  }
  .order-type-badge.type-transform{background:rgba(62,167,255,0.16); color:var(--steel);}
  .order-type-badge.type-prompt{background:rgba(255,201,77,0.16); color:var(--brass);}

  .my-order-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:10px 14px; margin-bottom:8px; font-size:13px;
  }
  .my-order-row .mo-info{display:flex; flex-direction:column; gap:2px;}
  .my-order-row .mo-date{color:var(--paper-dim); font-size:var(--text-sm);}

  .purchased-prompt-box{
    background:var(--ink); border:1px solid var(--line); border-radius:10px;
    padding:12px; display:flex; flex-direction:column; gap:8px;
  }
  .purchased-prompt-box p{
    font-size:13px; line-height:1.7; color:var(--paper-dim); margin:0;
    white-space:pre-wrap;
  }

  /* ===== Image crop tool (admin uploads) ===== */
  .crop-stage{
    display:flex; justify-content:center; margin:14px 0; background:#0a0806;
    border-radius:10px; overflow:hidden; border:1px solid var(--line);
  }
  #cropCanvas{cursor:grab; touch-action:none; display:block;}
  #cropCanvas:active{cursor:grabbing;}
  .crop-zoom-row{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
  .crop-zoom-row input[type="range"]{flex:1; accent-color:var(--brass);}

  /* ═══ صفحة «من نحن» ═══ */
  .about-wrap{ max-width:720px; display:flex; flex-direction:column; gap:18px; }
  .about-lead{
    font-size:16.5px; font-weight:700; color:var(--paper); line-height:1.8;
  }
  .about-para{ font-size:15px; color:var(--paper-dim); line-height:1.9; }
  .about-block{
    border:1px solid var(--line); border-radius:14px; padding:16px 18px;
    background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
    display:flex; flex-direction:column; gap:8px;
  }
  .about-h{
    font-size:15.5px; font-weight:700; color:var(--brass); letter-spacing:0.2px;
  }
  .about-list{ list-style:none; display:flex; flex-direction:column; gap:7px; }
  .about-list li{
    font-size:14.5px; color:var(--paper-dim); line-height:1.75;
    padding-inline-start:20px; position:relative;
  }
  /* النقطة بـ::before مش list-style عشان تفضل في الجهة الصح مع تبديل اللغة */
  .about-list li::before{
    content:"•"; position:absolute; inset-inline-start:2px; color:var(--brass);
  }
  .about-list-check li::before{ content:"✅"; font-size:12px; inset-inline-start:0; }
  .about-founder{ font-size:16px; font-weight:700; color:var(--paper); }
  .about-contact{ list-style:none; display:flex; flex-direction:column; gap:9px; }
  .about-contact li{ display:flex; align-items:center; gap:9px; font-size:14.5px; }
  .about-contact a{ color:var(--brass); text-decoration:none; word-break:break-all; }
  .about-contact a:hover{ text-decoration:underline; }
  .about-sign{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:22px 16px; margin-top:4px;
    border-top:1px solid var(--line); text-align:center;
  }
  .about-sign img{ width:140px; height:140px; max-width:45vw; }
  .about-sign figcaption{
    font-size:15px; font-weight:700; color:var(--paper);
    line-height:1.85; max-width:520px;
    /* الزرارين العائمين (تواصل مع ميجا · الرئيسية) مثبّتين على حافتي
       الشاشة، فأي كلام بيوصل للحافة بيتغطّى منهم عند وضع سكرول معيّن.
       الحشو الجانبي ده بيخلي الجملة تفضل بين الزرارين مهما كان السكرول. */
    padding-inline:74px;
  }
  @media(min-width:760px){ .about-sign figcaption{ padding-inline:0; } }
  @media(max-width:520px){
    .about-lead{ font-size:15.5px; }
    .about-block{ padding:14px 15px; }
    .about-sign img{ width:110px; height:110px; }
  }

  .popularity-badge{
    display:inline-flex; align-items:center; gap:4px; align-self:center;
    background:rgba(255,201,77,0.14); color:var(--brass); font-weight:700; font-size:13px;
    padding:5px 10px; border-radius:100px; white-space:nowrap;
  }
  .request-count-overlay{
    opacity:0.72; transition:opacity .2s ease;
    position:absolute; bottom:8px; inset-inline-start:8px; z-index:2;
    display:flex; align-items:center; gap:4px;
    background:rgba(10,8,4,0.86); color:var(--brass); font-weight:700; font-size:var(--text-sm);
    padding:4px 9px; border-radius:100px; /* backdrop-filter removed — see header
    comment above; this badge repeats on many cards in the grid at once, so each
    copy was its own extra GPU compositing layer on Android Chrome. Background
    opacity bumped 0.75→0.86 to keep it fully legible without the blur. */
  }
  .admin-btn{
    display:inline-flex; align-items:center; gap:8px; height:38px; box-sizing:border-box;
    background:transparent; border:1.5px solid var(--brass); color:var(--paper-dim);
    padding:0 14px; border-radius:var(--radius-sm); font-size:var(--text-sm);
  }
  .admin-btn:hover{background:rgba(255,201,77,0.08); color:var(--brass); transform:translateY(-1px);}
  /* The one filled, high-contrast control in the header — everything else
     (categories, search, utility strip) stays outlined/quiet so this is
     unmistakably the primary action, per the same "one accent per view"
     idea already used for the active section tab and active view toggle. */
  .admin-btn.admin-btn-primary{
    background:var(--brass); color:var(--ink); font-weight:700; border-color:var(--brass);
  }
  .admin-btn.admin-btn-primary:hover{background:var(--brass-dim); color:var(--ink);}

  /* ===== Hero ===== */
  .hero{
    max-width:var(--container-w); margin:0 auto; padding:64px 24px 40px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
    position:relative;
  }
  .hero::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    top:-140px; left:-120px; width:560px; height:560px; border-radius:50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,201,77,0.38), transparent 55%),
      radial-gradient(circle at 65% 55%, rgba(255,92,150,0.20), transparent 55%),
      radial-gradient(circle at 45% 70%, rgba(47,230,176,0.14), transparent 55%);
    filter:blur(70px);
  }
  .eyebrow{
    color:var(--brass); font-size:13px; letter-spacing:2px; font-weight:600;
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
    white-space:nowrap;   /* Readex أعرض من الخط القديم فكانت بتلف على سطرين */
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--brass);}
  /* كانت بخط Rakkas — خط زخرفي رفيع مخصوص للشعارات، حروفه رفيعة بطبعها،
     فالجملة كانت بتبان مغبّشة مهما كان لونها فاتح. */
  .tagline{
    font-family:'Readex Pro', sans-serif; font-size:20px; font-weight:600;
    color:var(--rose); margin-bottom:14px; letter-spacing:0;
  }
  .hero h1{font-size:52px; line-height:1.25; color:var(--paper); margin-bottom:20px;}
  .hero h1 em{font-style:normal; color:var(--brass);}
  .hero h1 .brand-mark{font-style:normal; color:var(--brass); font-family:'Readex Pro', sans-serif; letter-spacing:0.3px; text-shadow:0 0 14px rgba(227,164,41,0.35);}
  /* Every standalone mention of "ميجا"/"Mega" gets this same bold,
     brand-colored treatment, wherever it appears in copy across the site —
     a small, consistent visual cue that reinforces the brand name itself
     rather than just the generic offer around it. */
  /* Motion audit (14 سبتمبر 2026): كان في وميض أحمر مستمر (كل 1.5 ثانية،
     بلا توقف، في كل مكان تتكرر فيه كلمة "ميجا" — الهيدر، الشريط الإعلاني،
     زرار التواصل العائم). القرار: الوميض المستمر بلا حد بيقرا كـ"ضجة" مش
     "Premium"، ومالوش قيمة UX حقيقية (مفيش حالة بيتغيّر معلن عنها). اللون
     القوي + الحجم الأكبر لوحدهم كافيين يخلوا الكلمة بارزة بصريًا من غير أي
     حركة خالص — اللون والحجم اتسابوا زي ما هما، الحركة بس هي اللي اتشالت،
     سيتوايد مش بس جوه الهيرو (كان أول إصلاح جزئي وقتها، ده استكماله). */
  .brand-mega{
    font-weight:700; color:#e21c1c;
    font-size:1.32em; line-height:1;
  }
  .hero p{color:var(--paper-dim); font-size:16.5px; max-width:480px; margin-bottom:28px;}
  /* 15 سبتمبر 2026: عرض المحتوى (--container-w) بقى مرن ويكبر على شاشات
     اللابتوب العادية (١٣٦٦px فما فوق) — لكن مقاسات الخط هنا كانت أرقام
     ثابتة، فكل ما العمود يكبر كل حاجة فيه (الكلمة التمهيدية، العنوان،
     الوصف) كانت بتبان أصغر نسبيًا من المساحة حواليها، بدل ما تكبر معاها.
     محصور على ١٢٨٠px+ عشان الموبايل والتابلت يفضلوا زي ما هما بالظبط —
     ده بس بيكبّر شوية على الشاشات اللي أصلاً بقت أعرض. */
  @media(min-width:1280px){
    .eyebrow{font-size:14px;}
    .tagline{font-size:22px;}
    .hero h1{font-size:clamp(52px, 3.6vw, 62px);}
    .hero p{font-size:18px; max-width:560px;}
  }
  .hero-ctas{display:flex; flex-wrap:wrap; gap:12px;}
  .trust-checks{
    display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 24px; font-size:13px; color:var(--paper-dim);
  }

  .why-us-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px;
  }
  .why-edge{
    margin-top:18px; position:relative;
    background:linear-gradient(180deg, rgba(255,201,77,0.11), rgba(255,201,77,0.02) 55%, transparent);
    border:2px solid var(--brass); border-radius:18px; padding:28px 24px 24px;
    box-shadow:0 0 44px rgba(255,201,77,0.18), inset 0 0 30px rgba(255,201,77,0.05);
  }
  .why-edge::before{
    content:"💡 السر"; position:absolute; top:-14px; right:24px; background:var(--brass);
    color:var(--ink); font-size:var(--text-sm); font-weight:700; padding:4px 14px; border-radius:100px;
    box-shadow:0 4px 12px rgba(0,0,0,0.35);
  }
  html[dir="rtl"] .why-edge::before{ right:24px; left:auto; }
  /* Same class of bug as the pricing "Most Popular" ribbon: hardcoded Arabic
     ::before content in the single shared stylesheet, leaking onto the
     English page. */
  html[lang="en"] .why-edge::before{ content:"💡 The Secret"; }
  .why-edge h3{margin:0 0 10px; font-size:16.5px; color:var(--brass);}
  .why-edge p{margin:0 0 10px; color:var(--paper); font-size:14.5px; line-height:1.85;}
  .why-edge p:last-child{margin-bottom:0;}
  .why-edge .lead{font-weight:700; font-size:17px; color:#fff8e1;}
  .why-edge-link{
    display:inline-block; margin-top:4px; color:var(--brass); font-weight:600;
    text-decoration:underline; text-underline-offset:3px;
  }
  .why-item{
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:16px; font-size:14.5px; color:var(--paper); display:flex; align-items:center; gap:8px;
    box-shadow:var(--elev-1);
  }

  .how-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
  @media(max-width:860px){ .how-grid{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:480px){ .how-grid{grid-template-columns:1fr; gap:10px;} }
  .how-step{
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:22px 18px; position:relative; overflow:hidden;
  }
  .how-step-num{
    font-family:'Rakkas','Readex Pro',serif; font-size:34px; color:var(--brass);
    opacity:0.5; line-height:1; margin-bottom:10px;
  }
  .how-step h3{font-size:15.5px; color:var(--paper); margin-bottom:6px;}
  .how-step p{font-size:13px; color:var(--paper-dim); margin:0;}
  .how-arrow{
    display:none; position:absolute; top:26px; inset-inline-end:-11px; color:var(--brass-dim); font-size:18px; z-index:1;
  }
  @media(min-width:861px){ .how-step:not(:last-child) .how-arrow{display:block;} }
  html[dir="rtl"] .how-arrow{transform:scaleX(-1);}

  /* "كيف يعمل؟" على الموبايل: 4 كروت full-width فوق بعض بحشو سخي وريقم زخرفي
     ضخم (34px) كانوا بياخدوا مساحة كبيرة جدًا من الصفحة (شكوى ماجدي 21
     سبتمبر، مؤكدة بلقطة شاشة). الحل هنا بيقلل الحشو والخط بس على الموبايل
     الضيق (نفس الـbreakpoint اللي بيحول الشبكة لعمود واحد أصلاً) — الديسكتوب/
     التابلت (2-4 أعمدة) ماتأثروش لأن المساحة أصلاً مش مشكلة هناك. */
  @media(max-width:480px){
    .how-step{ padding:13px 15px; }
    .how-step-num{ font-size:21px; margin-bottom:4px; opacity:0.45; }
    .how-step h3{ font-size:14px; margin-bottom:3px; }
    .how-step p{ font-size:12.5px; line-height:1.45; }
  }

  /* ===== Promo video ===== */
  .promo-video-outer{
    display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center;
    width:fit-content; max-width:100%; margin:0 auto;
    border:2px solid var(--brass); border-radius:20px; padding:22px;
    background:rgba(255,201,77,0.03);
    box-shadow:0 0 60px rgba(255,201,77,0.12), inset 0 0 40px rgba(255,201,77,0.04);
  }
  .promo-video-wrap{
    display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; width:100%;
  }
  .promo-video-copy{
    flex:1 1 280px; max-width:400px; align-self:stretch;
    display:flex; flex-direction:column; justify-content:center;
    border:1.5px solid var(--brass); border-radius:16px; padding:22px 24px;
    background:linear-gradient(180deg, rgba(255,201,77,0.08), rgba(255,201,77,0.02));
    box-shadow:0 0 24px rgba(255,201,77,0.14);
  }
  .promo-video-copy h2{
    margin-bottom:10px; font-family:'Readex Pro', sans-serif; font-weight:700;
    background:linear-gradient(90deg, var(--brass) 0%, #fff8e1 45%, var(--brass) 90%);
    background-size:100% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 22px rgba(227,164,41,0.45);
  }
  /* اللمعة المتحركة اتشالت من هنا: كانت بتحرّك background-position على عنوان
     مساحته ~26,000px² مع ظل نصّي — يعني المتصفح بيعيد رسم العنوان كله ٦٠ مرة
     في الثانية طول ما الصفحة مفتوحة. التدرّج الذهبي الثابت بيدّي نفس الإحساس
     الفخم من غير أي تكلفة. (لمعة اللوجو فضلت لأن مساحتها 2,554px² — واحد
     من عشرة، وتكلفتها مش محسوسة.) */
  /* Frame matches the source clip's real 9:16 (1080x1920) portrait shape.
     It used to be locked to a wide landscape ratio, which forced object-fit:cover
     to crop away most of the top/bottom of every frame to fill the wrong box —
     that was the actual cause of the video looking cropped/unclear, not the
     video file itself. Sized like a phone screen since that's the shape the
     footage was actually shot/rendered in. */
  .promo-video-frame{
    position:relative; flex:0 1 380px; width:380px; max-width:380px; aspect-ratio:9/16;
    border-radius:22px; border:4px solid var(--brass); overflow:hidden; box-sizing:border-box;
    box-shadow:0 0 50px rgba(255,201,77,0.3), 0 20px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.15);
  }
  /* الوهج النابض: طبقة ورا الإطار بضبابة ثابتة، والحركة على opacity بس. */
  .promo-video-frame::after{
    content:''; position:absolute; inset:0; border-radius:inherit;
    pointer-events:none; z-index:-1;
    box-shadow:0 0 82px rgba(255,201,77,0.52);
    opacity:0; animation:promoFrameGlow 3.4s ease-in-out infinite;
    will-change:opacity;
  }
  @keyframes promoFrameGlow{ 0%,100%{opacity:0;} 50%{opacity:1;} }
  .promo-video{
    width:100%; height:100%; object-fit:cover; border-radius:18px; display:block; background:#000;
  }
  @keyframes promoWaveScroll{
    0%{background-position-y:0;}
    100%{background-position-y:48px;}
  }
  @media(max-width:640px){
    .promo-video-frame{width:100%; max-width:300px; flex-basis:auto; margin:0 auto; border-radius:20px;}
    .promo-video{border-radius:16px;}
    .promo-video-outer{
      padding:0; border:none; background:none; box-shadow:none; border-radius:0;
    }
    .promo-video-copy{padding:18px;}
  }

  .before-after-wrap{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
  .ba-item{position:relative; width:260px;}
  /* Same fix as .cat-tile-cover img below: these are portrait photos taller
     than the 4:5 frame, and the face sits in the upper half, so bias the
     crop upward instead of the default center crop slicing the head off. */
  .ba-item img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%; border-radius:12px; border:1px solid var(--line);}
  .ba-label{
    position:absolute; bottom:10px; left:10px; background:rgba(10,6,20,0.86); color:var(--brass);
    padding:4px 12px; border-radius:100px; font-size:var(--text-sm); font-weight:700;
    /* backdrop-filter removed — see header comment above; opacity bumped 0.75→0.86 to compensate. */
  }
  .ba-arrow{font-size:32px; color:var(--brass);}
  html[dir="rtl"] .ba-arrow{display:inline-block; transform:scaleX(-1);}

  /* Reviews — same display style as Design MIGA 3: a horizontal scrollable
     row of compact text-only cards (no result photo), with filled/empty
     stars reflecting the exact rating rather than always five icons. */
  .testimonials-grid{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .review-photo-thumb{
    position:relative; width:66px; height:66px; border-radius:10px; overflow:hidden;
    border:2.5px solid var(--line); cursor:pointer; flex-shrink:0; transition:border-color .15s ease;
  }
  .review-photo-consent{
    display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; color:var(--paper);
  }
  .review-photo-consent input[type="checkbox"]{width:18px; height:18px; accent-color:var(--brass); cursor:pointer; flex-shrink:0;}
  .review-photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .review-photo-thumb.selected{border-color:var(--brass);}
  .review-photo-thumb.selected::after{
    content:"✓"; position:absolute; top:2px; right:2px; width:18px; height:18px;
    background:var(--brass); color:var(--ink); border-radius:50%; font-size:var(--text-sm);
    font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .proof-results-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px;
  }
  .proof-tile{
    aspect-ratio:4/5; border-radius:12px; overflow:hidden; border:1.5px solid var(--brass-dim);
    box-shadow:0 6px 18px rgba(0,0,0,0.3);
  }
  /* Same upward crop bias as .cat-tile-cover img — these are the same portrait
     result photos, default center-crop was slicing heads off the top. */
  .proof-tile img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
  .testimonial-card{
    flex:0 0 250px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:18px;
  }
  .testimonial-card .stars{font-size:15px; margin-bottom:10px; color:var(--brass);}
  .testimonial-card p{color:var(--paper); font-size:var(--text-base); font-style:italic; margin:0;}
  .testimonial-author{color:var(--brass); font-size:var(--text-sm); margin-top:10px; font-weight:600;}

  .trust-badges{
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:24px;
    box-shadow:var(--elev-1);
  }
  .trust-badge{
    display:flex; align-items:center; gap:8px; font-size:var(--text-base); color:var(--paper);
    padding:8px 16px; border-radius:100px; background:rgba(255,201,77,0.06);
  }
  /* الأيقونة الافتراضية (28px) أكبر من ارتفاع الكبسولة المضغوطة دي —
     نفس أسلوب .ctrl-group-sm الموجود، مقاس أصغر يناسب padding:8px. */
  .trust-badge .icon-badge{ width:22px; height:22px; }
  .trust-badge .icon-badge svg{ width:13px; height:13px; }

  .faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px;}
  .faq-item{
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  }
  .faq-item summary{
    cursor:pointer; font-weight:600; color:var(--paper); font-size:15px; list-style:none;
    display:flex; justify-content:space-between; align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; color:var(--brass); font-size:20px; font-weight:400;}
  .faq-item[open] summary::after{content:"−";}
  .faq-item p{margin:12px 0 0; color:var(--paper-dim); font-size:var(--text-base); line-height:1.8;}

  @media(max-width:620px){
    .before-after-wrap{justify-content:center;}
    .ba-item{width:44%;}
  }
  .btn-primary{
    background:var(--brass); color:var(--ink); font-weight:700; font-size:15px;
    padding:14px 26px; border-radius:var(--radius-sm); transition:.22s;
    box-shadow:0 4px 14px rgba(255,201,77,0.18);
  }
  .btn-primary:hover{background:#ffd873; transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,201,77,0.28);}
  .btn-ghost{
    background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:14px 22px; border-radius:var(--radius-sm); font-size:15px; transition:.22s;
  }
  .btn-ghost:hover{border-color:var(--paper); background:rgba(255,248,236,0.04); transform:translateY(-1px);}

  /* ---------- Cinema film-strip frame ---------- reuses the same perforation
     motif as .sprockets (the decorative divider elsewhere on the page) so
     this reads as a deliberate part of the same visual language rather than
     a one-off effect: a continuous row of small round "sprocket holes"
     along the top and bottom edges, on a black film-stock background,
     exactly like real 35mm strip stock — simple, not fussy, and it doesn't
     depend on where any individual frame happens to fall. */
  .contact-sheet{
    position:relative;
    overflow:hidden; border-radius:6px; direction:ltr;
    background:#0a0a0a;
    border:1px solid var(--brass-dim);
    padding:13px 0;
  }
  .contact-sheet::before, .contact-sheet::after{
    content:''; position:absolute; left:0; right:0; height:13px;
    background-image: radial-gradient(circle, #0a0a0a 2.6px, transparent 3px);
    background-size:20px 13px; background-position:10px center;
    background-color:var(--brass-dim);
    z-index:2;
  }
  .contact-sheet::before{ top:0; }
  .contact-sheet::after{ bottom:0; }
  .strip-track{
    display:flex; gap:2px; width:max-content; direction:ltr;
    animation:scrollStrip 38s linear infinite;
  }
  /* (hover: hover) only matches devices with a real pointer (mouse/trackpad)
     — on a touchscreen, tapping the strip can leave it stuck in a ":hover"
     state with no mouse ever available to move away and clear it, which is
     exactly what made the strip look permanently frozen on mobile. Desktop
     visitors still get the "pause to look closer" behavior; touch visitors
     just never trigger it in the first place. */
  @media(hover:hover){
    .strip-track:hover{animation-play-state:paused;}
  }
  @keyframes scrollStrip{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .frame{position:relative; width:150px; height:190px; background:var(--ink-3); flex-shrink:0;}
  /* Same upward crop bias as .cat-tile-cover img — this strip is the same
     portrait product photos, default center-crop was slicing heads off the top. */
  .frame img{width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:grayscale(35%) contrast(1.05);}
  .frame .fno{
    position:absolute; bottom:6px; left:6px; font-size:var(--text-sm); letter-spacing:1px;
    color:var(--brass); background:rgba(0,0,0,0.55); padding:2px 6px; border-radius:3px;
  }

  /* ===== Section shells ===== */
  section.cat-section{max-width:var(--container-w); margin:0 auto; padding:52px 24px 16px;}
  .section-head{
    display:flex; align-items:center; justify-content:flex-start; gap:12px;
    margin-bottom:18px; padding-bottom:12px;
    border-bottom:1px solid transparent;
    border-image:linear-gradient(90deg, var(--line), transparent) 1;
  }
  .section-head h2{font-size:32px; font-weight:700; letter-spacing:0.2px;}
  .cat-section-heading{
    font-size:clamp(18px,4vw,26px); font-weight:700; text-align:center;
    color:var(--paper); margin-bottom:22px; padding-top:6px;
  }
  /* (brand-mega no longer needs a per-context color override — the red
     blink above already reads clearly in every context on the page) */
  .section-head .tag{
    font-size:13px; padding:6px 13px; border-radius:100px; font-weight:700;
    letter-spacing:0.5px;
  }
  .tag-children{background:rgba(79,240,192,0.32); color:var(--sage);}
  .tag-male{background:rgba(92,184,255,0.32); color:var(--steel);}
  .tag-female{background:rgba(255,143,184,0.32); color:var(--rose);}
  .tag-business{background:rgba(92,184,255,0.32); color:var(--steel);}
  .tag-cinematic{background:rgba(255,143,184,0.32); color:var(--rose);}
  .tag-luxury{background:rgba(255,201,77,0.26); color:var(--brass);}
  .tag-artistic{background:rgba(79,240,192,0.32); color:var(--sage);}
  .tag-magazine{background:rgba(227,164,41,0.26); color:var(--brass-dim);}
  /* 2026-09-18: shared neutral tint for any category added from the admin
     panel, beyond the original 8 hand-tinted ones above — see catColorKey()
     in app.js. */
  .tag-default{background:rgba(150,150,168,0.28); color:var(--paper);}

  /* ===== Category tiles: one icon per section, built from that section's own
     photos, arranged in neat aligned rows on desktop and mobile. Clicking a
     tile opens (and scrolls to) the matching collapsible category section
     further down the page. ===== */
  /* One horizontal, snap-scrolling line — deliberately the SAME interaction as
     every product row on the page, so the whole site is swiped the same way
     instead of asking a visitor to scroll a grid here and swipe a row a few
     inches lower. The widths below always leave the next tile peeking past
     the edge: without that peek nothing signals there are more categories,
     and a carousel that looks like it holds one item gets treated like it
     holds one item. */
  .cat-tiles-grid{
    display:flex; gap:18px; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:4px;
    overscroll-behavior-x:contain;
  }
  .cat-tiles-grid::-webkit-scrollbar{display:none;}
  .cat-tiles-grid > .cat-tile{
    flex:0 0 calc((100% - 4*18px) / 5);
    scroll-snap-align:start;
  }
  @media(max-width:1180px){ .cat-tiles-grid > .cat-tile{flex-basis:calc((100% - 3*18px) / 4);} }
  @media(max-width:980px){ .cat-tiles-grid > .cat-tile{flex-basis:calc((100% - 2*18px) / 3);} }
  @media(max-width:700px){ .cat-tiles-grid{gap:14px;} .cat-tiles-grid > .cat-tile{flex-basis:calc((100% - 14px) / 2);} }
  @media(max-width:560px){
    /* Same 82% + centered snap as .grid > .card, for the same reason: one tile
       mostly fills the view with a clear peek of its neighbour, and centering
       the snap point avoids the sub-pixel sliver edge-snapping leaves behind. */
    .cat-tiles-grid > .cat-tile{ flex-basis:82%; scroll-snap-align:center; }
  }
  .cat-tile{
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    width:100%; color:var(--paper); border-radius:16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 22%, rgba(255,255,255,0) 58%),
      var(--ink-2);
    border:1px solid var(--glass-edge);
    box-shadow:var(--glass-lift);
    padding:8px; text-align:center; transition:transform .15s ease, border-color .15s ease;
  }
  .cat-tile:hover{
    border-color:rgba(255,201,77,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 16px 34px rgba(0,0,0,0.48);
  }
  /* نفس علاج .card:hover بالظبط — والتايل ده كان فاضل.
     صف الأقسام (.cat-tiles-grid) عليه overflow-y:hidden، والرفعة دي كانت
     بتطلّع التايل 2px فوق حافة الصف فيتقص من فوق. وعلى الآيفون اللمس
     بيفعّل :hover وبيفضل عالق، فالقص بيحصل بالظبط وانت بتسحب الصف.
     أول مرة صلّحت .card ونسيت التوأم ده — نفس الغلطة نوعًا. */
  @media (hover:hover) and (pointer:fine){
    .cat-tile:hover{ transform:translateY(-2px); }
  }
  .cat-tile:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .cat-tile.open{ border-color:var(--brass); }
  /* One tall cover photo per category rather than a four-way collage. A single
     large image reads as a deliberate choice; four thumbnails squeezed into
     squares crop faces off and look accidental. The 4:5 frame matches the
     portrait ratio the photos are actually produced in, so nothing is lost. */
  .cat-tile-cover{
    position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
    background-color:var(--ink-3);
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22340%22%20height=%22150%22%3E%3Cg%20transform=%22rotate(-13%20170%2075)%22%3E%3Ctext%20x=%2216%22%20y=%2282%22%20font-family=%22serif%22%20font-size=%2219%22%20letter-spacing=%222%22%20fill=%22%23e8b64a%22%20fill-opacity=%220.14%22%20text-anchor=%22start%22%3EMiga-Photobook%3C/text%3E%3Cg%20transform=%22translate(176,50)%20scale(0.62)%22%20fill=%22none%22%20stroke=%22%23e8b64a%22%20stroke-opacity=%220.16%22%20stroke-width=%222.4%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%2014%20C19%2010%2010%209%205%2011%20V37%20C10%2035%2019%2036%2024%2040%20V14%20Z%22/%3E%3Cpath%20d=%22M24%2014%20C29%2010%2038%209%2043%2011%20V37%20C38%2035%2029%2036%2024%2040%20V14%20Z%22/%3E%3Crect%20x=%2214%22%20y=%2218%22%20width=%2220%22%20height=%2214%22%20rx=%223%22/%3E%3Crect%20x=%2220%22%20y=%2214%22%20width=%228%22%20height=%225%22%20rx=%221.5%22/%3E%3Ccircle%20cx=%2224%22%20cy=%2225%22%20r=%224.5%22/%3E%3C/g%3E%3Cimage%20x=%22236%22%20y=%2266%22%20width=%2288%22%20height=%2220%22%20opacity=%220.15%22%20href=%22data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALIAAAAoBAMAAACoWb1+AAAAGFBMVEXstkjotUjntUnntUn/5RkAAADntUnntUn9k1jEAAAACHRSTlMeXtCwAwD9j2FlWcYAAATVSURBVHjapZbfbxRVFMc/M7PTqpUyLSmalqTtbpsQi8kmFmOswiDiAyVk0rQ+oVYFn/tA/Dt4NhJWpC+ltNPSEiOYLgiYSAOLATVUkvJQXgp0LD+E3pkdH+bHnd126aL3Zebee+733vs933vOUQYI2inNYv1WTM9TZVPDr3+wtRrzn+/b1SJrXcHXq0v/s761eEvtEnHPn9haxZkV/AqnWYSfoimt9FRD1bCRwq1g8fZZ0X8gohma5MyMXQ2yi7+2B12nbxI9H+5vu0ckGVZVHtTx1zb4m1QHOGHv3XoJ52GujyzsZ5UMLsIcIsLTF1Yf6nnaEHefZl4urqxp0FEnOoa1hjVm/Fd4ut6ZJ7ODGDVrG6SOTtF3PZbdnRY5U4nABHK3lyMnKlj0mSgxuZPZ5YhyVirKKUZ2s8dNsqlqXtdhUtkXeN0KwAaMhNRKdpFHEw4sxjyvjzzF57MUGZSj0yWv61K8jwLUlun9ev3Z5+l5j+3HmgXaFpPBwmqLfnUxKqOADkCnqX381yrYsXpbBfZuAFMvCEDctgFhKgHmVRtQ6AH89jzY7EGyllfAdYDts2U+El9qhgrotw3PYF4BlrtbAS2gnjO7h4BpagHN6QVD34hkzQCmgyt/suXcyeQrAUMFceGu44FTA3TzPuCTsgG/LXSXAGaoDUHz0XqT+AKpxwNfNTTKMA49KvBZ1h2GfS4IB1V63TNRgF5S4Fv4DjkQMTA5gLFvJvKxwCMyjAkUVdj6rYlJC3QfakGzIfVtpAQFgvN7QAEHZhKOroGduwZ2dOWlDEUeqDUfFFS1dgh9x65wx3G3gAHsB2DKy6dsoAdQKTDI3oK30BZHOCcUunYvwXAvMMOn+OpSNPZEB6PYwiCgYAFDF97EAGo8OC2asdFbl71sTsI4AOJCvztizywtPQaRUUBYaNlUqtCeDhT/cAUG7+eb6ubh0H0A+4ORgQM5OLQIhnK+8z0b2g9K3Vvcm4UvHlrK99adbeMAnZuVcxxyAFf5WkaYx9zJyn9oSMycj4OS8iAuETaFP+OmXBmbqVLjiQzHzRKr6WRH5ohiJAWT0vSyYsAzVQ4dgahM8QyAQmJlfDN3mLKQ5J0IFsfSZ/pWgSaZchRLrp80QO4zBeyLzBplItRzAN5xC+gN9z1hgGLqzScL2g0niDfu7CbI/NEMuK8GBG75JQ14o7sB77UVAG90U+LWmbnXuf6DBaCOuM3gjvUez3JsK1r6JWWgLJZsPpZI9m7Tkrx747jJC7TyBKy5ySpiwiNRBDj8H+TTOolq63AxIRC3YuUifgs3PZms1LpKbXpWBGL7tiC4uJoX510hMpVLyjeuBCnd/bMlWlt+5jNcgmX0wKuXErpeNisWO1zkIxvANffLSq0UWQziwI1Qnq4VSxrxqOz1JEsaC88KXpTWAdk1kMVlcMAJDMVCuAAQl7Nyl/KmGESeducQRhnPonPkWr2JSEOm5dGT1lPXiu/gCoD0yLV6E6+9Ihv36ibbADJ1bufwh6E3Yz2Lu1mAq+2AO9X7uwmwcR6g3YmDVIU22h+m7EZTTFtlbOgNQfUAkLL02wBKQMAcAMPP0W6/rNR0a5We60eBq9F4nw2MGWHRCPxowX99KbuPcqUz7u0c5dfoNfd9x9mFFwTmX14YvJfgLObsAAAAAElFTkSuQmCC%22/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat;
    background-position:center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 -14px 26px -18px rgba(0,0,0,0.8);
  }
  .cat-tile-cover::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(158deg,
      rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.045) 15%, rgba(255,255,255,0) 40%);
  }
  .cat-tile-cover img{
    width:100%; height:100%; object-fit:cover; display:block;
    /* Faces sit in the upper half of a portrait, so bias the crop upward and
       never slice the head off when the frame is tighter than the photo. */
    object-position:center 22%;
    transition:transform .35s ease;
  }
  .cat-tile:hover .cat-tile-cover img{transform:scale(1.05);}

  /* A small, deliberate control for stepping through the category's best
     photos. Kept separate from the tile itself so a tap on the tile always
     does the one thing it promises: open the category. */
  .cat-tile-cover .ct-cycle{
    position:absolute; inset-inline-start:8px; inset-block-start:8px; z-index:3;
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,12,16,0.72); border:1px solid rgba(255,255,255,0.16);
    color:var(--paper); font-size:15px; line-height:1; cursor:pointer;
    transition:background .15s ease, transform .25s ease, color .15s ease;
  }
  .cat-tile-cover .ct-cycle:hover{
    background:rgba(255,201,77,0.9); color:var(--ink); transform:rotate(180deg);
  }
  .cat-tile-cover .ct-cycle:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  /* Brief fade while the photo is exchanged, so the swap reads as intentional. */
  .cat-tile-cover img.swapping{opacity:0;}

  @media (prefers-reduced-motion: reduce){
    .cat-tile:hover .cat-tile-cover img{transform:none;}
    .cat-tile-cover .ct-cycle:hover{transform:none;}
    .cat-tile-cover img{transition:none;}
  }
  /* Dark wash under the text so the label stays readable over any photo. */
  .cat-tile-cover::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top,
      rgba(8,8,12,0.92) 0%, rgba(8,8,12,0.55) 28%, rgba(8,8,12,0) 55%);
  }
  .cat-tile-cover .ct-count{
    position:absolute; inset-inline-end:8px; inset-block-start:8px; z-index:2;
    background:rgba(12,12,16,0.78); color:var(--paper); font-size:var(--text-sm); font-weight:700;
    padding:4px 9px; border-radius:100px; letter-spacing:0.2px;
    border:1px solid rgba(255,255,255,0.10);
  }
  .cat-tile-cover .ct-empty{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:14px; font-size:var(--text-sm); color:var(--paper-dim); text-align:center;
  }
  /* The label sits on the photo instead of below it, so the tile is one block
     of image rather than a picture with a caption stuck underneath. */
  .cat-tile-label{
    position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:0 10px 14px;
  }
  /* ===== Unified icon+name chip, used for a category's identity everywhere
     it appears (tile overview, opened section header, search results) — one
     visual unit instead of a plain name plus a separate colour tag repeating
     the same information. The tint always comes from the same tag-<cat>
     palette already used across the site, so the colour coding survives even
     though the redundant text is gone. New categories added from the admin
     panel pick this up automatically since it's generated by the same
     function that builds the tile. */
  .cat-chip{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 14px; border-radius:100px; font-weight:700; font-size:var(--text-base);
    letter-spacing:0.2px; line-height:1;
    /* backdrop-filter removed — see header comment above; this chip repeats on
       every product card, so it was one of the biggest single sources of extra
       GPU layers on Android. The tag-<cat> background tints below are bumped
       slightly darker to keep the pill readable without the blur. */
  }
  .cat-chip .cicon{display:flex; font-size:15px;}
  .cat-chip .cicon svg{width:1em; height:1em; display:block;}
  @media(max-width:460px){
    .cat-chip{font-size:var(--text-sm); padding:5px 11px; gap:5px;}
    .cat-chip .cicon{font-size:13px;}
  }
  .cat-tile .sh-chevron{
    font-size:13px; color:var(--brass); transition:transform .2s; margin-inline-start:4px;
  }
  .cat-tile.open .sh-chevron{transform:rotate(180deg);}

  /* Dedicated icon-only tints for the opened section header, sharing the
     exact colours of the tag-<cat> palette above but without a pill
     background — the header already has its own dark bg, so the icon alone
     carries the category colour. */
  .icon-children{color:var(--sage);}
  .icon-male,.icon-business{color:var(--steel);}
  .icon-female,.icon-cinematic{color:var(--rose);}
  .icon-luxury{color:var(--brass);}
  .icon-artistic{color:var(--sage);}
  .icon-magazine{color:var(--brass-dim);}
  .icon-default{color:var(--paper-dim);}

  /* Product row: one horizontal, snap-scrolling line instead of a wrapped
     grid. The arrows under the row scroll by exactly one container width, so
     on desktop that is one full set of 5 cards and on mobile it is exactly
     one card — no page numbers needed. */
  .grid{
    display:flex; gap:18px; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:4px;
    /* Same header-clearance reservation as .card — some scroll paths
       target the row container rather than an individual card inside it. */
    scroll-margin-top:300px;
    /* Without this, dragging past the first (or last) card triggers iOS
       Safari's native elastic "rubber-band" overscroll bounce — which
       briefly reveals whatever sits behind the carousel's edge instead of
       just stopping cleanly, reading as the card being shifted/misaligned.
       This contains the bounce to the carousel itself. */
    overscroll-behavior-x:contain;
  }
  .grid::-webkit-scrollbar{display:none;}
  .grid > .card{
    flex:0 0 calc((100% - 4*18px) / 5);
    scroll-snap-align:start;
  }
  @media(max-width:1180px){ .grid > .card{flex-basis:calc((100% - 3*18px) / 4);} }
  @media(max-width:980px){ .grid > .card{flex-basis:calc((100% - 2*18px) / 3);} }
  @media(max-width:700px){ .grid{gap:14px;} .grid > .card{flex-basis:calc((100% - 14px) / 2);} }
  @media(max-width:560px){
    .grid > .card{
      flex-basis:82%;
      /* On mobile, one card mostly fills the view with a peek of its
         neighbor. "start" snapping aligns the card's RIGHT edge (the RTL
         inline-start) to the container's edge — but flex-basis:82%
         combined with the row's gap leaves a few sub-pixels of rounding
         error per card, so that "exact" right-edge alignment consistently
         left a stray sliver of empty space bleeding through on the left
         instead of being split evenly. Centering the snap point removes
         the dependency on either edge being pixel-perfect, so the card
         sits centered regardless. */
      scroll-snap-align:center;
    }
  }
  .grid > .empty-note{flex:0 0 100%;}

  /* Results showcase: smaller, denser thumbnails than the product grid — still
     click-to-zoom (openLightbox), just meant to be skimmed quickly rather than
     shopped from. */
  .results-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; align-items:stretch;}
  .results-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; overflow:visible;}
  .results-grid > .card{flex:none;}
  .results-grid .card-media{aspect-ratio:1/1;}
  @media(max-width:1180px){ .results-grid{grid-template-columns:repeat(5, 1fr);} }
  @media(max-width:700px){ .results-grid{grid-template-columns:repeat(4, 1fr);} }
  @media(max-width:460px){ .results-grid{grid-template-columns:repeat(3, 1fr); gap:8px;} }
  .grid-nav-wrap{position:relative;}
  .order-status-spinner{
    width:34px; height:34px; margin:6px auto 0; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--brass);
    animation:mp-spin 0.8s linear infinite;
  }
  @keyframes mp-spin{ to{ transform:rotate(360deg); } }
  /* ---------- Progress أثناء توليد الصورة بالذكاء الاصطناعي ----------
     الـWorker مالوش نداء وسيط بيرجع "استلمنا"/"شغالين دلوقتي" — نداء
     واحد بس بيرجع لما التوليد يخلص بالكامل. فالخطوة التالتة هنا بتتفعّل
     بعد وقت تقديري (مش حالة حقيقية جاية من السيرفر)، وده موضّح في تعليق
     الجافاسكريبت المسؤول عن التوقيت. الهدف بصري بحت: يطمّن العميل إن
     حاجة شغالة فعلاً بدل ما يشوف زرار معطّل وسكون تام. */
  .transform-progress{
    display:flex; flex-direction:column; gap:11px; margin:14px 0;
    padding:14px 16px; border-radius:12px; background:var(--ink-2); border:1px solid var(--line);
  }
  .tp-step{
    display:flex; align-items:center; gap:10px; font-size:13.5px;
    color:var(--paper-dim); opacity:0.5; transition:opacity .2s ease, color .2s ease;
  }
  .tp-step.done, .tp-step.active{ opacity:1; color:var(--paper); }
  .tp-step .tp-icon{ width:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
  .tp-step .tp-spin{
    display:inline-block; width:14px; height:14px; border-radius:50%;
    border:2px solid var(--line); border-top-color:var(--line);
  }
  .tp-step.active .tp-spin{
    border-top-color:var(--brass); animation:mp-spin 0.8s linear infinite;
  }
  @media(prefers-reduced-motion: reduce){ .tp-step.active .tp-spin{ animation:none; border-top-color:var(--brass); } }
  /* Pagination bar: left arrow — page numbers — right arrow, replacing the
     small dots. Kept in a fixed left-to-right order (arrow, numbers, arrow)
     regardless of the page's RTL text direction, since page numbers read the
     same way for everyone and this avoids ambiguity about which arrow means
     "forward". */
  .grid-page-dots{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:18px; direction:ltr;
  }
  .grid-page-dots .gp-arrow{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:46px; border-radius:12px;
    background:var(--ink-2); border:2px solid var(--brass); color:var(--brass);
    font-size:26px; font-weight:700; cursor:pointer; line-height:1;
    box-shadow:0 2px 10px rgba(0,0,0,0.35);
  }
  .grid-page-dots .gp-arrow:hover{background:rgba(255,201,77,0.12);}
  .grid-page-dots .gp-arrow:disabled{opacity:0.28; cursor:default; background:transparent;}
  .grid-page-dots .gp-nums{display:none;}
  .grid-page-dots .gp-num{
    min-width:34px; height:34px; padding:0 6px; border-radius:8px;
    background:transparent; border:none; color:var(--paper-dim);
    font-size:19px; font-weight:700; cursor:pointer;
  }
  .grid-page-dots .gp-num:hover{color:var(--paper);}
  .grid-page-dots .gp-num.active{color:var(--brass); background:rgba(255,201,77,0.14);}
  @media(max-width:640px){
    .grid-page-dots{gap:22px; margin-top:14px;}
    .grid-page-dots .gp-arrow{width:64px; height:50px; font-size:30px;}
  }
  .empty-note{
    color:var(--paper-dim); font-size:14.5px; border:1px dashed var(--line);
    border-radius:10px; padding:26px; text-align:center;
  }

  /* ===== Product Card ===== */
  /* ===== الطبقة الزجاجية (8 سبتمبر 2026) =====
     كل اللمعة هنا تدرّجات وظلال ثابتة: المتصفح يرسمها مرة ويخزّنها.
     مفيش backdrop-filter ولا blur — دي بالظبط الخاصية اللي اتشالت في
     5 سبتمبر لأنها كانت بتعمل لاج على كروم أندرويد، ومرجعناهاش.
     التدرّج دايمًا أبيض شفاف *فوق* لون الخلفية الأصلي (مش بديل عنه)،
     عشان ثيمات الألوان والوضع النهاري يفضلوا شغالين زي ما هم. */
  .card{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 22%, rgba(255,255,255,0) 58%),
      var(--ink-2);
    border:1px solid var(--glass-edge); border-radius:var(--radius-lg);
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    box-shadow:var(--glass-lift);
    /* Reserve room for the sticky header on ANY scroll that targets this
       card. Every JS-side attempt to compute this offset by hand kept
       breaking, because the numbers involved (header height, section
       padding) are mid-transition at the moment the calculation runs, and
       because manual finger-swipes and CSS scroll-snap never went through
       that JS path at all. scroll-margin-top is the browser's own native
       mechanism for exactly this problem: it tells the browser "when
       scrolling to this element, treat its top edge as being this much
       higher than it is", and it's honoured uniformly by scrollIntoView,
       programmatic scrolling, scroll-snap, and anchor jumps alike — no
       measurement, no timing, no code path to miss. 300px comfortably
       clears the header in its tallest (expanded) state. */
    scroll-margin-top:300px;
  }
  .card:hover{
    border-color:rgba(255,201,77,0.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.34),
      0 16px 34px rgba(0,0,0,0.48),
      0 0 0 1px rgba(255,201,77,0.18);
  }
  /* الرفعة (translateY(-4px)) على أجهزة الماوس بس.
     على الآيفون اللمس بيفعّل :hover وبيفضل عالق بعد الدوسة — فأول ما تحط
     صباعك على الكارت عشان تسحب الصف يمين وشمال، الكارت بيرتفع 4px، وصف
     الكروت عليه overflow-y:hidden فبيقص 3px من فوقه (مقيسة). ده اللي كان
     بيتشاف كـ«جزء مقطوع من أعلى عند التحريك».
     الحدود والظل فضلوا على :hover عادي — دول مابيخرجوش بره الصف. */
  @media (hover:hover) and (pointer:fine){
    .card:hover{ transform:translateY(-4px); }
  }
  /* 3/4 بدل 4/5: صورة أطول = شغل أكتر وإطار أقل. الصورة هي المنتج. */
  /* الخلفية اللونية اللي بتتحدّد من لوحة التحكم بقت شايلة علامة الموقع —
     نفس شكل خلفية الصفحة (اسم مكرّر مايل بلون نحاسي خفيف). بتبان في اللحظة
     اللي الصورة لسه بتتحمّل فيها، ودي لحظة حقيقية على شبكة موبايل: فالمستطيل
     اللوني الفاضي بقى لحظة علامة تجارية بدل فراغ ميت.

     ليه صورة خلفية (SVG) مش عنصر ::before؟ عشان الخلفية بترسم **تحت كل
     المحتوى** تلقائيًا — الصورة، الشارات، القلب، لمعة الزجاج — من غير ما
     نلمس ترتيب الطبقات (z-index) بتاع أي حاجة فيهم. أي حل بعنصر كان
     هيحتاج نعيد ترتيب أربع طبقات، وده مخاطرة مالهاش لزوم.
     اللون النحاسي مكتوب صراحةً لأن متغيّرات CSS مابتشتغلش جوه data URI —
     وهو ثابت على كل الثيمات (الثيمات بتغيّر --header-bg و--media-bg بس).

     ⚠ الاسم العربي **صورة** مش نص، عن قصد: النسخة الأولى كتبته كـ<text>،
     وسفاري على الآيفون طلّعه **معكوس ومفكوك الحروف** — الـSVG اللي
     بيتستخدم كخلفية بيترسم في سياق معزول من غير اتجاه ولا تشكيل عربي،
     فكل متصفح بيتصرّف بمزاجه. كروم كان بيرسمه صح فالغلطة عدّت من
     الاختبار عندي (مافيش WebKit في بيئة الفحص) وباظت عند المستخدم.
     الصورة مالهاش تشكيل ولا اتجاه — بترسم بالظبط زي ما هي في أي
     متصفح. الحرف اللاتيني فاضل نص عادي لأنه مالوش المشكلة دي. */
  .card-media{
    position:relative; aspect-ratio:3/4; overflow:hidden;
    background-color:var(--media-bg);
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22340%22%20height=%22150%22%3E%3Cg%20transform=%22rotate(-13%20170%2075)%22%3E%3Ctext%20x=%2216%22%20y=%2282%22%20font-family=%22serif%22%20font-size=%2219%22%20letter-spacing=%222%22%20fill=%22%23e8b64a%22%20fill-opacity=%220.14%22%20text-anchor=%22start%22%3EMiga-Photobook%3C/text%3E%3Cg%20transform=%22translate(176,50)%20scale(0.62)%22%20fill=%22none%22%20stroke=%22%23e8b64a%22%20stroke-opacity=%220.16%22%20stroke-width=%222.4%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%2014%20C19%2010%2010%209%205%2011%20V37%20C10%2035%2019%2036%2024%2040%20V14%20Z%22/%3E%3Cpath%20d=%22M24%2014%20C29%2010%2038%209%2043%2011%20V37%20C38%2035%2029%2036%2024%2040%20V14%20Z%22/%3E%3Crect%20x=%2214%22%20y=%2218%22%20width=%2220%22%20height=%2214%22%20rx=%223%22/%3E%3Crect%20x=%2220%22%20y=%2214%22%20width=%228%22%20height=%225%22%20rx=%221.5%22/%3E%3Ccircle%20cx=%2224%22%20cy=%2225%22%20r=%224.5%22/%3E%3C/g%3E%3Cimage%20x=%22236%22%20y=%2266%22%20width=%2288%22%20height=%2220%22%20opacity=%220.15%22%20href=%22data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALIAAAAoBAMAAACoWb1+AAAAGFBMVEXstkjotUjntUnntUn/5RkAAADntUnntUn9k1jEAAAACHRSTlMeXtCwAwD9j2FlWcYAAATVSURBVHjapZbfbxRVFMc/M7PTqpUyLSmalqTtbpsQi8kmFmOswiDiAyVk0rQ+oVYFn/tA/Dt4NhJWpC+ltNPSEiOYLgiYSAOLATVUkvJQXgp0LD+E3pkdH+bHnd126aL3Zebee+733vs933vOUQYI2inNYv1WTM9TZVPDr3+wtRrzn+/b1SJrXcHXq0v/s761eEvtEnHPn9haxZkV/AqnWYSfoimt9FRD1bCRwq1g8fZZ0X8gohma5MyMXQ2yi7+2B12nbxI9H+5vu0ckGVZVHtTx1zb4m1QHOGHv3XoJ52GujyzsZ5UMLsIcIsLTF1Yf6nnaEHefZl4urqxp0FEnOoa1hjVm/Fd4ut6ZJ7ODGDVrG6SOTtF3PZbdnRY5U4nABHK3lyMnKlj0mSgxuZPZ5YhyVirKKUZ2s8dNsqlqXtdhUtkXeN0KwAaMhNRKdpFHEw4sxjyvjzzF57MUGZSj0yWv61K8jwLUlun9ev3Z5+l5j+3HmgXaFpPBwmqLfnUxKqOADkCnqX381yrYsXpbBfZuAFMvCEDctgFhKgHmVRtQ6AH89jzY7EGyllfAdYDts2U+El9qhgrotw3PYF4BlrtbAS2gnjO7h4BpagHN6QVD34hkzQCmgyt/suXcyeQrAUMFceGu44FTA3TzPuCTsgG/LXSXAGaoDUHz0XqT+AKpxwNfNTTKMA49KvBZ1h2GfS4IB1V63TNRgF5S4Fv4DjkQMTA5gLFvJvKxwCMyjAkUVdj6rYlJC3QfakGzIfVtpAQFgvN7QAEHZhKOroGduwZ2dOWlDEUeqDUfFFS1dgh9x65wx3G3gAHsB2DKy6dsoAdQKTDI3oK30BZHOCcUunYvwXAvMMOn+OpSNPZEB6PYwiCgYAFDF97EAGo8OC2asdFbl71sTsI4AOJCvztizywtPQaRUUBYaNlUqtCeDhT/cAUG7+eb6ubh0H0A+4ORgQM5OLQIhnK+8z0b2g9K3Vvcm4UvHlrK99adbeMAnZuVcxxyAFf5WkaYx9zJyn9oSMycj4OS8iAuETaFP+OmXBmbqVLjiQzHzRKr6WRH5ohiJAWT0vSyYsAzVQ4dgahM8QyAQmJlfDN3mLKQ5J0IFsfSZ/pWgSaZchRLrp80QO4zBeyLzBplItRzAN5xC+gN9z1hgGLqzScL2g0niDfu7CbI/NEMuK8GBG75JQ14o7sB77UVAG90U+LWmbnXuf6DBaCOuM3gjvUez3JsK1r6JWWgLJZsPpZI9m7Tkrx747jJC7TyBKy5ySpiwiNRBDj8H+TTOolq63AxIRC3YuUifgs3PZms1LpKbXpWBGL7tiC4uJoX510hMpVLyjeuBCnd/bMlWlt+5jNcgmX0wKuXErpeNisWO1zkIxvANffLSq0UWQziwI1Qnq4VSxrxqOz1JEsaC88KXpTWAdk1kMVlcMAJDMVCuAAQl7Nyl/KmGESeducQRhnPonPkWr2JSEOm5dGT1lPXiu/gCoD0yLV6E6+9Ihv36ibbADJ1bufwh6E3Yz2Lu1mAq+2AO9X7uwmwcR6g3YmDVIU22h+m7EZTTFtlbOgNQfUAkLL02wBKQMAcAMPP0W6/rNR0a5We60eBq9F4nw2MGWHRCPxowX99KbuPcqUz7u0c5dfoNfd9x9mFFwTmX14YvJfgLObsAAAAAElFTkSuQmCC%22/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat;
    background-position:center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 -14px 26px -18px rgba(0,0,0,0.8);
  }
  /* انعكاس ضوء مائل خفيف — بيدي إحساس الزجاج من غير ما يغسل الصورة */
  .card-media::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(158deg,
      rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.045) 15%, rgba(255,255,255,0) 40%);
  }
  /* Same upward crop bias as .cat-tile-cover img above: these product photos
     are much taller than the 4:5 card, and faces sit in the upper half, so
     the old default center-crop was slicing heads off the top of every card. */
  .card-media img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}
  /* اسم المنتج اتشال من فوق الصورة (8 سبتمبر 2026): هو مكتوب تحتها في
     .card-title أصلاً، ونص فوق الصورة بيقلّل من قيمتها — المعرض بيعرض
     الشغل نضيف. رجوعه = شيل السطر ده وبس. */
  .card-badge{ display:none; }
  .card-badge{
    position:absolute; top:10px; right:10px; left:10px; font-size:var(--text-sm); letter-spacing:0.3px;
    background:rgba(10,6,20,0.88); color:var(--brass);
    padding:5px 10px; border-radius:8px; font-weight:600; text-align:center;
    max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    /* backdrop-filter removed — see header comment above. This is the single
       biggest offender: one badge per product card, so a page showing e.g.
       20 cards meant 20 separate blur/compositing layers at once on Android
       Chrome — a direct cause of scroll lag/jitter. Opacity bumped 0.72→0.88
       to stay fully legible without it. */
  }
  /* ===== "My favourites" control =====
     One heart, used on a product photo and on a category tile. Sits in the
     corner the 🔥 order-count badge does NOT use (that one is bottom
     inline-start), so the two never collide on a card that has both. Outline
     when off, filled gold when on — the fill is the whole signal, so it stays
     readable at a glance on any photo underneath. */
  /* Count chip next to "My favourites" in the side drawer — the row is the
     only way into that list, so the number is what tells a returning visitor
     they left something there without having to open it and look. */
  .drawer-fav-count{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 7px; margin-inline-start:6px;
    border-radius:100px; background:rgba(255,201,77,0.18); color:var(--brass);
    font-size:var(--text-sm); font-weight:700; line-height:1;
  }
  .fav-btn{
    opacity:0.78;
    position:absolute; inset-inline-end:8px; bottom:8px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,12,16,0.72); border:1px solid rgba(255,255,255,0.16);
    color:var(--paper); cursor:pointer; padding:0;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .fav-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round;}
  .card:hover .fav-btn, .card:hover .request-count-overlay,
  .cat-tile:hover .fav-btn{ opacity:1; }
  .fav-btn:hover{background:rgba(255,201,77,0.16); color:var(--brass); opacity:1;}
  .fav-btn:active{transform:scale(0.92);}
  .fav-btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .fav-btn.is-fav{color:var(--brass); border-color:rgba(255,201,77,0.55);}
  .fav-btn.is-fav svg{fill:currentColor;}
  /* On a category tile the heart takes the free bottom inline-start corner —
     the name chip is centred and the count/cycle controls own the top row. */
  .cat-tile-cover .fav-btn{inset-inline-end:auto; inset-inline-start:8px; width:30px; height:30px;}
  .cat-tile-cover .fav-btn svg{width:16px; height:16px;}

  /* زرار "أضِفه للسلة" — نفس معمارية زرار القلب بالظبط بس في الركن
     المقابل (بداية الكارت بدل نهايته) عشان الاتنين يتعايشوا من غير تداخل،
     ولونه ذهبي (نفس لون العلامة) بدل الوردي/البراص المستخدم في القلب لما
     يتفعّل، عشان يتفرق بصريًا عن المفضلة رغم تشابه الشكل. */
  .cart-btn{
    opacity:0.78;
    position:absolute; inset-inline-start:8px; bottom:8px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,12,16,0.72); border:1px solid rgba(255,255,255,0.16);
    color:var(--paper); cursor:pointer; padding:0;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .cart-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round;}
  .card:hover .cart-btn{ opacity:1; }
  .cart-btn:hover{background:rgba(255,201,77,0.16); color:var(--brass); opacity:1;}
  .cart-btn:active{transform:scale(0.92);}
  .cart-btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .cart-btn.in-cart{color:var(--brass); border-color:rgba(255,201,77,0.55); background:rgba(255,201,77,0.14);}

  /* 21 سبتمبر 2026 (طلب ماجدي): تصغير ارتفاع كروت المنتجات — الحشو الداخلي
     والمسافة بين العناصر كانوا زيادة عن اللزوم. الصورة نفسها (aspect-ratio)
     ماتلمستش عشان تفضل واضحة بارزة زي ما هي، لكن المساحة حوالين النص وزرار
     الشراء اتقلصت عشان الكارت الكلي يبقى أقصر بشكل ملموس. */
  .card-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1;}
  .card-title{font-size:14px; font-weight:600; color:var(--paper); line-height:1.28;}
  .card-price{
    color:var(--brass); font-weight:700; font-size:var(--text-base); letter-spacing:0.2px;
    display:inline-flex; align-self:flex-start; padding:3px 0; gap:8px; align-items:baseline;
  }
  .price-old{color:var(--paper-dim); font-weight:500; font-size:var(--text-sm); text-decoration:line-through; opacity:0.7;}
  .price-new{color:var(--brass); font-weight:700; font-size:16px;}
  /* Inside a .buy-btn (gold background), the default light-on-dark price
     colors above are nearly invisible — override to dark-on-gold so the
     prompt-purchase button's price reads exactly as clearly as the plain
     price text in the transform button next to it. */
  .buy-btn .price-old{color:rgba(20,15,5,0.55); opacity:1;}
  .buy-btn .price-new{color:var(--ink); font-weight:700; font-size:13.5px;}

  .prompt-panel{
    border:1px solid var(--line); border-radius:8px; padding:12px; font-size:13px;
    background:var(--ink); position:relative; min-height:64px;
    color:var(--paper-dim);
  }
  .prompt-panel.locked p{
    opacity:0.4; user-select:none; -webkit-user-select:none; font-style:italic;
  }
  .prompt-missing{opacity:0.7; font-style:italic; margin-bottom:8px;}
  .lock-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; font-size:var(--text-sm); color:var(--paper-dim);
  }
  .lock-overlay svg{width:16px; height:16px; stroke:var(--brass);}
  .prompt-panel.unlocked{
    animation:develop 0.9s ease forwards;
    border-color:var(--brass-dim);
  }
  @keyframes develop{
    0%{box-shadow:inset 0 0 0 60px rgba(255,201,77,0.32); filter:blur(4px);}
    100%{box-shadow:inset 0 0 0 0 rgba(255,201,77,0); filter:blur(0);}
  }
  .card-actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto;}
  .card-actions .buy-btn, .card-actions .copy-btn{flex:1 1 auto;}
  /* ===== صف الشراء الموحّد (16 سبتمبر 2026) =====
     طلب ماجدي: شيل زرار «أضف للسلة» النصّي المنفصل، وشيل أيقونتي المفضلة/
     السلة اللي كانتا عائمتين فوق صورة المنتج — وحطّهم التلاتة (مفضلة + شراء
     + سلة) في صف واحد ملتصق تحت الصورة مباشرة، الأيقونتين كأنهم مربّعين
     صغيرين ملزوقين بطرفي الزرار الذهبي (تصميم رقم ٣ من الموكابات اللي
     اختارها). .fav-btn/.cart-btn هنا هما نفس الكلاسين المستخدمين في مكان
     تاني (قلب المفضلة على غلاف قسم كامل) — القواعد اللي فوق بتحطهم عائمين
     بالمطلق فوق صورة؛ جوه .buy-row بنلغي كل ده ونخليهم عنصر عادي في الصف. */
  .buy-row{ display:flex; align-items:stretch; gap:6px; width:100%; }
  .buy-row .buy-btn{ flex:1; }
  .buy-row .fav-btn, .buy-row .cart-btn{
    /* لازم position:relative مش static: ده اللي بيخلي الزرار نفسه هو
       الـcontaining block بتاع طبقة اللمس بتاعته (::after بعدين في الملف،
       .fav-btn::after/.cat-fav-btn::after) بدل ما تهرب لأقرب جد فيه
       position:relative (.grid-nav-wrap) وتتمدد لعرض/ارتفاع الكارت كله —
       ده كان بيخلي القلب الشفاف بتاع المفضلة بياخد كل دوسة حقيقية في
       الكارت (الزرار الذهبي، العنوان، أي حتة) ويحوّلها toggleFavorite()
       بصمت، مع إن onclick()/.click() البرمجي كانا شغالين عادي لأنهم
       بيتجاوزوا الـhit-testing خالص. position:relative هنا لسه عادي في
       الـflex row (مش زي position:absolute القديم اللي كان شايل العنصر
       بره الـflow). */
    position:relative; opacity:1; width:36px; height:auto; flex:0 0 auto;
    border-radius:7px; background:rgba(255,255,255,0.06); border:1px solid var(--line);
  }
  .buy-row .fav-btn:hover, .buy-row .cart-btn:hover{ background:rgba(255,201,77,0.16); }
  .buy-row .fav-btn.is-fav, .buy-row .cart-btn.in-cart{
    background:rgba(255,201,77,0.14); border-color:rgba(255,201,77,0.55);
  }
  /* رابط تحت زرار الشراء الذهبي — فصل بصري بين "شراء صورة واحدة" (الزرار
     الذهبي البارز) و"وفّر أكتر مع ميجا" (رابط الباقات). كان شكله باهت رمادي
     يتلخبط مع باقي النصوص الثانوية؛ بقى دلوقتي بلون البراند وخط أتقل عشان
     يبان كدعوة فعلية للانتباه، مش تفصيلة صغيرة (طلب ماجدي 16 سبتمبر 2026:
     "بخط اوضح مميز"). */
  .card-package-hint{
    display:block; width:100%; margin-top:6px; padding:5px 2px;
    background:none; border:none; text-align:center;
    font-size:13px; font-weight:700; letter-spacing:0.15px;
    color:var(--brass); cursor:pointer; font-family:inherit;
  }
  .card-package-hint:hover, .card-package-hint:focus-visible{ color:var(--brass-dim); text-decoration:underline; }
  /* 21 سبتمبر 2026 (طلب ماجدي): تقليل ارتفاع زرار الشراء — حشو رأسي أقل
     (11px → 8px) بدل ما يفضل مربع تقيل، مع تعويض بسيط أفقيًا عشان الزرار ما
     يبانش ضيق. أيقونتي المفضلة/السلة جنبه بترتفع/تقصر معاه تلقائيًا
     (align-items:stretch في .buy-row) فمفيش عدم اتساق بينهم. */
  .buy-btn{
    flex:1; color:var(--ink); font-weight:700; font-size:13px;
    padding:6px 10px; border-radius:7px; transition:.2s;
    background:linear-gradient(180deg, #ffe391 0%, #ffca50 46%, #e8a92a 100%);
    border:1px solid rgba(255,255,255,0.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.8),
      inset 0 -1px 0 rgba(120,70,0,0.32),
      0 4px 12px rgba(0,0,0,0.32);
  }
  .buy-btn:hover{
    background:linear-gradient(180deg, #fff0b8 0%, #ffd469 46%, #efb437 100%);
    transform:translateY(-1px);
  }
  /* The "professional prompt" add-on used to share the exact same solid-gold
     treatment as the primary "buy this photo" button — two equally loud
     CTAs on one card meant a shopper's eye had no clear place to land first.
     Keeping it a quiet outline instead of a competing fill makes the main
     purchase read as THE action, with the prompt as a secondary option
     someone can still easily find and take, just not fighting for the same
     attention. */
  .prompt-btn{
    background:transparent !important; color:var(--paper-dim) !important;
    border:1px solid var(--line); font-weight:600 !important; font-size:var(--text-sm) !important;
    box-shadow:none !important;
  }
  .prompt-btn:hover{
    background:rgba(255,201,77,0.06) !important; border-color:var(--brass);
    color:var(--paper) !important; transform:none !important;
  }
  .prompt-btn:active{ transform:none !important; box-shadow:none !important; }
  .prompt-btn .price-old{ color:var(--paper-dim); opacity:0.7; }
  .prompt-btn .price-new{ color:var(--brass); font-weight:700; }
  .copy-btn{
    flex:1; background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:11px; border-radius:8px; font-size:13.5px; transition:.2s;
  }
  .copy-btn:hover{border-color:var(--brass); background:rgba(255,201,77,0.06);}
  .reject-btn{border-color:rgba(224,122,122,0.4); color:#e07a7a;}
  .reject-btn:hover{border-color:#e07a7a; background:rgba(224,122,122,0.08);}
  .owned-pill{
    font-size:var(--text-sm); color:var(--sage); border:1px solid rgba(79,240,192,0.45);
    padding:3px 10px; border-radius:100px; align-self:flex-start; font-weight:600; letter-spacing:0.2px;
  }

  /* ===== Pricing ===== */
  .pricing{max-width:var(--container-w); margin:0 auto; padding:52px 24px 16px;}
  .pricing-trust-strip{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    margin-top:14px; font-size:13.5px; color:var(--paper-dim);
  }
  .pricing-trust-strip .pts-sep{ color:var(--line); }
  /* السطر ده نص صغير بفواصل رفيعة، مش كارت — مقاس .icon-badge الافتراضي
     (28px) هيبان تقيل جنبه، فمقاس أصغر من حتى .ctrl-group-sm (18px). */
  .pricing-trust-strip .icon-badge{ width:16px; height:16px; }
  .pricing-trust-strip .icon-badge svg{ width:10px; height:10px; }
  @media(max-width:480px){ .pricing-trust-strip{ font-size:var(--text-sm); gap:7px; } }
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;}
  .plan{
    border:1px solid var(--line); border-radius:12px; padding:28px 24px;
    background:var(--media-bg); display:flex; flex-direction:column; gap:14px;
  }
  .plan.featured{border-color:var(--brass); position:relative; background:linear-gradient(180deg, rgba(255,201,77,0.12), transparent 60%);}
  /* The "الأكثر طلبًا" ribbon is a claim about the WHOLE pricing page, so only
     one card may ever carry it -- .plan.featured alone just gives the gold
     highlight border/tint; the badge text needs the extra .plan-most-popular
     class, applied to exactly one card in the markup. */
  .plan.featured.plan-most-popular::before{
    content:"⭐ الأكثر طلبًا"; position:absolute; top:-13px; right:24px; background:var(--brass);
    color:var(--ink); font-size:var(--text-sm); font-weight:700; padding:4px 12px; border-radius:100px;
  }
  /* The ribbon text above is hardcoded Arabic in a ::before (can't use
     data-i18n on generated CSS content), so it was leaking onto the English
     page too -- override it for lang="en" documents specifically. */
  html[lang="en"] .plan.featured.plan-most-popular::before{
    content:"⭐ Most Popular";
  }
  .plan h3{font-size:20px; color:var(--paper);}
  .plan .price{font-size:34px; color:var(--brass); font-weight:700;}
  .plan .price span{font-size:var(--text-base); color:var(--paper-dim); font-weight:400;}
  .plan ul{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:var(--text-base); color:var(--paper-dim);}
  .plan ul li::before{content:"✓ "; color:var(--sage);}
  .plan .btn-primary, .plan .btn-ghost{width:100%; text-align:center;}

  footer{border-top:1px solid var(--line); padding:34px 24px; text-align:center; color:var(--paper-dim); font-size:13px;}
  .footer-links{margin-top:12px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
  .footer-links a{color:var(--paper-dim); font-size:var(--text-sm); text-decoration:none; border-bottom:1px solid transparent;}
  .footer-links a:hover{color:var(--brass); border-bottom-color:var(--brass);}

  /* ===== Modal ===== */
  .modal-bg{
    position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none;
    align-items:center; justify-content:center; z-index:200; padding:20px;
  }
  .modal-bg.show{display:flex;}
  #dailyReportModalBg{z-index:260;}
  /* Crop tool opens while the admin panel is still open behind it — both
     shared the same .modal-bg z-index (200), and since #adminModalBg comes
     later in the DOM, it was winning the stacking tie and burying the crop
     tool underneath the admin panel. Bumping this above 200 (matching the
     daily-report modal's own fix above) makes it appear on top as expected,
     and closing/confirming it correctly reveals the admin panel again. */
  #cropModalBg{z-index:260;}
  .modal{
    background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    max-width:440px; width:100%; padding:26px; max-height:88vh; overflow:auto;
  }
  .modal h3{font-size:20px; margin-bottom:6px;}
  .modal p.sub{color:var(--paper-dim); font-size:13.5px; margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:13px; color:var(--paper-dim); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; background:var(--ink); border:1px solid var(--line); color:var(--paper);
    padding:10px 12px; border-radius:7px; font-size:var(--text-base); font-family:inherit;
  }
  .field textarea{min-height:90px; resize:vertical;}
  .account-tabs{display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--line);}
  .account-tab{
    background:transparent; color:var(--paper-dim); padding:10px 4px; font-size:14.5px;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .account-tab.active{color:var(--brass); border-bottom-color:var(--brass); font-weight:600;}
  .modal-actions{display:flex; gap:10px; margin-top:8px;}
  .modal-actions button{flex:1;}
  .close-x{
    background:transparent; color:var(--paper-dim); float:left; font-size:20px; line-height:1;
  }

  .instapay-box{
    background:var(--ink); border:1px solid var(--brass-dim); border-radius:10px;
    padding:16px; margin-bottom:16px; text-align:center;
  }
  .ip-label{font-size:var(--text-sm); color:var(--paper-dim); margin-bottom:6px;}
  .ip-number{font-size:24px; font-weight:700; color:var(--brass); letter-spacing:1px; direction:ltr;}
  .ip-copy{
    margin-top:10px; background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:6px 14px; border-radius:7px; font-size:var(--text-sm);
  }
  .ip-copy:hover{border-color:var(--brass);}

  .admin-tabs{display:flex; gap:8px; margin-bottom:16px;}
  .admin-tabs button{
    flex:1; background:var(--ink); border:1px solid var(--line); color:var(--paper-dim);
    padding:9px; border-radius:7px; font-size:13.5px;
  }
  .admin-tabs button.active{border-color:var(--brass); color:var(--brass);}
  .order-row{
    border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; font-size:13px;
  }
  .order-row .oline{display:flex; justify-content:space-between; color:var(--paper-dim); margin-bottom:4px;}
  .order-row .oline b{color:var(--paper); font-weight:600;}
  .order-status{font-size:var(--text-sm); padding:2px 8px; border-radius:100px; font-weight:600;}
  .status-pending{background:rgba(255,201,77,0.15); color:var(--brass);}
  .status-approved{background:rgba(79,240,192,0.22); color:var(--sage);}
  .status-rejected{background:rgba(224,122,122,0.15); color:#e07a7a;}
  .status-underpaid{background:rgba(224,122,122,0.15); color:#e07a7a;}
  /* توحيد شكل أزرار قسم الطلبات (رفض/تحقق ووافق/حقل المبلغ) — كانوا بأشكال
     وارتفاعات مختلفة (الحقل بستايل المتصفح الافتراضي الأبيض، وزرار الرفض
     بعرض متغيّر حسب المساحة المتبقية). الحل: صف عمودي ثابت، كل عنصر ياخد
     العرض الكامل، ونفس الحشو/الاستدارة/حجم الخط في كل مكان (طلب ماجدي). */
  .order-verify-row{display:flex; gap:8px; align-items:stretch; width:100%; margin-top:6px;}
  .order-verify-input{
    flex:1; min-width:0; box-sizing:border-box;
    background:var(--ink); border:1px solid var(--line); border-radius:6px;
    padding:9px 10px; color:var(--paper); font-size:var(--text-sm); font-family:inherit;
  }
  .order-verify-input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(255,201,77,0.18); }
  .order-verify-input::placeholder{ color:var(--paper-dim); }
  .order-verify-row .buy-btn{flex:0 0 auto; white-space:nowrap; padding:9px 16px; border-radius:6px; font-size:var(--text-sm);}
  .order-underpaid-note{color:#e07a7a; font-weight:600; font-size:var(--text-sm);}
  .order-actions{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
  .order-actions > button{width:100%; box-sizing:border-box; padding:9px; border-radius:6px; font-size:var(--text-sm);}

  /* التوست ماكانش بيتخفي فعليًا — كان بس بيتزحلق لتحت بـ translateY(120%)
     وبيعتمد إن الإزاحة دي تخرجه بره حافة الشاشة. على bottom:24px الإزاحة
     (~29px) كانت بتوديه تحت الحافة فعلاً، فمحدش شافه. أول ما اترفع لـ96px
     عشان يعدّي شريط المتصفح، نفس الإزاحة بقت بتسيبه على ~67px من تحت —
     يعني **ظاهر على الشاشة، فاضي، وطول الوقت**: مستطيل أبيض صغير في نص
     الشاشة. الحل إنه يتخفى بجد (شفافية + visibility) مش بالإزاحة بس. */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
    background:var(--paper); color:var(--ink); padding:12px 22px; border-radius:8px;
    font-size:var(--text-base); font-weight:600; z-index:300;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .3s ease, opacity .25s ease, visibility 0s linear .3s;
  }
  .toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1; visibility:visible;
    transition:transform .3s ease, opacity .25s ease, visibility 0s;
  }
  /* On a phone the browser's own bottom bar (the URL/tabs strip in Safari and
     Chrome) sits over the last ~50-90px of the page, and a fixed element
     anchored 24px from the bottom lands underneath it — every toast was being
     swallowed by that bar. Lifting it clear of both the bar and the row of
     floating buttons is the same fix already applied to .stay-nudge below.
     env() adds the home-indicator inset on top wherever the browser reports
     one. */
  @media(max-width:560px){
    .toast{ bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  }

  .contact-widget{position:fixed; bottom:26px; left:26px; z-index:200; display:flex; flex-direction:column; align-items:center; gap:12px;}

  /* ===== Admin: floating launcher + collapsible panel =====
     The admin panel is a working surface, not a one-shot dialog: it can be
     folded away to a small floating badge while the storefront underneath is
     checked, then unfolded again without losing what was typed. */
  /* A single, quiet nudge for a visitor who has browsed but not ordered.
     Shows once per visit, sits at the bottom out of the way of the content,
     and is dismissible — deliberately not a modal that blocks the page. */
  /* Purchase confirmation: a deliberate second action before an order is
     created, so "I've paid" cannot be tapped on reflex before transferring. */
  .pay-confirm-row{
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    background:var(--ink); border:1px solid var(--line); border-radius:9px;
    padding:11px 13px; margin-bottom:10px; font-size:13.5px; line-height:1.6;
  }
  .pay-confirm-row input{
    width:19px; height:19px; margin:2px 0 0; accent-color:var(--brass); flex-shrink:0;
  }
  .pay-warning{
    background:rgba(220,80,60,0.10); border:1px solid rgba(220,80,60,0.45);
    border-radius:9px; padding:10px 13px; margin-bottom:12px;
    font-size:12.8px; line-height:1.65; color:#f0b9ae;
  }
  #buyConfirmBtn[disabled]{opacity:0.45; cursor:not-allowed;}

  /* A quiet, easy-to-miss-if-not-needed link that opens a short explainer
     for exactly where to find the transaction reference number — the one
     field in this form most likely to make a first-time buyer stall or
     abandon, since "رقم عملية التحويل" isn't self-explanatory the first
     time someone sees it. */
  .ref-help-toggle{
    background:none; border:none; padding:6px 0 0; margin:0;
    font-size:var(--text-sm); color:var(--brass); text-decoration:underline;
    text-decoration-color:rgba(255,201,77,0.4); cursor:pointer;
  }
  .ref-help-toggle:hover{ text-decoration-color:var(--brass); }
  .ref-help-box{
    margin-top:8px; padding:11px 13px; border-radius:9px;
    background:var(--ink-2); border:1px solid var(--line);
    font-size:var(--text-sm); line-height:1.6; color:var(--paper-dim);
  }
  .ref-help-box p{ margin:0 0 8px; }
  .ref-help-box p:last-child{ margin-bottom:0; }
  .ref-help-box b{ color:var(--paper); }

  /* Shown once the customer's photo is actually ready. Thanks them at the one
     moment they are most pleased, and puts sharing and reviewing right there
     — the two things that grow the shop and cost the customer nothing. */
  /* Already thanked: kept visible rather than hidden so the admin can tell
     "done" apart from "not offered", but clearly inert. */
  .thanked-btn, .thanked-btn:hover{
    opacity:0.45; cursor:default; pointer-events:none;
    border-color:var(--line); color:var(--paper-dim); background:transparent;
  }

  .thanks-panel{
    display:none; margin-top:16px; padding:16px 18px;
    background:rgba(255,201,77,0.07); border:1.5px solid var(--brass-dim);
    border-radius:12px; text-align:center;
  }
  .thanks-panel.show{display:block;}
  .thanks-panel h4{margin:0 0 6px; font-size:16px; color:var(--brass);}
  .thanks-panel p{margin:0 0 12px; font-size:13.5px; line-height:1.7; color:var(--paper);}
  .thanks-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .thanks-actions button{flex:1 1 150px; padding:11px 14px; font-size:13.5px;}
  /* بعد ما العميل ياخد نتيجته — أكبر فرصة LTV في كل رحلة الشراء، عشان كده
     مفصولة بخط علوي وبلون براند واضح بدل ما تختلط بزراير المشاركة/التقييم
     اللي فوقها (طلب صريح من ماجدي 11 سبتمبر 2026). */
  .thanks-upsell-actions{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
    margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
  }
  .thanks-upsell-btn{
    flex:1 1 150px; padding:11px 14px; font-size:13.5px;
    border-color:var(--brass-dim); color:var(--brass);
  }

  .stay-nudge{
    /* عمدًا left مش inset-inline-start: العنصر ده لازم يفضل في نص الشاشة
       بالظبط بغض النظر عن اتجاه الصفحة. inset-inline-start بيتحول لـ right
       في RTL (الموقع كله RTL)، ومع transform:translateX(-50%) اللي فيزيائي
       دايمًا مش بيتأثر بالاتجاه، الاتنين مع بعض كانوا بيودّوا الصندوق
       لشمال الشاشة تمامًا (مش نصها) -- وده السبب الحقيقي وراء تغطيته لعناصر
       تانية (زي دايرة الأساليب) بدل ما يفضل واضح في النص. */
    position:fixed; bottom:-200px; left:50%; transform:translateX(-50%);
    z-index:205; width:min(440px, calc(100vw - 32px));
    background:var(--ink-2); border:2px solid var(--brass); border-radius:16px;
    padding:18px 20px 16px; box-shadow:0 18px 50px rgba(0,0,0,0.55);
    transition:bottom .45s cubic-bezier(.22,1,.36,1);
  }
  .stay-nudge.show{bottom:26px;}
  .stay-nudge h4{font-size:16.5px; color:var(--brass); margin:0 0 6px; padding-inline-end:26px;}
  .stay-nudge p{font-size:var(--text-base); color:var(--paper); line-height:1.7; margin:0 0 14px;}
  .stay-nudge-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .stay-nudge-actions .btn-primary,
  .stay-nudge-actions .btn-ghost{flex:1 1 auto; padding:11px 16px; font-size:var(--text-base); text-align:center;}
  .stay-nudge-close{
    position:absolute; top:10px; inset-inline-end:12px;
    background:none; border:none; color:var(--paper-dim); font-size:22px; line-height:1; cursor:pointer;
  }
  .stay-nudge-close:hover{color:var(--paper);}
  @media(max-width:560px){ .stay-nudge.show{bottom:92px;} }

  /* زرار لوحة الإدارة: دايرة صغيرة داكنة بإطار ذهبي. مقصود إنه يبان مختلف
     وأهدى من زراري العميل — دي أداة صاحب الموقع، مش دعوة لحد. */
  .admin-fab{
    position:fixed; bottom:96px; left:26px; z-index:210;
    display:none; align-items:center; justify-content:center;
    width:46px; height:46px; padding:0; border-radius:50%;
    background:var(--ink-2); border:2px solid var(--brass); color:var(--brass);
    font-size:var(--text-base); font-weight:700; font-family:inherit; cursor:grab;
    box-shadow:0 3px 0 color-mix(in srgb, var(--brass) 55%, black), 0 6px 16px rgba(0,0,0,0.45);
    transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .admin-fab.show{display:inline-flex;}
  .admin-fab:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 55%, black), 0 2px 6px rgba(0,0,0,0.3);
  }
  .admin-fab .af-label{ display:none; }
  @media(max-width:520px){
    .admin-fab{ width:44px; height:44px; bottom:78px; left:16px; }
  }
  .admin-fab:hover{transform:translateY(-3px); background:rgba(255,201,77,0.12);}
  /* While being dragged, drop the hover lift and the transition so the
     button tracks the finger/pointer exactly instead of easing behind it. */
  .admin-fab.dragging{
    cursor:grabbing; transition:none; transform:none;
    box-shadow:0 12px 30px rgba(0,0,0,0.55);
  }
  .admin-fab.dragging:hover{transform:none;}
  .admin-fab .af-icon{font-size:20px; line-height:1;}
  /* الشارة بقت على حرف الدايرة بدل ما كانت جنب الكلمة */
  .admin-fab .af-badge{
    position:absolute; top:-5px; inset-inline-end:-5px;
    min-width:19px; height:19px; padding:0 5px; border-radius:10px;
    background:var(--brass); color:var(--ink); font-size:var(--text-sm); font-weight:700;
    box-shadow:0 2px 6px rgba(0,0,0,0.5);
    display:none; align-items:center; justify-content:center;
  }
  .admin-fab .af-badge.show{display:inline-flex;}

  .admin-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    margin-bottom:6px;
  }
  .admin-head-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  /* Reserve horizontal drags anywhere on the admin panel for the
     swipe-to-collapse gesture (see initAdminPanelSwipeCollapse in app.js)
     instead of letting the browser interpret them as its own edge-swipe/back
     gesture. Vertical panning (scrolling the orders/products lists) is left
     completely alone. Scoped to .admin-modal specifically — this has no
     effect on the separate image-cropper modal (.crop-modal / #cropModalBg),
     which isn't a child of .admin-modal and keeps its own touch handling. */
  .admin-modal{ touch-action: pan-y; }
  .admin-icon-btn{
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:var(--ink); border:1px solid var(--line); color:var(--paper-dim);
    font-size:17px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s, border-color .15s;
  }
  .admin-icon-btn:hover{color:var(--brass); border-color:var(--brass-dim);}
  /* Folded: header stays, everything below it is tucked away. */
  .modal.admin-modal.collapsed #adminLoginView,
  .modal.admin-modal.collapsed #adminFormView,
  .modal.admin-modal.collapsed p.sub{display:none !important;}
  .modal.admin-modal.collapsed{padding-bottom:18px;}
  .modal.admin-modal{max-width:520px;}
  body.view-mode-desktop .modal.admin-modal{max-width:920px;}
  .field-grid-2{display:grid; grid-template-columns:1fr; gap:0 16px;}
  body.view-mode-desktop .field-grid-2{grid-template-columns:1fr 1fr;}
  .admin-tabs{flex-wrap:wrap;}
  .admin-tabs button{flex:1 1 auto; min-width:104px;}

  /* Back to top + vertical scroll ruler — pinned to the physical right edge
     with a plain "right" (not the logical inset-inline-end), which in RTL
     was flipping to the same left edge as the contact widget above and
     landing right on top of it. */
  /* ===== الأزرار العائمة =====
     الزرارين اللي العميل بيشوفهم بنفس الشكل بالظبط — نفس الارتفاع ونفس نصف
     القطر ونفس الخط — عشان يبانوا من نفس العيلة. وكل واحد فيهم عليه كلمة،
     مش أيقونة لوحدها: الأيقونة بتخلي الزائر يفكّر، والكلمة بتجاوب عليه. */
  /* ===== الأزرار العائمة =====
     نفس لغة أزرار الموقع بالظبط: نصف قطر 9px، نحاسي، نص غامق، وزن 700،
     مقاس 15px، وحافة سفلية صلبة بتنضغط لتحت عند اللمس. الفرق الوحيد إنهم
     ثابتين في مكانهم على الشاشة. */
  /* نفس لبس زرار لوحة الإدارة بالظبط: أرضية داكنة، إطار نحاسي، أيقونة
     ونص نحاسي. الأصفر الصلب كان بياخد العين من محتوى الصفحة نفسه. */
  /* كل الكلام جوه الدايرة: اللي حوالين الحافة ماشي على قوس (SVG textPath)،
     و«ميجا» أفقية في المركز. القوس بيدّي مساحة تلات أضعاف السطر الأفقي —
     محيط دايرة 64px = 200px، والقوس العلوي 100px. */
  .back-to-top-fab, .contact-fab{
    position:relative;
    width:62px; height:62px; padding:0; border-radius:50%;
    background:var(--ink-2); border:2px solid var(--brass); color:var(--brass);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:inherit; white-space:nowrap;
    box-shadow:0 3px 0 color-mix(in srgb, var(--brass) 55%, black), 0 6px 16px rgba(0,0,0,0.45);
    transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
  }
  /* الكلام أفقي جوه الدايرة، مش على قوس. الخط العربي حروفه متصلة — ولما
     كل حرف بيتلفّ بزاوية مختلفة على قوس، الوصلات بتتكسر والكلمة بتتفكّك
     لحروف مايلة مالهاش معنى. الحرف اللاتيني منفصل أصلًا فالقوس بيشتغل معاه؛
     العربي لأ. ودي مش مسألة ترتيب — الترتيب كان صح. */
  .fab-core{
    position:relative; z-index:1;
    display:inline-flex; flex-direction:column; align-items:center; gap:1px;
    line-height:1.1; padding:0 4px; text-align:center;
  }
  .fab-core svg{ display:block; }
  .fab-word{ font-size:8.5px; font-weight:700; letter-spacing:0; }
  .fab-wrap{ display:inline-flex; }
  .fab-wrap-home{ position:fixed; bottom:26px; right:26px; z-index:200; }
  .back-to-top-fab:hover, .contact-fab:hover{
    background:rgba(232,182,74,0.14);
    box-shadow:0 4px 0 color-mix(in srgb, var(--brass) 55%, black), 0 8px 20px rgba(0,0,0,0.5);
  }
  .back-to-top-fab:active, .contact-fab:active{
    transform:translateY(2px);
    box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 55%, black), 0 2px 6px rgba(0,0,0,0.3);
  }

  @media(max-width:520px){
    .back-to-top-fab, .contact-fab{ width:58px; height:58px; }
    .fab-wrap-home{ bottom:20px; right:16px; }
  }
  /* الموقع رايح تطبيق أندرويد وiOS: على أجهزة النوتش الشريط السفلي بياكل من
     أسفل الشاشة، فالأزرار العائمة لازم ترتفع عنه. env() بترجع صفر على أي
     جهاز من غير نوتش، فالسطر ده مالوش أي أثر جانبي. */
  .fab-wrap-home{ bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
  .contact-widget{ bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
  .admin-fab{ bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
  @media(max-width:520px){
    .fab-wrap-home{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
    .contact-widget{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
    .admin-fab{ bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
  }

  .scroll-ruler{
    /* اتلغى بطلب صريح من ماجدي (11 سبتمبر 2026) — أداة تنقل زايدة
       بتكرّر وظيفة السكرول الطبيعي وزرار العودة لأعلى، ولونها مخالف
       لهوية الموقع الذهبية. إخفاء بصري بحت، صفر لمس لـHTML/JS. */
    display:none !important;
    position:fixed; top:50%; right:16px; transform:translateY(-50%); z-index:190;
    flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-ruler-arrow{
    width:32px; height:28px; border-radius:8px;
    background:var(--ink-2); border:1px solid var(--steel); color:var(--steel); font-size:var(--text-sm);
  }
  .scroll-ruler-arrow:hover{background:rgba(62,167,255,0.12);}
  .scroll-ruler-track{
    position:relative; width:7px; height:280px; border-radius:5px;
    background:var(--line); cursor:pointer; overflow:hidden;
  }
  .scroll-ruler-thumb{
    position:absolute; top:0; inset-inline-start:0; width:100%; height:50px;
    background:var(--steel); border-radius:5px;
  }
  @media(max-width:860px){
    .scroll-ruler{display:none;} /* the floating back-to-top button already covers this on small screens */
  }

  /* ===== Search (with per-visitor search history) ===== */
  /* البحث والبانر صف واحد. البحث بياخد أقل من نصف العرض — كان واخد العرض
     كله وهو مش محتاجه، والبانر كان صف كامل تحته. */
  .search-row{ display:flex; align-items:stretch; gap:8px; min-width:0; }
  .search-row .search-box{ flex:0 1 47%; min-width:0; }
  .search-row .soft-launch-banner{
    flex:1 1 auto; min-width:0; display:flex; align-items:center;
    justify-content:center; padding:0 12px; border-radius:12px;
    font-size:var(--text-sm); white-space:nowrap; overflow:hidden;
  }
  .search-row .soft-launch-banner span{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  @media(max-width:400px){
    .search-row .search-box{ flex:0 1 44%; }
    .search-row .soft-launch-banner{ font-size:12px; padding:0 8px; }
  }
  .search-box{position:relative; display:flex; align-items:center;}
  .search-box .search-icon-btn{
    position:absolute; inset-inline-start:10px; color:var(--brass);
    background:transparent; border:none; display:flex; align-items:center; pointer-events:none;
  }
  .search-box input{
    width:220px; background:var(--ink-2); border:1.5px solid var(--brass); color:var(--paper);
    border-radius:10px; padding:8px 14px 8px 36px; font-size:13.5px; transition:box-shadow .2s ease;
  }
  html[dir="rtl"] .search-box input{padding:8px 36px 8px 14px;}
  html[dir="rtl"] .search-box .search-icon-btn{inset-inline-start:auto; inset-inline-end:10px;}
  .search-box input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(255,201,77,0.18);}
  .search-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); inset-inline-start:0; width:100%;
    min-width:280px; background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
    padding:8px; z-index:70; max-height:360px; overflow-y:auto;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
  }
  .search-box.open .search-dropdown{display:block;}
  .search-dropdown .sd-section-label{
    font-size:var(--text-sm); color:var(--paper-dim); padding:8px 10px 4px; text-transform:uppercase; letter-spacing:0.5px;
  }
  .search-dropdown .sd-history-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .search-dropdown .sd-clear-all{
    background:transparent; border:none; cursor:pointer;
    font-family:inherit; font-size:var(--text-sm); font-weight:700;
    color:var(--paper-dim); padding:8px 10px 4px;
    /* هدف لمس 44px من غير ما ياخد مساحة بصرية زيادة */
    position:relative;
  }
  .search-dropdown .sd-clear-all::after{
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); min-width:44px; min-height:44px;
  }
  .search-dropdown .sd-clear-all:hover{ color:#e07a7a; }
  .search-dropdown .sd-history-item{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--paper-dim); cursor:pointer;
  }
  .search-dropdown .sd-history-item:hover{background:rgba(255,255,255,0.05); color:var(--paper);}
  .search-dropdown .sd-history-item .sd-remove{opacity:0.5; padding:2px 6px;}
  .search-dropdown .sd-history-item .sd-remove:hover{opacity:1; color:#e07a7a;}
  .search-dropdown .sd-result{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer;
  }
  .search-dropdown .sd-result:hover{background:rgba(255,255,255,0.05);}
  .search-dropdown .sd-result img{width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0;}
  .search-dropdown .sd-result .sd-title{font-size:13.5px; color:var(--paper);}
  .search-dropdown .sd-result .sd-cat{font-size:var(--text-sm); color:var(--paper-dim);}
  .search-dropdown .sd-empty{padding:14px 10px; font-size:13px; color:var(--paper-dim); text-align:center;}
  @media(max-width:980px){
    .search-box input{width:150px;}
  }
  @media(max-width:700px){
    .search-box{width:auto;}
    .search-box input{width:100%; min-width:0;}
  }
  /* «ميجا» بنفس وميض الاسم اللي في الهيرو، بس بأحمر أغمق شوية: الأحمر الفاتح
     على الأصفر الذهبي تباينه ضعيف ومش بيتقرا — الأغمق ده تباينه 8.6:1. */
  /* الأحمر الغامق كان مضبوط على الأصفر الصلب (5:1). على الأرضية الداكنة
     الجديدة تباينه بينزل لـ1.8:1 — يعني شبه مختفي. الفاتح ده 5.2:1. */
  /* «ميجا» جوه الدايرة تحت الأيقونة. 9.5px هو أكبر مقاس بيخلي الكلمة
     تدخل جوه دايرة 52px من غير ما تلمس الإطار. */
  .contact-fab .fab-mega{
    color:#ff4d4d; font-weight:700; font-size:11.5px; line-height:1.1;
  }
  /* الكلمة أعرض من الدايرة، فلو الزرار ملزّق في حافة الشاشة الكلمة
     بتتقص. 24px بتسيب فراغ كفاية لنص عرض الكلمة الزيادة. */
  @media(max-width:520px){ .contact-widget{ bottom:20px; left:24px; } }
  .contact-menu{
    display:flex; flex-direction:column; gap:8px;
    opacity:0; pointer-events:none; transform:translateY(10px) scale(0.9); transform-origin:bottom left;
    transition:opacity .22s ease, transform .22s ease;
  }
  .contact-menu.show{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
  /* كل أيقونة بلونها الرسمي. الزائر بيتعرّف على واتساب من الأخضر قبل ما
     يقرا أي حاجة — اللون المميز بيوفّر خطوة كاملة على العين.
     المقاس ما اتغيرش: 46×46 زي ما كان. */
  /* صف أقسام في الفوتر — أوضح شوية من الروابط القانونية اللي تحته،
     لأنه ممر تصفّح حقيقي مش سطر إلزامي. */
  .footer-cats a{ color:var(--paper); font-weight:600; }
  .footer-cats a:hover{ color:var(--brass); }

  .contact-item{
    width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(0,0,0,0.22);
    color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.45);
    transition:transform .2s ease, filter .2s ease;
  }
  .contact-item.ci-wa{ background:#25D366; }
  .contact-item.ci-fb{ background:#1877F2; }
  .contact-item.ci-tg{ background:linear-gradient(180deg, #37BBFE, #007DBB); }
  /* علامة إنستجرام تدرّج قُطري مش لون واحد — ده التقريب المتعارف عليه. */
  .contact-item.ci-ig{
    background:radial-gradient(circle at 30% 107%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  /* الهوفر كان بيقلب الخلفية لذهبي — وده كان بيلغي اللون المميز وقت ما
     المستخدم بيوصل للزرار بالظبط. دلوقتي بيكبّر ويضوّي واللون بيفضل. */
  .contact-item:hover{ transform:scale(1.1); filter:brightness(1.12); }

  .lightbox{
    position:fixed; inset:0; background:rgba(5,3,12,0.92); z-index:400;
    display:none; align-items:center; justify-content:center; padding:30px;
    cursor:zoom-out; backdrop-filter:blur(4px);
  }
  .lightbox.show{display:flex;}
  .lightbox img{max-width:92vw; max-height:92vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.6);}

  .admin-product-row{
    display:flex; align-items:center; gap:12px; padding:10px; border-bottom:1px solid var(--line);
  }
  .admin-product-row img{width:44px; height:56px; object-fit:cover; border-radius:6px; flex-shrink:0;}
  .admin-product-info{flex:1; display:flex; flex-direction:column; gap:2px; font-size:13px;}
  .admin-product-info span{color:var(--paper-dim); font-size:var(--text-sm);}
  .admin-move-cat{
    margin-top:4px; background:var(--ink); color:var(--paper); border:1px solid var(--line);
    border-radius:6px; padding:3px 6px; font-size:var(--text-sm); max-width:150px;
  }
  .admin-cat-group{margin-bottom:10px;}
  .admin-cat-group h4{
    font-size:var(--text-sm); color:var(--brass); text-transform:uppercase; letter-spacing:0.5px;
    margin:14px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--line);
  }
  .admin-product-actions button:disabled{opacity:0.25; cursor:default;}
  .admin-product-actions{display:flex; gap:6px;}
  .admin-product-actions button{background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:var(--text-base);}
  .admin-product-actions button:hover{border-color:var(--brass);}

  .soft-launch-banner{
    position:relative; overflow:hidden; isolation:isolate;
    background:linear-gradient(90deg, var(--brass), #ffe08a, var(--brass));
    background-size:200% 100%; background-position:50% 50%;
    box-shadow:0 0 14px rgba(255,201,77,0.28);
    color:var(--ink); text-align:center; font-weight:700; font-size:var(--text-base);
    padding:10px 16px; letter-spacing:0.2px;
  }
  /* اللمعة: طبقة بتعدّي بالـtransform بدل ما نحرّك background-position.
     نفس المنظر بالظبط، بس من غير ما المتصفح يعيد رسم البانر كل إطار. */
  .soft-launch-banner::before{
    content:''; position:absolute; top:0; bottom:0; left:0; width:60%;
    pointer-events:none; z-index:-1;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
    transform:translate3d(-180%,0,0);
    animation:bannerSheen 3.5s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes bannerSheen{
    0%{ transform:translate3d(-180%,0,0); }
    100%{ transform:translate3d(280%,0,0); }
  }
  .promo-countdown{
    display:inline-block; margin-inline-start:10px; background:rgba(12,12,16,0.35);
    padding:3px 12px; border-radius:100px; font-variant-numeric:tabular-nums;
  }
  @media(prefers-reduced-motion: reduce){ .soft-launch-banner{animation:none;} }

  /* Motion audit (14 سبتمبر 2026): كانت موجة ذهبية تانية (نسخة مختلفة، 4
     ثواني) بتتكرر للأبد على نفس الشعار — نفس القرار: حركة زخرفية بحتة بلا
     قيمة وظيفية، اتشالت بالكامل. الشكل الذهبي المتدرج الثابت فضل زي ما هو. */
  .logo > span > .logo-accent{
    background:linear-gradient(90deg, var(--brass) 0%, #fff3c4 50%, var(--brass) 100%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    background-position:0% 0%;
  }

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;}
    .hero::before{width:340px; height:340px; top:-90px; left:-70px; filter:blur(55px);}
    .pricing-grid{grid-template-columns:1fr;}
    .hero h1{font-size:36px;}
    /* 15 سبتمبر 2026: .hero{padding:64px 24px 40px} (القاعدة الأساسية فوق)
       كانت بتتطبّق زي ما هي على الموبايل الحقيقي — ماكانش فيه أي تصغير
       ليها هنا أصلاً (بعكس grid-template-columns وh1 اللي فوق). ده كان
       بيسيب فراغ فاضي حوالي 64px فوق العنوان و40px تحت آخر عنصر (قبل
       شارة "زائر/تقييم")، ده اللي ماجدي لاحظه في صور الموبايل الحقيقية.
       القيمة هنا نفس القيمة المستخدمة أصلاً في وضع "معاينة الموبايل" الإداري
       (body.view-mode-mobile .hero) — رقم متسق ومجرّب قبل كده، مش رقم جديد. */
    .hero{padding:28px 18px 24px;}
  }

  /* ===== Header controls (lang / view toggles) — same height, weight of
     border, and radius as the other header controls (theme switch, account,
     track order) so the whole row reads as one deliberate family instead of
     five differently-sized pieces. ===== */
  .ctrl-group{
    display:flex; align-items:center; gap:4px; height:44px; box-sizing:border-box;
    background:var(--ink-2); border:1.5px solid var(--brass); border-radius:10px; padding:0 4px;
  }
  .ctrl-group button{
    display:inline-flex; align-items:center; gap:6px; height:36px; box-sizing:border-box;
    background:transparent; color:var(--paper-dim); padding:0 12px; border-radius:7px; font-size:var(--text-sm);
  }
  .ctrl-group button.active{background:var(--brass); color:var(--ink); font-weight:700;}
  .ctrl-group button.active .icon-badge{border-color:var(--ink); color:var(--ink);}
  /* Utility-strip sizing — the same gold-outlined pill family, scaled down
     since these live in the quiet secondary strip, not the main row. */
  .ctrl-group.ctrl-group-sm{height:30px; border-width:1px;}
  .ctrl-group.ctrl-group-sm button{height:24px; padding:0 8px; font-size:var(--text-sm); gap:4px;}
  .ctrl-group.ctrl-group-sm .icon-badge{width:18px; height:18px;}
  .ctrl-group.ctrl-group-sm .icon-badge svg{width:11px; height:11px;}

  /* ===== Icon badge — a small ring in the site's signature gold, used to
     frame a standalone icon (view toggle, account) the same way the
     categories/admin dropdown buttons already frame themselves, so every
     icon in the header reads as one consistent, deliberately-sized family
     instead of mismatched emoji at whatever size the system font gives
     them. */
  .icon-badge{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:28px; height:28px; border-radius:50%;
    border:1.5px solid var(--brass); color:var(--brass);
  }
  .icon-badge svg{width:17px; height:17px; display:block;}
  /* عيب كان موجود من قبل التعديل ده: زرار «تسجيل الدخول» خلفيته نحاسية،
     والأيقونة اللي جواه كانت نحاسية بإطار نحاسي — يعني **ذهبي على ذهبي،
     مختفية تمامًا**. مكانتش باينة لأن الكلمة كانت بتغطي عليها؛ أول ما
     الزرار بقى أيقونة بس على الموبايل، بان إنه مربع فاضي. */
  #accountOpenBtn .icon-badge{ border-color:var(--ink); color:var(--ink); }
  @media(max-width:460px){
    .icon-badge{width:24px; height:24px;}
    .icon-badge svg{width:15px; height:15px;}
  }

  /* ===== Day/night switch — one rectangle whose sky changes with the mode:
     a lit sun on a pale blue/gold sky for day, a crescent in a dark starry
     sky for night. The knob carries whichever icon is active and slides to
     that side; inset-inline-start (not left) so it slides the right way in
     both Arabic (RTL) and English (LTR). Same height and gold border-weight
     as the other four header controls (view/lang toggles, account, track
     order) so the row reads as one family instead of five different sizes.
     Reused as-is (at a smaller scale) in the admin panel. */
  .theme-toggle{
    position:relative; width:84px; height:44px; border-radius:100px; flex-shrink:0; box-sizing:border-box;
    border:1.5px solid var(--brass); padding:0; cursor:pointer; overflow:hidden;
    background:linear-gradient(90deg,#bfe3ff,#ffe8a3); transition:background .35s ease;
  }
  .theme-toggle.is-night{ background:linear-gradient(90deg,#0c1233,#1c2760); }
  .theme-toggle:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .theme-toggle .tt-stars{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease; }
  .theme-toggle.is-night .tt-stars{ opacity:1; }
  .theme-toggle .tt-star{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:0.85; }
  /* Static end icons ringed in the site's signature gold, same framing
     language as the categories/admin dropdown buttons, so the sun and moon
     read as one equally-sized pair rather than two differently-weighted
     glyphs (a filled moon vs. an outline sun previously looked mismatched
     even at the same box size). */
  .theme-toggle .tt-icon{
    position:absolute; top:50%; transform:translateY(-50%); z-index:1;
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.3px solid rgba(255,201,77,0.65);
  }
  .theme-toggle .tt-icon svg{width:14px; height:14px; display:block;}
  .theme-toggle .tt-sun{ inset-inline-start:7px; color:#c98a12; }
  .theme-toggle .tt-moon{ inset-inline-end:7px; color:#c7c4ff; }
  .theme-toggle .tt-knob{
    position:absolute; top:3px; inset-inline-start:3px; width:38px; height:38px; border-radius:50%;
    background:#fff8ec; color:#c98a12; display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--brass);
    box-shadow:0 1px 5px rgba(0,0,0,0.35); transition:inset-inline-start .35s cubic-bezier(.4,1.5,.6,1), background .35s ease, color .35s ease;
  }
  .theme-toggle.is-night .tt-knob{ inset-inline-start:43px; background:#171b35; color:#f2efff; }
  .theme-toggle .tt-knob svg{width:23px; height:23px; display:block;}
  .theme-toggle .tt-knob-sun,.theme-toggle .tt-knob-moon{display:flex; width:23px; height:23px;}
  .theme-toggle .tt-knob-moon{display:none;}
  .theme-toggle.is-night .tt-knob-sun{display:none;}
  .theme-toggle.is-night .tt-knob-moon{display:flex;}
  .theme-toggle.theme-toggle-sm{width:60px; height:32px;}
  .theme-toggle.theme-toggle-sm .tt-icon{width:16px; height:16px;}
  .theme-toggle.theme-toggle-sm .tt-icon svg{width:10px; height:10px;}
  .theme-toggle.theme-toggle-sm .tt-knob{width:27px; height:27px;}
  .theme-toggle.theme-toggle-sm .tt-knob svg{width:16px; height:16px;}
  .theme-toggle.theme-toggle-sm .tt-knob-sun,.theme-toggle.theme-toggle-sm .tt-knob-moon{width:16px; height:16px;}
  .theme-toggle.theme-toggle-sm.is-night .tt-knob{inset-inline-start:30px;}
  @media (prefers-reduced-motion: reduce){
    .theme-toggle, .theme-toggle .tt-knob, .theme-toggle .tt-stars{transition:none;}
  }
  .header-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  @media(max-width:700px){
    .header-utility{justify-content:center; flex-wrap:wrap; padding:4px 16px; gap:6px;}
  }

  /* ===== Forced view modes ===== */
  body.view-mode-desktop{overflow-x:auto;}
  body.view-mode-desktop #appRoot{min-width:1180px;}

  body.view-mode-mobile{background:#120a22; display:flex; justify-content:center; padding:22px 0;}
  body.view-mode-mobile #appRoot{
    max-width:412px; width:100%; border:1px solid var(--line); border-radius:26px;
    box-shadow:0 30px 80px rgba(0,0,0,0.6);
    /* Tablet-range real visitors (768–1179px) auto-detect into this same
       'mobile' view-mode (the desktop layout needs >=1180px to not feel
       cramped) — but their actual screen is far wider than a phone, so the
       412px phone-frame mockup below wasted most of a real tablet's width.
       Widened for this range only via the media query further down; true
       phone widths and true desktop (>=1180px, a different body class
       entirely) are unaffected. */
    /* overflow:hidden used to live here for the rounded-corner "phone frame"
       clipping effect, but overflow anything-other-than-visible on an
       ancestor makes IT (not the page's real scroll container) the
       reference box for position:sticky — since this wrapper itself never
       scrolls (the page does), that silently broke the sticky header below.
       Rounding is reproduced on the header itself instead (its first child)
       so the frame still reads as rounded without reintroducing that bug.
       No opaque background here on purpose — an opaque fill would sit on top of
       the fixed, full-viewport .site-watermark-bg layer and block it from
       showing through the phone-frame preview, which is why it looked
       "not working" in mobile mode. Letting it stay transparent lets the
       watermark (and its animation) show through exactly like on desktop. */
  }
  /* The actual tablet-width fix: use real screen space instead of the
     ~412px phone mockup. min(94vw, 760px) keeps a small side gutter at
     768px and caps the width before it gets uncomfortably wide right at
     the 1179px edge of this range — same content/flow as phone mode, just
     not artificially squeezed into a phone-sized column. */
  @media (min-width:768px) and (max-width:1179px){
    body.view-mode-mobile #appRoot{ max-width:min(94vw, 760px); border-radius:20px; }
  }
  body.view-mode-mobile #appRoot > header{
    border-top-left-radius:26px; border-top-right-radius:26px; overflow:hidden;
  }
  body.view-mode-mobile .header-utility{justify-content:center; flex-wrap:wrap; padding:4px 16px;}
  body.view-mode-mobile .nav-wrap{gap:6px; padding:6px 16px;}
  body.view-mode-mobile nav.cats{width:100%; order:3; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
  body.view-mode-mobile .hero{grid-template-columns:1fr; padding:28px 18px 24px; gap:24px;}
  body.view-mode-mobile .hero::before{width:320px; height:320px; top:-80px; left:-80px; filter:blur(50px);}
  body.view-mode-mobile .hero h1{font-size:26px;}
  body.view-mode-mobile .hero p{font-size:14.5px;}
  body.view-mode-mobile .eyebrow{font-size:var(--text-sm);}
  body.view-mode-mobile .cat-section{padding:22px 16px 10px;}
  body.view-mode-mobile .section-head h2{font-size:22px;}
  /* Was 100% — a card exactly as wide as the screen reads as "the whole
     screen", with no visual hint that swiping reveals another one. Sizing
     it at 82% leaves a deliberate sliver of the next/previous card peeking
     in from the edge, so the horizontal browsing between products in a
     category is obvious at a glance instead of needing to be discovered by
     accident. */
  body.view-mode-mobile .grid > .card{flex-basis:82%;}
  /* Mobile preview mode renders a phone-width frame on a desktop screen, so the
     viewport media queries above never fire — this repeats the small-screen
     sizing (one tile with a peek) for that frame, exactly as the product rows
     do with body.view-mode-mobile .grid > .card. */
  body.view-mode-mobile .cat-tiles-grid{gap:14px;}
  body.view-mode-mobile .cat-tiles-grid > .cat-tile{flex:0 0 82%; scroll-snap-align:center;}
  body.view-mode-mobile .pricing{padding:22px 16px 10px;}
  body.view-mode-mobile .pricing-grid{grid-template-columns:1fr;}
  body.view-mode-mobile .modal{padding:20px;}
  body.view-mode-mobile .frame{width:110px; height:140px;}
  body.view-mode-mobile footer{padding:24px 16px; font-size:var(--text-sm);}

  @media(max-width:860px){
    body:not(.view-mode-desktop) .hero{grid-template-columns:1fr;}
    body:not(.view-mode-desktop) .pricing-grid{grid-template-columns:1fr;}
    body:not(.view-mode-desktop) .hero h1{font-size:36px;}
  }
  @media (prefers-reduced-motion: reduce){
    .strip-track{animation:none;}
    .prompt-panel.unlocked{animation:none;}
  }

  /* ===== Performance report (period selector, chart, narrative) ===== */
  .report-period-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
  .report-period-btn{
    padding:6px 14px; border-radius:100px; border:1px solid var(--line);
    background:transparent; color:var(--paper-dim); font-size:var(--text-sm); cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .report-period-btn.active{background:var(--brass); color:var(--ink); border-color:var(--brass); font-weight:600;}
  .report-custom-range{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .report-custom-range input[type="date"]{
    background:var(--ink-3); border:1px solid var(--line); color:var(--paper);
    border-radius:6px; padding:6px 8px; font-size:var(--text-sm);
  }
  .report-h4{margin:0 0 8px; font-size:var(--text-base); color:var(--brass); font-weight:700;}
  .report-scope-note{font-weight:400; color:var(--paper-dim); font-size:var(--text-sm);}
  .report-compare-note{font-size:13px; color:var(--paper-dim);}
  .report-up{color:var(--sage); font-weight:700;}
  .report-down{color:#e07a7a; font-weight:700;}
  .report-chart-wrap{background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:10px;}
  .report-chart-wrap canvas{width:100%; display:block;}
  .report-narrative{background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
  .report-narrative p{margin:0 0 8px; font-size:13px; color:var(--paper-dim); line-height:1.6;}
  .report-narrative p:last-child{margin-bottom:0;}

  /* Regeneration guarantee — kept near the pricing plans/CTA per audit
     feedback, instead of being buried only inside the FAQ accordion. */
  .pricing-guarantee{
    margin-top:16px; text-align:center; font-size:13.5px; font-weight:600;
    color:var(--brass); background:rgba(255,201,77,0.08); border:1px solid var(--brass-dim);
    border-radius:10px; padding:10px 16px;
  }

  /* ---------- 3D button treatment — a solid "edge" shadow beneath each
     button plus a soft ambient shadow gives a subtle raised/pressable look;
     pressing it flattens the edge and nudges the button down, like a real
     button being pushed in. color-mix() derives the edge shade FROM each
     button's own background/border color, so this stays correct regardless
     of a design's exact brass/paper hex values — no new colors introduced. ---------- */
  .btn-primary, .btn-ghost, .admin-btn, .plan button, .buy-btn, .nav-cta,
  .modal-actions button, .account-tab, .social-btn{
    transition:transform .12s ease, box-shadow .12s ease, background .22s ease, border-color .22s ease;
  }
  .btn-primary{
    box-shadow:0 4px 0 color-mix(in srgb, var(--brass) 60%, black), 0 6px 14px rgba(0,0,0,0.32);
  }
  .btn-primary:hover{ box-shadow:0 5px 0 color-mix(in srgb, var(--brass) 60%, black), 0 8px 18px rgba(0,0,0,0.36); }
  .btn-primary:active{ transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 60%, black), 0 2px 6px rgba(0,0,0,0.22); }

  .btn-ghost{
    box-shadow:0 3px 0 color-mix(in srgb, var(--line) 100%, var(--paper) 15%), 0 5px 12px rgba(0,0,0,0.22);
  }
  .btn-ghost:active{ transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--line) 100%, var(--paper) 15%), 0 2px 5px rgba(0,0,0,0.16); }

  .admin-btn{
    box-shadow:0 3px 0 color-mix(in srgb, var(--brass) 55%, black), 0 5px 12px rgba(0,0,0,0.26);
  }
  .admin-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 55%, black), 0 2px 5px rgba(0,0,0,0.18); }

  /* فجوة كانت حقيقية: btn-primary وحدها عندها زيادة ظل عند hover.
     نفس معادلة الزيادة (حافة +1px، امتداد +2px، بلور +4px، شفافية +0.04)
     بتتطبّق هنا على ghost وadmin بحافة الألوان بتاعتهم هما، مش لون جديد. */
  .btn-ghost:hover{
    box-shadow:0 4px 0 color-mix(in srgb, var(--line) 100%, var(--paper) 15%), 0 7px 16px rgba(0,0,0,0.26);
  }
  .admin-btn:hover{
    box-shadow:0 4px 0 color-mix(in srgb, var(--brass) 55%, black), 0 7px 16px rgba(0,0,0,0.30);
  }
  /* توهج نحاسي خفيف عند hover — على btn-primary بس، هي الفعل الوحيد
     المطلوب لفت النظر ليه في أي شاشة (تعليق الكود الأصلي: "توهج واحد
     لكل شاشة"). إضافة طبقة ظل جنب الـbevel الحالي، مش بديل عنه. */
  .btn-primary:hover{
    box-shadow:0 5px 0 color-mix(in srgb, var(--brass) 60%, black), 0 8px 18px rgba(0,0,0,0.36), var(--glow-brass);
  }

  /* ===== المرحلة ٢ — حالة تركيز لوحة المفاتيح على أزرار التفاعل =====
     نفس الصيغة المستخدمة أصلاً في .cat-tile/.fav-btn/.theme-toggle —
     تعميم نمط موجود، مش نمط جديد. outline منفصل عن box-shadow الضغط
     الثلاثي الأبعاد فمفيش أي تعارض أو تغيير في مظهر الماوس/اللمس. */
  .btn-primary:focus-visible, .btn-ghost:focus-visible, .buy-btn:focus-visible,
  .admin-btn:focus-visible, .nav-cta:focus-visible, .social-btn:focus-visible,
  .account-tab:focus-visible, .plan button:focus-visible,
  .modal-actions button:focus-visible{
    outline:2px solid var(--brass); outline-offset:2px;
  }

  .buy-btn{
    box-shadow:0 3px 0 color-mix(in srgb, var(--brass) 55%, black), 0 5px 10px rgba(0,0,0,0.24);
  }
  .buy-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 55%, black), 0 2px 5px rgba(0,0,0,0.16); }

  /* ===== المرحلة ٣ — نفس فجوة hover اللي كانت في ghost/admin (مرحلة ٢) ===== */
  .buy-btn:hover{
    box-shadow:0 4px 0 color-mix(in srgb, var(--brass) 55%, black), 0 7px 14px rgba(0,0,0,0.28);
  }

  /* ---------- Extending the same embossed-graphic treatment to the rest of
     the site's buttons — category pills, the admin quick-access dropdown
     trigger, and the language/view toggle switches — so every clickable
     control reads as one consistent, deliberately-designed button family
     rather than a mix of flat chips and a few standout 3D ones. Same recipe
     throughout: a solid color-mix "edge" for depth + a soft ambient shadow,
     flattening and nudging down on press like a physical button. ---------- */
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button,
  .cat-dropdown-btn,
  .ctrl-group button{
    transition:transform .12s ease, box-shadow .12s ease, background .22s ease, border-color .22s ease;
  }

  /* Category pills — inactive state gets a quiet dark-edge depth so it
     doesn't compete with the gold active pill; active/hovered gold pills
     get the same warm brass edge as the site's other gold buttons. */
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button{
    box-shadow:0 2px 0 color-mix(in srgb, var(--line) 100%, var(--paper) 15%), 0 3px 8px rgba(0,0,0,0.18);
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button:hover,
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button.active{
    box-shadow:0 2px 0 color-mix(in srgb, var(--brass) 55%, black), 0 4px 10px rgba(0,0,0,0.22);
  }
  .cat-dropdown.cat-pills-mode .cat-dropdown-menu button:active{
    transform:translateY(2px); box-shadow:0 0px 0 color-mix(in srgb, var(--brass) 55%, black), 0 1px 4px rgba(0,0,0,0.16);
  }

  /* Admin quick-access trigger ("لوحة التحكم") — gold-outlined like
     .admin-btn, so it gets the same warm brass edge. */
  .cat-dropdown-btn{
    box-shadow:0 3px 0 color-mix(in srgb, var(--brass) 55%, black), 0 5px 12px rgba(0,0,0,0.24);
  }
  .cat-dropdown-btn:active{
    transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 55%, black), 0 2px 5px rgba(0,0,0,0.16);
  }

  /* Language/view toggle buttons — subtle depth on the active pill only
     (the inactive one stays flat/transparent by design, matching how
     .ctrl-group already only fills the active side gold). */
  .ctrl-group button.active{
    box-shadow:0 2px 0 color-mix(in srgb, var(--brass) 55%, black), 0 3px 8px rgba(0,0,0,0.2);
  }
  .ctrl-group button.active:active{
    transform:translateY(1px); box-shadow:0 1px 0 color-mix(in srgb, var(--brass) 55%, black), 0 1px 4px rgba(0,0,0,0.16);
  }


  /* =========================================================================
     الطبقة الزجاجية — التطبيق العام على كل أسطح الموقع (8 سبتمبر 2026)
     -------------------------------------------------------------------------
     مكتوبة كقاعدة واحدة مشتركة بدل ما نعدّل 30 قاعدة واحدة واحدة: الأسطح دي
     كلها بتحدد لونها بـ `background: var(--ink…)`، واللي بيتكتب هنا هو
     `background-image` بس — يعني التدرّج بيتحط *فوق* اللون الأصلي من غير ما
     يمسّه. النتيجة: ثيمات الألوان (بني/زمردي/نبيتي/كحلي/أحمر) والوضع النهاري
     كلهم بيفضلوا شغالين زي ما هم، والتدرّج الأبيض الشفاف بيختفي لوحده فوق
     الخلفيات الفاتحة.
     ولا واحدة من دي بتستخدم backdrop-filter أو blur — كلها تدرّجات وظلال
     ثابتة يرسمها المتصفح مرة ويخزّنها.
     ========================================================================= */
  /* الأسطح الكبيرة: النوافذ، الألواح، الأقسام، البطاقات */
  .modal,
  .side-drawer,
  .plan,
  .testimonial-card,
  .how-step,
  .why-edge-card,
  .trust-item,
  .order-row,
  .admin-product-row,
  .prompt-panel,
  .stay-nudge,
  .search-panel,
  .cat-dropdown-menu,
  .admin-quick-menu{
    background-image: var(--glass-sheen);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-lift);
  }

  /* العناصر الصغيرة: الأزرار الثانوية، الحقول، الشرائح، المفاتيح */
  .btn-ghost,
  .copy-btn,
  .admin-icon-btn,
  .admin-tabs button,
  .ctrl-group,
  .ctrl-group button,
  .drawer-link-row,
  .drawer-select,
  .grid-page-dots .gp-arrow,
  .contact-bubble,
  .back-to-top-fab,
  .admin-fab,
  .cat-dropdown-btn,
  nav.cats button,
  #catNav button{
    background-image: var(--glass-sheen-soft);
    box-shadow: var(--glass-lift-sm);
  }

  /* الحقول: غايرة شوية عن السطح اللي وراها عشان تبان إنها مكان كتابة */
  .field input, .field select, .field textarea,
  .drawer-input{
    background-image: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,201,77,0.18);
  }

  /* الأزرار الدهبي في أي مكان تاني غير كارت المنتج (نفس معدن .buy-btn) */
  .btn-primary, .nav-cta, .plan button, .hero-cta-primary{
    background-image: linear-gradient(180deg,
      rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 45%, rgba(90,55,0,0.16) 100%);
    border:1px solid rgba(255,255,255,0.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      inset 0 -1px 0 rgba(120,70,0,0.28),
      0 4px 12px rgba(0,0,0,0.3);
  }

  /* الشرائح والبادچات الصغيرة */
  .cat-chip, .ct-count, .request-count-overlay, .ct-cycle, .fav-btn,
  .order-status, .owned-pill, .status-pill{
    background-image: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 2px 7px rgba(0,0,0,0.28);
  }


  /* =========================================================================
     لوحة التحكم — إعادة تنسيق وتحجيم (8 سبتمبر 2026)
     -------------------------------------------------------------------------
     اللوحة دي بتُدار من الموبايل بشكل أساسي، وكانت متزنّقة: 8 تبويبات
     بتتلف على 3 صفوف من أزرار صغيرة، وحقول بارتفاع أقل من الحد المريح
     للمس، وتبويب "تصميم الموقع" شريط طويل من الإعدادات مفصولة بخطوط
     رفيعة من غير أي تجميع بصري. التعديلات هنا كلها عن الوضوح وسهولة
     اللمس — مش زخرفة.
     ========================================================================= */

  /* التبويبات: شريط واحد بالإزاحة بالإصبع بدل 3 صفوف مكسّرة،
     وأهداف لمس بارتفاع 44px (الحد الموصى به). */
  .admin-tabs{
    display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:18px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    overscroll-behavior-x:contain;
    padding-bottom:4px;
  }
  .admin-tabs::-webkit-scrollbar{display:none;}
  /* .admin-modal فوقيها touch-action:pan-y (عشان السحب الأفقي يبقى لـ JS
     بتاع طي اللوحة) — وده كان بيمنع المتصفح من تحريك شريط التبويبات أفقيًا
     أصلاً. الشريط ده بيسترد السحب الأفقي لنفسه. */
  .admin-tabs{ touch-action: pan-x; }
  .admin-tabs button{
    flex:0 0 auto; min-width:auto; white-space:nowrap;
    min-height:44px; padding:0 16px; border-radius:10px;
    font-size:var(--text-base); font-weight:600;
  }
  /* التبويب المفتوح ملّي مش مجرد حد ملوّن — يبان من نص متر */
  .admin-tabs button.active{
    background-color:rgba(255,201,77,0.16);
    border-color:var(--brass); color:var(--brass);
  }

  /* كل إعداد في صندوقه: تجميع بصري بدل شريط طويل مفصول بخطوط */
  .admin-card{
    background:var(--ink-2);
    background-image:var(--glass-sheen);
    border:1px solid var(--glass-edge); border-radius:14px;
    box-shadow:var(--glass-lift);
    padding:18px 16px 16px; margin-bottom:16px;
  }
  .admin-card > h4{
    margin:0 0 8px; font-size:15.5px; font-weight:700; color:var(--paper);
  }
  .admin-card > p.sub{ margin-bottom:14px; font-size:13px; line-height:1.65; }
  .admin-card > .modal-actions{ margin-top:14px; }
  .admin-card > .modal-actions button{ width:100%; }
  body.view-mode-desktop .admin-card > .modal-actions button{ width:auto; }

  /* الحقول: ارتفاع مريح للمس ونص أوضح */
  .modal .field{ margin-bottom:14px; }
  .modal .field label{ font-size:13.5px; color:var(--paper); opacity:0.82; margin-bottom:7px; }
  .modal .field input,
  .modal .field select,
  .modal .field textarea{
    min-height:46px; font-size:15px; padding:11px 13px; border-radius:10px;
  }
  .modal .field textarea{ min-height:96px; }

  /* الأزرار الأساسية في اللوحة: أهداف لمس كاملة */
  .modal .btn-primary, .modal .btn-ghost{
    min-height:46px; font-size:14.5px; border-radius:10px;
  }

  /* صفوف المنتجات في تبويب الإدارة: مسافات أوضح وصورة أكبر شوية */
  .admin-product-row{ padding:12px; border-radius:12px; margin-bottom:10px; }
  .admin-product-row img{ width:52px; height:66px; border-radius:8px; }
  .admin-product-actions button{ min-width:38px; min-height:38px; }

  @media(max-width:560px){
    /* اللوحة تاخد عرض الشاشة كامل تقريبًا بدل ما تفضل عمود ضيق في النص */
    .modal.admin-modal{ max-width:none; width:calc(100vw - 20px); padding:18px 14px; }
    .admin-card{ padding:16px 13px 14px; }
  }

  /* ===== جداول لوحة التحكم: كل صف بطاقة مستقلة =====
     الجداول (التقييمات، آخر الطلبات، سجل الزوار) كانت 5 أعمدة مضغوطة في
     عرض موبايل: العناوين بتتلف على سطرين، الشارات بتتقسم نصين، والتعليق
     بيتقص. الحل هنا هو نفس الحل اللي شغال في قسم الطلبات: **كل صف بطاقة**
     — إطار، حواف مدورة، وسطور "العنوان على اليمين والقيمة على الشمال".
     الجدول بيفضل <table> حقيقي في الـDOM (نفس البيانات والتصدير)، بس
     display بتتغير لبطاقات، والعنوان بييجي من data-label اللي stampTableLabels
     بتحطه من الـ<thead>. على الشاشات الواسعة بيرجع جدول عادي لإن الجدول
     أوضح لما يبقى فيه مكان. */
  .admin-modal table{ width:100%; border-collapse:collapse; font-size:13px; }
  .admin-modal thead th{
    text-align:start; padding:8px 6px; font-weight:700;
    color:var(--paper-dim); border-bottom:1px solid var(--line);
  }
  .admin-modal tbody td{ padding:8px 6px; border-bottom:1px solid var(--line); }

  @media(max-width:760px){
    .admin-modal table,
    .admin-modal tbody,
    .admin-modal tr,
    .admin-modal td{ display:block; }
    .admin-modal thead{ display:none; }   /* العناوين بقت جوه كل بطاقة */

    .admin-modal tbody tr{
      background:var(--ink-2);
      background-image:var(--glass-sheen);
      border:1px solid var(--glass-edge);
      border-radius:12px;
      box-shadow:var(--glass-lift-sm, var(--glass-lift));
      padding:12px 13px;
      margin-bottom:10px;
    }

    .admin-modal tbody td{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:14px; padding:0 0 6px; border-bottom:0;
      color:var(--paper); font-weight:600; line-height:1.6;
      text-align:end; word-break:break-word; min-width:0;
      /* القيم بتيجي مختلطة: تاريخ ووقت بالإنجليزي، إيميل، ونص عربي. من غير
         ده الصفحة RTL بتقلب التاريخ لـ"AM 9:10:00 ,9/8/2026". plaintext
         بتخلي كل قيمة تاخد اتجاهها من أول حرف فيها. */
      unicode-bidi:plaintext;
    }
    .admin-modal tbody td:last-child{ padding-bottom:0; }
    .admin-modal tbody td::before{
      content:attr(data-label);
      color:var(--paper-dim); font-weight:400;
      flex:0 0 auto; text-align:start; white-space:nowrap;
    }
    /* الخلية اللي عمودها بلا عنوان = عمود الأزرار: تاخد عرض البطاقة كامل */
    .admin-modal tbody td[data-label=""]{
      display:flex; gap:8px; padding-top:10px; margin-top:6px;
      border-top:1px solid var(--line);
    }
    .admin-modal tbody td[data-label=""]::before{ content:none; }
    /* زي أزرار بطاقة الطلب بالظبط: تملا عرض البطاقة بدل زرار صغير في الركن */
    .admin-modal tbody td[data-label=""] button{
      flex:1; min-height:38px; padding:7px; border-radius:8px; font-size:13px;
    }

    /* شارة الحالة كانت بتتلف على سطرين جوه العمود الضيق، وكل سطر بياخد
       خلفية مدورة لوحده — فتبان كأنها شارتين. سطر واحد دايمًا. */
    .admin-modal tbody td .order-status{ white-space:nowrap; }
  }


  /* ===== مساحة اللمس: 44 بكسل من غير ما شكل حاجة يتغير =====
     معيار أبل وجوجل الحد الأدنى 44×44. عندنا أزرار أيقونات 18×18 و24×24
     و13×22 — الزائر بيدوس ومش بيحصل حاجة، فيدوس تاني وتالت. الإحساس ده
     بالظبط اللي بيخلي الموقع يبان "مش مظبوط".

     الحل هنا **مش** تكبير الأزرار — ده كان هيبوّظ التصميم. بدلها طبقة
     شفافة (::after) متمركزة على الزرار وبتاخد 44×44 كحد أدنى. البكسلات
     المرسومة زي ما هي حرفيًا؛ اللي كبر هو منطقة الاستقبال بس.

     الأزرار اللي في صفوف متلاصقة بتتوسّع طوليًا بس — لو وسّعناها عرضيًا
     كانت هتسرق دوسات جارها، وده أسوأ من المشكلة الأصلية. */
  /* ملاحظة: نقاط السلايدر (.slider-dot) مستثناة عن قصد. قياسها 6×6 والمسافة
     بينها ~10px، فمنطقة 44px حوالين كل واحدة كانت بتغطي جارتها — الاختبار
     أثبت إن الدوسة على نقطة كانت بتروح للنقطة اللي جنبها. ده أسوأ من هدف
     صغير. النقط دي تحكّم ثانوي أصلاً (السحب بالإصبع بيعمل نفس الحاجة). */
  /* .search-icon-btn مستثناة كمان: عليها pointer-events:none — دي أيقونة
     زينة جوه خانة البحث مش زرار، والدوسة عليها بتروّح للخانة وده الصح. */
  /* ⚠ .fav-btn و.ct-cycle و.stay-nudge-close **مش** في القايمة دي عن قصد:
     الاتنين دول position:absolute أصلاً، وأي عنصر مثبّت مطلقًا هو نفسه مرجع
     صالح لطبقة اللمس بتاعته — مش محتاج relative. لما كانوا هنا، القاعدة دي
     (نفس أولوية قاعدتهم الأصلية، وبعدها في الملف) كانت بتغلب وتشيل تثبيتهم،
     فالقلب كان بيقع في مجرى الصفحة ويتقص بـoverflow:hidden بتاع الصورة.
     أي عنصر يتضاف هنا مستقبلاً: اتأكد الأول إنه static. */
  .slider-nav, .close-x, .slider-handle, .cat-fav-btn{
    position:relative;
  }
  .slider-nav::after, .close-x::after,
  .stay-nudge-close::after, .fav-btn::after, .ct-cycle::after,
  .slider-handle::after, .cat-fav-btn::after{
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:100%; height:100%; min-width:44px; min-height:44px;
    /* مافيش خلفية ولا حدود — طبقة استقبال لمس بس */
  }

  /* عناصر في صفوف: الارتفاع بس، عشان ما تتداخلش مع جارها */
  .util-link, .drawer-text-link, .why-edge-link, .theme-toggle-sm,
  .contact-item, .cat-nav button, #catNav button{
    position:relative;
  }
  .util-link::after, .drawer-text-link::after, .why-edge-link::after,
  .theme-toggle-sm::after, .contact-item::after,
  .cat-nav button::after, #catNav button::after{
    content:''; position:absolute; top:50%; left:0; right:0;
    transform:translateY(-50%);
    height:100%; min-height:44px;
  }

  /* =====================================================================
     11 سبتمبر 2026 — دفعة تحسينات بصرية موحّدة (Trust Cards + Footer
     احترافي + تحسين الكاروسيل الحالي + Sticky CTA للموبايل + حركة الأكورديون).
     زيرو لمس لأي business logic أو Worker أو بيانات — كله CSS + HTML ثابت،
     وأي نص جديد اتضاف عن طريق نظام الترجمة الموجود (data-i18n) مش نص مكتوب
     يدويًا. مفيش أي رقم أو إحصائية مُختلقة (زي "99% رضا" أو "10,000 عميل")
     لأننا مالوش رقم حقيقي موثّق النهارده — أي حاجة زي دي لازم تتضاف بعدين
     لما يبقى في رقم حقيقي فعلاً. */

  /* ---------- Trust cards: من صف كبسولات واحد لكروت مستقلة مرتفعة ---------- */
  .trust-badges{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    background:transparent; border:none; padding:0; box-shadow:none;
  }
  @media(max-width:980px){ .trust-badges{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:520px){ .trust-badges{ grid-template-columns:1fr; } }
  .trust-badge{
    display:flex; flex-direction:column; align-items:flex-start; text-align:start;
    gap:10px; padding:22px 20px; border-radius:var(--radius-lg);
    background:var(--ink-2); border:1px solid var(--line); box-shadow:var(--elev-1);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .trust-badge .icon-badge{ width:36px; height:36px; }
  .trust-badge .icon-badge svg{ width:19px; height:19px; }
  .trust-badge .tb-copy{ display:flex; flex-direction:column; gap:4px; }
  .trust-badge .tb-title{ display:block; font-weight:700; font-size:15px; color:var(--paper); }
  .trust-badge .tb-desc{ display:block; font-size:var(--text-sm); color:var(--paper-dim); line-height:1.6; font-weight:400; }
  @media (hover:hover) and (pointer:fine){
    .trust-badge:hover{
      transform:translateY(-3px); border-color:rgba(255,201,77,0.4);
      box-shadow:var(--elev-2), 0 0 0 1px rgba(255,201,77,0.16);
    }
  }

  /* ---------- Product cards: تسلسل بصري أوضح + zoom خفيف على الصورة ----------
     الرفعة/الحدود/الظل على .card:hover موجودين بالفعل من قبل — دول إضافة
     بسيطة فوقهم بس: زوم خفيف جدًا على الصورة نفسها (طبقة منفصلة، مفيش
     تعارض مع transform الكارت اللي بيرفع الكارت كله). */
  .card-title{ font-weight:700; letter-spacing:0.1px; }
  .card-media img{ transition:transform .35s ease; }
  @media (hover:hover) and (pointer:fine){
    .card:hover .card-media img{ transform:scale(1.045); }
  }
  @media(prefers-reduced-motion: reduce){
    .card-media img, .trust-badge{ transition:none !important; }
    .card:hover .card-media img, .trust-badge:hover{ transform:none !important; }
  }

  /* ---------- الصفوف الأفقية (كاروسيل "الأكثر طلبًا"/الأقسام): تلاشي الحواف
     + أسهم أكثر أناقة، بنفس آلية scrollRow/gp-arrow الموجودة أصلاً — بدون
     أي لمس للجافاسكريبت. ---------- */
  .grid-nav-wrap{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  @media(max-width:700px){
    .grid-nav-wrap{ -webkit-mask-image:none; mask-image:none; }
  }
  .grid-page-dots .gp-arrow{
    border-radius:var(--radius-pill);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .grid-page-dots .gp-arrow:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 4px 14px rgba(255,201,77,0.22); }
  .grid-page-dots .gp-arrow:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

  /* ---------- FAQ: حركة سهم انسيابية بدل التبديل الفجائي +/− ---------- */
  .faq-item summary::after{ content:"+"; display:inline-block; transition:transform .25s ease; }
  .faq-item[open] summary::after{ content:"+"; transform:rotate(135deg); }
  .faq-item{ transition:border-color .2s ease, background .2s ease; }
  .faq-item[open]{ border-color:var(--brass-dim); }
  @media(prefers-reduced-motion: reduce){ .faq-item summary::after{ transition:none; } }

  /* ---------- Footer احترافي: روابط سريعة + شعار في المنتصف + ثقة وتواصل ----------
     14 سبتمبر 2026: كان عمود "قصة العلامة" لوحده عمود عريض، والباقي (روابط/
     ثقة/تواصل) 3 أعمدة تانية — 4 عناصر في شبكة 3 أعمدة، فكان العنصر الرابع
     (تواصل معنا) بيلف لصف جديد لوحده ويسيب عمودين فاضيين جنبه. دلوقتي الشعار
     بقى نقطة مركزية صغيرة في العمود النص (بدل عمود عريض بقصة طويلة)، وثقة+
     تواصل اندمجوا في عمود واحد على الشمال — فبقت 3 عناصر حقيقية في 3 أعمدة،
     مفيش صف فاضي. */
  footer{ text-align:start; padding:44px 24px 24px; }
  .footer-inner{
    /* 15 سبتمبر 2026: كانت 1fr 1.1fr 1fr — يعني عمود "روابط سريعة" وعمود
       "ليه تثق فينا/تواصل معنا" بياخدوا نفس حصة العمود النص، مع إن محتواهم
       (روابط قصيرة، سطرين نص) أضيق من كده بكتير. النتيجة فراغ واضح بين
       نص كل عمود ومحتواه الفعلي، وبقى أوضح لما عرض الحاوية بقى أعرض
       (container-w-narrow المرن). الحل: العمودين الجانبيين بياخدوا بس
       عرض محتواهم (auto)، والعمود النص (الشعار) بياخد الباقي كله —
       أصلاً محتواه متمركز فمفيش فرق يبان لو المساحة اتوسّعت له. */
    display:grid; grid-template-columns:auto 1fr auto; gap:32px;
    max-width:var(--container-w-narrow); margin:0 auto 28px; padding-bottom:28px;
    border-bottom:1px solid var(--line);
  }
  @media(max-width:560px){ .footer-inner{ grid-template-columns:1fr; text-align:center; gap:36px; } }
  .footer-col h4{ color:var(--paper); font-size:var(--text-md); font-weight:700; margin:0 0 14px; }
  /* عمود الشعار في المنتصف — الشعار نفسه (badge+stack) ثم جملة وصف قصيرة
     تحته، الاتنين متمركزين (بخلاف عمودي الروابط اللي بيبدأوا من حرف البداية). */
  .footer-brand-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .footer-lockup{
    display:flex; align-items:center; gap:9px; min-width:0; margin-bottom:14px;
  }
  .footer-lockup .logo-badge{ width:34px; height:34px; }
  .footer-lockup .logo-badge .logo-mark{ width:19px; height:19px; }
  .footer-lockup .lg-ar{ font-size:17px; font-weight:700; letter-spacing:0.3px; white-space:nowrap; }
  .footer-lockup .lg-en{ font-size:15px; font-weight:700; letter-spacing:0.2px; white-space:nowrap; }
  .footer-story{ color:var(--paper-dim); font-size:var(--text-base); line-height:1.8; max-width:32ch; margin:0; }
  .footer-col .footer-links{ flex-direction:column; align-items:flex-start; gap:10px; margin-top:0; }
  @media(max-width:560px){ .footer-col .footer-links{ align-items:center; } }
  .footer-legal-links{ margin-top:14px !important; padding-top:14px; border-top:1px solid var(--line); }
  /* عمود "ليه تثق فينا" + "تواصل معنا" مدموجين — عنوان تاني (h4) وسط
     العمود محتاج مسافة فوقه يفصله عن الشارات اللي قبله. */
  .footer-trust-contact-col h4:not(:first-child){ margin-top:20px; }
  .footer-trust-row{ display:flex; flex-wrap:wrap; gap:10px; }
  @media(max-width:560px){ .footer-trust-row{ justify-content:center; } }
  .footer-trust-row .icon-badge{ width:30px; height:30px; }
  .footer-trust-row .icon-badge svg{ width:16px; height:16px; }
  .footer-contact-link{
    display:flex; align-items:center; gap:9px; color:var(--paper-dim);
    font-size:var(--text-base); text-decoration:none; width:fit-content; margin-bottom:10px;
  }
  @media(max-width:560px){ .footer-contact-link{ margin-inline:auto; } }
  .footer-contact-link svg{ width:18px; height:18px; flex:none; }
  .footer-contact-link:hover{ color:var(--brass); }
  .footer-address{
    display:flex; align-items:center; gap:9px; color:var(--paper-dim);
    font-size:var(--text-base); width:fit-content;
  }
  @media(max-width:560px){ .footer-address{ margin-inline:auto; } }
  @media(max-width:560px){
    .footer-brand-center{ order:-1; }
    .footer-lockup{ justify-content:center; }
  }
  footer #footerText{ text-align:center; }

  /* ---------- Sticky mobile CTA: شريط شراء ثابت أسفل الشاشة على الموبايل بس.
     برّه الـ<footer> تمامًا، عنصر مستقل. مخفي دايمًا على الديسكتوب. مساحة
     safe-area للآيفون. z-index أقل من contact-widget (200) عشان زرار
     التواصل يفضل هو الأعلى دايمًا، وبنرفع contact-widget فوق الشريط في
     max-width:560px تحت (نفس القاعدة الموجودة أصلاً لـsafe-area). ---------- */
  .sticky-mobile-cta{ display:none; }
  @media(max-width:767px){
    .sticky-mobile-cta{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      background:linear-gradient(180deg, rgba(19,19,22,0) 0%, var(--ink) 38%);
    }
    .sticky-mobile-cta .btn-primary{
      flex:1; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,0.4), 0 4px 14px rgba(255,201,77,0.22);
      /* هامش جانبي عشان زرار الشراء ميمتدش تحت الدايرتين العائمتين —
         12 سبتمبر 2026: ماجدي وضّح إنه عايز الدايرتين والزرار في سطر
         واحد فعلاً (الزرار بينهم)، مش الدايرتين عائمتين فوق شريط منفصل
         زي ما كان في الإصلاح السابق. القيمة = مسافة الدايرة عن الحافة
         (26px) + قطرها (62px) + فراغ بسيط (10px)، مطروح منها padding
         الشريط نفسه (14px) = 84px. */
      margin:0 84px;
    }
    @media(max-width:520px){
      /* الدايرة بتصغر لـ58px تحت 520px (شوف .back-to-top-fab أعلاه)،
         فالهامش بيتقلل بنفس النسبة: 26+58+8-14=78px. */
      .sticky-mobile-cta .btn-primary{ margin:0 78px; }
    }
    /* الدايرتين بقوا على نفس مستوى (bottom) زرار الشراء بالظبط — التلاتة
       في سطر واحد فعلي، مش دايرتين عائمتين فوق شريط منفصل (كانت المشكلة
       القديمة: 78px كانت بترفعهم فوق الشريط بدل ما يبقوا جواه — 12 سبتمبر
       2026، توضيح من ماجدي). */
    .contact-widget{ bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
    .fab-wrap-home{ bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  }
  body.view-mode-mobile .sticky-mobile-cta{ display:flex; }

  /* ---------- كروت التقييمات: مقاس موحّد بدل الطول المتغيّر ----------
     التقييم القصير كان بيسيب فراغ فاضي كبير في كارت طويل، والتقييم الطويل
     كان بيطلّع كارت أطول من جاره — فالصف كله كان شكله غير منتظم. دلوقتي كل
     كارت بارتفاع تقريبًا ثابت، والنص بيتقص عند 3 أسطر مع زرار "المزيد"
     بيظهر بس لو النص فعلاً أطول من 3 أسطر (مش زرار زيادة على تقييم قصير). */
  .testimonial-card{ display:flex; flex-direction:column; min-height:172px; }
  .testimonial-card p{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden; margin:0;
  }
  .testimonial-card.expanded p{ -webkit-line-clamp:unset; overflow:visible; }
  .testimonial-more{
    background:none; border:none; color:var(--brass); font-size:var(--text-sm);
    font-weight:700; padding:8px 0 0; cursor:pointer; align-self:flex-start;
    display:none; font-family:inherit;
  }
  .testimonial-more:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .testimonial-author{ margin-top:auto; padding-top:10px; }

/* 2026-09-16: make the existing cart action discoverable without changing card layout */
.card-actions .cart-action-btn{margin-bottom:2px}
.card-actions .cart-action-btn.in-cart{opacity:.72}


/* ===== Miga-Photobook library / catalog design 5 ===== */
.catalog-page{
  min-height:100vh;
}
.catalog-page .catalog-page-inner{
  width:100%;
  box-sizing:border-box;
}
.catalog-page .catalog-head{
  text-align:center;
  margin-bottom:24px;
}
.catalog-page .catalog-head h1{
  margin:0 0 10px;
}
.catalog-page .catalog-head p{
  margin:0 auto;
  max-width:760px;
  opacity:.82;
  line-height:1.8;
}
.catalog-page .catalog-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin:22px 0 28px;
}
.catalog-page .catalog-filter{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:inherit;
  border-radius:999px;
  padding:9px 15px;
  cursor:pointer;
  transition:all .18s ease;
}
.catalog-page .catalog-filter:hover{
  border-color:rgba(217,164,65,.65);
}
.catalog-page .catalog-filter.active{
  border-color:var(--brass,#d9a441);
  color:var(--brass,#d9a441);
}
.catalog-page .catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}
.catalog-page .catalog-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.catalog-page .catalog-card:hover{
  transform:translateY(-2px);
  border-color:rgba(217,164,65,.25);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.catalog-page .catalog-media-link{
  display:block;
  text-decoration:none;
}
.catalog-page .catalog-media{
  aspect-ratio:4/5;
  background:#17161d;
  overflow:hidden;
}
.catalog-page .catalog-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .28s ease;
}
.catalog-page .catalog-card:hover .catalog-media img{
  transform:scale(1.025);
}
.catalog-page .catalog-body{
  padding:14px;
}
.catalog-page .catalog-title{
  font-weight:700;
  line-height:1.45;
  min-height:42px;
}
.catalog-page .catalog-subtitle{
  margin-top:4px;
  font-size:.88rem;
  opacity:.64;
  line-height:1.45;
}
.catalog-page .catalog-price{
  margin-top:7px;
  font-weight:700;
  color:var(--brass,#d9a441);
}
.catalog-page .catalog-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.catalog-page .catalog-icon-btn{
  width:38px;
  height:38px;
  min-width:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .18s ease;
}
.catalog-page .catalog-icon-btn:hover{
  border-color:rgba(217,164,65,.7);
  color:var(--brass,#d9a441);
  transform:translateY(-1px);
}
.catalog-page .catalog-icon-btn svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.catalog-page .catalog-icon-btn.catalog-fav svg{
  fill:transparent;
}
.catalog-page .catalog-icon-btn.catalog-fav.is-fav{
  color:var(--brass,#d9a441);
  border-color:rgba(217,164,65,.65);
}
.catalog-page .catalog-icon-btn.catalog-fav.is-fav svg{
  fill:currentColor;
  stroke:currentColor;
}
.catalog-page .catalog-icon-btn.catalog-cart.in-cart{
  color:var(--brass,#d9a441);
  border-color:rgba(217,164,65,.65);
}
.catalog-page .catalog-package-link{
  margin-inline-start:auto;
  border:0;
  background:transparent;
  color:inherit;
  opacity:.78;
  cursor:pointer;
  padding:4px 0;
  font:inherit;
  font-size:.78rem;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.catalog-page .catalog-package-link:hover{
  opacity:1;
  color:var(--brass,#d9a441);
}
.catalog-page .catalog-package-link svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}
.catalog-page .catalog-status{
  text-align:center;
  padding:34px 12px;
  opacity:.8;
  grid-column:1/-1;
}
.catalog-page .catalog-back{
  display:inline-block;
  margin-top:24px;
}
.catalog-page .catalog-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,18px);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(20,20,24,.94);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-size:.9rem;
}
.catalog-page .catalog-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
@media(max-width:600px){
  .catalog-page .catalog-page-inner{padding-top:18px !important}
  .catalog-page .catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .catalog-page .catalog-body{padding:10px}
  .catalog-page .catalog-title{font-size:14px}
  .catalog-page .catalog-subtitle{font-size:12px}
  .catalog-page .catalog-price{font-size:13px}
  .catalog-page .catalog-card-actions{margin-top:9px}
  .catalog-page .catalog-icon-btn{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:9px;
  }
  .catalog-page .catalog-icon-btn svg{width:17px;height:17px}
  .catalog-page .catalog-package-link{
    font-size:10px;
    gap:3px;
  }
  .catalog-page .catalog-package-link svg{width:12px;height:12px}
}

/* =========================================================================
   لوحة التحكم — إعادة تخطيط شاملة (21 سبتمبر 2026)
   -------------------------------------------------------------------------
   طلب ماجدي: تنظيم واضح وفصل جيد بين المهام (مش "مغارة جحا")، ومساحة أكبر
   على الكمبيوتر بدل مودال صغير مزنوق، وإمكانية تكبير/تصغير المحتوى.
   القواعد هنا بتيجي بعد كل تعريفات .admin-tabs الأقدم في الملف، فبتكسبها
   بترتيب الكاسكيد (specificity واحدة، تعريف لاحق بيكسب) من غير ما نحتاج
   نمسح أو نلمس حاجة قديمة. نفس القواعد شغالة على الصفحتين العربي/الإنجليزي
   وصفحة الأدمن المخصصة، لأنهم التلاتة بيحمّلوا نفس styles.css.
   ========================================================================= */

/* مودال الإدارة: أوسع بكتير على الكمبيوتر (كان 920px مزنوق لمحتوى فيه
   جداول وتبويبات كتير) — وoverflow:auto عشان لو المحتوى اتكبّر (زوم) يبقى
   قابل للف/panning في الاتجاهين بدل ما يتقطع. touch-action:pan-y تسيب لمسة
   إصبع واحد تعمل سكرول عمودي عادي (المتصفح بيتكفل بيه لوحده)، وفي نفس الوقت
   تمنع المتصفح إنه يتصرف افتراضيًا مع لمستين (زوم/سحب الصفحة كلها) — بالظبط
   عشان كود الـpinch/pan اليدوي في app.js (setupAdminPinchPan) هو اللي ياخد
   القرار وقتها، مش المتصفح. */
.modal.admin-modal{ overflow:auto; touch-action:pan-y; }
body.view-mode-desktop .modal.admin-modal{ max-width:1180px; }

/* شريط التكبير/التصغير — عايش برّا #adminFormView قصدًا (سطر شقيق ليه مش
   جواه) عشان زراره نفسها متتأثرش بالـtransform:scale المطبّق على المحتوى.
   sticky عشان يفضل ظاهر لو المحتوى طويل ومتمرّر. أزرار +/− الرقمية اتشالت
   (21 سبتمبر) بطلب ماجدي — بدّلناها بحركة قرص إصبعين (pinch) حقيقية على
   المحتوى نفسه؛ فضل بس التلميح ونص النسبة وزرار "إعادة الحجم الطبيعي". */
.admin-zoom-controls{
  display:none; position:sticky; top:0; z-index:6;
  justify-content:flex-end; align-items:center; gap:8px;
  padding:6px 0 10px; margin-bottom:8px;
  background:var(--ink, #0c0c10);
}
#adminModalBg.show .admin-zoom-controls{ display:flex; }
.admin-zoom-hint{
  font-size:11px; color:var(--paper-dim); opacity:.75;
  margin-inline-end:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.admin-zoom-controls button{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
  background:transparent; color:var(--paper); font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s; flex-shrink:0;
}
.admin-zoom-controls button:hover{ border-color:var(--brass); color:var(--brass); }
.admin-zoom-label{
  font-size:12px; color:var(--paper-dim); min-width:40px; text-align:center;
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
#adminFormView{ transform-origin:top center; transition:transform .15s ease; }

/* زرار "القائمة الرئيسية" — بيظهر بس لما يكون قسم واحد مفتوح (طلب ماجدي
   21 سبتمبر: "عند الضغط على أي من أزرار الأقسام يظهر القسم فقط مباشرة مع
   إمكانية الرجوع للقائمة الرئيسية"). التبديل (إخفاء/إظهار) بيتحكم فيه
   app.js عبر setAdminTab()/showAdminMenu()، مش هنا. */
.admin-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:14px; padding:8px 14px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,0.03); color:var(--paper);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.admin-back-btn:hover{ border-color:var(--brass); color:var(--brass); background:rgba(197,164,101,0.08); }

/* التبويبات: من شريط واحد مسطّح بعشر أزرار (اللي كان بيحس بيه ماجدي إنه
   "متاهة") لمجموعات واضحة بعنوان لكل مجموعة — نفس الأزرار بالظبط (نفس الـid
   وnata-tab)، بس متجمّعة منطقيًا. عمود واحد على الموبايل، عمودين على
   الكمبيوتر. */
.admin-tabs{
  display:grid; grid-template-columns:1fr; gap:12px;
  margin-bottom:18px; overflow:visible; touch-action:auto;
}
body.view-mode-desktop .admin-tabs{ grid-template-columns:repeat(2,1fr); }
.admin-nav-group{
  background:rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px;
}
.admin-nav-group-label{
  font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:10px;
}
.admin-nav-group-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.admin-nav-group-btns button{
  flex:0 0 auto; min-height:44px; padding:0 16px; border-radius:10px;
  border:1px solid var(--line); background:transparent; color:var(--paper);
  font-size:var(--text-base); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s;
}
.admin-nav-group-btns button:hover{ border-color:var(--brass); }
.admin-nav-group-btns button.active{
  background-color:rgba(255,201,77,0.16); border-color:var(--brass); color:var(--brass);
}