/** Shopify CDN: Minification failed

Line 1599:20 Unexpected "{"
Line 1599:31 Expected ":"
Line 1599:34 Unexpected "{"
Line 1600:11 Unexpected "{"
Line 1600:22 Expected ":"
Line 1600:25 Unexpected "{"
Line 1601:35 Unexpected "{"
Line 1601:46 Expected ":"
Line 1601:49 Unexpected "{"
Line 1702:0 Unexpected "<"
... and 1 more hidden warnings

**/
/*
 * Theme Name: Caffeine
 * Theme Version: 1.4
 * Theme Direction: RTL
 * Theme Author: Nutajr
 * Nutajr Website: https://nutajr.com/
 * Theme Doc: https://help.nutajr.com/
 * Copyright: All Copyrights are reserved to Nutajr
*/

/* ===== Fonts ===== */
/* ✅ Vazirmatn variable self-host */
@font-face{
  font-family: "Vazirmatn";
  src: url('{{ "Vazirmatn-VariableFont_wght.woff2" | asset_url }}') format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --brand:#1f2937;
  --ink:#1f2937;
  --muted:#1f2937;
}

/* الشريط مثبت بأسفل الشاشة */
.mbottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483647;
  height: 64px; width: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: none;
  border-radius: 0;
  /* دعم safe-area (قديم/جديد) */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* عرض الشبكة + ترك فراغ للمحتوى على الشاشات الصغيرة */
@media (max-width: 749px){
  .mbottom-nav{ display: grid; grid-template-columns: repeat(5, 1fr); }
  body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior-y: contain;
  }

  /* منع أي transform على الأسلاف (إصلاح iOS) */
  html, body,
  #main, .main,
  #MainContent, .page,
  .wrapper, .outer__bottom,
  header, footer, .shopify-section{
    transform: none !important;
    -webkit-transform: none !important;
    perspective: none !important;
    filter: none !important;
    will-change: auto !important;
    contain: none !important;
  }
}

/* الرمادي الثابت للأيقونات والنص */
.mbottom-nav .mbottom-item{
  color:#9aa0a6 !important;
  background:none; border:0; appearance:none; cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px;
}
.mbottom-nav .mbottom-item .mbottom-icon{ position:relative; width:24px; height:24px; display:inline-flex; }
.mbottom-nav .mbottom-item svg{ width:24px; height:24px; fill:currentColor; }
.mbottom-nav .mbottom-item .mbottom-label{ font-weight:700; letter-spacing:.2px; }
.mbottom-nav .mbottom-item:hover,
.mbottom-nav .mbottom-item.is-active{ color:#9aa0a6 !important; }

/* بادج السلة */
.mbottom-nav .mbottom-badge{
  position:absolute; inset-inline-end:-6px; top:-6px;
  min-width:18px; height:18px; padding:0 4px;
  background:#f59e0b; color:#fff; border-radius:999px; font-size:10px;
  display:inline-flex; align-items:center; justify-content:center; border:2px solid #fff;
}

/* إخفاء الشريط عند فتح شيت الفئات (اختياري) */
body.cats-open .mbottom-nav{
  transition: transform .25s ease;
  transform: translateY(120%) !important;
}


@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mbottom-nav{
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-bottom: constant(safe-area-inset-bottom) !important;
  }
}

/* ==== Bottom Sheet (cats-sheet) ==== */
.cats-sheet{ position:fixed; inset:0; display:none; z-index:10050; }
.cats-sheet[aria-hidden="false"]{ display:block; }
.cats-sheet__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.cats-sheet__panel{
  position:absolute; inset-inline:0; bottom:0; background:#fff;
  border-radius:16px 16px 0 0; max-height:85vh; overflow:auto;
  box-shadow:0 -16px 40px rgba(0,0,0,.20);
}
.cats-sheet__header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eee; background:#fff; z-index:1;
}
.cats-sheet__title{ font-weight:800; color:var(--ink); }
.cats-sheet__close{ background:#f3f4f6; border:0; width:36px; height:36px; border-radius:10px; font-size:18px; }
.cats-sheet__body{ padding:8px 6px 20px; }
.cats-list{ list-style:none; margin:0; padding:0; }
.cats-item{ border-bottom:1px solid #f2f2f2; }
.cats-link{ display:flex; align-items:center; gap:12px; padding:14px 12px; text-decoration:none; color:var(--ink); font-weight:700; }
.cats-link:hover{ background:#fafafa; }
.cats-link__chev{ margin-inline-start:auto; color:var(--brand); font-size:18px; }
.cats-sub{ padding:0 12px 10px 12px; }
.cats-sublink{ display:block; padding:8px 10px; color:#374151; text-decoration:none; }
.cats-sublink:hover{ color:var(--brand); }/* ==== Mobile Bottom Nav (iOS sticky + gray color) ==== */
:root{
  --brand:#1f2937;
  --ink:#1f2937;
  --muted:#1f2937;
}

/* الشريط مثبت بأسفل الشاشة + تحسينات iOS */
.mbottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483647;
  height: 64px; width: 100%;
  background: #fff;
  border-top: 1px solid #eee;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: none;
  border-radius: 0;
  /* دعم safe-area (قديم/جديد) */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* إظهار الشريط كشبكة وترك فراغ للمحتوى على الشاشات الصغيرة */
@media (max-width: 749px){
  .mbottom-nav{ display: grid; grid-template-columns: repeat(5, 1fr); }

  /* اترك فراغًا أسفل الصفحة حتى لا يتغطّى المحتوى */
  body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior-y: contain;
  }

  /* امنع أي transform/scroll-container يكسر position:fixed على iOS */
  html, body,
  #main, .main, #MainContent,
  .page, .wrapper, .outer__bottom,
  header, footer, .shopify-section{
    transform: none !important;
    -webkit-transform: none !important;
    perspective: none !important;
    filter: none !important;
    will-change: auto !important;
    contain: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    height: auto !important;
  }

  /* تأكيد ثبات الشريط بأسفل الشاشة */
  .mbottom-nav{
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 2147483647 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}

/* ضبط الارتفاع مع حافة الـ safe-area – المتصفحات الحديثة */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mbottom-nav{
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* عناصر الشريط باللون الرمادي الثابت */
.mbottom-nav .mbottom-item{
  color:#9aa0a6 !important;
  background:none; border:0; appearance:none; cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; font-size:12px;
}
.mbottom-nav .mbottom-item .mbottom-icon{ position:relative; width:24px; height:24px; display:inline-flex; }
.mbottom-nav .mbottom-item svg{ width:24px; height:24px; fill:currentColor; }
.mbottom-nav .mbottom-item .mbottom-label{ font-weight:700; letter-spacing:.2px; }
.mbottom-nav .mbottom-item:hover,
.mbottom-nav .mbottom-item.is-active{ color:#9aa0a6 !important; }

/* بادج السلة */
.mbottom-nav .mbottom-badge{
  position:absolute; inset-inline-end:-6px; top:-6px;
  min-width:18px; height:18px; padding:0 4px;
  background: var(--brand); /* سيستبدل لاحقًا بالأوفِررايد */
  color:#fff; border-radius:999px; font-size:10px;
  display:inline-flex; align-items:center; justify-content:center; border:2px solid #fff;
}

/* إخفاء الشريط عند فتح شيت الفئات (اختياري) */
body.cats-open .mbottom-nav{
  transition: transform .25s ease;
  transform: translateY(120%) !important;
}

/* ==== Bottom Sheet (cats-sheet) ==== */
.cats-sheet{ position:fixed; inset:0; display:none; z-index:10050; }
.cats-sheet[aria-hidden="false"]{ display:block; }
.cats-sheet__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.cats-sheet__panel{
  position:absolute; inset-inline:0; bottom:0; background:#fff;
  border-radius:16px 16px 0 0; max-height:85vh; overflow:auto;
  box-shadow:0 -16px 40px rgba(0,0,0,.20);
}
.cats-sheet__header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eee; background:#fff; z-index:1;
}
.cats-sheet__title{ font-weight:800; color:var(--ink); }
.cats-sheet__close{ background:#f3f4f6; border:0; width:36px; height:36px; border-radius:10px; font-size:18px; }
.cats-sheet__body{ padding:8px 6px 20px; }
.cats-list{ list-style:none; margin:0; padding:0; }
.cats-item{ border-bottom:1px solid #f2f2f2; }
.cats-link{ display:flex; align-items:center; gap:12px; padding:14px 12px; text-decoration:none; color:var(--ink); font-weight:700; }
.cats-link:hover{ background:#fafafa; }
.cats-link__chev{ margin-inline-start:auto; color:var(--brand); font-size:18px; }
.cats-sub{ padding:0 12px 10px 12px; }
.cats-sublink{ display:block; padding:8px 10px; color:#374151; text-decoration:none; }
.cats-sublink:hover{ color:var(--brand); }


body.cats-open{ overflow:hidden; }

body.cats-open .mbottom-nav{ transform:translateY(120%); }
/* === iOS fix: امنع ancestors من قطع fixed-position على الموبايل === */
@media (max-width: 749px){
  html, body,
  #main, .main,
  #MainContent, .page,
  .wrapper, .outer__bottom,
  header, footer, .shopify-section {
    transform: none !important;
    -webkit-transform: none !important;
    perspective: none !important;
    filter: none !important;
    will-change: auto !important;
    contain: none !important;
  }

  /* تأكيد ثبات الشريط بأسفل الشاشة وبأولوية عالية */
  .mbottom-nav{
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 2147483647 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* احترام الـ safe-area وترك فراغ للمحتوى */
  body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior-y: contain;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mbottom-nav{
      height: calc(64px + env(safe-area-inset-bottom)) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}
/* أخفاء الشريط السفلي في الديسكتوب */
@media (min-width: 750px) {
  .mbottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}
/* زر واتساب عائم (نمط واتساب الرسمي) */
.wa-float {
  position: fixed;
  right: 18px;         /* ثبّت على اليمين */
  left: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
  z-index: 2147483000;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}


/* أيقونة واتساب الرسمية */
.wa-float svg {
  width: 32px;
  height: 32px;
  fill: #fff;
  transition: transform 0.2s ease;
}

/* تأثير عند المرور */
.wa-float:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);
  filter: brightness(1.05);
}
.wa-float:hover svg {
  transform: scale(1.1);
}

/* توهج ناعم */
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2s infinite;
}
@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* لا يزاحم شريط التنقل السفلي بالموبايل */
@media (max-width: 749px) {
  .mbottom-nav ~ .wa-float {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}
/* ====== Brand (البائع) فوق العنوان بشكل خفيف ====== */
.product__desc .product-brand{
  margin-bottom: 6px;
  text-align: right;
}
.product__desc .product-brand .product-vendor{
  font-size: 14px;
  line-height: 1.2;
  color: #9f9f9f;
  text-decoration: none;
}

/* ====== العنوان مثل الصورة (كبير/ثقيل) ====== */
.product__desc .product-title{
  margin: 0 0 10px;
  font-size: 34px;           /* لو تبغاه أكبر: 36–38px */
  font-weight: 800;
  line-height: 1.25;
  color: #111827;
}

/* ====== سطر السعر: البرتقالي + المشطوب رمادي ====== */
.product__desc .product-price{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: .25rem 0 1rem;
}
.product__desc .product-price > span:last-child{ /* السعر الحالي */
  font-size: 28px;
  font-weight: 800;
  color: #f97316;           /* برتقالي */
}
.product__desc .product-price .product-compare-at-price{
  font-size: 20px;
  color: #9ca3af;
  text-decoration: line-through;
}

/* ====== أزرار شرائح الكمية (نفس الستايل في الصورة) ====== */
.qty-breaks{
  display:flex; gap:.75rem; flex-wrap:wrap; margin:.75rem 0 1rem;
}
.qty-breaks button{
  border:1px solid #e5e7eb;
  background:#fff;
  padding:.55rem .9rem;
  border-radius:.5rem;
  cursor:pointer;
  font-weight:600;
}
.qty-breaks button .per{
  display:block; font-size:.85em; opacity:.75; margin-top:.25rem;
}
.qty-breaks button.active{
  border-color:#f97316;
  box-shadow:0 0 0 2px rgba(249,115,22,.15);
}

/* ====== حقل الكمية (+ / -) أنيق وواضح ====== */
.product__desc .quantity{
  margin: .5rem 0 1rem;
}
.product__desc .quantity p{
  margin: 0 0 6px; font-weight:700;
}
.product__desc .quantity__field{
  display:flex; align-items:center; gap:10px;
}
.product__desc .quantity__field a{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; border-radius:10px; font-size:22px; font-weight:700; text-decoration:none; color:#111827;
}
.product__desc .quantity__field input{
  width:80px; height:42px; text-align:center; border:1px solid #e5e7eb; border-radius:10px; font-weight:700;
}

/* ====== ملاحظة السعر تحت الشرائح (سعر الحبة/الإجمالي) ====== */
.qty-inline{
  font-size:.95rem;
  color:#374151;
  margin:.25rem 0 .75rem;
}

/* ====== زر الإضافة للسلة عريض مثل الصورة ====== */
.product__desc .button__wrapper .btn{
  width: 100%;
  max-width: 520px;          /* عدّلها لو تبغى */
  height: 56px;
  border-radius: 12px;
  background:#f97316;
  color:#fff;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid #f97316;
}
.product__desc .button__wrapper .btn:hover{
  background:#fff;
  color:#f97316;
  border-color:#f97316;
}

/* ====== تحسينات بسيطة على الـBreadcrumbs (اختياري) ====== */
.breadcrumbs ul{
  display:flex; align-items:center; gap:8px; font-size:14px; color:#6b7280;
}
.breadcrumbs a{ color:#f97316; text-decoration:none; }

/* ====== تجاوب للموبايل ====== */
@media (max-width: 749px){
  .product__desc .product-title{ font-size: 26px; }
  .product__desc .product-price > span:last-child{ font-size: 24px; }
  .product__desc .product-price .product-compare-at-price{ font-size: 16px; }
}

/* ===========================================================
   === OVERRIDES & TOKENS (بدون حذف شيء من الأصلي) ===========
   =========================================================== */

/* متغيرات ألوان أمازون */
:root{
  --amazon-orange: #FF9900;
  --amazon-orange-soft: #FEBD69; /* لخلفيات/هوفر خفيف عند الحاجة */
}

/* السعر الحالي — برتقالي أمازون */
.product__desc .product-price > span:last-child{
  color: var(--amazon-orange) !important;
}

/* زر الإضافة للسلة — برتقالي أمازون */
.product__desc .button__wrapper .btn{
  background: var(--amazon-orange) !important;
  border-color: var(--amazon-orange) !important;
  color: #fff !important;
}
.product__desc .button__wrapper .btn:hover{
  background: #fff !important;
  color: var(--amazon-orange) !important;
  border-color: var(--amazon-orange) !important;
}

/* البادج في شريط الموبايل */
.mbottom-nav .mbottom-badge{
  background: var(--amazon-orange) !important;
}

/* روابط مسار الصفحات */
.breadcrumbs a{
  color: var(--amazon-orange) !important;
}

/* تمييز شريحة الكمية المختارة */
.qty-breaks button.active{
  border-color: var(--amazon-orange) !important;
  /* توهج خفيف متوافق */
  box-shadow: 0 0 0 2px rgba(255,153,0,.20) !important;
}
/* طول شريط الجوال – عدّلها لو شريطك أعلى/أقل */
:root{ --mbnav: 64px; }

@media (max-width: 749px){
  /* مساحة سفلية للمحتوى عشان ما ينسدّ خلف الزر */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* خُذ أي زر إضافة داخل نموذج /cart/add وخلّه ثابت فوق الشريط */
  form[action="/cart/add"] :where(
    button[type="submit"][name="add"],
    .product-form__submit,
    .add-to-cart,
    .btn--add-to-cart,
    .product-add-to-cart
  ){
    position: fixed !important;
    left: 14px; right: 14px;
    bottom: calc(var(--mbnav) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;      /* يمتلئ افتراضيًا بين اليمين واليسار */
    height: 56px; border-radius: 12px;
    z-index: 2147483601 !important; /* أعلى من الشريط وأي عناصر ثابتة */
    display: block !important;
  }

  /* لو عندك حاوية للزر، ثبّتها برضه (لبعض الثيمات) */
  form[action="/cart/add"] :where(
    .product-form__buttons,
    .product__buttons,
    .button__wrapper,
    .buy-buttons
  ){
    position: fixed !important;
    left: 14px; right: 14px;
    bottom: calc(var(--mbnav) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483600 !important;
    background: transparent !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
  }

  /* لو أي عنصر أب تر من الزر مسوي overflow، عطّله بالموبايل */
  .product__desc, .product__summary, .product, .product__main{
    overflow: visible !important;
  }

  /* أبعد أيقونة الواتساب العائمة فوق الزر */
  .wa-float{
    bottom: calc(var(--mbnav) + 92px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    z-index: 2147483000 !important; /* أقل من زر السلة */
  }

  /* لو شريطك يستخدم أحد هذه الكلاسات */
  .mbottom-nav ~ .wa-float,
  .mobile-bottom-nav ~ .wa-float,
  .mobile__bottom__nav ~ .wa-float,
  .fixed-bottom ~ .wa-float,
  .sticky-footer ~ .wa-float{
    bottom: calc(var(--mbnav) + 92px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* خنق أي زر عائم من إضافات ثانية (اختياري) */
.atc-floating, .atc-float, #atc-floating, .sticky-add-to-cart, .sticky_atc, .floating-atc{
  display:none !important; visibility:hidden !important; opacity:0 !important;
}
:root{ --mbnav:64px; } /* ارتفاع شريط الجوال السفلي */

@media (max-width: 749px){

  /* اسمح للعناصر السفلية إنها تطلع خارج الحاويات بدون قص */
  .product__main, .product__main .wrapper, .product__wrapper, .product__desc{
    overflow: visible !important;
  }

  /* الحاوية اللي ماسكة الزر */
  .product__desc .button__wrapper{
    position: fixed !important;
    /* استخدم هوامش آمنة يمين/يسار بدل left/right الصِرفة */
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;

    bottom: calc(var(--mbnav) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 2147483600 !important;
    width: auto !important;
    /* لا يتجاوز عرض الشاشة مهما صار */
    max-width: calc(100vw - (max(12px, env(safe-area-inset-left)) + max(12px, env(safe-area-inset-right))));
    box-sizing: border-box;
  }

  /* الزر نفسه */
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit{
    display:block !important;
    width:100% !important;
    height:56px; border-radius:12px;
  }

  /* أبعد واتساب فوق الزر بشوي */
  .wa-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483000 !important;
  }

  /* خلّي الصفحة فيها مساحة تحت عشان ما يختفي المحتوى وراء الزر */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 110px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* ارتفاع شريط الجوال السفلي عندك */
:root{ --mbnav: 64px; }

@media (max-width: 749px){
  /* خلّ المحتوى ما ينقص تحت الزر */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* تأكّد ما في قص على الحاويات */
  .product__main, .product__main .wrapper, .product__wrapper, .product__desc{
    overflow: visible !important;
  }

  /* الحاوية اللي تمسك الزر */
  .product__desc .button__wrapper{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mbnav) + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 2147483600 !important;
    width: 100vw !important;          /* يمسك الشاشة كاملة */
    max-width: 100vw !important;
  }

  /* الزر نفسه — فل سكرين، بلا زوايا */
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit{
    display:block !important;
    width: 100% !important;
    height: 56px !important;
    border-radius: 0 !important;
  }

  /* أبعد أيقونة الواتساب فوق الزر */
  .wa-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 68px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483000 !important;
  }
}

/* لو فيه أي زر عائم من إضافة ثانية عطّله */
.atc-floating, .atc-float, #atc-floating, .sticky-add-to-cart, .sticky_atc, .floating-atc{
  display:none !important; visibility:hidden !important; opacity:0 !important;
}
/* طول شريط الجوال عندك */
:root{ --mbnav:64px; }

@media (max-width: 749px){
  /* مساحة تحت للمحتوى عشان ما يختفي خلف الزر */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 80px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* ثبّت الحاوية (لو موجودة) بكامل العرض */
  .product__desc .button__wrapper,
  form[action="/cart/add"] .product-form__buttons,
  form[action="/cart/add"] .product__buttons,
  form[action="/cart/add"] .buy-buttons{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mbnav) + env(safe-area-inset-bottom,0px)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 2147483600 !important;
  }

  /* الزر نفسه — فل سكرين وبرتقالي دائمًا */
  form[action="/cart/add"] button[type="submit"],
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit,
  form[action="/cart/add"] .btn--add-to-cart{
    display:block !important;
    width: 100% !important;
    height: 56px !important;
    border-radius: 0 !important;
    background: #FF9900 !important;      /* اللون البرتقالي */
    border-color: #FF9900 !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    text-align:center !important;
    line-height:56px !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* لا تغيّر اللون بأي حالة */
  form[action="/cart/add"] button[type="submit"]:hover,
  form[action="/cart/add"] button[type="submit"]:focus,
  form[action="/cart/add"] button[type="submit"]:active,
  .product__desc .button__wrapper .add-to-cart-item:hover,
  .product__desc .button__wrapper .add-to-cart-item:focus,
  .product__desc .button__wrapper .add-to-cart-item:active,
  form[action="/cart/add"] .product-form__submit:hover,
  form[action="/cart/add"] .product-form__submit:focus,
  form[action="/cart/add"] .product-form__submit:active{
    background: #FF9900 !important;
    border-color: #FF9900 !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* أبعد زر الواتساب فوق الزر */
  .wa-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 68px + env(safe-area-inset-bottom,0px)) !important;
    z-index: 2147483000 !important;
  }
}

/* عطّل أي أزرار عائمة من إضافات ثانية (لو موجودة) */
.atc-floating, .atc-float, #atc-floating, .sticky-add-to-cart, .sticky_atc, .floating-atc{
  display:none !important; visibility:hidden !important; opacity:0 !important;
}
.whatsapp-float {
  right: 15px !important; /* عدل حسب التصميم */
  bottom: 90px !important; /* ارفعه فوق شريط القائمة */
  z-index: 9999;
}

.add-to-cart-btn {
  width: 100%;
  margin: 0;
  padding-right: 0;
}

.bottom-nav {
  bottom: 0;
  margin: 0;
  padding: 0;
}
/* ==== Stop mobile right-cut / overflow (عام لكل الموقع) ==== */
html, body { overflow-x: hidden; }

.wrapper,
.product__main,
.product__wrapper,
.product__desc,
.product__description,
.promo-grid-bs,
.flickity-viewport {
  max-width: 100vw;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

/* صور/فيديو ما تكسر العرض */
img, video { max-width: 100%; height: auto; }

/* نقاط السلايدر أحيانًا تطلع برّا في RTL */
.flickity-page-dots { inset-inline: 0; margin-inline: auto; max-width: 100%; }

/* أي عنصر ثابت يحترم حواف الآيفون */
[style*="position: fixed"], .whatsapp-float, .wa-float, .floating, .btn-floating {
  inset-inline-end: max(12px, env(safe-area-inset-right));
}
/* ارتفاع شريط الجوال السفلي (عدّل حسب شريطك) */
:root{ --mbnav: 64px; }

@media (max-width: 749px){
  /* مساحة أسفل للمحتوى عشان ما يختفي خلف زر السلة */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* اسمح للعناصر السفلية تطلع بدون قص */
  .product__main, .product__main .wrapper, .product__wrapper, .product__desc{
    overflow: visible !important;
  }

  /* الحاوية الماسكة زر الإضافة */
  .product__desc .button__wrapper,
  form[action="/cart/add"] .product-form__buttons,
  form[action="/cart/add"] .product__buttons,
  form[action="/cart/add"] .buy-buttons{
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483600 !important;
    width: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: transparent !important;
    max-width: calc(100vw - (max(12px, env(safe-area-inset-left)) + max(12px, env(safe-area-inset-right))));
    box-sizing: border-box;
  }

  /* الزر نفسه */
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit,
  form[action="/cart/add"] .btn--add-to-cart,
  form[action="/cart/add"] button[type="submit"][name="add"]{
    display:block !important;
    width:100% !important;
    height:56px !important;
    border-radius:12px !important;
  }

  /* أبعد واتساب فوق الزر */
  .whatsapp-float, .wa-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483000 !important; /* أقل من زر السلة */
  }

  /* لو فيه إضافات تسوي زر عائم ثاني عطّلها */
  .atc-floating, .atc-float, #atc-floating, .sticky-add-to-cart, .sticky_atc, .floating-atc{
    display:none !important; visibility:hidden !important; opacity:0 !important;
  }

  /* تفاصيل السعر ما تلتف */
  .product-price span, .qty-inline { white-space: nowrap; }
}
/* ===== Global mobile overflow/RTL fix ===== */
html, body { overflow-x: hidden; }

/* أي لفّافات رئيسية لا تتجاوز الشاشة */
.wrapper,
.container,
.product__main,
.product__wrapper,
.product__desc,
.product__description,
.promo-grid-bs,
.flickity-viewport {
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow-x: clip; /* أأمن من hidden */
}

/* أي عنصر عاملها 100vw خليه 100% (سبب شائع للقص) */
*[style*="100vw"],
.w-100vw, .full-viewport, .banner-100vw, .section-100vw, .fullwidth, .section-full, .banner-full {
  width: 100% !important;
  max-width: 100% !important;
}

/* صور/فيديو ما تكسر العرض */
img, video { max-width: 100%; height: auto; display: block; }

/* نقاط السلايدر في RTL لا تطلع خارج الحافة */
.flickity-page-dots { inset-inline: 0; margin-inline: auto; max-width: 100%; }

/* عناصر ثابتة (واتساب/أزرار) احترم حواف الآيفون */
[style*="position: fixed"], .whatsapp-float, .wa-float, .floating, .btn-floating {
  inset-inline-end: max(12px, env(safe-area-inset-right));
}

/* امنع أي انتقالات غريبة تحرّك البودي */
html, body {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* أحيانًا المودال يجيب عرض أوسع */
.modal__wrapper { inset: 0 !important; max-width: 100vw !important; }
:root{ --mbnav: 64px; } /* عدّلها لو شريط الجوال السفلي أعلى/أقل */

@media (max-width: 749px){
  /* مساحة تحت للمحتوى */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* لا تقص الحاويات */
  .product__main, .product__main .wrapper, .product__wrapper, .product__desc{
    overflow: visible !important;
  }

  /* ثبّت حاوية زر الإضافة بكامل العرض داخل الحواف الآمنة */
  .product__desc .button__wrapper,
  form[action="/cart/add"] .product-form__buttons,
  form[action="/cart/add"] .product__buttons,
  form[action="/cart/add"] .buy-buttons{
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483600 !important;
    width: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    max-width: calc(100vw - (max(12px, env(safe-area-inset-left)) + max(12px, env(safe-area-inset-right))));
    box-sizing: border-box;
  }

  /* الزر نفسه */
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit,
  form[action="/cart/add"] .btn--add-to-cart,
  form[action="/cart/add"] button[type="submit"][name="add"]{
    display:block !important;
    width:100% !important;
    height:56px !important;
    border-radius:12px !important;
  }

  /* أبعد واتساب فوق الزر */
  .whatsapp-float, .wa-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483000 !important;
  }

  /* عطّل أي زر عائم من إضافة ثانية (لا يسبب ازدواج/قص) */
  .atc-floating, .atc-float, #atc-floating, .sticky-add-to-cart, .sticky_atc, .floating-atc{
    display:none !important; visibility:hidden !important; opacity:0 !important;
  }

  /* تفاصيل السعر والملخص لا تلتف */
  .product-price span, .qty-inline { white-space: nowrap; }
}
/* ===== 1) تصغير الحواف (Gutters) على الجوال ===== */
@media (max-width: 749px){
  /* كل اللفّافات الأساسية */
  .wrapper,
  .product__main .wrapper,
  .product__wrapper,
  .product__desc,
  .product__description .outer__product--description,
  .breadcrumbs .wrapper {
    padding-inline: 12px !important;   /* كانت كبيرة، خليناها 12px */
    margin-inline: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* كروت/أزرار الشرائح ما تزنّق الصفحة */
  .qty-breaks{ margin-inline: 0 !important; }
  .qty-breaks button{ border-radius: 10px; } /* حواف أخف */
}

/* لو تبغى أرفه شوي على التابلت */
@media (min-width: 750px) and (max-width: 1024px){
  .wrapper,
  .product__main .wrapper,
  .product__wrapper,
  .product__desc,
  .product__description .outer__product--description {
    padding-inline: 16px !important;
  }
}

/* ===== 2) رجع زر السلة فوق الشريط السفلي ===== */
/* تأكد من ارتفاع الشريط */
:root{ --mbnav: 64px; } /* عدّلها لو شريطك أعلى/أقل */

@media (max-width: 749px){
  /* ثبّت الحاوية اللي تمسك الزر فوق الشريط مباشرة */
  .product__desc .button__wrapper,
  form[action="/cart/add"] .product-form__buttons,
  form[action="/cart/add"] .product__buttons,
  form[action="/cart/add"] .buy-buttons{
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 12px + env(safe-area-inset-bottom, 0px)) !important; /* فوق الشريط */
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: transparent !important;
    width: auto !important;
    max-width: calc(100vw - (max(12px, env(safe-area-inset-left)) + max(12px, env(safe-area-inset-right))));
    z-index: 2147483600 !important;
    box-sizing: border-box;
  }

  /* خل الزر يملأ العرض داخل الهوامش الجديدة */
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit,
  form[action="/cart/add"] .btn--add-to-cart,
  form[action="/cart/add"] button[type="submit"][name="add"]{
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    border-radius: 12px !important;
  }

  /* مساحة كافية أسفل الصفحة عشان ما يختفي شي خلف الزر */
  body.template-product{
    padding-bottom: calc(var(--mbnav) + 110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ارفع واتساب برضه فوق الزر */
  .wa-float{
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbnav) + 92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483000 !important;
  }
}
/* ===== تصغير وتوسيط زر الإضافة للسلة ===== */
@media (max-width: 749px){
  .product__desc .button__wrapper,
  form[action="/cart/add"] .product-form__buttons,
  form[action="/cart/add"] .product__buttons,
  form[action="/cart/add"] .buy-buttons{
    display: flex !important;
    justify-content: center !important;
  }

  /* الزر نفسه */
  .product__desc .button__wrapper .add-to-cart-item,
  form[action="/cart/add"] .product-form__submit,
  form[action="/cart/add"] .btn--add-to-cart,
  form[action="/cart/add"] button[type="submit"][name="add"]{
    width: 88% !important;          /* ← قلل العرض من 100% إلى 88% */
    max-width: 380px !important;    /* ← ما يتعدى هذا المقاس */
    height: 52px !important;        /* ← قلل الطول شوي */
    border-radius: 12px !important;
    background: #FF9900 !important;
    border-color: #FF9900 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    text-align: center !important;
    line-height: 52px !important;
  }

  /* أبعده شوي عن الشريط */
  .product__desc .button__wrapper{
    bottom: calc(var(--mbnav) + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
.mbottom-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mbottom-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.mbottom-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px; /* يدعم RTL/LTR */
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff9800;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  display: none; /* JS يطلّعها إذا العدد > 0 */
}
.mbottom-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mbottom-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* شارة العدّاد – نجبر ظهورها بالـ !important */
.mbottom-badge,
[data-cart-count] {
  position: absolute !important;
  top: -6px !important;
  inset-inline-end: -6px !important; /* RTL/LTR */
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #ff9800 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  text-align: center !important;
  display: none !important; /* السكربت يبدّلها إلى inline-block عند >0 */
}
button[name="add"].added {
  animation: bounce 0.25s ease;
}
@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* حركة السلة لما ينضاف منتج */
@keyframes cart-bounce {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.15) rotate(-10deg); }
  50%  { transform: scale(0.9) rotate(5deg); }
  75%  { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.mbottom-icon.animate-cart {
  animation: cart-bounce 0.6s ease;
}
/* ===== Promo Grid (Basha-style) – polish ===== */

/* الحاوية الرئيسية للكروت */
.promo-grid-bs {
  --card-r: 22px;          /* نصف قطر الزوايا */
  --card-gap: 14px;        /* المسافة بين العناصر */
  --card-shadow: 0 12px 28px rgba(0,0,0,.14);
  --card-shadow-hover: 0 16px 36px rgba(0,0,0,.18);
  --ink: #0f172a;          /* لون النص الداكن */
  --muted: #64748b;        /* لون الوصف */
  --cta: #111827;          /* لون زر CTA (نص داكن على خلفية فاتحة) */
}

/* الشبكة والمسافات */
.promo-grid-bs .promo-grid {
  gap: var(--card-gap) !important;
}

/* الكرت */
.promo-grid-bs .promo-card{
  border-radius: var(--card-r) !important;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  background: #fff; /* لحالات خلفية شفافة */
}
.promo-grid-bs .promo-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

/* الصورة داخل الكرت */
.promo-grid-bs .promo-card .promo-media{
  border-radius: calc(var(--card-r) - 6px) !important;
  overflow: hidden;
}

/* الوصف/السطر الصغير */
.promo-grid-bs .promo-card .promo-sub{
  font-size: clamp(12px, 1.35vw, 14px);
  color: rgba(255,255,255,.92);
}

/* زر (CTA) كبسولة مع بلور خفيف */
.promo-grid-bs .promo-card .promo-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--cta);
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: saturate(1.4) blur(6px);
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
  border: 1px solid rgba(255,255,255,.5);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.promo-grid-bs .promo-card .promo-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

/* فقاعة السعر/العرض (يمين الصورة) */
.promo-grid-bs .promo-card .price-bubble{
  min-width: 58px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  display: inline-flex; align-items: center; justify-content: center;
}

/* نقاط السلايدر (لو القسم مفعّل كسلايدر) */
.promo-grid-bs .flickity-page-dots .dot{
  width: 9px; height: 9px;
  margin: 0 4px;
  opacity: .45;
}
.promo-grid-bs .flickity-page-dots .dot.is-selected{
  transform: scale(1.25);
  opacity: 1;
}

/* حواف/ظل لصناديق الكروت الصغيرة أسفل اليمين */
.promo-grid-bs .promo-card--small{
  border-radius: calc(var(--card-r) - 6px) !important;
  box-shadow: var(--card-shadow);
}

/* تجاوب للجوال */
@media (max-width: 767.98px){
  .promo-grid-bs { --card-r: 18px; --card-gap: 10px; }
  .promo-grid-bs .promo-card .promo-title{
    font-size: clamp(18px, 5vw, 24px);
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
  }
  .promo-grid-bs .promo-card .promo-cta{
    height: 36px; padding: 0 12px;
  }
}
/* ==== تصغير الحواف على الديسكتوب (خفيف وأنيق) ==== */
@media (min-width: 750px){
  .wrapper,
  .container,
  .product__main,
  .product__wrapper,
  .product__desc,
  .product__description .outer__product--description,
  .breadcrumbs .wrapper,
  .section,
  .page-width {
    padding-inline: 24px !important; /* كانت 40–60px، الآن أخف */
    margin-inline: auto !important;
    max-width: 1400px !important;    /* يعطي تنفس مناسب بدون ما تكون الصفحة ضيقة */
    box-sizing: border-box;
  }

  /* خفّف هوامش الكروت أو البانرات العريضة */
  .promo-grid-bs,
  .collection-list,
  .featured-products,
  .product-grid {
    padding-inline: 20px !important;
  }

  /* خفف الحافة فوق وتحت شوي في الأقسام */
  section, .shopify-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
/* ==== Fun FX — modern & light ==== */

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .fx-in,.fx-pop,.fx-bounce,.fx-wiggle,.fx-squish,
  .pgbs-card:hover .pgbs-card__media,
  .pgbs-slide { transition: none !important; animation: none !important; }
}

/* دخول ناعم */
.fx-in { opacity: 0; transform: translateY(18px) scale(.98); }
.fx-in.is-in { opacity: 1; transform: translateY(0) scale(1);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }

/* بَوب */
@keyframes fxPop { 0%{transform:scale(.94)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
.fx-pop:hover { animation: fxPop .35s ease-out; }

/* بونس */
@keyframes fxBounce {
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
  60%{transform:translateY(3px)}
}
.fx-bounce:hover { animation: fxBounce .6s ease-out; }

/* ويقل */
@keyframes fxWiggle {
  0%,100%{transform:rotate(0deg)}
  15%{transform:rotate(-3deg)}
  30%{transform:rotate(3deg)}
  45%{transform:rotate(-2deg)}
  60%{transform:rotate(2deg)}
  75%{transform:rotate(-1deg)}
  90%{transform:rotate(1deg)}
}
.fx-wiggle { transform-origin: center; }
.is-wiggle { animation: fxWiggle .7s ease-in-out; }

/* سكويش للزر */
@keyframes fxSquish {
  0%{transform:scale(1)}
  40%{transform:scale(1.06,.94)}
  70%{transform:scale(.97,1.03)}
  100%{transform:scale(1)}
}
.pgbs-btn.fx-squish:active { animation: fxSquish .22s ease-out; }

/* بارالاكس بسيط */
.pbbs-parallax .pgbs-card__media{
  will-change: transform;
  transition: transform .12s linear;
}

/* نقاط السلايدر */
.pgbs-dot { transition: transform .18s ease; }
.pgbs-dot:hover { transform: scale(1.2); }

/* كونفيتي */
.pgbs-btn.js-confetti { position: relative; overflow: visible; }
@keyframes confettiBurst {
  0% { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x,10px), var(--y,-24px)) rotate(var(--r,45deg)); }
}
.confetti-piece{
  position:absolute; width:6px; height:10px; border-radius:2px;
  top:50%; left:50%; transform: translate(-50%,-50%);
  opacity:0; animation: confettiBurst .7s ease-out forwards;
}

/* لمسة لطيفة للعناوين */
.pgbs-heading.small,.pgbs-heading{ transition: transform .25s ease; }
.pgbs-card:hover .pgbs-heading { transform: translateY(-2px); }
/* ==== Fun FX — modern & light ==== */

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .fx-in,.fx-pop,.fx-bounce,.fx-wiggle,.fx-squish,
  .pgbs-card:hover .pgbs-card__media,
  .pgbs-slide { transition: none !important; animation: none !important; }
}

/* دخول ناعم */
.fx-in { opacity: 0; transform: translateY(18px) scale(.98); }
.fx-in.is-in { opacity: 1; transform: translateY(0) scale(1);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }

/* بَوب */
@keyframes fxPop { 0%{transform:scale(.94)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
.fx-pop:hover { animation: fxPop .35s ease-out; }

/* بونس */
@keyframes fxBounce {
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
  60%{transform:translateY(3px)}
}
.fx-bounce:hover { animation: fxBounce .6s ease-out; }

/* ويقل */
@keyframes fxWiggle {
  0%,100%{transform:rotate(0deg)}
  15%{transform:rotate(-3deg)}
  30%{transform:rotate(3deg)}
  45%{transform:rotate(-2deg)}
  60%{transform:rotate(2deg)}
  75%{transform:rotate(-1deg)}
  90%{transform:rotate(1deg)}
}
.fx-wiggle { transform-origin: center; }
.is-wiggle { animation: fxWiggle .7s ease-in-out; }

/* سكويش للزر */
@keyframes fxSquish {
  0%{transform:scale(1)}
  40%{transform:scale(1.06,.94)}
  70%{transform:scale(.97,1.03)}
  100%{transform:scale(1)}
}
.pgbs-btn.fx-squish:active { animation: fxSquish .22s ease-out; }

/* بارالاكس بسيط */
.pbbs-parallax .pgbs-card__media{
  will-change: transform;
  transition: transform .12s linear;
}

/* نقاط السلايدر */
.pgbs-dot { transition: transform .18s ease; }
.pgbs-dot:hover { transform: scale(1.2); }

/* كونفيتي */
.pgbs-btn.js-confetti { position: relative; overflow: visible; }
@keyframes confettiBurst {
  0% { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x,10px), var(--y,-24px)) rotate(var(--r,45deg)); }
}
.confetti-piece{
  position:absolute; width:6px; height:10px; border-radius:2px;
  top:50%; left:50%; transform: translate(-50%,-50%);
  opacity:0; animation: confettiBurst .7s ease-out forwards;
}

/* لمسة لطيفة للعناوين */
.pgbs-heading.small,.pgbs-heading{ transition: transform .25s ease; }
.pgbs-card:hover .pgbs-heading { transform: translateY(-2px); }
/* === Use Vazirmatn as default === */
:root{
  --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html, body{
  font-family: var(--font-body) !important;
  font-weight: 400;
  font-variant-numeric: tabular-nums; /* ثبات الأرقام للأسعار */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .h1, .h2, .h3{
  font-family: var(--font-heading) !important;
  font-weight: 700;
}

/* لو عندك صفحات إنجليزية وتبي Inter لها */
/* اختياري: خل الإنجليزي برضه Vazirmatn */
html[lang="en"] body{ font-family: var(--font-body) !important; }

:root{
  --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
html, body{
  font-family: var(--font-body) !important;
  font-weight: 400;
}
h1, h2, h3, h4, .h1, .h2, .h3{
  font-family: var(--font-heading) !important;
  font-weight: 700;
}
/* ===============  VAZIRMATN — GLOBAL FONT SETUP  =============== */

/* 1) Self-hosted Variable font (assets/Vazirmatn-VariableFont_wght.woff2) */
@font-face {
  font-family: "Vazirmatn";
  src: url('{{ "Vazirmatn-VariableFont_wght.woff2" | asset_url }}') format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2) Root tokens */
:root{
  --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* 3) Global apply (force everywhere) */
html, body{
  font-family: var(--font-body) !important;
  font-weight: 400;
  font-variant-numeric: tabular-nums; /* أسعار وأرقام ثابتة العرض */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* كل العناصر النصية الشائعة + عناصر الواجهة */
body, html,
p, a, span, strong, em, small, mark, code, pre,
ul, ol, li, dl, dt, dd, blockquote, caption,
label, legend, summary, details,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3,
button, input, select, textarea,
.nav, .site-nav, .menu, .header, .footer,
.breadcrumbs, .announcement-bar, .search, .search__input {
  font-family: var(--font-body) !important;
}

/* العناوين */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3,
.page-title, .section-title, .card-title, .product__title {
  font-family: var(--font-heading) !important;
  font-weight: 700;
}

/* Placeholder لحقل البحث وغيرها */
input::placeholder,
textarea::placeholder {
  font-family: var(--font-body) !important;
}

/* عناصر الإدخال أحيانًا الثيم يعطيها خط مختلف */
input, textarea, select, button {
  font-family: var(--font-body) !important;
}

/* صفحات إنجليزية (إن حاب تخلّي نفس الخط) */
html[lang="en"] body {
  font-family: var(--font-body) !important;
}

/* === FINAL OVERRIDE — Force Vazirmatn only (do NOT edit anything else) === */
:root{
  --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  --font-heading: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

html, body,
p, a, span, strong, em, small, mark, code, pre,
ul, ol, li, dl, dt, dd, blockquote, caption,
label, legend, summary, details,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3,
button, input, select, textarea,
.nav, .site-nav, .menu, .header, .footer,
.breadcrumbs, .announcement-bar, .search, .search__input {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3,
.page-title, .section-title, .card-title, .product__title {
  font-family: var(--font-heading) !important;
}

input::placeholder,
textarea::placeholder{
  font-family: var(--font-body) !important;
}
/* Force Vazirmatn for promo titles */
.promo-grid-bs .promo-card .promo-title{
  font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
}
body {
  background-color: #f9f6f0 !important; /* بيج فاتح ناعم */
}
/* عرض صورة المقال كاملة بدون قص */
.blog__inner .media{
  height: auto !important;      /* لا تثبّت ارتفاع الحاوية */
  overflow: visible !important; /* لا تقصّ الحواف */
}

.blog__inner .media img{
  display: block;
  width: 100%;
  height: auto !important;      /* حافظ على التناسب */
  object-fit: contain !important; /* لو فيه ارتفاع للحاوية، لا يقص */
  max-height: none !important;
  position: static !important;  /* يلغي أي absolute من الثيم */
  border-radius: 12px;           /* اختياري لمظهر أنظف */
}
.ai-product-badges-{{ ai_gen_id }}{ z-index: 9; }
.ai-heart-{{ ai_gen_id }}{ pointer-events:auto; position:relative; z-index:10; }
.ai-product-card__image-container-{{ ai_gen_id }}{ position:relative; }
.header__info .like { position: relative; }
.header__info .like [data-wishlist-count]{
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;   /* يدعم RTL/LTR */
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}
.ai-heart-btn{
  border:2px solid var(--primary-color,#f59e0b);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.ai-heart-btn svg path{ fill:#bbb; }
.ai-heart-btn.is-active svg path{ fill:var(--primary-color,#f59e0b); }
.ai-heart-btn:focus-visible{ outline:2px solid var(--primary-color,#f59e0b); outline-offset:2px; }
.mbottom-item { position: relative; }
.mbottom-icon { position: relative; display:inline-grid; place-items:center; }

.mbottom-badge{
  position:absolute; top:2px; inset-inline-end:6px;
  min-width:18px; height:18px; line-height:18px; padding:0 6px;
  border-radius:999px; font-size:11px; font-weight:800;
  background:#ff9900; color:#fff;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
[data-wishlist-has-items].has-items .mbottom-badge{ display:flex; }
.mbottom-item { position: relative; }
.mbottom-icon { position: relative; display:inline-grid; place-items:center; }
[data-wishlist-has-items].has-items .mbottom-badge { display: flex !important; }
/* 💖 مظهر القلب الافتراضي */
[button-wishlist] svg.default path {
  fill: none !important;
  stroke: #b5b5b5 !important;
  stroke-width: 2;
  transition: all 0.25s ease;
}

/* ❤️ مظهر القلب بعد الضغط */
[button-wishlist].is-active svg.filled path {
  fill: #e63946 !important;
  stroke: #e63946 !important;
  transition: all 0.25s ease;
}

/* اخفي أحد القلوب فقط عند التبديل */
[button-wishlist] svg.filled {
  display: none;
}
[button-wishlist].is-active svg.default {
  display: none !important;
}
[button-wishlist].is-active svg.filled {
  display: inline !important;
}

/* تأثير نبضة خفيف عند التفعيل */
[button-wishlist].is-active svg.filled {
  animation: heartBeat 0.4s ease;
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
/* اجبر الـSVG ياخذ اللون من العنصر الأب */
[button-wishlist] svg path,
[button-wishlist] svg [fill]{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* الحالة الافتراضية */
[button-wishlist]{
  color: #b5b5b5 !important;           /* رمادي */
  transition: color .25s ease;
}

/* بعد الضغط */
[button-wishlist].is-active{
  color: #e63946 !important;           /* أحمر */
}

/* بدّل بين النسختين */
[button-wishlist] svg.filled{ display:none !important; }
[button-wishlist].is-active svg.default{ display:none !important; }
[button-wishlist].is-active svg.filled{ display:inline !important; }

/* نبضة لطيفة */
[button-wishlist].is-active svg.filled{ animation: heartBeat .4s ease; }
@keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(.9)}100%{transform:scale(1)}}
<style>
/* تحسين المودال والأزرار */
#os-ar-modal .box{font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
#os-ar-modal .actions{display:flex!important; gap:12px; padding:18px 22px; background:#fafafa; border-top:1px solid #f0f0f0;}
#os-ar-modal .btn{
  display:inline-flex; align-items:center; justify-content:center;
  flex:1 1 0; height:52px; border:0; border-radius:12px;
  font-weight:800; font-size:16px; cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
#os-ar-modal .btn-primary{background:var(--brand-orange, #F97316); color:#fff; box-shadow:0 6px 14px rgba(249,115,22,.25);}
#os-ar-modal .btn-secondary{background:#fff; color:var(--brand-orange, #F97316); border:2px solid var(--brand-orange, #F97316);}
#os-ar-modal .btn:focus{outline:3px solid rgba(249,115,22,.55); outline-offset:2px;}
@media (max-width:520px){ #os-ar-modal .actions{flex-direction:column-reverse;} #os-ar-modal .btn{width:100%;} }
</style>