:root{
    --beige:#F1EFE8;
    --beige-deep:#E4E1D6;
    --black:#2C2C2A;
    --black-soft:#3A3A37;
    --gray:#B4B2A9;
    --copper:#997B5F;
    --copper-light:#B79A7D;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;}
  body{
    background:var(--black);
    color:var(--beige);
    font-family:'Tajawal',sans-serif;
    font-weight:400;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Cairo',sans-serif;
    font-weight:900;
  }
  a{color:inherit;text-decoration:none;}
  .container{max-width:1180px;margin:0 auto;padding:0 32px;}

  /* Focus / vision motif: elements start soft-blurred, sharpen into view
     ملاحظة أمان: نخفي العناصر فقط إذا تأكدنا إن الجافاسكربت يشتغل فعليًا
     (عبر كلاس js على html). لو الجافاسكربت تعطّل لأي سبب (بطء شبكة، حاجب
     إعلانات، خطأ بالسكربت)، تبقى كل عناصر الصفحة ظاهرة بشكل طبيعي بدل ما
     تختفي للأبد. */
  .focus-in{
    transition:filter 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease, transform 1.1s ease;
  }
  html.js .focus-in{
    filter:blur(6px);
    opacity:0;
    transform:translateY(14px);
  }
  html.js .focus-in.in-view{filter:blur(0);opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .focus-in{transition:none;filter:none;opacity:1;transform:none;}
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;right:0;left:0;z-index:50;
    background:rgba(44,44,42,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(241,239,232,.08);
  }
  nav{
    display:flex;align-items:center;justify-content:space-between;
    height:78px;
  }
  .logo{display:flex;align-items:center;gap:10px;}
  .logo svg{width:44px;height:22px;flex-shrink:0;}
  .logo span{font-family:'Cairo';font-weight:700;font-size:17px;letter-spacing:1px;}
  .nav-links{display:flex;gap:36px;font-size:14px;color:var(--gray);}
  .nav-links a:hover{color:var(--copper-light);}
  .nav-cta{
    background:var(--copper);color:var(--beige);
    padding:10px 22px;border-radius:2px;font-size:14px;font-weight:500;
    border:1px solid var(--copper);
  }
  .nav-cta:hover{background:transparent;color:var(--copper-light);}
  .nav-actions{display:flex;align-items:center;gap:14px;}
  @media (max-width:760px){ .nav-links{display:none;} }

  /* ---------- HERO (PHASE 1 merged — Static Hero Slider) ---------- */
  /* الهوية البصرية الأصلية (خلفية سوداء موروثة من body، نص بيج/نحاسي) لم تتغيّر؛
     فقط بنية العرض الداخلية صارت Slider بدل بلوك واحد ثابت. لا Gradients/Glassmorphism
     جديدة، ولا تغيير لألوان .btn-primary/.btn-ghost العامة المستخدمة بأقسام أخرى. */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;
    position:relative;
    padding-top:78px;
    overflow:hidden;
  }
  /* tabindex="0" أُضيف على #heroSlider ليكون قابلًا للـfocus فعليًا (شرط ضروري
     حتى يعمل مستمع keydown أصلًا — بدونه لا تصل أحداث لوحة المفاتيح للعنصر إطلاقًا).
     outline يظهر فقط مع :focus-visible (تنقل لوحة مفاتيح) وليس عند الضغط بالماوس. */
  .hero:focus{outline:none;}
  .hero:focus-visible{outline:2px solid var(--copper-light);outline-offset:-2px;}
  .hero-rings{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  }
  .hero-rings svg{position:absolute;opacity:.10;}
  .ring-a{width:520px;top:-120px;left:-140px;}
  .ring-b{width:340px;bottom:-80px;right:-60px;}

  .eyebrow{
    color:var(--copper-light);font-size:14px;letter-spacing:3px;
    margin-bottom:18px;
  }
  .hero h1{
    font-size:clamp(38px,7vw,80px);
    line-height:1.1;
    max-width:820px;
    letter-spacing:-1px;
  }
  .hero h1 em{
    font-style:normal;color:var(--copper-light);
  }
  .hero p.lede{
    font-size:19px;color:var(--gray);
    max-width:480px;margin-top:26px;line-height:1.8;
  }
  .hero-actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
  .hero-slide-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
  .hero-grid{display:flex;flex-direction:column;gap:36px;position:relative;z-index:1;width:100%;}
  @media (min-width:861px){
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;}
  }
  .hero-visual{
    /* === إصلاح مؤكَّد (2026-09-06): width/flex-shrink صريحان ===
       السبب الجذري لمشكلة "computed width=0": هذا العنصر كان يعتمد فقط على
       align-items:stretch (من hero-grid) ليأخذ عرضه، مع aspect-ratio لتحديد
       ارتفاعه من عرضه. طالما كان بداخله محتوى ظاهر بالتدفّق الطبيعي (SVG
       الـplaceholder) كانت المتصفحات تحسب العرض بشكل صحيح. لكن بمجرد ظهور
       صورة حقيقية (.has-photo)، كل الأبناء الظاهرين سابقًا يصيرون إما
       display:none أو position:absolute (خارج تدفّق الصفحة) — فيبقى هذا
       العنصر بلا أي محتوى داخل التدفّق الطبيعي إطلاقًا. في هذه الحالة تحديدًا
       يفشل بعض محركات المتصفح (تأكد ذلك فعليًا على Safari/iOS وأيضًا بمحاكاة
       Headless Chrome) في تطبيق stretch بشكل صحيح ضمن حاوية flex-direction:
       column مع aspect-ratio على عنصر بلا محتوى، وتنهار القياسات إلى الحد
       الأدنى التلقائي (~0 + الحدود فقط: 2px عرض × 2.5px ارتفاع، أي مطابق
       تمامًا للحالة التي رُصدت بالتشخيص الحقيقي على الإنتاج).
       الحل الجذري: عرض صريح (width:100%) بدل الاعتماد فقط على stretch، حتى
       يبقى العنصر بأبعاد محددة (definite) بصرف النظر عن محتواه الداخلي أو
       حالة has-photo/has-error. flex-shrink:0 يمنع أي انكماش لاحق لهذا
       العنصر ضمن حاوية hero-grid. */
    position:relative;aspect-ratio:4/5;border:1px solid rgba(44,44,42,.14);
    display:flex;align-items:center;justify-content:center;
    background:var(--beige-deep);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    width:100%;flex-shrink:0;min-width:0;
  }
  .hero-visual-placeholder{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  }
  .hero-visual-placeholder svg{width:62%;filter:drop-shadow(0 10px 16px rgba(44,44,42,.12));}
  .hero-visual-tag{
    position:absolute;top:20px;right:20px;font-size:12px;color:var(--copper);
    border:1px solid var(--copper);padding:5px 12px;border-radius:20px;font-family:'Tajawal';
    background:var(--beige);z-index:2;
  }
  .hero-visual-cap{
    position:absolute;bottom:20px;right:20px;left:20px;text-align:center;
    font-size:12px;color:rgba(44,44,42,.55);border-top:1px solid rgba(44,44,42,.12);padding-top:12px;
    z-index:2;
  }
  @media (max-width:860px){.hero-visual{max-width:320px;margin:0 auto;}}

  /* ---- Hero Slider — إدارة صور الشرائح من لوحة التحكم (إضافة جديدة، لا تعديل
     على أي قاعدة أعلاه). الصورة مخفية افتراضيًا؛ تظهر فقط بعد نجاح تحميلها
     فعليًا بالمتصفح (class="has-photo" تُضاف من hero-images.js بعد img.onload)،
     وعندها فقط يُخفى الـSVG placeholder — لا Flash ولا حالة وسيطة مكسورة. ---- */
  .hero-visual-photo{display:none;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;}
  .hero-visual.has-photo .hero-visual-photo{display:block;}
  .hero-visual.has-photo .hero-visual-placeholder{display:none;}
  .hero-visual.has-photo .hero-visual-cap{display:none;}

  /* ---- حالة خطأ واضحة: الشريحة مفعّلة وفيها صورة بقاعدة البيانات لكن التحميل
     فشل فعليًا (مسار خاطئ/شبكة/الملف محذوف...). لا نعود صامتين لصورة الـ
     Placeholder التجريبية (مضلِّلة هنا لأنها تُوحي بأن لا شيء رُفع أصلًا)،
     بل نظهر رسالة خطأ صريحة بدل مساحة فارغة/سوداء. ---- */
  .hero-visual-error{
    display:none;width:100%;height:100%;align-items:center;justify-content:center;
    text-align:center;padding:24px;font-size:14px;line-height:1.6;color:var(--copper-light);
    background:var(--beige-deep);
  }
  .hero-visual.has-error .hero-visual-error{display:flex;}
  .hero-visual.has-error .hero-visual-placeholder{display:none;}
  .hero-visual.has-error .hero-visual-cap{display:none;}
  .hero-visual.has-error .hero-visual-photo{display:none;}

  /* ---- Hero Slides (Crossfade — يُعرض شريحة واحدة بالـDOM في كل لحظة، لتفادي أي
     مشكلة ارتفاع/Overflow على الهاتف عند اختلاف طول النص بين الشرائح) ---- */
  .hero-slides{
    position:relative;flex:1 1 auto;
    min-height:640px;
    display:flex;
  }
  @media (max-width:860px){ .hero-slides{min-height:760px;} }
  @media (max-width:430px){ .hero-slides{min-height:820px;} }
  .hero-slide{
    display:none;
    width:100%;
    align-items:center;
  }
  .hero-slide.is-active{display:flex;}
  .hero-slide .hero-grid{
    opacity:0;transform:translateY(12px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .hero-slide .hero-grid.is-visible{opacity:1;transform:translateY(0);}

  .hero-order-btn{cursor:pointer;border:none;font-family:inherit;}

  /* ---- Bottom bar: أزرار ثابتة (لا تتغير مع تبديل الشرائح) + عناصر التحكم بالسلايدر ---- */
  .hero-bottom-bar{
    position:relative;z-index:2;
    display:flex;flex-direction:column;gap:22px;
    padding:0 32px 28px;
  }
  .hero-static-actions{display:flex;gap:16px;flex-wrap:wrap;}

  .hero-slider-controls{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .hero-arrow{
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(241,239,232,.3);background:transparent;color:var(--beige);
    font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .2s, color .2s, background .2s;
  }
  .hero-arrow:hover{border-color:var(--copper-light);color:var(--copper-light);background:rgba(241,239,232,.08);}
  .hero-dots{display:flex;align-items:center;gap:9px;}
  .hero-dot{
    width:8px;height:8px;border-radius:50%;background:rgba(241,239,232,.28);
    border:none;padding:0;cursor:pointer;transition:background .2s, transform .2s;
  }
  .hero-dot.is-active{background:var(--copper-light);transform:scale(1.25);}
  .hero-counter{
    font-size:13px;color:var(--gray);letter-spacing:1px;
    display:flex;align-items:center;gap:4px;margin-inline-start:4px;
  }
  .hero-counter-sep{opacity:.5;}
  /* لو ظهر Hero واحد فقط مستقبلًا (Phase 1B)، تُخفى عناصر التنقل تلقائيًا عبر JS
     بإضافة .is-single-slide على #heroSlider (راجع hero-slider.js) */
  .hero.is-single-slide .hero-slider-controls{display:none;}

  @media (max-width:760px){
    .hero-bottom-bar{padding:0 20px 22px;gap:16px;}
    .hero-static-actions{gap:10px;}
    .hero-static-actions .btn-primary,
    .hero-static-actions .btn-ghost{padding:12px 18px;font-size:13.5px;}
  }
  .btn-primary{
    background:var(--copper);color:var(--beige);padding:15px 30px;
    border-radius:2px;font-weight:500;font-size:15px;
    transition:background .2s;
  }
  .btn-primary:hover{background:var(--copper-light);}
  .btn-ghost{
    border:1px solid rgba(241,239,232,.3);padding:15px 30px;border-radius:2px;
    font-size:15px;transition:border-color .2s;
  }
  .btn-ghost:hover{border-color:var(--copper-light);color:var(--copper-light);}

  .scroll-cue{
    position:relative;z-index:2;margin:0 auto 26px;
    font-size:12px;color:var(--gray);letter-spacing:2px;
    display:flex;flex-direction:column;align-items:center;gap:8px;
  }
  .scroll-cue .line{width:1px;height:34px;background:var(--gray);animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
  @media (max-width:760px){ .scroll-cue{display:none;} }

  /* ---------- SECTION SHELL ---------- */
  section{padding:120px 0;}
  .section-head{max-width:560px;margin-bottom:64px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.2;}
  .section-head p{color:var(--gray);margin-top:16px;font-size:16px;line-height:1.8;}

  /* ---------- COLLECTION (beige panel) ---------- */
  .panel-beige{background:var(--beige);color:var(--black);}
  .panel-beige .section-head p{color:#6b6a64;}
  .panel-beige .eyebrow{color:var(--copper);}

  .filter-bar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
    gap:16px;margin-bottom:36px;
  }
  .filter-tabs{display:flex;gap:10px;flex-wrap:wrap;}
  .filter-tab{
    background:transparent;border:1px solid var(--beige-deep);color:#6b6a64;
    padding:9px 20px;border-radius:20px;font-family:'Tajawal';font-size:14px;
    cursor:pointer;transition:all .2s ease;
  }
  .filter-tab:hover{border-color:var(--copper);color:var(--copper);}
  .filter-tab.active{background:var(--copper);border-color:var(--copper);color:#fff;}

  .search-box{
    position:relative;flex:1;min-width:180px;max-width:280px;
  }
  .search-box svg{
    position:absolute;top:50%;right:12px;transform:translateY(-50%);
    width:16px;height:16px;fill:none;stroke:#9a988f;stroke-width:2;pointer-events:none;
  }
  .search-box input{
    width:100%;padding:10px 38px 10px 14px;border:1px solid var(--beige-deep);border-radius:20px;
    font-family:'Tajawal';font-size:14px;background:#fff;color:var(--black);
    transition:border-color .2s ease;
  }
  .search-box input:focus{outline:none;border-color:var(--copper);}
  .search-box input::-webkit-search-cancel-button{cursor:pointer;}

  #sortProducts{
    padding:10px 14px;border:1px solid var(--beige-deep);border-radius:2px;
    font-family:'Tajawal';font-size:14px;background:#fff;color:var(--black);cursor:pointer;
  }
  .no-results{color:#6b6a64;padding:40px 0;text-align:center;font-size:15px;}
  .product-card.filtered-out{display:none;}
  .search-box input{padding-left:34px;}
  .search-clear-btn{
    position:absolute;top:50%;left:8px;transform:translateY(-50%);
    width:22px;height:22px;border-radius:50%;border:none;background:var(--beige-deep);
    color:#6b6a64;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s ease,color .2s ease;
  }
  .search-clear-btn:hover{background:var(--copper);color:#fff;}
  .search-clear-btn.hide{display:none;}
  .search-box input::-webkit-search-cancel-button{display:none;}
  .results-count{color:#9a988f;font-size:13px;margin:-20px 0 24px;}

  .grid-products{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  }
  @media (max-width:860px){.grid-products{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.grid-products{grid-template-columns:1fr;}}

  .product-card{
    background:#fff;border:1px solid var(--beige-deep);
    padding:34px 24px 26px;text-align:center;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .product-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(44,44,42,.12);}
  .product-card .frame-wrap{
    width:100%;height:190px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;
    background:radial-gradient(ellipse at center, rgba(153,123,95,.08) 0%, rgba(153,123,95,0) 72%);
    border-radius:8px;position:relative;overflow:hidden;
  }
  .product-card .frame-wrap img{transition:transform .4s ease;}
  .product-card .frame-wrap:has(img){cursor:zoom-in;}
  .product-card .frame-wrap:has(img):hover img{transform:scale(1.06);}
  .product-card svg{width:154px;height:77px;}

  /* ---------- زر المفضلة (Wishlist) فوق صورة المنتج ---------- */
  .frame-wrap .btn-wishlist{
    position:absolute;top:8px;right:8px;z-index:2;
    width:30px;height:30px;border-radius:50%;border:none;
    background:rgba(255,255,255,.85);color:#2C2C2A;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .15s ease;
  }
  .frame-wrap .btn-wishlist:hover{transform:scale(1.08);}
  .frame-wrap .btn-wishlist svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;transition:fill .15s ease;}
  .frame-wrap .btn-wishlist.active{background:rgba(255,255,255,.95);color:#c0392b;}
  .frame-wrap .btn-wishlist.active svg{fill:#c0392b;}

  /* تلميح بصري صغير فوق الصورة يدل الزبون إنه يقدر يكبّرها */
  .frame-wrap .zoom-hint{
    position:absolute;bottom:8px;left:8px;background:rgba(44,44,42,.55);color:#fff;
    width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s ease;pointer-events:none;
  }
  .frame-wrap:hover .zoom-hint{opacity:1;}
  .frame-wrap .zoom-hint svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;}

  /* نقاط صغيرة تحت الصورة للتبديل بين زوايا نفس النظارة (أمامية/جانبية/على الوجه...) */
  .frame-thumbs{display:flex;justify-content:center;gap:6px;margin-top:-12px;margin-bottom:16px;}
  .frame-thumb-dot{
    width:7px;height:7px;border-radius:50%;border:none;background:var(--beige-deep);
    cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease;
  }
  .frame-thumb-dot:hover{transform:scale(1.25);}
  .frame-thumb-dot.active{background:var(--copper);}

  /* ---------- Lightbox: تكبير صورة المنتج بالضغط عليها ---------- */
  .product-lightbox{
    position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;
    background:rgba(20,19,17,.92);padding:24px;
  }
  .product-lightbox.open{display:flex;}
  .product-lightbox img{
    max-width:min(92vw,720px);max-height:82vh;object-fit:contain;border-radius:6px;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    animation:lightboxIn .25s ease;
  }
  @keyframes lightboxIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
  .product-lightbox .lightbox-caption{
    position:absolute;bottom:28px;left:0;right:0;text-align:center;color:var(--beige);
    font-family:'Tajawal';font-size:14px;
  }
  .product-lightbox .lightbox-close{
    position:absolute;top:20px;left:20px;width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;
    font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s ease;
  }
  .product-lightbox .lightbox-close:hover{background:rgba(255,255,255,.18);}
  .product-lightbox .lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;
    font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s ease;
  }
  .product-lightbox .lightbox-nav:hover{background:rgba(255,255,255,.18);}
  .product-lightbox .lightbox-prev{right:20px;}
  .product-lightbox .lightbox-next{left:20px;}
  .product-lightbox .lightbox-counter{
    position:absolute;top:24px;right:0;left:0;text-align:center;color:rgba(255,255,255,.6);
    font-family:'Tajawal';font-size:13px;
  }
  @media (max-width:560px){
    .product-lightbox .lightbox-close{top:12px;left:12px;width:36px;height:36px;}
    .product-lightbox .lightbox-nav{width:38px;height:38px;font-size:17px;}
    .product-lightbox .lightbox-prev{right:8px;}
    .product-lightbox .lightbox-next{left:8px;}
  }
  .product-card h3{font-family:'Cairo';font-size:17px;font-weight:700;margin-bottom:6px;}
  .product-card .tag{color:var(--copper);font-size:13px;margin-bottom:14px;}
  .product-card .price{font-family:'Cairo';font-weight:700;font-size:16px;}
  .product-card .btn-order{
    margin-top:16px;width:100%;background:transparent;color:var(--copper);
    border:1px solid var(--copper);padding:10px 14px;border-radius:2px;
    font-family:'Tajawal';font-size:13px;font-weight:500;cursor:pointer;
    transition:background .2s ease,color .2s ease;
  }
  .product-card .btn-order:hover{background:var(--copper);color:#fff;}

  /* ---------- STORY (dark, split) ---------- */
  .split{
    display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  }
  @media (max-width:860px){.split{grid-template-columns:1fr;}}
  .story-visual{
    aspect-ratio:4/5;background:var(--black-soft);border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(241,239,232,.08);
    position:relative;overflow:hidden;
  }
  .story-visual svg{width:60%;}
  .stat-row{display:flex;gap:48px;margin-top:40px;flex-wrap:wrap;}
  @media (max-width:380px){ .stat-row{gap:28px;} }
  .stat{}
  .stat .num{font-family:'Cairo';font-weight:900;font-size:34px;color:var(--copper-light);}
  .stat .label{font-size:13px;color:var(--gray);margin-top:4px;}

  /* ---------- VISIT (beige) ---------- */
  .visit-grid{
    display:grid;grid-template-columns:1.1fr .9fr;gap:56px;
  }
  @media (max-width:860px){.visit-grid{grid-template-columns:1fr;}}
  .hours-table{width:100%;border-collapse:collapse;margin-top:10px;}
  .hours-table tr{border-bottom:1px solid var(--beige-deep);}
  .hours-table td{padding:14px 0;font-size:15px;}
  .hours-table td:first-child{color:#6b6a64;}
  .hours-table td:last-child{text-align:left;font-weight:500;}
  .map-block{
    background:var(--beige-deep);border-radius:4px;min-height:280px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
    color:#6b6a64;font-size:14px;
  }
  .map-block svg{width:70px;opacity:.5;}

  /* ---------- FLOATING WHATSAPP ---------- */
  .floating-wa{
    position:fixed;left:22px;bottom:22px;z-index:60;
    width:56px;height:56px;border-radius:50%;
    background:#25D366;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.35);
    transition:transform .2s ease;
  }
  .floating-wa:hover{transform:scale(1.08);}
  .floating-wa svg{width:28px;height:28px;}
  @media (max-width:760px){ .floating-wa{bottom:82px;} }

  /* ---------- MOBILE STICKY BAR ---------- */
  .mobile-sticky-bar{
    display:none;
  }
  @media (max-width:760px){
    body{padding-bottom:64px;}
    .mobile-sticky-bar{
      display:flex;position:fixed;bottom:0;right:0;left:0;z-index:55;
      background:rgba(44,44,42,.96);backdrop-filter:blur(10px);
      border-top:1px solid rgba(241,239,232,.1);
      height:64px;
    }
    .mobile-sticky-bar a{
      flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
      font-size:14px;font-weight:500;
    }
    .mobile-sticky-bar a{
      color:var(--beige);border-left:1px solid rgba(241,239,232,.1);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .mobile-sticky-bar a:last-child{
      border-left:none;
    }
    .mobile-sticky-bar a:nth-child(2){
      background:var(--copper);color:var(--beige);border-left:1px solid rgba(241,239,232,.1);
    }
  }

  /* ---------- SHARE / MAP ACTIONS ---------- */
  .map-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;}
  .map-actions .btn-ghost{
    padding:11px 20px;font-size:14px;border-color:rgba(44,44,42,.25);color:var(--black);
    display:flex;align-items:center;gap:8px;
  }
  .map-actions .btn-ghost:hover{border-color:var(--copper);color:var(--copper);}

  /* ---------- QUICK BOOKING ---------- */
  .quick-book{
    margin-top:22px;padding:20px;background:var(--beige-deep);border-radius:4px;
    display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  }
  .quick-book .field{display:flex;flex-direction:column;gap:6px;}
  .quick-book label{font-size:12px;color:#6b6a64;}
  .quick-book input,.quick-book select{
    padding:10px 12px;border:1px solid var(--gray);border-radius:2px;
    font-family:'Tajawal';font-size:14px;background:#fff;color:var(--black);
  }
  .quick-book button{
    background:var(--copper);color:var(--beige);border:none;padding:11px 22px;
    border-radius:2px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;
  }
  .quick-book button:hover{background:var(--black-soft);}

  /* ---------- ORDER FORM ---------- */
  .order-form{
    display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px;
  }
  @media (max-width:600px){ .order-form{grid-template-columns:1fr;} }
  .form-row{display:flex;flex-direction:column;gap:8px;}
  .form-row label{font-size:13px;color:#6b6a64;}
  .form-row input,.form-row select{
    padding:13px 14px;border:1px solid var(--beige-deep);border-radius:2px;
    font-family:'Tajawal';font-size:16px;background:#fff;color:var(--black);
  }
  .form-row input:focus,.form-row select:focus{outline:1px solid var(--copper);}
  .order-form .form-note{grid-column:1 / -1;font-size:13px;color:#6b6a64;margin-top:-6px;}
  .order-form button{
    grid-column:1 / -1;width:fit-content;border:none;cursor:pointer;margin-top:6px;
  }

  /* ---------- AVAILABILITY BADGE ---------- */
  .avail{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;
    color:#5a8a5a;margin-bottom:10px;
  }
  .avail .dot{width:7px;height:7px;border-radius:50%;background:#5a8a5a;}
  .avail.low{color:#a67c2e;}
  .avail.low .dot{background:#a67c2e;}
  .avail.out{color:#a35b4f;}
  .avail.out .dot{background:#a35b4f;}
  .product-card.sold-out{opacity:.55;}
  .product-card .btn-order:disabled,.product-card .btn-add-cart:disabled{
    opacity:.5;cursor:not-allowed;pointer-events:none;
  }

  /* ---------- TESTIMONIALS ---------- */
  .testi-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  }
  @media (max-width:860px){.testi-grid{grid-template-columns:1fr;}}
  .testi-card{
    background:var(--black-soft);border:1px solid rgba(241,239,232,.08);
    border-radius:4px;padding:28px 26px;
  }
  .testi-stars{color:var(--copper-light);font-size:15px;letter-spacing:2px;margin-bottom:14px;}
  .testi-card p{font-size:15px;line-height:1.9;color:var(--beige);margin-bottom:20px;}
  .testi-name{display:flex;align-items:center;gap:10px;}
  .testi-avatar{
    width:38px;height:38px;border-radius:50%;background:var(--copper);
    display:flex;align-items:center;justify-content:center;
    font-family:'Cairo';font-weight:700;font-size:14px;color:var(--beige);flex-shrink:0;
  }
  .testi-name .who{font-size:13px;color:var(--gray);}
  .testi-name .who strong{color:var(--beige);display:block;font-size:14px;font-weight:500;}
  .reviews-empty{color:var(--gray);text-align:center;padding:30px 0;font-size:15px;grid-column:1 / -1;}
  .reviews-loading{color:var(--gray);text-align:center;padding:30px 0;font-size:14px;grid-column:1 / -1;}

  /* ---------- ADD REVIEW FORM ---------- */
  .review-form-wrap{
    margin-top:56px;max-width:560px;background:var(--black-soft);
    border:1px solid rgba(241,239,232,.08);border-radius:6px;padding:30px 26px;
  }
  .review-form-wrap h3{font-family:'Cairo';font-size:18px;margin-bottom:6px;}
  .review-form-wrap .sub{color:var(--gray);font-size:13.5px;margin-bottom:22px;}
  .review-form{display:flex;flex-direction:column;gap:16px;}
  .review-form .form-row label{color:var(--gray);}
  .review-form .form-row input,.review-form .form-row textarea{
    background:var(--black);border:1px solid rgba(241,239,232,.15);color:var(--beige);
    padding:12px 14px;border-radius:2px;font-family:'Tajawal';font-size:16px;resize:vertical;
  }
  .review-form .form-row input:focus,.review-form .form-row textarea:focus{outline:1px solid var(--copper);}
  .star-picker{display:flex;gap:6px;font-size:26px;}
  .star-picker button{
    background:none;border:none;cursor:pointer;color:var(--gray);padding:0;line-height:1;
    transition:color .15s;
  }
  .star-picker button.active,.star-picker button:hover{color:var(--copper-light);}
  .review-submit-btn{
    background:var(--copper);color:var(--beige);border:none;padding:13px 26px;
    border-radius:2px;font-family:'Tajawal';font-size:14px;font-weight:500;cursor:pointer;
    width:fit-content;transition:background .2s;
  }
  .review-submit-btn:hover{background:var(--copper-light);}
  .review-submit-btn:disabled{opacity:.6;cursor:not-allowed;}
  .review-msg{font-size:13.5px;min-height:0;}
  .review-msg.ok{color:#7fae7f;}
  .review-msg.err{color:#c98a7c;}
  /* حقل مصيدة للبوتات: مخفي عن المستخدم الحقيقي بالكامل */
  .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;}

  /* ---------- MAP EMBED ---------- */
  .map-embed{
    width:100%;min-height:280px;border-radius:4px;border:1px solid rgba(44,44,42,.1);
    overflow:hidden;
  }
  .map-embed iframe{width:100%;height:100%;min-height:280px;border:0;display:block;}

  /* ---------- POLICY (warranty/return) ---------- */
  .policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  @media (max-width:860px){.policy-grid{grid-template-columns:1fr;}}
  .policy-card{
    background:var(--black-soft);border:1px solid rgba(241,239,232,.08);
    border-radius:4px;padding:30px 26px;
  }
  .policy-icon{
    width:48px;height:48px;border-radius:50%;
    background:rgba(183,154,125,.12);display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .policy-icon svg{width:24px;height:24px;}
  .policy-card h3{font-family:'Cairo';font-size:17px;font-weight:700;margin-bottom:10px;}
  .policy-card p{font-size:14px;line-height:1.8;color:var(--gray);}
  .policy-note{margin-top:36px;color:var(--gray);font-size:14px;text-align:center;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--black);border-top:1px solid rgba(241,239,232,.08);
    padding:56px 0 32px;
  }
  .footer-top{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:40px;
  }
  .footer-links{display:flex;gap:60px;flex-wrap:wrap;}
  .footer-col h4{font-size:13px;color:var(--gray);letter-spacing:1px;margin-bottom:14px;}
  .footer-col a{display:block;font-size:14px;margin-bottom:10px;color:var(--beige);}
  .footer-col a:hover{color:var(--copper-light);}
  .footer-bottom{
    border-top:1px solid rgba(241,239,232,.08);padding-top:24px;
    display:flex;justify-content:space-between;font-size:13px;color:var(--gray);flex-wrap:wrap;gap:10px;
  }

  /* ---------- CART BUTTON (header) ---------- */
  .cart-btn{
    position:relative;display:flex;align-items:center;gap:8px;
    background:transparent;border:1px solid rgba(241,239,232,.25);color:var(--beige);
    padding:9px 16px;border-radius:2px;font-family:'Tajawal';font-size:14px;cursor:pointer;
    transition:border-color .2s ease,color .2s ease;
  }
  .cart-btn:hover{border-color:var(--copper-light);color:var(--copper-light);}
  .cart-btn svg{width:19px;height:19px;flex-shrink:0;}
  .cart-count{
    position:absolute;top:-8px;left:-8px;background:var(--copper);color:var(--beige);
    font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
  }
  .cart-count.hide{display:none;}

  /* ---------- ORDER SUCCESS MODAL ---------- */
  .success-overlay{
    position:fixed;inset:0;background:rgba(20,20,18,.65);z-index:120;
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .success-overlay.open{opacity:1;pointer-events:auto;}
  .success-box{
    position:relative;
    background:var(--beige);color:var(--black);
    max-width:380px;width:100%;border-radius:4px;
    padding:32px 26px;text-align:center;
    transform:translateY(10px) scale(.98);opacity:0;
    transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
  }
  .success-overlay.open .success-box{transform:translateY(0) scale(1);opacity:1;}
  .success-close-btn{
    position:absolute;top:10px;inset-inline-start:10px;
    width:30px;height:30px;border-radius:50%;border:none;
    background:rgba(0,0,0,.06);color:var(--black);
    font-size:14px;line-height:1;cursor:pointer;transition:background .15s ease;
  }
  .success-close-btn:hover{background:rgba(0,0,0,.12);}
  .success-code-row{
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:var(--beige-deep);border-radius:3px;padding:12px 14px;margin-bottom:18px;
  }
  .success-code{font-family:'Cairo';font-size:18px;font-weight:900;letter-spacing:1px;color:var(--copper);}
  .success-go-btn{
    width:100%;background:var(--copper);color:#fff;border:1px solid var(--copper);
    padding:13px 14px;border-radius:2px;font-family:'Tajawal';font-size:14px;font-weight:500;
    cursor:pointer;transition:background .2s ease;margin-bottom:10px;
  }
  .success-go-btn:hover{background:var(--copper-light);border-color:var(--copper-light);}

  /* ---------- CART DRAWER ---------- */
  .cart-overlay{
    position:fixed;inset:0;background:rgba(20,20,18,.55);z-index:80;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .cart-overlay.open{opacity:1;pointer-events:auto;}
  .cart-drawer{
    position:fixed;top:0;bottom:0;left:0;z-index:81;
    width:100%;max-width:420px;background:var(--beige);color:var(--black);
    transform:translateX(-100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .cart-drawer.open{transform:translateX(0);}
  .cart-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 24px;border-bottom:1px solid var(--beige-deep);flex-shrink:0;
    background:var(--beige);
  }
  .cart-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;
  }
  .cart-drawer-head h3{font-family:'Cairo';font-size:19px;font-weight:700;}
  .cart-close{
    background:none;border:none;font-size:22px;color:#6b6a64;cursor:pointer;line-height:1;
    padding:4px 8px;
  }
  .cart-close:hover{color:var(--black);}
  .cart-clear-btn{
    background:none;border:none;color:#a35b4f;font-size:12.5px;cursor:pointer;
    text-decoration:underline;padding:0;
  }
  .cart-clear-btn.hide{display:none;}
  .cart-body{flex-shrink:0;padding:20px 24px;}
  .cart-empty{color:#6b6a64;font-size:14px;text-align:center;padding:50px 0;}
  .cart-empty.hide{display:none;}
  .cart-item{
    display:flex;gap:14px;align-items:center;padding:14px 0;
    border-bottom:1px solid var(--beige-deep);
  }
  .cart-item-info{flex:1;min-width:0;}
  .cart-item-info h4{font-family:'Cairo';font-size:14px;font-weight:700;margin-bottom:4px;}
  .cart-item-info .unit-price{font-size:12.5px;color:#6b6a64;}
  .cart-item-qty{display:flex;align-items:center;gap:8px;}
  .cart-item-qty button{
    width:26px;height:26px;border:1px solid var(--gray);background:#fff;border-radius:2px;
    font-size:15px;cursor:pointer;color:var(--black);line-height:1;
  }
  .cart-item-qty button:hover{border-color:var(--copper);color:var(--copper);}
  .cart-item-qty span{font-size:14px;min-width:16px;text-align:center;}
  .cart-item-total{font-family:'Cairo';font-weight:700;font-size:14px;min-width:78px;text-align:left;}
  .cart-item-remove{
    background:none;border:none;color:#a35b4f;font-size:12.5px;cursor:pointer;
    text-decoration:underline;padding:0;margin-top:4px;
  }
  .cart-footer{
    flex-shrink:0;border-top:1px solid var(--beige-deep);
    padding:20px 24px calc(26px + env(safe-area-inset-bottom, 0px));
    background:var(--beige);
  }
  .cart-totals{display:flex;justify-content:space-between;font-size:15px;margin-bottom:18px;}
  .cart-totals strong{font-family:'Cairo';font-size:19px;}
  .cart-totals.cart-subtotal-row{font-size:13.5px;color:#6b6a64;margin-bottom:8px;}
  .cart-totals.cart-subtotal-row strong{font-family:'Tajawal';font-size:14px;color:var(--black);font-weight:500;}
  .cart-totals.cart-total-final{padding-top:10px;border-top:1px solid var(--beige-deep);margin-bottom:18px;}
  .cart-delivery-note{
    font-size:12.5px;color:var(--copper);background:rgba(183,154,125,.12);
    border:1px solid rgba(183,154,125,.3);border-radius:3px;padding:9px 11px;
    margin:-8px 0 14px;line-height:1.7;
  }
  .cart-delivery-note.hide{display:none;}
  .cart-footer .form-row{margin-bottom:12px;}
  .cart-footer .form-row label{font-size:12.5px;color:#6b6a64;display:block;margin-bottom:6px;}
  .cart-footer .form-row input,.cart-footer .form-row select{
    width:100%;padding:11px 12px;border:1px solid var(--beige-deep);border-radius:2px;
    font-family:'Tajawal';font-size:16px;background:#fff;color:var(--black);
  }
  .cart-footer .form-row input:focus,.cart-footer .form-row select:focus{outline:1px solid var(--copper);}

  /* ---------- PAYMENT METHODS ---------- */
  .pay-label{font-size:12.5px;color:#6b6a64;margin:16px 0 10px;}
  .pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .pay-option{
    position:relative;border:1px solid var(--beige-deep);border-radius:6px;
    padding:12px;cursor:pointer;background:#fff;transition:border-color .2s ease, box-shadow .2s ease;
  }
  .pay-option input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;}
  .pay-row{display:flex;align-items:center;gap:10px;}
  .pay-icon{
    width:36px;height:36px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(44,44,42,.14);
  }
  .pay-icon svg{width:20px;height:20px;}
  .pay-icon-logo{background:#fff;border:1px solid var(--beige-deep);padding:5px;box-sizing:border-box;}
  .pay-icon-logo img{width:100%;height:100%;object-fit:contain;display:block;}
  .pay-option .pay-name{
    font-family:'Cairo';font-weight:700;font-size:13.5px;line-height:1.3;
  }
  .pay-option .pay-name-latin{font-size:10.5px;color:#9a9890;font-weight:500;line-height:1.2;margin-top:1px;}
  .pay-option .pay-sub{font-size:11px;color:#6b6a64;margin-top:2px;}
  .pay-option:hover{border-color:var(--copper-light);}
  .pay-option.selected{border-color:var(--copper);background:#fff9f4;box-shadow:0 0 0 1px var(--copper);}
  .pay-bankily .pay-icon:not(.pay-icon-logo){background:#E4572E;}
  .pay-masrivi .pay-icon:not(.pay-icon-logo){background:#1D6FB8;}
  .pay-bimbank .pay-icon:not(.pay-icon-logo){background:#0E7C7B;}
  .pay-sadad .pay-icon:not(.pay-icon-logo){background:#7A3E9D;}
  .pay-other .pay-icon{background:#8a8a82;}
  .pay-cod .pay-icon{background:#6b6a64;}

  /* ---------- PAYMENT METHODS: display-only preview cards (not selectable), same grid/section as the real methods ---------- */
  .pay-option.pay-preview{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    cursor:default;opacity:.7;
  }
  .pay-option.pay-preview:hover{border-color:var(--beige-deep);}
  .pay-soon-badge{
    font-size:10px;color:#9a9890;background:var(--beige-deep);border-radius:20px;
    padding:3px 8px;flex-shrink:0;white-space:nowrap;
  }

  /* ---------- شعار صغير مضمّن بجانب اسم طريقة الدفع (ملخص الطلب/تتبع الطلب/تعليمات التحويل) ---------- */
  .pay-method-inline{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
  .pay-inline-logo{
    width:18px;height:18px;object-fit:contain;border-radius:4px;background:#fff;
    border:1px solid var(--beige-deep);padding:1.5px;flex-shrink:0;vertical-align:middle;
  }

  .pay-instructions{
    margin-top:14px;background:var(--beige-deep);border-radius:3px;padding:14px 16px;
    font-size:13px;line-height:1.8;color:var(--black);display:none;
  }
  .pay-instructions.show{display:block;}
  .pay-instructions .acc-number{
    font-family:'Cairo';font-weight:700;font-size:16px;color:var(--copper);
    letter-spacing:1px;direction:ltr;display:inline-block;
  }

  /* ---------- PAYMENT PROOF UPLOAD ---------- */
  .pay-proof{margin-top:12px;display:none;}
  .pay-proof.show{display:block;}
  .pay-proof-label{font-size:13px;color:var(--black);margin-bottom:8px;font-weight:500;}
  .pay-proof-drop{
    border:1.5px dashed var(--gray);border-radius:6px;padding:16px;
    display:flex;align-items:center;gap:12px;background:#fff;cursor:pointer;
    transition:border-color .2s ease;
  }
  .pay-proof-drop:hover{border-color:var(--copper);}
  .pay-proof-drop.has-file{border-style:solid;border-color:var(--copper);}
  .pay-proof-drop input[type=file]{display:none;}
  .pay-proof-icon{
    width:38px;height:38px;border-radius:8px;background:var(--beige-deep);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  }
  .pay-proof-icon svg{width:19px;height:19px;color:#6b6a64;}
  .pay-proof-icon img{width:100%;height:100%;object-fit:cover;}
  .pay-proof-text{flex:1;min-width:0;}
  .pay-proof-text .t1{font-size:13.5px;color:var(--black);}
  .pay-proof-text .t2{font-size:11.5px;color:#6b6a64;margin-top:2px;}
  .pay-proof-remove{
    background:none;border:none;color:#a35b4f;font-size:12px;cursor:pointer;
    text-decoration:underline;padding:4px;flex-shrink:0;
  }
  .pay-proof-remove.hide{display:none;}
  .pay-proof-note{font-size:11.5px;color:#6b6a64;margin-top:6px;line-height:1.6;}
  .pay-proof-status{font-size:12px;margin-top:6px;min-height:0;}
  .pay-proof-status.err{color:#a35b4f;}
  .pay-proof-status.ok{color:#5a8a5a;}

  /* ---------- PRESCRIPTION PHOTO UPLOAD (نموذج الطلب المباشر) ---------- */
  .rx-proof{margin-top:4px;margin-bottom:4px;}
  .rx-proof-label{font-size:13px;color:var(--black);margin-bottom:8px;font-weight:500;}
  .rx-proof-drop{
    border:1.5px dashed var(--gray);border-radius:6px;padding:16px;
    display:flex;align-items:center;gap:12px;background:#fff;cursor:pointer;
    transition:border-color .2s ease;
  }
  .rx-proof-drop:hover{border-color:var(--copper);}
  .rx-proof-drop.has-file{border-style:solid;border-color:var(--copper);}
  .rx-proof-drop + input[type=file],
  .pay-proof-drop + input[type=file]{display:none;}
  .rx-proof-icon{
    width:38px;height:38px;border-radius:8px;background:var(--beige-deep);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  }
  .rx-proof-icon svg{width:19px;height:19px;color:#6b6a64;}
  .rx-proof-icon img{width:100%;height:100%;object-fit:cover;}
  .rx-proof-text{flex:1;min-width:0;}
  .rx-proof-text .t1{font-size:13.5px;color:var(--black);}
  .rx-proof-text .t2{font-size:11.5px;color:#6b6a64;margin-top:2px;}
  .rx-proof-remove{
    background:none;border:none;color:#a35b4f;font-size:12px;cursor:pointer;
    text-decoration:underline;padding:4px;flex-shrink:0;
  }
  .rx-proof-remove.hide{display:none;}
  .rx-proof-note{font-size:11.5px;color:#6b6a64;margin-top:6px;line-height:1.6;}
  .rx-proof-status{font-size:12px;margin-top:6px;min-height:0;}
  .rx-proof-status.err{color:#a35b4f;}
  .rx-proof-status.ok{color:#5a8a5a;}

  .cart-checkout-btn{
    width:100%;background:var(--copper);color:var(--beige);border:none;
    padding:14px;border-radius:2px;font-family:'Tajawal';font-size:15px;font-weight:500;
    cursor:pointer;margin-top:16px;transition:background .2s;
  }
  .cart-checkout-btn:hover{background:var(--black-soft);}

  @media (max-width:480px){
    .cart-drawer{max-width:100%;}
    .pay-methods{grid-template-columns:1fr;}
  }

  /* ---------- ORDER TRACKING ---------- */
  .track-error{color:#a35b4f;font-size:13.5px;margin-top:10px;min-height:0;}
  .status-track{
    display:none;margin-top:40px;max-width:640px;background:#fff;
    border:1px solid var(--beige-deep);border-radius:6px;padding:28px 26px;
  }
  .status-track.show{display:block;}
  .status-steps{display:flex;justify-content:space-between;position:relative;padding:0 4px;}
  .status-steps::before{
    content:'';position:absolute;top:13px;right:8%;left:8%;height:2px;
    background:var(--beige-deep);z-index:0;
  }
  .status-step{
    position:relative;z-index:1;display:flex;flex-direction:column;
    align-items:center;gap:10px;flex:1;text-align:center;
  }
  .status-step .dot{
    width:28px;height:28px;border-radius:50%;background:#fff;
    border:2px solid var(--gray);display:flex;align-items:center;justify-content:center;
    font-size:12px;color:var(--gray);font-family:'Cairo';font-weight:700;
    transition:all .2s ease;
  }
  .status-step.done .dot{background:var(--copper);border-color:var(--copper);color:#fff;}
  .status-step.current .dot{
    border-color:var(--copper);color:var(--copper);
    box-shadow:0 0 0 5px rgba(153,123,95,.15);
  }
  .status-step .label{font-size:11.5px;color:#9a988f;max-width:80px;line-height:1.4;}
  .status-step.done .label,.status-step.current .label{color:var(--black);font-weight:500;}
  .status-cancelled{
    text-align:center;color:#a35b4f;font-family:'Cairo';font-weight:700;
    font-size:16px;padding:10px 0;
  }
  /* ---------- ORDER TRACKING — بطاقة السائق (Step 7E) ---------- */
  /* تظهر فقط بعد ما renderTrackDriverInfo يضيف كلاس show (أي طلب له سائق
     نشط بحالة out_for_delivery/delivered — نفس شرط track_order بقاعدة
     البيانات). قبل ذلك تبقى فارغة وبدون ظهور. */
  .track-driver-info{
    display:none;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;
    background:var(--beige);border:1px solid var(--beige-deep);border-radius:8px;
  }
  .track-driver-info.show{display:flex;}
  .track-driver-avatar{
    width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
    border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.12);
  }
  .track-driver-avatar-fallback{
    display:flex;align-items:center;justify-content:center;
    background:var(--copper-light);font-size:22px;color:#fff;
  }
  .track-driver-meta{min-width:0;flex:1;}
  .track-driver-label{font-size:11.5px;color:#9a988f;margin-bottom:2px;}
  .track-driver-name{font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;color:var(--black);overflow-wrap:break-word;word-break:break-word;}
  .track-driver-call{
    display:inline-block;margin-top:6px;font-size:12.5px;color:var(--copper);
    border:1px solid var(--copper-light);border-radius:14px;padding:3px 10px;
  }
  .track-driver-call:hover{background:var(--copper);color:#fff;border-color:var(--copper);}

  .track-order-summary{
    margin-top:26px;border-top:1px solid var(--beige-deep);padding-top:18px;
    font-size:14px;color:#4a4a46;
  }
  .track-order-summary .row{
    display:flex;justify-content:space-between;padding:7px 0;gap:12px;
    flex-wrap:wrap;overflow-wrap:break-word;word-break:break-word;min-width:0;
  }
  .track-order-summary .row > *{min-width:0;overflow-wrap:break-word;word-break:break-word;}
  .track-order-summary .row strong{font-family:'Cairo';color:var(--black);}
  .copy-btn{
    background:transparent;border:1px solid var(--beige-deep);color:var(--copper);
    font-family:'Tajawal';font-size:11.5px;padding:3px 9px;border-radius:12px;cursor:pointer;
    margin-right:6px;transition:all .2s ease;
  }
  .copy-btn:hover{background:var(--copper);color:#fff;border-color:var(--copper);}

  /* ---------- SCROLL TO TOP ---------- */
  .scroll-top-btn{
    position:fixed;left:22px;bottom:88px;z-index:59;width:44px;height:44px;border-radius:50%;
    background:var(--black-soft);border:1px solid rgba(241,239,232,.15);color:var(--beige);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.3);opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .2s ease;
  }
  .scroll-top-btn.show{opacity:1;pointer-events:auto;}
  .scroll-top-btn:hover{transform:translateY(-3px);border-color:var(--copper-light);}
  .scroll-top-btn svg{width:20px;height:20px;}
  @media (max-width:760px){ .scroll-top-btn{bottom:148px;} }
  @media (max-width:560px){
    .status-steps{flex-wrap:wrap;gap:16px 0;}
    .status-steps::before{display:none;}
    .status-step{flex:1 1 45%;}
  }

  /* ---------- MOBILE HEADER FIX (Responsive audit) ---------- */
  /* موضوعة عمدًا في نهاية الملف بعد .cart-btn/.nav-cta/.container الأساسية
     لضمان أولويتها الصحيحة في الـ cascade دون رفع specificity. */
  @media (max-width:760px){
    header .container{padding:0 16px;}
    .logo span{font-size:14px;letter-spacing:.3px;}
    .logo svg{width:34px;height:17px;}
    .nav-actions{gap:8px;}
    .cart-btn{padding:8px;gap:0;border-width:1px;}
    .cart-btn span:not(.cart-count){
      position:absolute;width:1px;height:1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;
    }
    .nav-cta{padding:7px 10px;font-size:11.5px;white-space:nowrap;}
    .nav-actions .lang-switch button{padding:6px 7px;font-size:11px;}
    #langSwitchFloating{display:none !important;}
  }
  @media (max-width:480px){
    .nav-actions{gap:4px;}
    .cart-btn{padding:6px;}
    .nav-cta{padding:6px 8px;font-size:10.5px;}
    .nav-actions .lang-switch button{padding:4px 5px;font-size:9.5px;}
  }
  @media (max-width:430px){
    .nav-actions{gap:1px;}
    .cart-btn{padding:5px;}
    .nav-cta{padding:4px 5px;font-size:9px;}
    .logo span{font-size:12.5px;}
    .nav-actions .lang-switch button{padding:2px 3px;font-size:8.5px;}
  }

  @media (max-width:360px){
    .logo{gap:0;}
    .logo svg{display:none;}
    .logo span{font-size:10.5px;white-space:nowrap;}
  }


/* ===== MODAL / WIZARD UI FIXES ===== */
.tryon-modal,
.visiontest-modal{
  position:fixed;
  inset:0;
  z-index:9990;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  box-sizing:border-box;
}
.tryon-modal.open,
.visiontest-modal.open{display:flex;}
.tryon-stage,
.visiontest-stage{
  width:min(920px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  box-sizing:border-box;
  position:relative;
}
.tryon-video-wrap{
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}
.tryon-video-wrap video,
.tryon-video-wrap canvas,
.tryon-video-wrap img{display:block;max-width:100%;height:auto;}
.visiontest-panel{display:none;box-sizing:border-box;max-width:100%;}
.visiontest-panel.active{display:block;}
.visiontest-result-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.visiontest-result-actions>*{min-width:0;box-sizing:border-box;}
.rx-step{display:none;}
.rx-step.active{display:block;}
.rx-method-panel{display:none;}
.rx-method-panel.active{display:block;}
.rx-proof-drop{box-sizing:border-box;max-width:100%;}
.rx-capture-preview{max-width:100%;overflow:hidden;}
#rxCaptureImg{display:block;max-width:100%;height:auto;}
.ao-chat-panel{display:none;}
.ao-chat-panel.open{
  display:flex;
  position:fixed;
  z-index:9985;
  right:20px;
  bottom:90px;
  width:min(380px,calc(100vw - 32px));
  max-height:min(620px,calc(100vh - 120px));
  box-sizing:border-box;
  flex-direction:column;
  overflow:hidden;
}
@media (max-width:560px){
  .visiontest-result-actions{flex-direction:column;align-items:stretch;}
  .visiontest-result-actions>button,
  .visiontest-result-actions>a{width:100%;max-width:100%;}
  .tryon-modal,.visiontest-modal{padding:10px;}
  .tryon-stage,.visiontest-stage{max-height:calc(100vh - 20px);}
  .ao-chat-panel.open{right:10px;bottom:78px;width:calc(100vw - 20px);max-height:calc(100vh - 100px);}
}

/* ===== FINAL RESPONSIVE UI FIXES — AUDIT PASS 2 ===== */

/* ---------- TRY-ON / RX CAMERA: true video + canvas overlay ---------- */
.tryon-stage{
  background:var(--black-soft);
  color:var(--beige);
  border:1px solid rgba(241,239,232,.14);
  border-radius:14px;
  padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.tryon-video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  background:#111;
  border-radius:10px;
  overflow:hidden;
  isolation:isolate;
}
.tryon-video-wrap video,
.tryon-video-wrap #tryonCanvas,
.tryon-video-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  margin:0;
}
.tryon-video-wrap video{z-index:1;}
.tryon-video-wrap #tryonCanvas{z-index:2;pointer-events:none;}
.tryon-video-wrap img{z-index:2;object-fit:contain;pointer-events:none;}
.tryon-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(0,0,0,.48);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tryon-capture{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:5;
  width:58px;
  height:58px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:var(--copper);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.tryon-status{
  position:absolute;
  left:12px;
  right:84px;
  bottom:12px;
  z-index:4;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  pointer-events:none;
}
.tryon-picker{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:12px 2px 4px;
  scrollbar-width:thin;
}
.tryon-picker-item{
  flex:0 0 68px;
  width:68px;
  height:68px;
  border:2px solid transparent;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}
.tryon-picker-item.active{border-color:var(--copper-light);}
.tryon-picker-item img{width:100%;height:100%;object-fit:contain;display:block;}
.tryon-hint{margin:10px 2px 0;color:var(--gray);font-size:12px;line-height:1.7;text-align:center;}

/* Prescription camera uses the same video layer, while its canvas remains hidden by inline style. */
#rxCameraModal .tryon-stage{max-width:760px;}
#rxCameraModal .tryon-video-wrap{aspect-ratio:4 / 3;}

/* ---------- PRESCRIPTION WIZARD ---------- */
.rx-wizard{
  width:100%;
  max-width:820px;
  margin:28px auto 0;
  background:#fff;
  border:1px solid var(--beige-deep);
  border-radius:12px;
  padding:22px;
  box-sizing:border-box;
  box-shadow:0 12px 34px rgba(44,44,42,.07);
}
.rx-steps-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:22px;
  position:relative;
}
.rx-steps-nav::before{
  content:'';
  position:absolute;
  top:17px;
  left:10%;
  right:10%;
  height:2px;
  background:var(--beige-deep);
  z-index:0;
}
.rx-step-dot{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:#99968e;
  text-align:center;
}
.rx-step-dot span{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:2px solid var(--beige-deep);
  font-family:'Cairo';
  font-size:13px;
  font-weight:700;
}
.rx-step-dot small{font-size:12px;line-height:1.4;max-width:100%;}
.rx-step-dot.active{color:var(--black);font-weight:700;}
.rx-step-dot.active span,
.rx-step-dot.done span{background:var(--copper);border-color:var(--copper);color:#fff;}
.rx-method-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:18px;
}
.rx-method-tab{
  appearance:none;
  border:1px solid var(--beige-deep);
  background:#fff;
  color:var(--black);
  border-radius:8px;
  min-height:46px;
  padding:9px 10px;
  font-family:'Tajawal';
  font-size:14px;
  cursor:pointer;
  transition:all .2s ease;
}
.rx-method-tab.active{
  background:var(--copper);
  border-color:var(--copper);
  color:#fff;
}
.rx-method-panel{min-width:0;}
.rx-method-panel.active{animation:rxPanelIn .18s ease-out;}
@keyframes rxPanelIn{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
.rx-method-panel > .btn-primary{display:block;width:100%;max-width:420px;margin:0 auto;box-sizing:border-box;border:none;cursor:pointer;text-align:center;}
.rx-capture-preview{
  margin:14px auto 0;
  text-align:center;
  border:1px solid var(--beige-deep);
  border-radius:8px;
  padding:10px;
  background:#faf9f5;
  box-sizing:border-box;
}
.rx-capture-preview img{max-height:360px;object-fit:contain;margin:0 auto;}
.rx-proof-drop,
.pay-proof-drop{box-sizing:border-box;max-width:100%;}
.rx-proof-drop + input[type=file],
.pay-proof-drop + input[type=file]{display:none !important;}
.rx-manual-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.rx-manual-col{
  min-width:0;
  border:1px solid var(--beige-deep);
  border-radius:8px;
  padding:14px;
  background:#faf9f5;
}
.rx-manual-col h4{
  margin:0 0 12px;
  font-family:'Cairo';
  font-size:15px;
  color:var(--black);
  text-align:center;
}
.rx-manual-col .form-row{margin-top:10px;}
.rx-manual-col .form-row:first-of-type{margin-top:0;}
.rx-manual-col input,
.rx-wizard .form-row textarea{
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid var(--beige-deep);
  border-radius:6px;
  background:#fff;
  color:var(--black);
  font-family:'Tajawal';
  font-size:14px;
}
.rx-wizard .form-row textarea{resize:vertical;min-height:72px;}
.rx-manual-col input:focus,
.rx-wizard .form-row textarea:focus{outline:1px solid var(--copper);border-color:var(--copper);}
.rx-lens-types{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.rx-option-card{
  appearance:none;
  width:100%;
  min-height:74px;
  padding:14px;
  border:1px solid var(--beige-deep);
  border-radius:9px;
  background:#fff;
  color:var(--black);
  font-family:'Tajawal';
  font-size:15px;
  cursor:pointer;
  transition:all .2s ease;
  box-sizing:border-box;
}
.rx-option-card:hover{border-color:var(--copper-light);transform:translateY(-1px);}
.rx-option-card.active{background:rgba(153,123,95,.12);border-color:var(--copper);box-shadow:0 0 0 2px rgba(153,123,95,.12);}
.rx-frame-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.rx-frame-card{
  min-width:0;
  border:1px solid var(--beige-deep);
  border-radius:9px;
  background:#fff;
  padding:10px;
  cursor:pointer;
  box-sizing:border-box;
}
.rx-frame-card.active{border-color:var(--copper);box-shadow:0 0 0 2px rgba(153,123,95,.12);}
.rx-frame-card img{display:block;width:100%;height:120px;object-fit:contain;}
.rx-loading{text-align:center;color:#77736b;padding:28px 8px;grid-column:1/-1;}
.rx-summary{
  border:1px solid var(--beige-deep);
  border-radius:8px;
  background:#faf9f5;
  padding:14px;
  margin-bottom:18px;
  overflow-wrap:anywhere;
}
.rx-summary table{width:100%;border-collapse:collapse;}
.rx-summary td{padding:7px 4px;border-bottom:1px solid rgba(228,225,214,.8);font-size:13px;vertical-align:top;}
.rx-summary tr:last-child td{border-bottom:0;}
.rx-expert-note,.rx-step-hint,.rx-status{font-size:12.5px;line-height:1.8;color:#6b6a64;}
.rx-step-hint{margin:14px 0 0;text-align:center;}
.rx-status:empty{display:none;}
.rx-wizard-nav{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--beige-deep);
}
.rx-wizard-nav button{min-width:120px;border:none;cursor:pointer;box-sizing:border-box;}

/* ---------- VISION TEST ---------- */
.visiontest-stage{
  background:var(--black-soft);
  color:var(--beige);
  border:1px solid rgba(241,239,232,.14);
  border-radius:14px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.visiontest-close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}
.visiontest-panel{padding:34px 8px 8px;text-align:center;}
.visiontest-h{font-family:'Cairo';font-size:26px;margin:0 0 12px;color:var(--beige);}
.visiontest-note{max-width:650px;margin:0 auto 18px;color:var(--gray);font-size:14px;line-height:1.9;}
.visiontest-video-wrap{
  width:min(560px,100%);
  aspect-ratio:4 / 3;
  margin:0 auto 14px;
  background:#111;
  border-radius:10px;
  overflow:hidden;
}
.visiontest-video-wrap video{display:block;width:100%;height:100%;object-fit:cover;}
.visiontest-calib-status{min-height:24px;margin:10px auto 16px;color:var(--gray);font-size:13px;}
.visiontest-calib-status.warn{color:#e0a27d;}
.visiontest-progress{margin:0 0 8px;color:var(--gray);font-size:13px;}
.visiontest-letter-wrap{display:flex;justify-content:center;align-items:center;min-height:190px;margin:8px 0;}
.visiontest-letter{font-family:Arial,sans-serif;font-size:150px;font-weight:700;line-height:1;color:var(--beige);}
.visiontest-arrows{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;}
.visiontest-arrows-row{display:flex;gap:8px;}
.visiontest-arrow{
  width:58px;height:52px;border:1px solid rgba(241,239,232,.25);border-radius:8px;
  background:rgba(241,239,232,.08);color:var(--beige);font-size:22px;cursor:pointer;
}
.visiontest-arrow:hover{background:rgba(241,239,232,.15);}
.visiontest-share-preview{display:block;width:min(320px,100%);height:auto;max-width:100%;margin:0 auto 18px;border-radius:8px;background:#fff;}
.visiontest-result-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;justify-content:center;}
.visiontest-result-actions>*{min-width:0;box-sizing:border-box;flex:1 1 180px;text-align:center;}

/* ---------- OUR IDENTITY / PILLARS ---------- */
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}
.pillar-card{
  min-width:0;
  padding:26px 20px;
  border:1px solid var(--beige-deep);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  text-align:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.pillar-card:hover{transform:translateY(-3px);border-color:var(--copper-light);background:rgba(153,123,95,.05);}
.pillar-icon{font-size:32px;line-height:1;margin-bottom:14px;}
.pillar-card h3{margin:0 0 8px;font-family:'Cairo';font-size:20px;color:var(--beige);}
.pillar-card p{margin:0;color:var(--gray);font-size:14px;line-height:1.8;}
.pillars-tagline{margin:24px auto 0;text-align:center;color:var(--gray);font-size:16px;line-height:1.8;}
.pillars-tagline span{color:var(--copper-light);font-weight:700;}

/* ---------- SMALL-SCREEN SAFETY ---------- */
@media (max-width:760px){
  .rx-wizard{padding:16px;margin-top:20px;}
  .rx-steps-nav::before{left:8%;right:8%;}
  .rx-step-dot small{font-size:11px;}
  .rx-frame-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pillars-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .tryon-stage,.visiontest-stage{padding:12px;border-radius:10px;}
  .tryon-video-wrap{aspect-ratio:3 / 4;}
  #rxCameraModal .tryon-video-wrap{aspect-ratio:3 / 4;}
  .tryon-close,.visiontest-close{width:38px;height:38px;top:8px;right:8px;}
  .tryon-capture{width:52px;height:52px;right:10px;bottom:10px;}
  .tryon-status{left:10px;right:72px;bottom:10px;font-size:12px;}
  .rx-method-tabs{grid-template-columns:1fr;}
  .rx-manual-grid,.rx-lens-types{grid-template-columns:1fr;}
  .rx-frame-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .rx-wizard-nav{flex-direction:column-reverse;}
  .rx-wizard-nav button{width:100%;min-width:0;}
  .visiontest-stage{max-height:calc(100vh - 20px);overflow:auto;}
  .visiontest-panel{padding:30px 2px 6px;}
  .visiontest-h{font-size:21px;}
  .visiontest-note{font-size:13px;}
  .visiontest-letter-wrap{min-height:145px;}
  .visiontest-letter{font-size:110px;}
  .visiontest-result-actions{flex-direction:column;align-items:stretch;}
  .visiontest-result-actions>*{width:100%;flex:0 0 auto;}
}
@media (max-width:380px){
  .rx-wizard{padding:12px;}
  .rx-step-dot span{width:30px;height:30px;font-size:12px;}
  .rx-step-dot small{font-size:10px;}
  .rx-frame-grid{grid-template-columns:1fr;}
  .tryon-picker-item{flex-basis:60px;width:60px;height:60px;}
}

/* ---------- AI CHAT ASSISTANT ---------- */
.ao-chat-bubble{
  position:fixed;
  right:16px;
  bottom:92px;
  z-index:9984;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  max-width:calc(100vw - 32px);
  padding:7px 12px;
  border:1px solid rgba(153,123,95,.45);
  border-radius:999px;
  background:#fff;
  color:var(--black);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  font-family:'Tajawal';
  cursor:pointer;
  box-sizing:border-box;
}
.ao-chat-bubble-icon{font-size:18px;line-height:1;flex:0 0 auto;}
.ao-chat-badge{font-size:12px;line-height:1.3;color:var(--copper);white-space:nowrap;}
.ao-chat-panel.open{background:var(--black-soft);color:var(--beige);border:1px solid rgba(241,239,232,.14);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45);}
.ao-chat-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(241,239,232,.12);flex:0 0 auto;}
.ao-chat-header-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;}
.ao-chat-header-dot{width:8px;height:8px;border-radius:50%;background:#69a96b;flex:0 0 auto;}
.ao-chat-close{width:34px;height:34px;border:1px solid rgba(241,239,232,.2);border-radius:50%;background:transparent;color:var(--beige);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ao-chat-messages{flex:1 1 auto;min-height:0;overflow:auto;padding:12px;}
.ao-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(241,239,232,.12);flex:0 0 auto;}
.ao-chat-input{min-width:0;flex:1;padding:10px 12px;border:1px solid rgba(241,239,232,.2);border-radius:8px;background:rgba(255,255,255,.06);color:var(--beige);font-family:'Tajawal';font-size:16px;}
.ao-chat-input::placeholder{color:#aaa79f;}
.ao-chat-input:focus{outline:1px solid var(--copper-light);}
.ao-chat-send{width:42px;flex:0 0 42px;border:0;border-radius:8px;background:var(--copper);color:#fff;cursor:pointer;font-size:18px;}
.ao-chat-disclaimer{margin:0;padding:0 12px 10px;color:#aaa79f;font-size:10.5px;line-height:1.6;text-align:center;flex:0 0 auto;}
@media (max-width:560px){
  .ao-chat-bubble{right:10px;bottom:78px;}
  .ao-chat-panel.open{right:10px;bottom:78px;width:calc(100vw - 20px);max-height:calc(100vh - 100px);}
}

/* ---------- SUCCESS RX PREVIEW ---------- */