:root{
    --bg:#F7F2EA;
    --card:#FFFDF9;
    --ink:#2A1E1A;
    --ink-soft:#6B5D53;
    --bordeaux:#7D2334;
    --bordeaux-dark:#5E1A27;
    --brass:#B8935A;
    --brass-light:#E4D3B4;
    --whatsapp:#25D366;
    --whatsapp-dark:#1DA851;
    --line: rgba(42,30,26,0.14);
    --radius: 18px;
    --header-height: 76px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  .hidden{ display:none !important; }
  html{scroll-behavior:smooth; overflow-x:hidden;}
  /* نُخفي محتوى الصفحة الرئيسية لحظياً حتى تصل الإعدادات فعلياً —
     بدونها، الأقسام المُخفاة (بالإدارة) كانت تظهر لحظة قبل اختفائها
     فوراً (وميض مزعج) لأن حالتها الافتراضية بالـHTML الثابت "ظاهرة"،
     وتُخفى فقط بعد استجابة الخادم. نُظهرها فوراً بعد وصول الاستجابة
     (نجحت أو فشلت) — راجعي loadSettingsFromServer بملف settings.js */
  #homepageRows{ opacity:0; transition:opacity .15s; }
  #homepageRows.settings-ready{ opacity:1; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Tajawal', sans-serif;
    line-height:1.6;
  }
  body.lock{ overflow:hidden; }
  h1,h2,h3, .display{ font-family:'El Messiri', serif; }
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  ::selection{ background:var(--brass-light); }

  :focus-visible{ outline: 2px solid var(--bordeaux); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

  .stitch-divider{ height:0; border-top:1.5px dashed var(--brass); opacity:0.6; }

  /* ---------- Announcement bar ---------- */
  .announce{
    background:var(--ink); color:var(--bg);
    text-align:center; font-size:0.78rem; font-weight:500;
    padding:9px 0; letter-spacing:0.2px;
    overflow:hidden; white-space:nowrap;
    position:sticky; top:0; z-index:51;
  }
  @media (max-width:600px){
    .announce{ font-size:0.7rem; padding:7px 0; }
  }
  /* الحركة لم تعد تُدار عبر @keyframes إطلاقاً — بعد ثلاث محاولات
     متتالية فشلت بسبب تفاعل غير موثوق بين محاذاة النص واتجاه flex
     داخل صفحة RTL (نتج عنها: يبدأ من المنتصف، ثم يبدأ من أقصى اليسار
     بتأخير، ثم اتجاه معكوس)، صار التحكّم بالكامل عبر جافاسكربت
     (fillAnnounceTrack/startAnnounceAnimation بـsettings.js) بإحداثيات
     بكسل صريحة مبنية على قياس فعلي لموضع المسار، لا تخمين عبر CSS —
     هذا يُلغي الغموض تماماً ويجعل الحركة قابلة للتحقق رياضياً */
  .announce b{ color:var(--brass-light); font-weight:700; }
  .announce-track{ display:inline-flex; }
  .announce.static .announce-track{ display:block; width:100%; padding:0 16px; }
  .announce.static #announceText2{ display:none; }
  /* كل نسخة مكرَّرة من النص (chunk) تحمل فراغها الخاص — بدل فراغ واحد
     على النسخة الكاملة فقط، حتى تتباعد كل التكرارات المتعددة بانتظام */
  .announce-chunk{ display:inline-block; padding-inline-end:60px; }

  /* ---------- Header / Menu (grid-based so it stays balanced at every width) ---------- */
  header{
    position:sticky; top:var(--announce-height, 0px); z-index:50;
    border-bottom:1px solid var(--line);
  }
  /* القائمة الجانبية (nav-menu) متداخلة داخل header — تحتاج هيدر
     بـz-index أعلى من طبقة التعتيم (٢٢٠) والقائمة نفسها (٢٣٠) حتى
     تظهر صح فوقهما وقت فتحها فقط. رفع z-index الهيدر بشكل دائم كان
     يغطّي السلة وصفحة المنتج والبحث بالغلط — لذا نرفعه فقط أثناء
     فتح القائمة تحديداً، ونرجعه لوضعه الطبيعي بعدها */
  body.nav-menu-open header{ z-index:260; }
  /* هذا الـ pseudo-element يحمل الخلفية الضبابية بدل الهيدر نفسه —
     لأن backdrop-filter على الهيدر مباشرة كان يكسر تموضع قائمة
     الجوال (position:fixed) بجعل الهيدر "حاوية" جديدة لها بدل الشاشة كاملة. */
  header::before{
    content:'';
    position:absolute; inset:0;
    background:rgba(247,242,234,0.92);
    backdrop-filter:blur(8px);
    z-index:-1;
  }

  /* سلايدر خلفية للناف بار الشفافة — نفس بنية البنر العرضي، لكن
     موضوعة خلف الهيدر تحديداً (اختيارية: الرئيسية فقط أو الموقع كامل) */
  .nav-slider-bg{ position:relative; width:100%; height:var(--nav-slider-height, 480px); overflow:hidden; }
  .nav-slider-bg .fw-banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
  .nav-slider-bg .fw-banner-slide.active{ opacity:1; }
  .nav-slider-bg .fw-banner-slide picture, .nav-slider-bg .fw-banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
  .nav-slider-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.1) 60%); }
  /* بوضع الشفافية: الهيدر يبقى fixed دائماً (قبل وبعد التمرير) —
     تثبيت واحد يمنع أي "قفزة" بالتخطيط عند تبديل الحالة، فقط
     الخلفية واللون يتغيّران */
  .transparent-nav-mode header{ position:fixed; top:var(--announce-height, 0px); left:0; right:0; border-bottom:none; background:transparent; transition:background .3s; }
  .transparent-nav-mode header::before{ display:none; }
  .transparent-nav-mode header, .transparent-nav-mode header a, .transparent-nav-mode header .store-name{ color:var(--nav-transparent-text-color, #fff); }
  /* الأيقونات (بحث/حسابي) والقائمة المصغَّرة تستخدم لون حدّ (border)
     وخلفية (background) ثابتَين، مو color — لازم تُستهدَف صراحة،
     التوريث من header وحده ما يكفي لأنها تُعرِّف لوناً خاصاً بها */
  .transparent-nav-mode header .icon-btn{ border-color:var(--nav-transparent-icon-color, #fff); color:var(--nav-transparent-icon-color, #fff); }
  .transparent-nav-mode header .menu-toggle{ border-color:var(--nav-transparent-icon-color, #fff); }
  .transparent-nav-mode header .menu-toggle span{ background:var(--nav-transparent-icon-color, #fff); }
  /* الشعار صورة (img) — خاصية color ما تؤثّر عليها إطلاقاً، نجبرها
     أبيض بفلتر بصري بدلاً من ذلك */
  .transparent-nav-mode header #brandLogo{ filter:brightness(0) invert(1); }
  .transparent-nav-mode header #brandLogo.has-custom-light-logo{ filter:none; }
  .transparent-nav-mode.nav-scrolled header{ background:rgba(247,242,234,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  .transparent-nav-mode.nav-scrolled header::before{ display:block; }
  .transparent-nav-mode.nav-scrolled header, .transparent-nav-mode.nav-scrolled header a, .transparent-nav-mode.nav-scrolled header .store-name{ color:var(--ink); }
  .transparent-nav-mode.nav-scrolled header .icon-btn{ border-color:var(--ink); color:var(--ink); }
  .transparent-nav-mode.nav-scrolled header .menu-toggle{ border-color:var(--ink); }
  .transparent-nav-mode.nav-scrolled header .menu-toggle span{ background:var(--ink); }
  .transparent-nav-mode.nav-scrolled header #brandLogo{ filter:none; }
  .header-inner{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:18px;
    height:var(--header-height);
    padding:0 28px;
  }
  .brand{
    font-family:'El Messiri', serif; font-size:1.55rem; font-weight:700;
    letter-spacing:0.5px; color:var(--bordeaux); white-space:nowrap;
  }
  .brand span{ color:var(--ink); font-weight:400; font-size:0.85rem; display:block; font-family:'Tajawal',sans-serif; letter-spacing:0; margin-top:-2px;}
  #brandNameAr{ display:inline; font-size:1.55rem; font-weight:700; color:var(--bordeaux); font-family:'El Messiri',serif; }

  .nav-menu{
    display:flex; align-items:center; justify-content:center; gap:34px;
    width:100%;
  }
  .nav-menu a{
    font-size:0.95rem; font-weight:700; color:var(--ink);
    position:relative; padding:6px 2px; white-space:nowrap;
  }
  .nav-menu a::after{
    content:''; position:absolute; right:0; bottom:0; width:0; height:2px;
    background:var(--bordeaux); transition:width .2s;
  }
  .nav-menu a:hover::after{ width:100%; }

  /* عنصر قائمة له صفحات فرعية — سهم صغير، وقائمة منسدلة تظهر
     بالتمرير على الديسكتوب، وبالضغط بالجوال (نفتحها بجافاسكربت) */
  .nav-item-dropdown{ position:relative; display:inline-flex; align-items:center; }
  .nav-item-dropdown > a{ display:flex; align-items:center; gap:4px; cursor:pointer; }
  .nav-dropdown-arrow{ font-size:0.7rem; transition:transform .2s; }
  .nav-item-dropdown.open .nav-dropdown-arrow{ transform:rotate(180deg); }
  .nav-dropdown-menu{
    display:none; position:absolute; top:100%; right:0; margin-top:14px;
    background:var(--bg); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12); padding:8px; min-width:200px; z-index:50;
  }
  .nav-item-dropdown.open .nav-dropdown-menu{ display:block; }
  .nav-dropdown-menu a{
    display:block; padding:9px 14px; font-size:0.88rem; font-weight:600;
    color:var(--ink); border-radius:8px; white-space:nowrap;
  }
  .nav-dropdown-menu a:hover{ background:var(--brass-light); }
  .nav-dropdown-menu a::after{ display:none; } /* لا نريد خط التحديد السفلي هنا */
  /* القائمة المنسدلة دائماً بخلفية فاتحة صلبة، بغض النظر عن شفافية
     الهيدر نفسه — فنص روابطها يبقى داكناً دائماً لضمان وضوحه */
  .transparent-nav-mode .nav-dropdown-menu a{ color:var(--ink) !important; }

  .header-actions{ display:flex; align-items:center; gap:10px; justify-self:end; }
  .icon-btn{
    width:42px; height:42px; border-radius:50%;
    border:1.5px solid var(--ink); flex-shrink:0; color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s, color .2s, border-color .2s;
  }
  .icon-btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .icon-btn-whatsapp:hover{ background:var(--whatsapp); border-color:var(--whatsapp); color:#fff; }
  .icon-btn svg{ width:19px; height:19px; }

  .cart-btn{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; flex-shrink:0;
    background:var(--ink); color:var(--bg);
    border-radius:50%;
    transition: background .2s;
  }
  .cart-btn svg{ width:19px; height:19px; }
  .cart-btn:hover{ background:var(--bordeaux); }
  .cart-count{
    position:absolute; top:-7px; left:-7px;
    background:var(--brass); color:var(--ink);
    font-size:0.7rem; font-weight:800;
    width:19px; height:19px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  .menu-toggle{ display:none; }

  @media (max-width:860px){
    /* ٥ عناصر فعلية على الجوال بدل ٣: القائمة، البحث، الشعار،
       حسابي، والسلة — كل عنصر بعموده الخاص حتى نقدر نرتّبها كما
       تحبين (القائمة والبحث يمين، الشعار وسط، حسابي والسلة يسار) */
    .header-inner{
      grid-template-columns:auto auto 1fr auto auto;
      justify-content:space-between;
    }
    .brand{ justify-self:center; text-align:center; order:3; }
    .menu-toggle{ order:1; }
    .header-search-btn{ order:2; }
    /* header-actions كانت تجمع الثلاث أيقونات بخلية واحدة — على
       الجوال نفكّها بـdisplay:contents حتى يوصل البحث لصف القائمة،
       وتبقى حسابي والسلة سوا يسار */
    .header-actions{ display:contents; }
    .header-actions .icon-btn:not(.header-search-btn){ order:4; }
    .header-actions .cart-btn{ order:5; }
    .nav-menu{
      position:fixed; top:0; right:0; height:100vh; width:min(300px,80vw);
      background:var(--bg); flex-direction:column; align-items:flex-start;
      justify-content:flex-start;
      padding:100px 28px 28px; gap:26px;
      transform:translateX(calc(100% + 60px)); /* يخرج بالكامل مع ظلّه فلا يظهر شريط ظل على حافة الشاشة */ transition:transform .3s ease;
      box-shadow:-20px 0 40px rgba(0,0,0,0.1);
      z-index:230; /* فوق كل شيء — أعلى القائمة الرئيسية (السلة، صفحة المنتج/حسابي) */
    }
    .nav-menu.open{ transform:translateX(0); }
    .nav-menu a{ font-size:1.1rem; }
    /* قائمة الجوال المنسدلة لها خلفية فاتحة صلبة دائماً (مستقلة عن
       صورة الهيدر الشفاف خلفها) — نصّها يبقى غامقاً دائماً بلا علاقة
       بوضع الشفافية أو التمرير، حتى يبقى واضحاً فوق خلفيتها الصلبة */
    .transparent-nav-mode .nav-menu a,
    .transparent-nav-mode.nav-scrolled .nav-menu a{ color:var(--ink) !important; }
    /* بالجوال، القائمة الفرعية تتوسّع بنفس القائمة (تنسدل تحت
       عنوانها مباشرة) بدل صندوق منفصل عائم فوق باقي الروابط —
       أوضح وأسهل باللمس من صندوق يغطّي المحتوى تحته */
    .nav-item-dropdown{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
    .nav-dropdown-menu{
      position:static; display:none; box-shadow:none; border:none; margin-top:10px;
      padding:0 0 0 18px; background:transparent; min-width:0; width:100%;
    }
    .nav-item-dropdown.open .nav-dropdown-menu{ display:flex; flex-direction:column; gap:16px; }
    .nav-dropdown-menu a{ padding:0; font-size:1rem; font-weight:600; }
    .menu-toggle{
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      width:42px; height:42px; border-radius:50%; border:1.5px solid var(--ink);
      justify-self:start;
    }
    .menu-toggle span{ width:18px; height:2px; background:var(--ink); }
    .nav-overlay{
      position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:220;
      opacity:0; pointer-events:none; transition:opacity .3s;
    }
    .nav-overlay.open{ opacity:1; pointer-events:auto; }
  }

  /* ---------- Hero ---------- */
  .hero{ padding:64px 0 30px; position:relative; }
  .hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; align-items:center; gap:48px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.85rem; font-weight:700; color:var(--bordeaux);
    letter-spacing:1px; margin-bottom:18px;
  }
  .eyebrow::before{ content:''; width:26px; height:1.5px; background:var(--bordeaux); display:inline-block;}
  .hero h1{ font-size:clamp(2.3rem, 4.3vw, 3.5rem); font-weight:700; line-height:1.16; margin-bottom:20px; }
  .hero h1 em{ font-style:normal; color:var(--bordeaux); }
  .hero p{ color:var(--ink-soft); font-size:1.08rem; max-width:46ch; margin-bottom:26px; }

  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
  .btn-primary{
    background:var(--bordeaux); color:#fff; padding:14px 30px; border-radius:999px;
    font-weight:700; font-size:1rem; transition:transform .15s, background .2s;
  }
  .btn-primary:hover{ background:var(--bordeaux-dark); transform:translateY(-2px); }
  .btn-ghost{
    padding:14px 26px; border-radius:999px; border:1.5px solid var(--ink); font-weight:700;
    transition: background .2s, color .2s;
  }
  .btn-ghost:hover{ background:var(--ink); color:var(--bg); }

  .hero-stats{ display:flex; gap:30px; flex-wrap:wrap; }
  .hero-stats div strong{ font-family:'El Messiri',serif; font-size:1.5rem; color:var(--bordeaux); display:block; }
  .hero-stats div span{ font-size:0.8rem; color:var(--ink-soft); }

  .hero-art{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:visible; max-width:100%; }
  .hero-slideshow{ position:relative; width:72%; aspect-ratio:1/1; border-radius:20px; box-shadow:0 24px 34px rgba(42,30,26,0.22); z-index:1; overflow:hidden; }
  .fw-banner-slider{
    position:relative; width:100vw; margin-inline-start:calc(50% - 50vw);
    height:min(60vh, 480px); min-height:260px; overflow:hidden;
  }
  /* نجبر LTR داخل مسار السلايدر فقط — التمرير الأفقي (scrollLeft)
     يتصرّف بشكل غير متّسق بين المتصفحات داخل سياق RTL، وإجباره
     LTR هنا يضمن حساباً يمكن التنبؤ به لموضع كل صورة */
  .fw-banner-track{
    direction:ltr; display:flex; width:100%; height:100%; overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
    user-select:none; -webkit-user-select:none;
  }
  .fw-banner-track::-webkit-scrollbar{ display:none; }
  .fw-banner-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
  .fw-banner-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; height:100%; }
  .fw-banner-slide picture, .fw-banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
  .fw-banner-dots{ position:absolute; bottom:16px; right:50%; transform:translateX(50%); display:flex; gap:8px; z-index:2; }
  .fw-banner-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; }
  .fw-banner-dot.active{ background:#fff; }
  .fw-banner-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.85);
    font-size:1.4rem; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
  }
  .fw-banner-arrow:hover{ background:#fff; }
  .fw-banner-arrow.prev{ left:16px; }
  .fw-banner-arrow.next{ right:16px; }
  .fw-banner-overlay{
    position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:24px; background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.4)); pointer-events:none;
  }
  .fw-banner-overlay h2{ color:#fff; font-size:clamp(1.4rem, 4vw, 2.4rem); margin-bottom:10px; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
  .fw-banner-overlay p{ color:#fff; font-size:clamp(0.9rem, 2vw, 1.1rem); margin-bottom:18px; max-width:560px; text-shadow:0 1px 6px rgba(0,0,0,0.3); }
  .fw-banner-btn{
    display:inline-block; background:var(--bordeaux); color:#fff; padding:12px 32px; border-radius:999px;
    font-weight:700; font-size:0.95rem; transition:transform .15s; pointer-events:auto;
  }
  .fw-banner-btn:hover{ transform:translateY(-2px); }
  .hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
  .hero-slide.active{ opacity:1; }

  .image-row-grid{ display:grid; gap:16px; }
  .image-row-grid.cols-1{ grid-template-columns:1fr; }
  .image-row-grid.cols-2{ grid-template-columns:1fr 1fr; }
  .image-row-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
  .image-row-grid img{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }
  .image-row-grid a{ display:block; }
  @media (max-width:767px){
    .image-row-grid.cols-2, .image-row-grid.cols-3{ grid-template-columns:1fr; }
  }

  .reviews-slider{ position:relative; }
  .reviews-slider-track{
    direction:ltr; display:flex; gap:20px; overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
    user-select:none; -webkit-user-select:none; padding:4px 4px 12px;
  }
  .reviews-slider-track::-webkit-scrollbar{ display:none; }
  .reviews-slider-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
  .testimonial-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 18px 18px; text-align:center;
    flex:0 0 calc(33.333% - 14px); scroll-snap-align:start; direction:rtl;
    box-shadow:0 4px 18px rgba(0,0,0,0.05); position:relative;
  }
  .testimonial-quote-mark{
    font-family:Georgia, serif; font-size:2.8rem; line-height:1; color:var(--brass);
    opacity:0.5; margin-bottom:-6px; height:32px;
  }
  .testimonial-stars{ color:var(--brass); font-size:0.95rem; margin-bottom:10px; }
  .testimonial-comment{ font-size:0.88rem; margin-bottom:16px; line-height:1.8; color:var(--ink); }
  .testimonial-footer{
    display:flex; align-items:center; gap:10px; justify-content:center;
    padding-top:14px; border-top:1px dashed var(--line);
  }
  .testimonial-footer img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; pointer-events:none; }
  .testimonial-footer-text{ text-align:right; }
  .testimonial-name{ display:block; font-size:0.82rem; font-weight:700; }
  .testimonial-product{ display:block; font-size:0.75rem; color:var(--ink-soft); }

  /* شبكة صفحة "كل الآراء" — نفس لغة بطاقة الشهادة بالرئيسية بصرياً،
     لكن بتخطيط شبكي متجاوب بدل سلايدر أفقي */
  .all-reviews-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;
    margin-top:20px;
  }
  .all-reviews-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:20px; box-shadow:0 4px 18px rgba(0,0,0,0.05); display:flex; flex-direction:column; gap:10px;
  }
  .all-reviews-card.clickable{ cursor:pointer; transition:transform .15s, box-shadow .15s; }
  .all-reviews-card.clickable:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.09); }
  .all-reviews-stars{ color:var(--brass); font-size:0.95rem; }
  .all-reviews-comment{ font-size:0.9rem; line-height:1.75; color:var(--ink); flex:1; }
  .all-reviews-meta{
    display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px dashed var(--line);
  }
  .all-reviews-meta img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .all-reviews-meta-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .all-reviews-name{ font-weight:700; font-size:0.85rem; }
  .all-reviews-product{ font-size:0.76rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .all-reviews-date{ font-size:0.72rem; color:var(--ink-soft); white-space:nowrap; }
  @media (max-width:640px){
    .all-reviews-grid{ grid-template-columns:1fr; gap:14px; }
  }

  .reviews-slider-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg);
    font-size:1.3rem; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .reviews-slider-arrow.prev{ right:-14px; }
  .reviews-slider-arrow.next{ left:-14px; }
  @media (max-width:860px){
    .testimonial-card{ flex:0 0 85%; }
    .reviews-slider-arrow{ display:none; }
  }

  .store-rating-summary{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .store-rating-average{ font-size:2.2rem; font-weight:800; color:var(--bordeaux); }
  .store-rating-stars{ color:var(--brass); font-size:1.4rem; }
  .store-rating-count{ font-size:0.85rem; color:var(--ink-soft); }
  .store-rating-add{ max-width:420px; margin:16px auto; text-align:center; padding:16px; border:1px dashed var(--brass); border-radius:14px; }
  .store-rating-add textarea{ width:100%; margin:10px 0; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; }
  .store-rating-add button{ padding:10px 20px; border:1.5px solid var(--ink); border-radius:999px; background:none; font-weight:700; cursor:pointer; }
  .store-rating-add .star-picker{ justify-content:center; }
  .hero-art .ring{ position:absolute; inset:6%; border:1.5px dashed var(--brass); border-radius:50%; animation:spin 40s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .hero-art .art-inner{ width:60%; filter:drop-shadow(0 24px 34px rgba(42,30,26,0.22)); }
  .hero-colors{
    position:absolute; bottom:6%; right:6%; left:6%;
    background:var(--card); border:1px dashed var(--brass); border-radius:999px;
    padding:8px 14px; display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:0.75rem; font-weight:700; color:var(--ink-soft);
    max-width:88%; margin:0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .hero-colors .dots{ display:flex; gap:4px; flex-shrink:0; }
  .hero-colors .dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }

  /* ---------- Sections shared ---------- */
  .section-head{ text-align:center; max-width:560px; margin:0 auto 44px; }
  .section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:10px; }
  .section-head p{ color:var(--ink-soft); }

  /* ---------- About ---------- */
  .about{ padding:60px 0; border-top:1px solid var(--line); }
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
  .about h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:16px; }
  .about p{ color:var(--ink-soft); margin-bottom:16px; }
  .about-points{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .about-point{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
  .about-point strong{ display:block; font-size:0.95rem; margin-bottom:4px; }
  .about-point span{ font-size:0.82rem; color:var(--ink-soft); }

  /* ---------- Products ---------- */
  .products{ padding:70px 0 90px; }
  .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .filter-shortcut-link{ display:inline-block; padding:8px 18px; border:1.5px solid var(--ink); border-radius:999px; font-size:0.85rem; font-weight:700; text-decoration:none; color:var(--ink); }

  .deal-products-row{ display:flex; align-items:center; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
  .deal-product-card{ flex:1; min-width:200px; text-align:center; padding:20px; border:1px solid var(--line); border-radius:16px; position:relative; }
  .deal-product-card.deal-secondary{ border-color:var(--bordeaux); border-width:2px; }
  .deal-product-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; margin-bottom:12px; }
  .deal-product-card h3{ font-size:1rem; margin-bottom:6px; }
  .deal-price{ font-weight:800; color:var(--bordeaux); }
  .deal-badge{ position:absolute; top:-12px; right:50%; transform:translateX(50%); background:var(--bordeaux); color:#fff; padding:4px 14px; border-radius:999px; font-size:0.78rem; font-weight:800; white-space:nowrap; }
  .deal-plus{ font-size:1.8rem; font-weight:800; color:var(--ink-soft); flex-shrink:0; }
  .fbt-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
  .fbt-card{ text-align:center; width:130px; }
  .fbt-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; margin-bottom:8px; background:var(--card); }
  .fbt-check{ display:flex; align-items:flex-start; gap:6px; font-size:0.78rem; text-align:right; margin-bottom:4px; cursor:pointer; }
  .fbt-check input{ margin-top:2px; flex-shrink:0; }
  .fbt-price{ font-size:0.8rem; font-weight:700; color:var(--bordeaux); }
  .fbt-plus{ font-size:1.4rem; color:var(--ink-soft); flex-shrink:0; }
  .fbt-summary{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:14px; background:var(--card); border-radius:12px; }
  .deal-summary{ background:var(--card); border-radius:14px; padding:18px; }
  .pp-deal-box{ background:var(--card); border:1.5px dashed var(--bordeaux); border-radius:16px; padding:16px; margin:20px 0; }
  .pp-deal-badge{ display:inline-block; background:var(--bordeaux); color:#fff; font-size:0.75rem; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
  .pp-deal-row{ display:flex; gap:12px; align-items:flex-start; }
  .pp-deal-row img{ width:70px; height:70px; object-fit:cover; border-radius:10px; background:var(--bg); flex-shrink:0; }
  .pp-deal-row h4{ font-size:0.9rem; margin-bottom:2px; }
  .countdown-box{ background:var(--bordeaux); color:#fff; text-align:center; padding:12px; border-radius:12px; margin-bottom:22px; font-size:0.95rem; }
  .countdown-box b{ font-variant-numeric:tabular-nums; }
  .countdown-expired{ background:var(--ink); color:#fff; text-align:center; padding:12px; border-radius:12px; margin-bottom:22px; }
  .deal-summary-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:0.9rem; }
  .deal-summary-total{ font-weight:800; font-size:1.1rem; border-top:1px dashed var(--line); padding-top:12px; margin-top:6px; }
  .deal-summary-savings{ color:var(--whatsapp-dark); font-weight:700; }
  @media (max-width:700px){
    .deal-products-row{ flex-direction:column; }
    .deal-plus{ transform:rotate(90deg); }
  }
  .filter-shortcut-link:hover{ background:var(--ink); color:#fff; }
  .products-layout{ display:flex; gap:32px; align-items:flex-start; }
  .products-layout .grid{ flex:1; }
  #productsFilterSidebar{ width:230px; flex-shrink:0; position:sticky; top:100px; }
  .filter-group{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
  .filter-group:last-of-type{ border-bottom:none; }
  .filter-group h4{ font-size:0.88rem; margin-bottom:12px; }
  .price-range-inputs{ display:flex; align-items:center; gap:8px; }
  .price-range-inputs input{ width:0; flex:1; padding:8px 10px; border-radius:8px; border:1.5px solid var(--line); font-size:0.85rem; }
  .filter-checkbox-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:0.85rem; }
  .filter-checkbox-row input{ width:auto; }
  @media (max-width:900px){
    .products-layout{ flex-direction:column; }
    #productsFilterSidebar{ width:100%; position:static; }
  }
  .card{
    background:var(--card); border-radius:var(--radius); border:1px solid var(--line);
    padding:22px; display:flex; flex-direction:column;
    transition:box-shadow .25s, transform .25s;
  }
  .card:hover{ box-shadow:0 22px 40px rgba(42,30,26,0.10); transform:translateY(-3px); }

  .card-media{
    background: linear-gradient(160deg, var(--brass-light), var(--bg));
    border-radius:14px; aspect-ratio:5/4;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px; position:relative; overflow:hidden; cursor:pointer;
  }
  .out-of-stock-badge{
    position:absolute; top:52px; inset-inline-end:12px; z-index:2;
    background:rgba(42,30,26,0.85); color:#fff; font-size:0.75rem; font-weight:800;
    padding:5px 12px; border-radius:999px;
  }
  .wishlist-btn{
    position:absolute; top:10px; inset-inline-end:10px; z-index:2;
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.9);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    border:none; cursor:pointer; transition:transform .15s;
  }
  .wishlist-btn:hover{ transform:scale(1.08); }
  .wishlist-btn.active{ color:var(--bordeaux); }
  .pp-wishlist-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:10px; margin-top:10px; border-radius:999px;
    border:1.5px solid var(--line); background:none; color:var(--ink); cursor:pointer; font-size:0.88rem;
  }
  .pp-wishlist-btn.active{ color:var(--bordeaux); border-color:var(--bordeaux); }
  .low-stock-note{ color:var(--bordeaux); font-size:0.78rem; font-weight:700; margin:-10px 0 12px; }
  .add-btn:disabled, .stepper button:disabled{ opacity:0.5; cursor:not-allowed; }
  .card-media svg{ width:56%; }
  .card-media img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .card-tag{
    position:absolute; top:12px; right:12px; background:var(--bg);
    border:1px dashed var(--brass); font-size:0.72rem; font-weight:700;
    padding:4px 10px; border-radius:999px; color:var(--bordeaux);
  }
  .view-hint{
    position:absolute; bottom:10px; left:10px;
    background:rgba(42,30,26,0.85); color:#fff; font-size:0.7rem; font-weight:700;
    padding:5px 11px; border-radius:999px; opacity:0; transition:opacity .2s;
  }
  .card-media:hover .view-hint{ opacity:1; }
  @media (hover: none){ .view-hint{ opacity:1; } }

  .slider-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,0.85); color:var(--ink);
    font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s, background .2s;
  }
  .card-media:hover .slider-arrow{ opacity:1; }
  @media (hover: none){ .slider-arrow{ opacity:1; } }
  .slider-arrow:hover{ background:#fff; }
  .slider-arrow.prev{ right:8px; }
  .slider-arrow.next{ left:8px; }
  .slider-dots{
    position:absolute; bottom:10px; right:50%; transform:translateX(50%);
    display:flex; gap:5px;
  }
  .slider-dots .dot{
    width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.6);
    transition:background .2s, width .2s;
  }
  .slider-dots .dot.active{ background:#fff; width:16px; border-radius:4px; }

  .card h3{
    font-size:1.25rem; margin-bottom:4px; cursor:pointer;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; line-clamp:2;
  }
  .card .desc{
    color:var(--ink-soft); font-size:0.92rem; margin-bottom:12px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; line-clamp:2;
  }
  .price{ font-weight:900; color:var(--bordeaux); font-size:1.15rem; margin-bottom:16px; }
  .price-compare-at{ text-decoration:line-through; color:var(--ink-soft); font-weight:600; font-size:0.85em; }
  .price-current{ color:var(--bordeaux); font-weight:900; }
  .price small{ font-weight:400; font-size:0.75rem; color:var(--ink-soft); }

  .field-label{ font-size:0.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:8px; letter-spacing:0.3px; }

  /* تمييز اسم الخيار ببطاقة المنتج بالرئيسية تحديداً — حتى تنتبه
     العميلة إن فيه خياراً عليها تختاره، بلا المساس بـ.field-label
     المشتركة (تُستخدم بسياقات أخرى مثل تسمية طريقة الدفع بالدفع) */
  .field-label-card-variation{ font-size:0.78rem; font-weight:700; color:var(--bordeaux); margin-bottom:8px; letter-spacing:0.3px; }

  .swatches{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .swatch{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; position:relative; transition: transform .15s; }
  .swatch::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid transparent; }
  .swatch.active::after{ border-color:var(--ink); }
  .swatch:hover{ transform:scale(1.08); }

  .sizes{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
  .size-pill{ padding:7px 16px; border-radius:999px; border:1.5px solid var(--line); font-size:0.85rem; font-weight:700; transition: all .15s; }
  .size-pill.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .size-pill:disabled{ opacity:0.45; cursor:default; }

  .option-preorder{ opacity:0.5; }
  /* خيار غير متوفر: يجب أن يُلاحَظ على أي لون. اللون يخفَّت بطبقة بيضاء شفافة (لا opacity كي لا يبهت الخط نفسه)،
     وفوقه خط مائل عريض مزدوج (قلب أبيض بحافة داكنة) يظهر على الفاتح والداكن معاً */
  .option-unavailable{ cursor:not-allowed; }
  .option-unavailable.option-soldout{ cursor:pointer; }
  .swatch.option-unavailable{ border-color:var(--line); }
  .swatch.option-unavailable::before{ content:''; position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,0.32); }
  .swatch.option-unavailable::after{
    inset:-1px; border:0; border-radius:50%;
    background:linear-gradient(to top right, transparent 41%, #1d1d1d 42%, #1d1d1d 46%, #fff 46.5%, #fff 53.5%, #1d1d1d 54%, #1d1d1d 58%, transparent 59%);
  }
  .swatch.option-unavailable.active::after{ border:0; }
  .swatch.option-unavailable.active{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
  .size-pill.option-unavailable, .size-pill.option-unavailable:disabled{
    position:relative; opacity:1; color:var(--ink-soft); border-style:dashed; text-decoration:line-through; text-decoration-thickness:2px; overflow:hidden;
    background:repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 6px, transparent 6px 12px);
  }
  .size-pill.option-unavailable::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top right, transparent 46%, rgba(29,29,29,0.75) 47%, rgba(29,29,29,0.75) 53%, transparent 54%);
  }
  .size-pill.option-unavailable.active{ background:var(--ink); color:var(--bg); border-style:solid; }
  .size-pill.option-unavailable.active::after{ background:linear-gradient(to top right, transparent 46%, rgba(255,255,255,0.85) 47%, rgba(255,255,255,0.85) 53%, transparent 54%); }

  .more-options-btn{
    background:var(--brass-light); border:1.5px solid var(--brass); color:var(--ink);
    font-size:0.75rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .more-options-btn:hover{ background:var(--brass); }

  .card-footer{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; }
  .stepper{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
  .stepper button{ width:34px; height:38px; font-size:1.1rem; font-weight:700; }
  .stepper button:hover{ background:var(--bg); }
  .stepper span{ width:28px; text-align:center; font-weight:700; }

  .add-btn{
    flex:1; background:var(--ink); color:var(--bg); padding:12px 14px; border-radius:999px;
    font-weight:700; font-size:0.92rem; display:flex; align-items:center; justify-content:center; gap:8px;
    transition: background .2s;
  }
  .add-btn:hover{ background:var(--bordeaux); }
  .add-btn.added{ background:#3E6B4F; }

  /* ---------- Trust strip ---------- */
  .trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; }
  .trust .wrap{
    display:flex; flex-wrap:nowrap; gap:16px; justify-content:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .trust .wrap::-webkit-scrollbar{ display:none; }
  .trust-item{ display:flex; align-items:center; gap:10px; font-size:0.88rem; font-weight:700; color:var(--ink-soft); flex-shrink:0; white-space:nowrap; }
  .trust-item svg{ width:20px; height:20px; flex-shrink:0; stroke:var(--bordeaux); }

  /* ملاحظة التواصل مع الدعم الفني تحت رسائل فشل إرسال رمز التحقق */
  .support-note{ display:inline-block; margin-top:6px; font-size:0.84rem; line-height:1.8; color:var(--ink-soft); }
  .support-note a{ color:var(--bordeaux); font-weight:700; text-decoration:underline; }

  /* بالجوال، صف واحد بلا التفاف يعني تمرير أفقي يتجاوز عرض الشاشة —
     نستبدله بشبكة عمودين تحتضن كل الميزات بلا أي تمرير جانبي، مع
     إبقاء تصميم سطر واحد بالكمبيوتر كما هو تماماً بلا أي تغيير */
  @media (max-width:600px){
    .trust .wrap{
      display:grid; grid-template-columns:repeat(2, 1fr);
      overflow-x:visible;
    }
    .trust-item{ white-space:normal; }
  }

  /* حماية عامة: أي محتوى مخصّص (HTML/CSS) تضيفينه من لوحة التحكم لا
     يقدر يكسر تجاوب الصفحة حتى لو كان فيه عناصر بعرض ثابت أو جداول */
  #homepageRows, #ppCustomBlock{ max-width:100%; overflow-x:auto; }
  #homepageRows img, #ppCustomBlock img, .homepage-custom-row img{ max-width:100%; height:auto; }
  .homepage-custom-row{ padding:50px 0; }
  @media (max-width:640px){
    .homepage-custom-row{ padding:34px 0; }
  }
  .text-header-row{ text-align:center; max-width:560px; margin:0 auto; }
  .text-header-row h2{ margin-bottom:10px; }

  footer{ padding:48px 0 30px; color:var(--ink-soft); font-size:0.85rem; border-top:1px solid var(--line); }
  .footer-columns{
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px;
    text-align:center; margin-bottom:28px;
  }
  .footer-col:empty{ display:none; }
  .footer-col h4{ font-family:'El Messiri',serif; font-size:1rem; color:var(--ink); margin-bottom:12px; }
  .footer-col a{ display:block; color:var(--ink-soft); font-size:0.85rem; margin-bottom:8px; }
  .footer-col a:hover{ color:var(--bordeaux); }
  .footer-social-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .footer-social-icon{
    display:grid; place-items:center;
    width:38px; height:38px; border-radius:50%; background:var(--card);
    border:1px solid var(--line); color:var(--ink); text-decoration:none;
  }
  .footer-social-icon svg{ width:18px; height:18px; display:block; }
  .footer-social-icon:hover{ opacity:0.85; }
  .footer-bottom{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
    padding-top:20px; border-top:1px dashed var(--line); text-align:center;
  }
  .footer-payment-badges{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; }
  .footer-payment-badge{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:34px; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px var(--line); background:#fff; }
  .footer-payment-badge img{ width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
  .footer-payment-badge svg{ display:block; width:100%; height:100%; }

  /* ---------- Product detail page (overlay) ---------- */
  .product-page{
    position:fixed; inset:0; background:var(--bg); z-index:120;
    overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(14px);
    transition:opacity .3s, transform .3s;
  }
  .product-page.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .pp-header{
    display:flex; align-items:center; justify-content:space-between;
    height:var(--header-height); padding:0 28px; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--bg); z-index:5;
  }
  .pp-back{
    display:inline-flex; align-items:center; gap:8px; font-weight:700;
    background:var(--card); border:1.5px solid var(--line); border-radius:999px;
    padding:8px 18px; color:var(--ink); transition:background .2s, border-color .2s;
  }
  .pp-back:hover{ background:var(--bordeaux); border-color:var(--bordeaux); color:#fff; }
  .pp-back:hover{ color:var(--bordeaux); }
  .pp-body{
    max-width:1100px; margin:0 auto; padding:44px 28px 90px;
    display:grid; grid-template-columns:1fr 1fr; gap:56px;
  }
  .pp-related-slot{ max-width:1100px; margin:0 auto; padding:0 28px 60px; }
  .pp-related-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  @media (max-width:860px){ .pp-related-grid{ grid-template-columns:repeat(2, 1fr); } }
  .pp-gallery-main{
    background:linear-gradient(160deg, var(--brass-light), var(--bg));
    border-radius:22px; aspect-ratio:1/1; width:100%;
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
    position:relative; overflow:hidden;
  }
  .pp-gallery-main svg{ width:56%; filter:drop-shadow(0 20px 30px rgba(42,30,26,0.18)); }
  .pp-gallery-main img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .pp-thumbs{ display:flex; gap:12px; flex-wrap:wrap; }
  .pp-thumb{
    width:78px; height:78px; border-radius:12px; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; background:var(--card);
    transition:border-color .2s;
  }
  .pp-thumb.active{ border-color:var(--bordeaux); }
  .pp-thumb svg{ width:62%; }
  .pp-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

  .pp-info .eyebrow{ margin-bottom:12px; }
  .pp-info h1{ font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:10px; }
  .pp-info .pp-price{ font-weight:900; color:var(--bordeaux); font-size:1.4rem; margin-bottom:18px; }
  .pp-info .pp-desc{ color:var(--ink-soft); margin-bottom:26px; line-height:1.9; }
  .pp-info .card-footer{ margin-top:20px; }
  .pp-features{ margin-top:28px; border-top:1px dashed var(--brass); padding-top:20px; }
  .pp-tabs{ display:flex; gap:8px; margin-top:32px; border-bottom:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-question{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:16px 4px; background:none; border:none; text-align:right; cursor:pointer;
    font-size:0.95rem; font-weight:700; color:var(--ink);
  }
  .faq-toggle-icon{ font-size:1.2rem; color:var(--bordeaux); flex-shrink:0; margin-inline-start:12px; }
  .faq-answer{ padding:0 4px 18px; color:var(--ink-soft); font-size:0.9rem; line-height:1.8; }
  .nps-score-btn{
    aspect-ratio:1/1; border-radius:10px; border:1.5px solid var(--line); background:var(--bg);
    font-weight:700; font-size:1rem; cursor:pointer; transition:all .15s;
  }
  .nps-score-btn:hover:not(:disabled){ background:var(--bordeaux); color:#fff; border-color:var(--bordeaux); }
  .nps-score-btn:disabled{ opacity:0.4; cursor:not-allowed; }
  .pp-tab{ padding:10px 4px; margin-inline-end:20px; font-weight:700; font-size:0.92rem; color:var(--ink-soft); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; }
  .pp-tab.active{ color:var(--bordeaux); border-bottom-color:var(--bordeaux); }
  .pp-tab-panel{ padding-top:16px; }
  .star-picker{ display:flex; gap:4px; }
  .star-picker button{ font-size:1.8rem; line-height:1; color:var(--brass); background:none; border:none; cursor:pointer; padding:2px; }
  .shortcode-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:14px; margin:12px 0; }
  .shortcode-grid-row{ display:flex; gap:14px; margin:12px 0; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .shortcode-grid-row::-webkit-scrollbar{ display:none; }
  .shortcode-grid-row .shortcode-item{ flex:0 0 120px; }
  .category-scroll-row{ display:flex; gap:20px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .category-scroll-row::-webkit-scrollbar{ display:none; }
  .category-scroll-row::-webkit-scrollbar{ display:none; }
  .category-scroll-row .card{ flex:0 0 260px; }
  .category-scroll-item{ flex:0 0 auto; width:290px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; }
  .category-scroll-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; }
  .category-scroll-item .csi-name{ font-weight:700; font-size:0.95rem; }
  .category-scroll-item .csi-price{ font-size:0.9rem; color:var(--bordeaux); font-weight:700; }
  .shortcode-item{ display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; }
  .shortcode-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }
  .shortcode-item-name{ font-size:0.82rem; font-weight:700; }
  .shortcode-item-price{ font-size:0.8rem; color:var(--bordeaux); font-weight:700; }
  #categoryPageHeader{ margin-bottom:28px; }
  #categoryHeaderName{ margin-bottom:16px; }
  #categorySubList{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; margin-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  #categorySubList::-webkit-scrollbar{ display:none; }
  #categorySubList::-webkit-scrollbar{ display:none; }
  .category-sub-chip{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:inherit; width:84px; }
  .category-sub-chip img{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:1.5px solid var(--line); }
  .category-sub-chip span{ font-size:0.78rem; text-align:center; font-weight:700; }
  .custom-page-hero{
    text-align:center; padding:32px 20px 28px; margin-bottom:32px;
    background:linear-gradient(160deg, var(--brass-light), var(--bg));
    border-radius:20px; border:1px solid var(--line);
  }
  .custom-page-hero-icon{ font-size:2.2rem; margin-bottom:10px; opacity:0.85; }
  .custom-page-hero h1{ margin:0; font-size:1.6rem; }
  .custom-page-body{ line-height:2; font-size:0.98rem; color:var(--ink); }
  .custom-page-body h2{ font-size:1.25rem; margin:32px 0 14px; padding-inline-start:14px; border-inline-start:4px solid var(--bordeaux); }
  .custom-page-body h3{ font-size:1.05rem; margin:24px 0 10px; color:var(--bordeaux); }
  .custom-page-body p{ margin-bottom:16px; color:var(--ink-soft); }
  .custom-page-body ul, .custom-page-body ol{ margin:0 0 18px 0; padding-inline-start:24px; }
  .custom-page-body li{ margin-bottom:8px; color:var(--ink-soft); }
  .custom-page-body a{ color:var(--bordeaux); text-decoration:underline; text-underline-offset:3px; }
  .custom-page-body strong, .custom-page-body b{ color:var(--ink); }
  .custom-page-body hr{ border:none; border-top:1px dashed var(--line); margin:32px 0; }
  .custom-page-body img{ border-radius:14px; margin:16px 0; }
  .search-result-item{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
  .search-result-thumb{ width:52px; height:52px; border-radius:10px; overflow:hidden; flex-shrink:0; display:block; }
  .search-result-thumb img{ width:100%; height:100%; object-fit:cover; }
  .search-result-name{ display:block; font-weight:700; font-size:0.9rem; }
  .search-result-price{ display:block; font-size:0.82rem; color:var(--bordeaux); font-weight:700; margin-top:2px; }
  .pp-features li{ display:flex; gap:10px; font-size:0.9rem; color:var(--ink-soft); margin-bottom:10px; align-items:flex-start; }
  .pp-features li::before{ content:'—'; color:var(--brass); font-weight:700; }

  @media (max-width:860px){
    .pp-body{ grid-template-columns:1fr; gap:30px; padding-top:30px; }
  }

  /* ---------- Cart Drawer ----------
     ترتيب الطبقات بالموقع (من الأسفل للأعلى):
     الهيدر (50) < صفحة المنتج/حسابي (120) < السلة (200-210) < قائمة الجوال (220-230)
     السلة يجب أن تكون فوق صفحة المنتج/حسابي لأنها تُفتح من داخلهما */
  .overlay{
    position:fixed; inset:0; background:rgba(42,30,26,0.45);
    opacity:0; pointer-events:none; transition:opacity .25s; z-index:200;
  }
  .overlay.open{ opacity:1; pointer-events:auto; }

  .drawer{
    position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw);
    background:var(--bg); z-index:210;
    transform:translateX(calc(100% + 70px)); transition:transform .32s cubic-bezier(.25,.8,.3,1);
    display:flex; flex-direction:column; box-shadow:-20px 0 50px rgba(0,0,0,0.15);
  }
  .drawer.open{ transform:translateX(0); }

  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1.5px dashed var(--brass); }
  .drawer-head h3{ font-size:1.3rem; }
  .close-btn{ font-size:1.4rem; width:36px; height:36px; border-radius:50%; }
  .close-btn:hover{ background:var(--brass-light); }

  .drawer-body{ flex:1; overflow-y:auto; padding:20px 24px; }
  .empty-cart{ text-align:center; color:var(--ink-soft); padding:60px 10px; }
  .cart-note{ padding:12px 16px; background:var(--brass-light); border-radius:12px; margin-bottom:14px; font-size:0.82rem; line-height:1.7; }
  .free-ship-bar{ padding:12px 16px; background:var(--card); border-radius:12px; margin-bottom:16px; font-size:0.85rem; }
  .free-ship-bar.reached{ text-align:center; font-weight:700; color:var(--whatsapp-dark); background:#e4f3e8; }
  .free-ship-track{ height:6px; background:var(--brass-light); border-radius:999px; overflow:hidden; margin-top:8px; }
  .free-ship-fill{ height:100%; background:var(--bordeaux); border-radius:999px; transition:width .3s; }
  .notify-btn{ background:var(--ink); }
  .empty-cart svg{ width:64px; margin:0 auto 16px; opacity:0.5; }

  .cart-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
  .cart-item .ci-media{ width:64px; height:64px; border-radius:10px; background:var(--brass-light); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .cart-item .ci-media svg{ width:70%; }
  .cart-item .ci-media img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .ci-info{ flex:1; }
  .ci-info h4{ font-size:0.98rem; margin-bottom:2px; }
  .ci-meta{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:8px; }
  .ci-row{ display:flex; align-items:center; justify-content:space-between; }
  .ci-price{ font-weight:800; color:var(--bordeaux); font-size:0.92rem; }
  .mini-stepper{ display:flex; align-items:center; gap:8px; }
  .mini-stepper button{ width:26px; height:26px; border:1px solid var(--line); border-radius:50%; font-weight:700; }
  .remove-btn{ font-size:0.78rem; color:var(--ink-soft); text-decoration:underline; margin-top:6px; }
  .remove-btn:hover{ color:var(--bordeaux); }

  .drawer-foot{ padding:20px 24px 26px; border-top:1.5px dashed var(--brass); }
  .foot-row{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:16px; font-size:1.05rem; }
  .foot-row.discount-row{ font-weight:500; font-size:0.9rem; color:var(--whatsapp-dark); }
  .foot-row.subtotal-row{ font-weight:500; font-size:0.9rem; color:var(--ink-soft); }
  .checkout-note{
    text-align:center; font-size:0.8rem; color:var(--ink-soft);
    margin-top:12px; line-height:1.7;
  }

  .coupon-section{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--brass); }
  .coupon-input-row{ display:flex; gap:8px; }
  .coupon-input-row input{
    flex:1; padding:10px 14px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--card); font-family:inherit; font-size:0.88rem; color:var(--ink);
    text-transform:uppercase;
  }
  .coupon-input-row button{
    padding:10px 18px; border-radius:999px; background:var(--ink); color:#fff;
    font-weight:700; font-size:0.85rem; white-space:nowrap; transition:background .2s;
  }
  .coupon-input-row button:hover{ background:var(--bordeaux); }
  .coupon-error{ color:var(--bordeaux); font-size:0.78rem; margin-top:8px; }
  .coupon-applied{
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(37,211,102,0.08); border:1px solid rgba(37,211,102,0.3);
    border-radius:12px; padding:10px 14px; font-size:0.85rem;
  }
  .coupon-applied b{ color:var(--whatsapp-dark); }
  .coupon-applied button{ color:var(--ink-soft); text-decoration:underline; font-size:0.78rem; }

  .foot-row small{ display:block; font-weight:400; font-size:0.75rem; color:var(--ink-soft); margin-top:2px; }
  .checkout-btn{
    width:100%; background:var(--ink); color:#fff; padding:14px; border-radius:999px;
    font-weight:800; font-size:1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    transition:background .2s;
  }
  .checkout-btn:hover{ background:var(--bordeaux); }
  .checkout-btn:disabled{ background:#c9bdb6; cursor:not-allowed; }
  .checkout-btn small{ font-weight:500; font-size:0.72rem; opacity:0.85; }

  .optional-toggle{
    display:flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:700;
    margin-bottom:10px; cursor:pointer;
  }
  .optional-toggle input{ width:auto; }

  .pg-banner{ padding:34px 0 46px; }
  .pg-inner{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:44px 56px; border-radius:28px; color:var(--ink);
    background:radial-gradient(120% 140% at 100% 0%, #F6ECDD 0%, #EFDFC8 55%, #E8D3B6 100%); border:1px solid rgba(184,147,90,.38); box-shadow:0 18px 44px rgba(94,26,39,.10); }
  .pg-inner::before{ content:''; position:absolute; width:340px; height:340px; border-radius:50%; inset-inline-end:-90px; top:-150px; background:rgba(184,147,90,.14); pointer-events:none; }
  .pg-inner::after{ content:''; position:absolute; width:200px; height:200px; border-radius:50%; inset-inline-start:-60px; bottom:-110px; background:rgba(125,35,52,.07); pointer-events:none; }
  .pg-inner > *{ position:relative; z-index:1; }
  .pg-has-img{ background:linear-gradient(to left, rgba(247,242,234,.97) 0%, rgba(247,242,234,.88) 46%, rgba(247,242,234,.10) 100%), var(--pg-img) center/cover no-repeat; }
  .pg-has-img::before,.pg-has-img::after{ display:none; }
  .pg-art{ flex:none; width:300px; } .pg-art svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 10px 18px rgba(94,26,39,.16)); }
  .pg-body{ flex:1; min-width:0; max-width:560px; } .pg-body h2{ margin:0 0 12px; font-size:1.75rem; line-height:1.4; color:var(--bordeaux); font-weight:800; }
  .pg-body p{ margin:0 0 26px; font-size:1.02rem; color:var(--ink-soft); line-height:2; }
  .pg-actions{ display:flex; gap:12px 14px; flex-wrap:wrap; align-items:center; }
  .pg-btn{ font:inherit; font-weight:700; font-size:.95rem; border-radius:999px; padding:12px 28px; cursor:pointer; text-decoration:none; display:inline-block; border:1.5px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; }
  .pg-btn:hover{ transform:translateY(-1px); }
  .pg-btn-main{ background:var(--bordeaux); color:#fff; box-shadow:0 8px 18px rgba(125,35,52,.28); } .pg-btn-main:hover{ background:var(--bordeaux-dark); }
  .pg-btn-ghost{ background:rgba(255,255,255,.55); color:var(--bordeaux); border-color:rgba(125,35,52,.45); } .pg-btn-ghost:hover{ background:#fff; }
  .pg-link{ font-weight:700; font-size:.92rem; color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--brass); padding:6px 4px; }
  .pg-overlay{ position:fixed; inset:0; z-index:9999; background:rgba(30,15,20,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
  .pg-lock{ overflow:hidden; }
  .pg-modal{ position:relative; background:var(--card,#fffdf9); color:var(--ink); border-radius:20px; max-width:460px; width:100%; max-height:92vh; overflow:auto; padding:22px 20px 20px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
  .pg-modal h3{ margin:0 0 14px; font-size:1.15rem; text-align:center; }
  .pg-close{ position:absolute; top:10px; inset-inline-start:10px; border:0; background:var(--brass-light,#f6f1e7); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:.9rem; color:var(--ink); }
  .pg-steps{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:12px; position:relative; }
  .pg-step{ display:flex; gap:14px; align-items:center; background:var(--bg,#faf6ef); border:1px solid var(--line); border-radius:14px; padding:12px; }
  .pg-step-ic{ position:relative; flex:none; width:54px; height:54px; border-radius:16px; background:#fff; color:var(--bordeaux); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--brass); }
  .pg-num{ position:absolute; top:-8px; inset-inline-end:-8px; background:var(--bordeaux); color:#fff; width:22px; height:22px; border-radius:50%; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .pg-step-tx b{ display:block; font-size:.95rem; } .pg-step-tx span{ display:block; font-size:.82rem; color:var(--ink-soft); line-height:1.7; }
  .pg-go{ width:100%; background:var(--bordeaux); color:#fff; text-align:center; }
  @media (max-width:760px){ .pg-banner{ padding:22px 0 30px; } .pg-inner{ flex-direction:column-reverse; text-align:center; padding:30px 22px 32px; gap:18px; border-radius:22px; } .pg-art{ width:210px; } .pg-body h2{ font-size:1.4rem; } .pg-body p{ font-size:.95rem; margin-bottom:20px; } .pg-actions{ justify-content:center; } .pg-actions .pg-btn{ flex:1 1 150px; text-align:center; } .pg-has-img{ background:linear-gradient(to top, rgba(247,242,234,.97) 0%, rgba(247,242,234,.9) 60%, rgba(247,242,234,.35) 100%), var(--pg-img) center/cover no-repeat; } }
  
/* دليل «أهدي بالجوال» المصوَّر */
.pg-more{ display:block; width:100%; margin:12px 0 0; background:none; border:1.5px solid var(--bordeaux); color:var(--bordeaux); border-radius:999px; padding:10px 14px; font:inherit; font-weight:700; cursor:pointer; }
.pg-modal.pg-guide{ max-width:520px; }
.pg-guide-sub{ color:var(--ink-soft); font-size:.88rem; margin:-4px 0 14px; text-align:center; }
.pg-guide-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:26px; }
.pg-guide-item{ position:relative; }
.pg-guide-item:not(:last-child)::after{ content:'↓'; position:absolute; inset-inline:0; bottom:-22px; text-align:center; color:var(--brass,#B8935A); font-size:1.2rem; }
.pg-guide-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.pg-guide-head b{ display:block; font-size:1rem; } .pg-guide-head span:not(.pg-num){ display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.7; }
.pg-num-lg{ position:static !important; flex:none; width:30px; height:30px; font-size:.95rem; display:inline-flex; align-items:center; justify-content:center; }
.pg-stage{ display:flex; justify-content:center; background:linear-gradient(160deg,#f3e9dc,#ead9c4); border-radius:16px; padding:18px 10px; }
.pg-stage-img{ max-width:100%; max-height:420px; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.pgm-phone{ position:relative; width:232px; background:#fff; border:7px solid #1f1a18; border-radius:30px; box-shadow:0 12px 30px rgba(0,0,0,.28); overflow:hidden; color:#2A1E1A; font-size:11.5px; line-height:1.5; text-align:right; }
.pgm-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:70px; height:14px; background:#1f1a18; border-radius:0 0 10px 10px; z-index:2; }
.pgm-screen{ padding:20px 10px 12px; min-height:330px; display:flex; flex-direction:column; gap:8px; background:#F7F2EA; }
.pgm-top{ display:flex; justify-content:space-between; align-items:center; padding:2px 2px 6px; border-bottom:1px solid rgba(42,30,26,.12); } .pgm-top b{ color:#7D2334; font-size:12.5px; }
.pgm-prod{ display:flex; gap:8px; background:#fff; border-radius:10px; padding:7px; border:1px solid rgba(42,30,26,.1); }
.pgm-prod-img{ width:62px; height:62px; flex:none; border-radius:8px; overflow:hidden; } .pgm-prod-img.sm{ width:46px; height:46px; }
.pgm-prod-b b{ display:block; font-size:11px; } .pgm-prod-b span{ color:#7D2334; font-weight:700; }
.pgm-sw{ display:flex; gap:4px; margin-top:4px; } .pgm-sw i{ width:12px; height:12px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,.15); }
.pgm-cta{ margin-top:auto; background:#7D2334; color:#fff; text-align:center; padding:9px; border-radius:10px; font-weight:700; }
.pgm-pulse{ animation:pgmPulse 1.8s ease-in-out infinite; } @keyframes pgmPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(125,35,52,.4);} 50%{ box-shadow:0 0 0 7px rgba(125,35,52,0);} } @media (prefers-reduced-motion:reduce){ .pgm-pulse{ animation:none; } }
.pgm-field{ background:#fff; border:1px solid rgba(42,30,26,.14); border-radius:8px; padding:4px 8px; flex:1; } .pgm-field small{ display:block; color:#6B5D53; font-size:9.5px; } .pgm-field span{ font-weight:600; }
.pgm-two{ display:flex; gap:6px; }
.pgm-toggle{ display:flex; align-items:center; gap:6px; background:linear-gradient(135deg,#fdf3f5,#fff7e8); border:1.5px solid #B8935A; border-radius:10px; padding:8px; font-weight:700; font-size:11px; }
.pgm-chk{ width:16px; height:16px; border-radius:4px; background:#7D2334; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex:none; }
.pgm-card{ display:flex; flex-direction:column; gap:6px; background:#fffdf9; border:1px dashed #B8935A; border-radius:10px; padding:7px; }
.pgm-noaddr{ text-align:center; color:#2e7d4f; font-weight:700; margin-top:auto; }
.pgm-wa-head{ display:flex; gap:8px; align-items:center; background:#075E54; color:#fff; padding:20px 10px 8px; margin:-20px -10px 0; } .pgm-wa-head small{ display:block; opacity:.8; font-size:9.5px; }
.pgm-av{ width:32px; height:32px; border-radius:50%; background:#B8935A; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.pgm-s3 .pgm-screen{ background:#e5ddd5; } .pgm-wa-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.pgm-bub{ background:#fff; border-radius:0 10px 10px 10px; padding:8px 10px 4px; box-shadow:0 1px 1px rgba(0,0,0,.12); max-width:96%; }
.pgm-link{ margin-top:6px; color:#0a6fb7; text-decoration:underline; word-break:break-all; text-align:left; } .pgm-bub time{ display:block; text-align:left; color:#8a8a8a; font-size:9px; margin-top:2px; }
.pgm-gift-hero{ text-align:center; background:linear-gradient(160deg,#7D2334,#4d1421); color:#fff; border-radius:12px; padding:10px 6px; } .pgm-gift-hero .pgm-big{ font-size:24px; line-height:1.1; } .pgm-gift-hero b{ display:block; } .pgm-gift-hero small{ opacity:.85; }
.pgm-msg{ background:#fffdf9; border-inline-start:3px solid #B8935A; padding:5px 8px; border-radius:6px; }
.pgm-it{ display:flex; gap:8px; align-items:center; background:#fff; border-radius:10px; padding:6px; border:1px solid rgba(42,30,26,.1); } .pgm-it small{ display:block; color:#6B5D53; }
.pgm-track{ display:flex; flex-direction:column; gap:5px; } .pgm-st{ display:flex; gap:7px; align-items:center; font-weight:600; opacity:.55; } .pgm-st.done,.pgm-st.now{ opacity:1; }
.pgm-st i{ width:18px; height:18px; border-radius:50%; background:#2e7d4f; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:10px; flex:none; } .pgm-st.now i{ background:#B8935A; }
.pgm-box{ position:relative; margin:6px auto 0; width:150px; height:84px; background:linear-gradient(180deg,#c9a26a,#b8935a); border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,.2); }
.pgm-ribbon{ position:absolute; inset-block:0; left:50%; width:16px; transform:translateX(-50%); background:#7D2334; } .pgm-ribbon::before{ content:''; position:absolute; inset-inline:-60px; top:50%; height:16px; transform:translateY(-50%); background:#7D2334; }
.pgm-tag{ position:absolute; bottom:-10px; inset-inline-start:-8px; background:#fffdf9; border-radius:6px; padding:4px 8px; box-shadow:0 3px 8px rgba(0,0,0,.25); transform:rotate(-6deg); font-weight:700; font-size:10px; } .pgm-tag small{ font-weight:400; color:#6B5D53; }
.pgm-note{ margin-top:auto; text-align:center; color:#6B5D53; font-size:10px; }
@media (max-width:420px){ .pgm-phone{ width:216px; } }

  .gift-phone-toggle{ background:linear-gradient(135deg,#fdf3f5,#fff7e8); border:1.5px solid var(--brass); border-radius:12px; padding:12px 14px; }
  .gift-phone-card{ margin:-2px 0 16px; padding:14px; border:1.5px dashed var(--brass); border-radius:12px; background:#fffdf9; }
  .gift-phone-card .gp-intro{ font-size:0.84rem; color:var(--ink-soft); margin:0 0 10px; line-height:1.8; }
  .gift-phone-card .gp-note{ font-size:0.8rem; color:var(--ink-soft); margin:4px 0 0; }
  .checkout-view, .verify-view{ display:none; }
  .checkout-view.active, .verify-view.active{ display:block; }
  .cart-view.hidden{ display:none; }

  .back-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:18px; }
  .back-link:hover{ color:var(--bordeaux); }

  .form-group{ margin-bottom:16px; }
  .form-group label{ display:block; font-size:0.82rem; font-weight:700; margin-bottom:6px; }
  .form-group input, .form-group textarea, .form-group select{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
    background:var(--card); font-family:inherit; font-size:0.95rem; color:var(--ink);
  }
  .form-group textarea{ resize:vertical; }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color:var(--bordeaux); }
  .form-row{ display:flex; gap:12px; }
  .form-row .form-group{ flex:1; }

  .pay-methods{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
  .pay-option{
    display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px;
    padding:12px 14px; font-size:0.9rem; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .pay-option:has(input:checked){ border-color:var(--bordeaux); background:rgba(125,35,52,0.05); }
  .pay-option input{ accent-color:var(--bordeaux); width:16px; height:16px; }

  .order-summary{ background:var(--card); border:1px dashed var(--brass); border-radius:12px; padding:14px; margin-bottom:18px; font-size:0.85rem; color:var(--ink-soft); }

  .demo-note{ background:rgba(184,147,90,0.14); border:1px dashed var(--brass); border-radius:12px; padding:12px 14px; margin-bottom:18px; font-size:0.8rem; color:var(--ink-soft); line-height:1.7; }
  .otp-input{ text-align:center; letter-spacing:12px; font-size:1.4rem; font-weight:700; }
  .otp-error{ color:var(--bordeaux); font-size:0.82rem; margin-bottom:14px; display:none; }

  .success-view{ display:none; text-align:center; padding:60px 10px; }
  .success-view.active{ display:block; }
  .success-view svg{ width:64px; margin:0 auto 18px; stroke:#3E6B4F; }
  .success-view h3{ margin-bottom:8px; }
  .success-view p{ color:var(--ink-soft); font-size:0.92rem; }

  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; padding-top:10px; text-align:center; }
    .hero p{ margin-inline:auto; }
    .hero-ctas, .hero-stats{ justify-content:center; }
    .hero-art{ order:-1; max-width:320px; margin:0 auto; }
    .grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
  }

  @media (max-width:480px){
    .wrap{ padding:0 16px; }
    .pp-body{ padding-left:16px; padding-right:16px; }
    .pp-header{ padding-left:16px; padding-right:16px; }
    .drawer-body, .drawer-head, .drawer-foot{ padding-left:16px; padding-right:16px; }
    .form-row{ flex-direction:column; gap:0; }
    .hero h1{ font-size:1.9rem; }
    .footer-columns{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; }
    .reviews-slider-track{ padding-top:10px; }
  }

  /* ---------- حسابي (تسجيل الدخول والطلبات) ---------- */
  .acct-order-card{
    border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:14px;
    transition:box-shadow .2s, border-color .2s;
  }
  .acct-order-card:hover{ box-shadow:0 6px 18px rgba(42,30,26,0.08); border-color:var(--brass); }
  .acct-order-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:10px; }
  .acct-order-head b{ font-size:0.95rem; }
  .acct-order-head span{ font-size:0.78rem; color:var(--ink-soft); }
  .acct-order-items{ font-size:0.85rem; color:var(--ink-soft); margin-bottom:10px; line-height:1.7; }
  .acct-order-item-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
  .acct-order-item-row:first-child{ border-top:none; }
  .acct-order-item-row img{ width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; }
  .acct-order-item-info{ flex:1; display:flex; flex-direction:column; gap:2px; }
  .acct-order-item-name{ font-size:0.85rem; font-weight:700; color:var(--ink); }
  .acct-order-item-name small{ font-weight:400; color:var(--ink-soft); }
  .acct-order-item-meta{ font-size:0.78rem; color:var(--ink-soft); }
  .acct-order-item-total{ font-size:0.85rem; font-weight:700; color:var(--ink); white-space:nowrap; }
  .acct-order-toggle{ font-size:0.9rem; color:var(--ink-soft); }
  .acct-order-foot{ display:flex; justify-content:space-between; align-items:center; font-weight:700; }
  .acct-oto-status{ font-size:0.78rem; color:var(--whatsapp-dark); margin-top:6px; }
  .acct-tab{
    padding:10px 4px; font-weight:700; font-size:0.9rem; color:var(--ink-soft);
    border-bottom:2px solid transparent; margin-inline-end:20px;
    transition:color .2s, border-color .2s;
  }
  .acct-tab:hover{ color:var(--ink); }
  .acct-tab.active{ color:var(--bordeaux); border-color:var(--bordeaux); }
  .acct-addr-card{
    border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px;
    display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
    transition:box-shadow .2s, border-color .2s;
  }
  .acct-addr-card:hover{ box-shadow:0 6px 18px rgba(42,30,26,0.08); border-color:var(--brass); }
  .acct-addr-card b{ font-size:0.9rem; }
  .acct-addr-card p{ font-size:0.82rem; color:var(--ink-soft); margin-top:4px; }
  .acct-addr-actions{ display:flex; flex-direction:column; gap:6px; font-size:0.78rem; flex-shrink:0; }
  .acct-addr-actions button{ color:var(--bordeaux); text-decoration:underline; }
  .badge{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.75rem; font-weight:700; white-space:nowrap; }
  .badge.pending{ background:#fdf3d8; color:#8a6d1a; }
  .badge.confirmed{ background:#e4f3e8; color:var(--whatsapp-dark); }
  .badge.cancelled{ background:#fdecea; color:var(--bordeaux); }

/* جدول مواصفات المنتج وفيديو الوصف */
.pp-specs{ width:100%; border-collapse:collapse; margin:22px 0 4px; font-size:0.92rem; }
.pp-specs caption{ text-align:right; font-weight:700; margin-bottom:8px; color:var(--ink); }
.pp-specs th, .pp-specs td{ padding:10px 12px; border:1px solid var(--line); text-align:right; vertical-align:top; }
.pp-specs th{ width:34%; background:var(--brass-light, #f6efe3); font-weight:600; color:var(--ink); }
.pp-specs td{ color:var(--ink-soft); }
.pp-size th, .pp-size td{ width:33.33%; text-align:center; }
.pp-size thead th{ width:33.33%; }
.pp-video{ position:relative; margin:22px 0 4px; border-radius:14px; overflow:hidden; background:#000; aspect-ratio:16/9; }
.pp-video iframe, .pp-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- صفحة تتبع الطلب: خط زمني رأسي ---------- */
.trk-timeline{ list-style:none; margin:0 0 18px; padding:0; }
.trk-stage{ position:relative; display:flex; gap:12px; padding-bottom:18px; }
.trk-stage:last-child{ padding-bottom:0; }
.trk-stage::before{ content:''; position:absolute; inset-inline-start:11px; top:24px; bottom:0; width:2px; background:var(--line); }
.trk-stage:last-child::before{ display:none; }
.trk-stage.trk-done::before{ background:var(--bordeaux); }
.trk-dot{ flex:0 0 24px; height:24px; border-radius:50%; background:var(--line); color:#fff; font-size:0.75rem; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:1; }
.trk-done .trk-dot{ background:var(--bordeaux); }
.trk-current .trk-dot{ background:var(--bordeaux); box-shadow:0 0 0 5px rgba(125,35,52,0.18); }
.trk-failed .trk-dot{ background:#C0392B; box-shadow:0 0 0 5px rgba(192,57,43,0.18); }
.trk-body{ flex:1; min-width:0; }
.trk-label{ font-weight:700; font-size:0.92rem; color:var(--ink); }
.trk-todo .trk-label{ color:var(--ink-soft); font-weight:500; }
.trk-failed .trk-label{ color:#C0392B; }
.trk-at{ font-size:0.76rem; color:var(--ink-soft); margin-top:2px; }
.trk-events{ list-style:none; margin:8px 0 0; padding:0; border-inline-start:2px solid var(--brass-light); }
.trk-ev{ padding:2px 10px 8px; font-size:0.82rem; display:flex; flex-direction:column; gap:1px; }
.trk-ev-text{ color:var(--ink-soft); font-size:0.76rem; }
.trk-ev-at{ color:var(--ink-soft); font-size:0.72rem; }
.trk-ev-failed b{ color:#C0392B; }
.trk-ev-delivered b{ color:#1e7d46; }
.trk-terminal{ background:#FDECEA; border:1px solid #E5A8A0; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:0.88rem; font-weight:700; }