/*!  — store.css — 2026-10-15 21:31 */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@600;800;900&family=IBM+Plex+Sans+Arabic:wght@400;600&display=swap");

/* ===== 00-tokens.css ===== */
/* ==========================================================================
   رموز تصميم NOASH — مشتقة من العلبة والشعار:
   أزرق العلبة الملكي، كحلي الشعار المطبوع، أزرق الجل الكريستالي، وبرتقالي شارة "25 PCS"
   ========================================================================== */


:root {
  /* الألوان بأدوارها */
  --na-ink: #0E1430;        /* كحلي الشعار: النص */
  --na-paper: #F6F8FD;      /* أبيض مائل للزرقة: الخلفية */
  --na-card: #FFFFFF;
  --na-brand: #1E3FD0;      /* أزرق العلبة */
  --na-crystal: #1DA2F5;    /* أزرق الجل */
  --na-ice: #E9F2FF;
  --na-accent: #1DA2F5;
  --na-muted: #59627F;
  --na-line: #D8E1F2;
  --na-buy: #F6A21A;        /* برتقالي شارة العلبة: للشراء فقط */
  --na-on-buy: #3A2600;

  /* الطباعة */
  --na-font-display: "Alexandria", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --na-font-body: "IBM Plex Sans Arabic", "Alexandria", Tahoma, sans-serif;
  --na-step--1: clamp(.83rem, .8rem + .15vw, .9rem);
  --na-step-0: clamp(1rem, .95rem + .25vw, 1.1rem);
  --na-step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --na-step-2: clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem);
  --na-step-3: clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
  --na-step-4: clamp(3rem, 1.8rem + 7vw, 6.2rem);

  /* الشكل والمسافات */
  --na-radius: 18px;
  --na-space: clamp(1rem, .8rem + 1vw, 1.5rem);
  --na-section: clamp(3.5rem, 2.6rem + 4vw, 6.5rem);
  --na-max: 1120px;

  --na-sale: #D2361F;

  /* إيقاع الحركة */
  --na-ease: cubic-bezier(.22, .61, .36, 1);
  --na-dur: 650ms;
  --na-spring: cubic-bezier(.34, 1.56, .64, 1);
  --na-flip: cubic-bezier(.6, -.25, .3, 1.3);

  /* الزجاج: مائل لأزرق الجل الفاتح */
  --na-glass-tint: #F3F7FF;
  --na-glass-alpha: 66%;
  --na-glass-blur: 22px;
  --na-glass-sat: 190%;
  --na-glass-edge: rgba(255, 255, 255, .6);
  --na-glass-sheen: rgba(255, 255, 255, .35);
  --na-glass-shadow: 0 10px 30px rgba(14, 20, 48, .14);
  --na-glass-ink: var(--na-ink);
  --na-r-pill: 999px;
  --na-r-panel: 26px;
}

/* ===== 10-base.css ===== */
/* ==========================================================================
   الأساس: كل شيء معزول تحت .na-root حتى لا يتأثر الثيم
   ========================================================================== */

.na-root {
  font-family: var(--na-font-body);
  font-size: var(--na-step-0);
  line-height: 1.7;
  color: var(--na-ink);
  background: var(--na-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* يمنع التمرير الأفقي من العناصر الخارجة عن الشبكة */
}

.na-root *,
.na-root *::before,
.na-root *::after { box-sizing: border-box; }

.na-root img,
.na-root video { display: block; max-inline-size: 100%; block-size: auto; }

.na-root :where(h1, h2, h3, h4) {
  font-family: var(--na-font-display);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.na-root :where(p) { margin: 0; text-wrap: pretty; }

.na-root :where(a) { color: inherit; }

.na-root :where(button) { font: inherit; cursor: pointer; }

.na-root :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--na-accent);
  outline-offset: 3px;
}

/* حاوية */
.na-wrap {
  inline-size: min(100% - 2 * var(--na-space), var(--na-max));
  margin-inline: auto;
}

.na-section { padding-block: var(--na-section); }

/* الأقسام البعيدة لا تُرسم حتى تقترب (أداء) */
.na-lazy-section { content-visibility: auto; contain-intrinsic-size: auto 800px; }

/* زر الشراء الموحد */
.na-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-block-size: 48px;
  padding-inline: 1.6em;
  border: 0;
  border-radius: var(--na-radius);
  background: var(--na-buy);
  color: var(--na-on-buy);
  font-weight: 700;
  text-decoration: none;
  transition: transform 300ms var(--na-ease), filter 300ms var(--na-ease);
}
.na-buy:hover { filter: brightness(1.08); }
.na-buy:active { transform: scale(.98); }

/* إخفاء عناصر الثيم التي يحل محلها تصميمنا — !important لتجاوز تنسيق الثيم */
.na-hidden { display: none !important; }

.na-sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* انتقال ناعم بين صفحات المتجر في المتصفحات الداعمة */
@view-transition { navigation: auto; }

/* ===== 15-price.css ===== */
/* ==========================================================================
   عرض الأسعار الحية: سعر العرض بارز، الأصلي مشطوب، والتوفير واضح
   ========================================================================== */

.na-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25em .6em;
  font-variant-numeric: tabular-nums;
}

.na-price__now { font-weight: 700; }

.na-price--sale .na-price__now { color: var(--na-sale, var(--na-brand)); }

.na-price__was {
  font-size: .85em;
  color: var(--na-muted);
  text-decoration-thickness: 1px;
}

.na-price__save {
  font-size: .78em;
  font-weight: 600;
  padding: .1em .6em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--na-sale, var(--na-brand)) 14%, transparent);
  color: var(--na-sale, var(--na-brand));
}

/* ===== 20-motion.css ===== */
/* ==========================================================================
   حالات الحركة — الإخفاء المبدئي فقط تحت html.na-js
   (لو تعطل JS يبقى المحتوى ظاهراً)
   ========================================================================== */

.na-js [data-na-reveal] {
  opacity: 0;
  transition:
    opacity var(--na-dur) var(--na-ease),
    transform var(--na-dur) var(--na-ease),
    clip-path calc(var(--na-dur) * 1.4) var(--na-ease);
  transition-delay: calc(var(--na-delay, 0ms) + var(--na-i, 0) * 80ms);
}

.na-js [data-na-reveal="up"]    { transform: translate3d(0, 28px, 0); }
.na-js [data-na-reveal="scale"] { transform: scale(.94); }
.na-js [data-na-reveal="side"]  { transform: translate3d(calc(var(--na-dir, 1) * 40px), 0, 0); }
.na-js [data-na-reveal="clip"]  { opacity: 1; clip-path: inset(0 0 100% 0); }

[dir="rtl"] { --na-dir: -1; }

.na-js [data-na-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* القص يُطبق على نوع clip فقط: clip-path يقص الظلال والحواف الدائرية لو بقي على كل العناصر */
.na-js [data-na-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* العناوين المقسمة لكلمات */
.na-word { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em; }
.na-word > span { display: inline-block; }
.na-js [data-na-split] .na-word > span {
  transform: translate3d(0, 105%, 0);
  transition: transform var(--na-dur) var(--na-ease);
  transition-delay: calc(var(--na-delay, 0ms) + var(--na-i, 0) * 60ms);
}
.na-js [data-na-split].is-in .na-word > span { transform: none; }

/* الشريط المتحرك */
[data-na-marquee] { display: flex; overflow: hidden; gap: 3rem; }
[data-na-marquee] > * {
  flex-shrink: 0;
  display: flex;
  gap: 3rem;
  animation: na-marquee 30s linear infinite;
}
@keyframes na-marquee { to { transform: translate3d(calc(-100% - 3rem), 0, 0); } }
[dir="rtl"] [data-na-marquee] > * { animation-direction: reverse; }

[data-na-magnetic] { transition: transform 400ms var(--na-ease); }
[data-na-parallax] { will-change: transform; }

/* احترام تقليل الحركة: كل شيء يظهر فوراً */
@media (prefers-reduced-motion: reduce) {
  .na-js [data-na-reveal],
  .na-js [data-na-split] .na-word > span {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  [data-na-marquee] > * { animation: none; }
  [data-na-parallax] { transform: none !important; } /* يتجاوز التنسيق الذي يضعه JS */
}

/* ===== 25-glass.css ===== */
/* ==========================================================================
   نظام الزجاج (بطابع عناصر iOS): شفاف، حواف دائرية، حافة مضيئة، لمعة علوية
   الأدوات: .na-glass (سطح) · .na-glass-btn (زر حبة) · .na-glass-icon (زر دائري)
   يتلوّن عبر رموز --na-glass-* في ملف الرموز
   ========================================================================== */

.na-glass,
.na-glass-btn,
.na-glass-icon {
  color: var(--na-glass-ink);
  background:
    linear-gradient(180deg, var(--na-glass-sheen), transparent 55%),
    color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent);
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  border: 1px solid var(--na-glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .05),
    var(--na-glass-shadow);
}

.na-glass { border-radius: var(--na-r-panel); }

/* زر حبة */
.na-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-block-size: 48px;
  padding-inline: 1.5em;
  border-radius: var(--na-r-pill);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 450ms var(--na-spring),
    box-shadow 300ms var(--na-ease),
    background-color 300ms var(--na-ease);
  -webkit-tap-highlight-color: transparent;
}

/* زر دائري للأيقونات */
.na-glass-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 450ms var(--na-spring);
  -webkit-tap-highlight-color: transparent;
}

/* زر الشراء: زجاج ملوّن بلون الشراء */
.na-glass-btn--buy {
  --na-glass-tint: var(--na-buy);
  --na-glass-alpha: 86%;
  --na-glass-ink: var(--na-on-buy);
  --na-glass-edge: rgba(255, 255, 255, .35);
}

@media (hover: hover) {
  .na-glass-btn:hover,
  .na-glass-icon:hover { transform: translateY(-1px); }
}

/* الضغط: انكماش ثم ارتداد ناعم مثل أزرار iPhone */
.na-glass-btn:active,
.na-glass-icon:active { transform: scale(.94); transition-duration: 120ms; }

.na-glass-btn:focus-visible,
.na-glass-icon:focus-visible {
  outline: 2px solid var(--na-accent);
  outline-offset: 3px;
}

/* متصفحات بلا دعم للتمويه: سطح أكثف حتى يبقى النص مقروءاً */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .na-glass,
  .na-glass-btn,
  .na-glass-icon { background: color-mix(in srgb, var(--na-glass-tint) 94%, transparent); }
}

/* من يطلب تقليل الشفافية من إعدادات جهازه يحصل على أسطح معتمة */
@media (prefers-reduced-transparency: reduce) {
  .na-glass,
  .na-glass-btn,
  .na-glass-icon {
    background: color-mix(in srgb, var(--na-glass-tint) 97%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .na-glass-btn,
  .na-glass-icon { transition: none; }
}

/* ===== 30-buybar.css ===== */
/* ==========================================================================
   شريط الشراء السريع: حبة زجاجية عائمة فوق أسفل الشاشة (الجوال)
   الشكل النهائي يُبتكر لكل متجر؛ هذا الأساس الوظيفي فقط
   ========================================================================== */

.na-buybar {
  position: fixed;
  inset-inline: 12px;
  inset-block-end: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 8px;
  padding-inline-start: 18px;
  border-radius: var(--na-r-pill);
  font-family: var(--na-font-body);
  transform: translate3d(0, calc(100% + 24px), 0) scale(.96);
  opacity: 0;
  transition:
    transform 600ms var(--na-spring),
    opacity 300ms var(--na-ease);
}
.na-buybar.is-visible { transform: none; opacity: 1; }

.na-buybar__info { display: grid; min-inline-size: 0; flex: 1; line-height: 1.3; }
.na-buybar__title {
  font-size: var(--na-step--1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8;
}
.na-buybar__price { font-size: var(--na-step--1); }
.na-buybar__price .na-price__save { display: none; } /* المساحة ضيقة: السعر الحالي والمشطوب يكفيان */

.na-buybar__btn { flex-shrink: 0; }

/* في الشاشات الكبيرة صندوق الشراء الأصلي ظاهر دائماً */
@media (min-width: 1024px) {
  .na-buybar { display: none; }
}

/* ===== 35-ui.css ===== */
/* ==========================================================================
   عناصر تحكم الثيم بالزجاج: تُطبق على كلاسات يضيفها 30-ui.js
   الأساس هنا وظيفي؛ الشكل الخاص بكل متجر (حجم الحواف، الطفو، التلوين)
   يُبنى فوقه في ملف التوقيع ومن رموز التصميم.
   !important هنا مقصودة: الثيم يضع خلفياته بمحددات أقوى من محدداتنا
   ========================================================================== */

/* ---------- الهيدر ---------- */
.na-ui-header {
  background:
    linear-gradient(180deg, var(--na-glass-sheen), transparent 70%),
    color-mix(in srgb, var(--na-glass-tint) 45%, transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  border-block-end: 1px solid var(--na-glass-edge);
  transition: background-color 400ms var(--na-ease), box-shadow 400ms var(--na-ease);
}
.na-ui-header.is-scrolled {
  background-color: color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* زجاج أكثف عند التمرير */
  box-shadow: var(--na-glass-shadow);
}

/* أزرار الأيقونات في الهيدر (السلة، البحث، القائمة) */
.na-ui-icon {
  border-radius: 50% !important; /* يتجاوز زوايا الثيم */
  background: color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(16px) saturate(var(--na-glass-sat));
  backdrop-filter: blur(16px) saturate(var(--na-glass-sat));
  border: 1px solid var(--na-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform 450ms var(--na-spring);
}
.na-ui-icon:active { transform: scale(.92); transition-duration: 120ms; }

/* ---------- القائمة الجانبية ---------- */
.na-ui-menu {
  background:
    linear-gradient(180deg, var(--na-glass-sheen), transparent 40%),
    color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(calc(var(--na-glass-blur) * 1.4)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(calc(var(--na-glass-blur) * 1.4)) saturate(var(--na-glass-sat));
  border-start-end-radius: var(--na-r-panel);
  border-end-end-radius: var(--na-r-panel);
  box-shadow: var(--na-glass-shadow);
}
.na-ui-menu a { border-radius: 14px; transition: background-color 250ms var(--na-ease); }
.na-ui-menu a:hover,
.na-ui-menu a:focus-visible { background: color-mix(in srgb, var(--na-glass-ink) 7%, transparent); }

/* ---------- الأزرار الأساسية في الثيم ---------- */
.na-ui-btn {
  border-radius: var(--na-r-pill) !important; /* يتجاوز زوايا الثيم */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--na-glass-shadow);
  transition: transform 450ms var(--na-spring), filter 300ms var(--na-ease);
}
.na-ui-btn:active { transform: scale(.96); transition-duration: 120ms; }

/* ---------- السلة الممتلئة ---------- */
.na-ui-cart-item {
  border-radius: 22px;
  background: color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  border: 1px solid var(--na-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--na-glass-shadow);
}
.na-ui-cart-item img { border-radius: 16px; }
/* أزرار الكمية كحبات زجاجية */
.na-ui-cart-item :is(button, input[type=number]) { border-radius: var(--na-r-pill); }

.na-ui-cart-summary {
  border-radius: var(--na-r-panel);
  background:
    linear-gradient(180deg, var(--na-glass-sheen), transparent 55%),
    color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  border: 1px solid var(--na-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--na-glass-shadow);
}

/* ---------- السلة الفارغة ---------- */
.na-ui-cart-empty {
  border-radius: var(--na-r-panel);
  background: color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  border: 1px solid var(--na-glass-edge);
}

/* ---------- تسجيل الدخول ---------- */
.na-ui-login {
  /* متغيرات تمر حتى داخل Shadow DOM لمكونات سلة إن كانت تستخدمها */
  --color-primary: var(--na-buy);
  border-radius: var(--na-r-panel);
  background:
    linear-gradient(180deg, var(--na-glass-sheen), transparent 55%),
    color-mix(in srgb, var(--na-glass-tint) var(--na-glass-alpha), transparent) !important; /* يتجاوز خلفية الثيم */
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  backdrop-filter: blur(var(--na-glass-blur)) saturate(var(--na-glass-sat));
  border: 1px solid var(--na-glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--na-glass-shadow);
}
.na-ui-field {
  border-radius: 16px !important; /* يتجاوز زوايا الثيم */
  background: color-mix(in srgb, var(--na-glass-tint) 55%, transparent) !important; /* يتجاوز خلفية الثيم */
  border: 1px solid var(--na-glass-edge) !important; /* يتجاوز حدود الثيم */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
  transition: box-shadow 250ms var(--na-ease), border-color 250ms var(--na-ease);
}
.na-ui-field:focus {
  border-color: color-mix(in srgb, var(--na-accent) 70%, transparent) !important; /* يتجاوز حدود الثيم */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--na-accent) 22%, transparent);
  outline: none;
}

/* ---------- بدائل الوصول ---------- */
@media (prefers-reduced-transparency: reduce) {
  .na-ui-header,
  .na-ui-menu,
  .na-ui-icon,
  .na-ui-cart-item,
  .na-ui-cart-summary,
  .na-ui-cart-empty,
  .na-ui-login {
    background: var(--na-glass-tint) !important; /* سطح معتم لمن يطلب تقليل الشفافية */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* محتوى السلة الفارغة المحقون: شفاف ليظهر الزجاج من خلفه */
.na-ui-cart-empty > .na-root { background: transparent; }
.na-empty {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2rem, 6vw, 4rem) var(--na-space);
  text-align: center;
}
.na-empty__title { font-size: var(--na-step-2); }

/* ===== 40-theme-overrides.css ===== */
/* ==========================================================================
   تعديلات على عناصر ثيم سلة (رائد/كليك) في صفحة المنتج
   المحددات من فحص متجر المعاينة؛ تُراجع بعد فتح المتجر
   ========================================================================== */

/* العنوان والسعر بخط الهوية */
body.product-single .container--product-details h1 { font-family: var(--na-font-display); font-weight: 800; color: var(--na-ink); }
body.product-single .price-wrapper .total-price { font-family: var(--na-font-display); color: var(--na-ink); }
body.product-single .price_is_on_sale .total-price { color: var(--na-sale) !important; } /* يتجاوز أحمر الثيم بلون الخصم المعتمد */

/* معرض الصور: سطح الجل الفاتح بدل الأبيض المسطح */
body.product-single .container--product-details .swiper-slide img,
body.product-single .container--product-details salla-slider img { border-radius: 22px; background: var(--na-ice); }

/* زر الإضافة للسلة بلون الشراء الوحيد */
body.product-single .product-form salla-add-product-button .s-button-primary,
body.product-single .product-form salla-add-product-button .s-button-solid {
  background: var(--na-buy) !important; /* يتجاوز لون الثيم الأساسي */
  color: var(--na-on-buy) !important; /* نص داكن فوق البرتقالي للتباين */
  border-radius: var(--na-r-pill) !important; /* حبة بدل زوايا الثيم */
  font-family: var(--na-font-display);
  font-weight: 800;
}

/* الرئيسية: منطقة اسم المتجر وتبويباته في ثيم كليك تكرر افتتاحيتنا، فنخفيها */
body.index .hero-area { display: none !important; } /* يتجاوز عرض الثيم */

/* ===== 50-signature.css ===== */
/* ==========================================================================
   الحركات التوقيعية لـ NOASH
   ١. القلبة: الطفاية تدور 180° والجل يبقى مكانه (الوعد الأساسي كحركة)
   ٢. مؤقت التماسك: يعدّ من 0:00 إلى 2:00 عند ظهوره
   ٣. ضغط الأزرار بارتداد زجاجي (من نظام الزجاج)
   ========================================================================== */

.na-flipper {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  max-inline-size: 460px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.na-flipper--sm { max-inline-size: 360px; margin-inline: auto; }
.na-flipper__stage {
  position: relative;
  inline-size: 88%;
  aspect-ratio: 1;
  transition: transform 700ms var(--na-flip);
}
.na-flipper__stage img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  transition: opacity 180ms linear;
}
.na-flipper__flip { opacity: 0; }
.na-flipper.is-flipped .na-flipper__cup { opacity: 0; }
.na-flipper.is-flipped .na-flipper__flip { opacity: 1; }
.na-flipper.is-spinning .na-flipper__stage { transform: rotate(180deg) scale(.96); }
.na-flipper__shadow {
  position: absolute;
  inset-block-end: 6%;
  inline-size: 56%; block-size: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 20, 48, .26), transparent);
  filter: blur(2px);
}
.na-flipper:focus-visible { outline: 2px solid var(--na-accent); outline-offset: 4px; border-radius: 24px; }

/* إيحاء خفيف بأن الطفاية قابلة للضغط، مرة واحدة بعد الظهور */
@media (prefers-reduced-motion: no-preference) {
  .na-flipper.is-hinting .na-flipper__stage { animation: na-wobble 1.1s var(--na-ease) 1; }
  @keyframes na-wobble {
    0%, 100% { transform: none; }
    30% { transform: rotate(-9deg); }
    60% { transform: rotate(6deg); }
  }
}

/* زر الإضافة يتغير بعد الإضافة */
.na-cta.is-added { --na-glass-tint: #0F9D6B; --na-glass-ink: #fff; }

/* شريط الشراء: حبتان (السعر والزر) بلون الجل */
.na-buybar { padding-inline-start: 20px; }
.na-buybar__btn { font-family: var(--na-font-display); font-weight: 800; }
.na-buybar__price .na-price__now { font-family: var(--na-font-display); font-size: 1.05rem; }

/* عند ظهور شريطنا نخفي شريط الثيم المكرر */
html.na-has-buybar .sticky-product-bar { display: none !important; } /* شريط الثيم يكرر وظيفة شريطنا */

@media (prefers-reduced-motion: reduce) {
  .na-flipper__stage, .na-flipper__stage img { transition: none; }
}

/* ===== 60-home.css ===== */
/* ==========================================================================
   قوالب NOASH: الرئيسية وأقسام المنتج والسلة الفارغة
   صور المنتج مقصوصة بخلفية شفافة فتظهر نظيفة فوق أي سطح
   ========================================================================== */

.na-root { background: var(--na-paper); }
.na-section--tight { padding-block: calc(var(--na-section) * .7); }

.na-eyebrow {
  font-family: var(--na-font-display);
  font-size: var(--na-step--1);
  font-weight: 800;
  color: var(--na-brand);
  letter-spacing: .02em;
}
.na-lead { font-size: var(--na-step-1); color: var(--na-muted); max-inline-size: 48ch; line-height: 1.6; }
.na-head { display: grid; gap: .5rem; margin-block-end: 1.75rem; max-inline-size: 40rem; }
.na-head h2 { font-size: var(--na-step-2); font-weight: 800; }

/* كل صور المنتج هنا مقصوصة بخلفية شفافة، فلا حاجة لمزج الألوان (المزج كان يُظهر الأبيض أثناء دوران القلبة) */

.na-cta { min-block-size: 54px; padding-inline: 1.9em; font-family: var(--na-font-display); font-weight: 800; font-size: 1.05rem; }

/* ---------- الافتتاحية ---------- */
.na-hero { padding-block: 1.5rem 3rem; }
.na-hero__grid { display: grid; gap: 1.25rem; align-items: center; }
.na-hero__title {
  display: grid;
  gap: .12em;
  font-size: var(--na-step-4);
  font-weight: 900;
  line-height: 1.3;
  margin-block: .5rem .3rem;
}
.na-hero__line { display: block; }
.na-hero__line--accent { color: var(--na-brand); }
.na-hero__lead { font-size: var(--na-step-1); color: var(--na-muted); max-inline-size: 34ch; line-height: 1.6; margin-block-start: .75rem; }
.na-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-block-start: 1.5rem; }
.na-hero__price { color: var(--na-muted); font-size: var(--na-step--1); }
.na-hero__price .na-price__now { color: var(--na-ink); }

.na-pool {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: .5rem .5rem 1rem;
  border-radius: 32px;
  background: radial-gradient(120% 90% at 50% 100%, #CFE6FF 0%, var(--na-ice) 45%, var(--na-paper) 100%);
}
.na-pool__ring {
  position: absolute;
  inset: auto 14% 16% 14%;
  block-size: 15%;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--na-brand) 28%, transparent);
  pointer-events: none;
}
.na-pool__hint { font-size: var(--na-step--1); font-weight: 600; color: var(--na-brand); min-block-size: 1.7em; }
.na-pool__drops b { font-family: var(--na-font-display); }

@media (min-width: 900px) {
  .na-hero { padding-block: 3rem 5rem; }
  .na-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
}

/* ---------- أرقام المنتج ---------- */
.na-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--na-line);
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  overflow: hidden;
}
.na-facts li { background: var(--na-card); padding: 1.1rem 1rem; display: grid; gap: .15rem; }
.na-facts b {
  font-family: var(--na-font-display);
  font-size: var(--na-step-2);
  font-weight: 800;
  color: var(--na-brand);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.na-facts span { font-size: var(--na-step--1); color: var(--na-muted); }
@media (min-width: 760px) { .na-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- المقارنة ---------- */
.na-ledger { border: 1px solid var(--na-line); border-radius: 22px; overflow: hidden; background: var(--na-card); }
.na-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.na-ledger__row > span { padding: .9rem 1rem; border-block-start: 1px solid var(--na-line); font-size: .97rem; min-inline-size: 0; display: flex; gap: .5rem; }
.na-ledger__row > span:first-child { color: var(--na-muted); background: #FAFBFD; }
.na-ledger__row > span:last-child { font-weight: 600; }
.na-ledger__row:not(.na-ledger__head) > span:first-child::before { content: "✕"; color: #B4BCD3; flex-shrink: 0; }
.na-ledger__row:not(.na-ledger__head) > span:last-child::before { content: "✓"; color: var(--na-brand); font-weight: 800; flex-shrink: 0; }
.na-ledger__head > span { border-block-start: 0; font-family: var(--na-font-display); font-weight: 800; }
.na-ledger__head > span:last-child { background: var(--na-brand); color: #fff; }

/* ---------- طريقة الاستخدام ---------- */
.na-how { display: grid; gap: 1.5rem; align-items: center; }
.na-how__media { position: relative; margin: 0; max-inline-size: 360px; inline-size: 100%; margin-inline: auto; }
.na-timer {
  position: absolute;
  inset-block-start: 6%;
  inset-inline-end: 0;
  display: grid;
  background: var(--na-ink);
  color: #fff;
  border-radius: 16px;
  padding: .45rem .9rem;
  box-shadow: 0 14px 30px -14px var(--na-ink);
}
.na-timer b { font-family: var(--na-font-display); font-size: 1.6rem; font-weight: 800; direction: ltr; font-variant-numeric: tabular-nums; }
.na-timer small { font-size: .72rem; color: #AFC0F5; }
.na-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: na-step; }
.na-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .9rem;
  background: var(--na-card);
  border: 1px solid var(--na-line);
  border-radius: var(--na-radius);
  padding: 1rem;
}
.na-steps li::before {
  counter-increment: na-step;
  content: counter(na-step);
  grid-row: span 2;
  inline-size: 40px; block-size: 40px;
  border-radius: 12px;
  background: var(--na-ice);
  color: var(--na-brand);
  display: grid; place-items: center;
  font-family: var(--na-font-display);
  font-weight: 800;
}
.na-steps h3 { font-size: 1.08rem; font-weight: 800; }
.na-steps p { color: var(--na-muted); font-size: .95rem; }
@media (min-width: 900px) {
  .na-how { grid-template-columns: .8fr 1.2fr; gap: 3rem; }
  .na-how .na-steps, .na-steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- الأماكن ---------- */
.na-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.na-places li { background: var(--na-card); border: 1px solid var(--na-line); border-radius: 20px; padding: 1.1rem; display: grid; gap: .35rem; align-content: start; }
.na-places svg { inline-size: 30px; block-size: 30px; fill: none; stroke: var(--na-brand); stroke-width: 2; stroke-linejoin: round; }
.na-places h3 { font-size: var(--na-step-1); font-weight: 800; }
.na-places p { color: var(--na-muted); font-size: .93rem; }
@media (min-width: 900px) { .na-places { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- الإثبات ---------- */
.na-proof { display: grid; gap: 1.5rem; align-items: center; }
.na-proof__media {
  margin: 0;
  position: relative;
  border-radius: 28px;
  background: radial-gradient(90% 80% at 50% 40%, #DCEBFF, var(--na-ice));
  overflow: hidden;
  max-inline-size: 440px; inline-size: 100%;
  margin-inline: auto;
}

.na-proof__media figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1rem;
  font-family: var(--na-font-display); font-weight: 800;
  color: var(--na-brand);
  text-align: center;
}
@media (min-width: 900px) { .na-proof { grid-template-columns: 1fr 1fr; } }

/* ---------- العرض ---------- */
.na-offer { display: grid; gap: 1.5rem; align-items: center; }
.na-offer__art { position: relative; background: var(--na-ice); border-radius: 28px; padding: 1.25rem; display: grid; place-items: center; }
.na-offer__art img { max-inline-size: 320px; }
.na-offer__pcs {
  position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem;
  background: var(--na-buy); color: var(--na-on-buy);
  font-family: var(--na-font-display); font-weight: 900; font-size: 1.8rem;
  border-radius: 14px; padding: .1rem .8rem; line-height: 1.4;
}
.na-offer__pcs small { font-size: .85rem; }
.na-offer__body { display: grid; gap: .75rem; }
.na-offer__body h2 { font-size: var(--na-step-2); font-weight: 800; }
.na-offer__price { font-size: var(--na-step-2); font-family: var(--na-font-display); }
.na-offer__unit { color: var(--na-muted); }
.na-offer__unit b { color: var(--na-ink); }
.na-offer__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.na-offer__pay:empty { display: none; }
@media (min-width: 900px) { .na-offer { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ---------- الأسئلة ---------- */
.na-faq { display: grid; gap: .6rem; }
.na-faq details { background: var(--na-card); border: 1px solid var(--na-line); border-radius: 16px; padding: .2rem 1.1rem; }
.na-faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--na-font-display); font-weight: 800; font-size: 1.02rem;
  padding: .9rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
}
.na-faq summary::-webkit-details-marker { display: none; }
.na-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--na-brand); transition: transform 250ms var(--na-ease); flex-shrink: 0; }
.na-faq details[open] summary::after { transform: rotate(45deg); }
.na-faq details p { color: var(--na-muted); padding-block-end: 1rem; }

/* ---------- الخاتمة ---------- */
.na-final-wrap { padding-block-end: var(--na-section); }
.na-final {
  position: relative;
  overflow: hidden;
  display: grid; justify-items: start; gap: 1rem;
  padding: 2.25rem 1.4rem 11rem;
  border-radius: 32px;
  background: var(--na-brand);
  color: #fff;
}
.na-final h2 { font-size: var(--na-step-3); font-weight: 900; }
.na-final p { color: #D6DFFF; max-inline-size: 36ch; }
.na-final img {
  position: absolute; inset-block-end: -12%; inset-inline-end: -4%;
  inline-size: 58%; max-inline-size: 300px;
  transform: rotate(-10deg);
  opacity: .95;
}
@media (min-width: 760px) { .na-final { padding: 3rem; padding-inline-end: 40%; } .na-final img { inset-block-end: -18%; } }

/* ---------- أقسام صفحة المنتج ---------- */
.na-pdp-flip { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 900px) { .na-pdp-flip { grid-template-columns: 1fr 1fr; } }
.na-specs { margin: 0; display: grid; border: 1px solid var(--na-line); border-radius: 18px; overflow: hidden; background: var(--na-card); }
.na-specs > div { display: grid; grid-template-columns: 38% 1fr; border-block-start: 1px solid var(--na-line); }
.na-specs > div:first-child { border-block-start: 0; }
.na-specs dt { padding: .8rem 1rem; color: var(--na-muted); background: #FAFBFD; font-weight: 600; }
.na-specs dd { margin: 0; padding: .8rem 1rem; }

/* مزايا تحت السعر في صندوق الشراء */
.na-benefits { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .45rem; font-family: var(--na-font-body); }
.na-benefits li { display: flex; gap: .55rem; align-items: flex-start; font-weight: 600; color: var(--na-ink); }
.na-benefits li::before { content: "✓"; color: var(--na-brand); font-weight: 800; }
.na-benefits__ship { font-weight: 400 !important; color: var(--na-muted) !important; font-size: .92rem; } /* يتجاوز وزن عناصر القائمة أعلاه */
.na-benefits__ship::before { content: "↺" !important; } /* أيقونة مختلفة لسطر الشحن */

/* ---------- السلة الفارغة ---------- */
.na-empty { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 2rem 1rem; }
.na-empty__art { inline-size: 160px; }
.na-empty__title { font-size: var(--na-step-2); font-weight: 800; }
.na-empty p { color: var(--na-muted); }