/* ==========================================================
   سدن للعود والبخور — تحسينات تجربة الاستخدام (الجوال أولاً)
   مبنية على فحص فعلي بمقاس 375×812
   ========================================================== */

/* [1] التباين — اللون الثانوي #dcab7e كانت نسبة تباينه 1.9:1
   على الخلفية البيضاء، والحد المطلوب 4.5:1. هذا اللون يحمل
   أسعار بطاقات المنتجات، وإجابات الأسئلة الشائعة، ونبذة
   المتجر، والسطر الوصفي تحت اسم المنتج — أي أن أهم النصوص
   كانت شبه غير مقروءة على الجوال تحت ضوء النهار.
   البديل #8a5a2b يحافظ على الطابع الذهبي بتباين 5.8:1. */
:root{ --store-text-secondary:#8a5a2b; }

/* [2] زر واتساب العائم كان يغطي 52 بكسل من عرض زر
   «أضف إلى السلة» (نحو 30% منه)، وطبقته 99999 مقابل 4
   لشريط الشراء — أي أن اللمسة في تلك المساحة كانت تفتح
   واتساب بدل إضافة المنتج إلى السلة. */
@media (max-width:767px){
  body.product-single .wa-s-n{ bottom:132px !important; }
  .sticky-product-bar{ z-index:60 !important; }
}

/* [3] أهداف اللمس — الحد الأدنى المتعارف عليه 44×44 بكسل.
   زرّا الشراء كانا 40 بكسل ارتفاعاً، وزر القائمة 24×32. */
@media (max-width:767px){
  .sticky-product-bar .btn,
  .sticky-product-bar button,
  .sticky-product-bar salla-add-product-button button{ min-height:48px !important; }
  .mburger{
    min-width:44px !important; min-height:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  header .header-btn{ min-width:44px !important; min-height:44px !important; }
}

/* [4] شبكة المنتجات كانت عموداً واحداً على الجوال، فبلغ طول
   الصفحة الرئيسية 5344 بكسل. عمودان يقصّران رحلة التصفح. */
@media (max-width:767px){
  .mini-product__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .mini-product__grid > *{ min-width:0 !important; }

  /* الصور المصغّرة كانت 80 بكسل ثابتة (مقاس العمود الواحد)
     فتخرج خارج حدود البطاقة في تخطيط العمودين. */
  .mini-product__thumbs{
    display:flex !important; gap:6px !important;
    justify-content:flex-start !important; overflow:hidden !important;
  }
  .mini-product__thumb{
    width:42px !important; height:42px !important;
    min-width:42px !important; flex:0 0 42px !important;
  }
  .mini-product__thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }

  /* مربع الكمية كان يبتلع كامل عرض البطاقة (173 بكسل) فيتقلّص
     زر «أضف إلى السلة» إلى صفر ويخرج خارج حدودها. الكمية تُضبط
     في صفحة المنتج وفي السلة، فالأولوية هنا لزر الشراء. */
  .mini-product__buy .mini-product__qty{ display:none !important; }
  .mini-product__buy .mini-product__add{
    flex:1 1 100% !important; width:100% !important; min-width:0 !important;
  }
  .mini-product__buy .mini-product__add button{ width:100% !important; min-height:44px !important; }
}

/* [5] بروز السعر في صفحة المنتج — كان 20 بكسل بينما صندوق
   التقسيط أسفله أبرز منه بصرياً، فانقلب ترتيب الأهمية. */
@media (max-width:767px){
  .product-single__info .product-single__price-values .starting-or-normal-price > *{
    font-size:26px !important; line-height:1.3 !important;
  }
  .product-single__price-label{ font-size:13px !important; opacity:.75; }
  .mini-product__price .total-price{ font-size:17px !important; }
}

/* [6] بطاقة الإهداء — حقل واحد موحّد على المنتجات الخمسة.
   سلة تتيح قسم «نموذج الطلب» لنوع «خدمة حسب الطلب» فقط، وبوكسان من
   الخمسة من نوع «منتج ملموس»، فاعتُمد حقل الملاحظة المتاح على كل
   الأنواع وأُعيدت تسميته هنا ليقرأه العميل كبطاقة إهداء. */

/* إخفاء زر «إرفاق ملف» ولوحته — لا حاجة له في بيع البخور */
button[aria-label="Add file"]{ display:none !important; }
div[id^="file_"]{ display:none !important; }

/* عنوان الكتلة: «المرفقات» ← «بطاقة الإهداء» */
section:has(> div > div > div > button[aria-label="Add note"]) > div > label.form-label > b{
  font-size:0 !important;
}
section:has(> div > div > div > button[aria-label="Add note"]) > div > label.form-label > b::before{
  content:"بطاقة الإهداء";
  font-size:15px;
  font-weight:700;
}

/* الزر: «إضافة ملاحظة» ← «اكتب نص بطاقة الإهداء» */
button[aria-label="Add note"] span.fix-align{ font-size:0 !important; }
button[aria-label="Add note"] span.fix-align::before{
  content:"اكتب نص بطاقة الإهداء";
  font-size:14px;
}

/* سطر إرشادي فوق مربع الكتابة */
div[id^="note_"] > div.pt-4::before{
  content:"يُطبع هذا النص في البطاقة المرفقة عند اختيار «تغليف هدية مع بطاقة إهداء».";
  display:block;
  margin-bottom:8px;
  font-size:13px;
  line-height:1.7;
  color:var(--store-text-secondary);
}