/* =========================================================
   PalPrints — صفحة المتجر
   File: assets/css/pages/storefront.css
   يرافقها: storefront.html و assets/js/pages/storefront.js

   الترتيب:
     01. الرموز (ألوان الهوية والقياسات)
     02. الهيكل: الهيدر والقائمة الجانبية والمحتوى
     03. الهيرو
     04. فلترة التصنيفات (غير مفعّلة)
     05. شبكة المنتجات والبطاقات
     06. الفوتر
     07. الاستجابة للشاشات
   ========================================================= */


/* =========================================================
   01. الرموز
   ========================================================= */

/* box-sizing:border-box موحّد لكل صفحات المتجر (زي الأدمن بالضبط) —
   بدونه كانت بعض الصفحات (يلي بتحمّل CSS إضافي خاص فيها بيعمل نفس
   الـ reset) بترث border-box، وباقي الصفحات بترجع لسلوك المتصفح
   الافتراضي content-box، فكانت القائمة الجانبية (وعناصر تانية) بتطلع
   بارتفاعات مختلفة من صفحة لصفحة رغم نفس الـ CSS بالضبط */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body.storefront-page {
  margin: 0;
  min-height: 100%;
  --pal-cyan: #12bfd0;
  --pal-blue: #168fdf;
  --pal-indigo: #5266e9;
  --pal-page-bg: #fcfdff;
  --pal-surface: #fff;
  --pal-border: #e8eaf2;

  /* ألوان الهوية الثلاثة */
  --store-navy: #0b1f3a;
  --store-primary: #1677ff;
  --store-orange: #ff7a00;

  /* مشتقات الأزرق والأحمر */
  --store-primary-hover: #0f5ed6;
  --store-primary-soft: #eff6ff;
  --store-primary-border: #bfdbfe;
  --store-danger: #dc2626;

  /* نصوص وأسطح */
  --store-body: #334155;
  --store-muted: #64748b;
  --store-border: #e2e8f0;
  --store-surface-muted: #f8fafc;
  --store-shadow: 0 4px 14px rgb(15 23 42 / 8%);
  --store-divider-accent: var(--store-border);

  /* الحافة الموحّدة لكل الصفحة: الهيدر والمحتوى والفوتر
     يبدأون وينتهون على هذا الخط تماماً */
  --store-gutter: calc(clamp(16px, 6vw, 110px) + clamp(16px, 1.8vw, 22px));

  /* ارتفاع الهيدير المسطّح — القائمة الجانبية تبدأ من تحته مباشرة */
  --store-header-height: 60px;

  /* القائمة الجانبية: ثابتة على الديسكتوب (زي الأدمن والمصمم)، وDrawer منبثق بالموبايل فقط */
  --store-sidebar-width: min(230px, 86vw);
  --store-sidebar-collapsed-width: 76px;

  margin: 0;
  background: var(--pal-page-bg);
  color: var(--store-navy);
  font-family: "Cairo", sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(body.storefront-page) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.storefront-page::-webkit-scrollbar,
html:has(body.storefront-page)::-webkit-scrollbar {
  display: none;
}

body.storefront-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 6%, rgb(18 191 208 / 6%), transparent 40%),
    radial-gradient(circle at 92% 4%, rgb(22 143 223 / 5%), transparent 42%),
    radial-gradient(circle at 82% 84%, rgb(18 191 208 / 4%), transparent 44%),
    radial-gradient(circle at 4% 92%, rgb(22 143 223 / 4%), transparent 40%),
    linear-gradient(140deg, #fff 0%, #fbfdff 50%, #fdffff 100%);
}

html[data-bs-theme="dark"] body.storefront-page {
  --pal-page-bg: #080d1c;
  --pal-surface: #11182b;
  --pal-border: #2b3650;
}

html[data-bs-theme="dark"] body.storefront-page::before {
  background:
    radial-gradient(circle at 10% 6%, rgb(18 191 208 / 10%), transparent 40%),
    radial-gradient(circle at 92% 4%, rgb(22 143 223 / 11%), transparent 42%),
    radial-gradient(circle at 82% 84%, rgb(18 191 208 / 9%), transparent 44%),
    radial-gradient(circle at 4% 92%, rgb(22 143 223 / 8%), transparent 40%),
    linear-gradient(140deg, #080d1c 0%, #091226 48%, #0a1524 100%);
}

@media (prefers-reduced-motion: no-preference) {
  body.storefront-page::before {
    transition: background .3s ease;
  }
}

/* =========================================================
   02. الهيكل — الهيدر والقائمة الجانبية والمحتوى
   ========================================================= */

/* قياس المحتوى نفسه المستخدم في صفحات الملف الشخصي */
.storefront-page .container-palprints {
  width: min(100% - 44px, 1240px);
}

.store-main .container-palprints {
  width: 100%;
  max-width: none;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -48px;
  z-index: 2000;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgb(20 44 84 / 10%);
}

.skip-link:focus {
  top: 14px;
}

/* هيدير مسطّح بعرض الشاشة الكامل — بدون هوامش أو استدارة أو ظل "عائم".
   z-index أعلى من القائمة الجانبية (1200) عشان قائمة "المتجر" المنسدلة
   (جوّا الهيدير، وبتمتد لتحت لمنطقة القائمة الجانبية) تقدر تطلع فوقها؛
   ما إلها تأثير على تعتيم القائمة الجانبية بالموبايل لأنه "المتجر" أصلاً
   مخفي بهاي المقاسات (≤991px) */
.store-header {
  position: sticky;
  top: 0;
  z-index: 1210;
  min-height: var(--store-header-height);
  background: #fff;
  border-bottom: 1px solid var(--store-border);
  transition: box-shadow 200ms ease;
}

/* خط عمودي بنفس محاذاة حافة القائمة الجانبية بالضبط، حتى يبين الاثنين
   كخط واحد متواصل من الهيدير لحد تحت — يظهر بس لما القائمة مفتوحة */
.store-header::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: var(--store-sidebar-width);
  width: 1px;
  background: var(--store-divider-accent);
  opacity: 0;
  pointer-events: none;
}

.store-header:has(.sidebar-toggle[aria-expanded="true"])::after {
  opacity: 1;
}

/* بالديسكتوب القائمة ظاهرة دايمًا (موسّعة أو مطوية لأيقونات) فالخط الفاصل
   لازم يبين دايمًا وينزاح مع عرض القائمة الحالي */
@media (min-width: 992px) {
  .store-header::after {
    opacity: 1;
    transition: inset-inline-start 250ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.storefront-page.sidebar-collapsed .store-header::after {
    inset-inline-start: var(--store-sidebar-collapsed-width);
  }
}

/* أثناء التمرير: نفس الارتفاع، بس بظل خفيف يفصلها عن المحتوى تحتها */
.store-header.is-scrolled {
  box-shadow: 0 6px 18px rgb(15 23 42 / 8%);
}

/* منطقتان: بداية (الشعار + زر القائمة الجانبية جنب بعض) · نهاية مرنة
   تاخد المساحة الباقية (زر "المتجر" + البحث + الأيقونات) */
.store-header__inner {
  position: relative;
  min-height: var(--store-header-height);
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 18px;
  /* حشوة غير متماثلة: جهة الشعار (البداية) تضل قريبة من الحافة بنفس محاذاة
     القائمة الجانبية الملتصقة فيها تمامًا، حتى ما يبين فراغ بينهم لما تنفتح؛
     جهة البحث/السلة (النهاية) خذت حشوة المحتوى (--store-gutter) الأكبر حتى
     تبعد عن حافة الشاشة فعليًا بدل ما تكون ملتصقة فيها */
  padding-inline-start: 20px;
  padding-inline-end: var(--store-gutter);
}

.store-header__start {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}

.store-header__end {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  justify-self: stretch;
}

.store-header__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.store-header__brand .store-brand__wordmark {
  font-size: 20px;
}

.store-brand__logo-full,
.store-brand__logo-compact {
  display: grid;
  place-items: center;
}

.store-brand__logo-compact {
  display: none;
  position: relative;
  width: 22px;
  height: 44px;
  overflow: hidden;
}

.store-brand__logo-compact img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 119px;
  max-width: none;
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  body.storefront-page.sidebar-collapsed .store-brand__logo-full {
    display: none;
  }

  body.storefront-page.sidebar-collapsed .store-brand__logo-compact {
    display: grid;
  }
}

.store-brand__logo {
  height: 56px;
  width: auto;
  display: block;
}

/* رابط "المتجر" بآخر الهيدير جنب أيقونات الحساب/الإشعارات/السلة */
.store-nav {
  display: flex;
  align-items: center;
  height: 100%;
}

.store-nav__item {
  position: relative;
  height: 100%;
}

.store-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding-inline: 2px;
  color: var(--store-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.store-nav__chevron {
  font-size: 10px;
  color: var(--store-muted);
  transition: transform 160ms ease, color 160ms ease;
}

.store-nav__link:hover,
.store-nav__link:focus-visible,
.store-nav__item.is-open .store-nav__link {
  color: var(--store-primary);
  border-color: var(--store-primary);
}

.store-nav__link:focus-visible {
  outline: 2px solid var(--store-primary);
  outline-offset: -2px;
  border-radius: 6px;
}

.store-nav__item.is-open .store-nav__chevron {
  color: var(--store-primary);
  transform: rotate(180deg);
}

/* القائمة المنسدلة (mega menu) — قائمة عمود واحد مقسومة لمجموعتين واضحتين:
   "متوفر الآن" (بلون العلامة الأزرق) ثم "قريبًا" (بلون محايد رمادي) —
   بدل ما تكون كل المنتجات مبعثرة بنفس اللون بدون تمييز */
.store-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* أعلى من باقي عناصر الهيدير حتى تطلع فوق أي قائمة تانية جوّا الهيدير */
  z-index: 60;
  width: 250px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--store-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(20 44 84 / 14%);
}

.store-mega::-webkit-scrollbar {
  display: none;
}

.store-mega[hidden] {
  display: none;
}

.store-mega__label {
  margin: 0;
  padding: 10px 10px 6px;
  color: var(--store-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.store-mega__label:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--store-border);
}

.store-mega__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--store-body);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.store-mega__item i {
  flex: none;
  width: 20px;
  text-align: center;
  color: var(--store-primary);
  font-size: 1rem;
}

.store-mega__item:hover,
.store-mega__item:focus-visible {
  color: var(--store-primary);
  background: var(--store-primary-soft);
}

.store-mega__item:focus-visible {
  outline: 2px solid var(--store-primary);
  outline-offset: -2px;
}

.store-mega__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* عناصر "قريبًا": رمادية محايدة بدل الأزرق حتى تنفصل بصريًا عن المنتجات المتوفرة فعليًا */
.store-mega__item.is-soon {
  color: var(--store-muted);
}

.store-mega__item.is-soon i {
  color: var(--store-muted);
}

.store-mega__item.is-soon:hover,
.store-mega__item.is-soon:focus-visible {
  color: var(--store-body);
  background: var(--store-surface-muted);
}

/* قائمة الحساب الجانبية — تبدأ من تحت الهيدير مباشرة (مش من فوق الشاشة)، حتى
   يضل الهيدير بشعاره ظاهر بالكامل دايمًا، وما يصير شعارين جنب بعض بنفس الصف.
   ملتصقة بحافة الشاشة بدون هامش أو استدارة من الخارج.
   بالديسكتوب/التابلت (≥992px) بتدفع المحتوى وتظهر جنبه بدون تعتيم.
   بالموبايل الشاشة أضيق فبتظهر فوق المحتوى بخلفية معتمة (سلوك قياسي بكل التطبيقات). */
.store-sidebar,
.sidebar-backdrop {
  position: fixed;
  top: var(--store-header-height);
  bottom: 0;
}

.store-sidebar {
  inset-inline-start: 0;
  z-index: 1200;
  width: var(--store-sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-inline-end: 1px solid var(--store-border);
  border-block-start: 1px solid var(--store-border);
  transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms ease, visibility 280ms ease;
}

/* بالديسكتوب: القائمة ثابتة وظاهرة دايمًا (زي الأدمن والمصمم بالضبط) —
   بتدفع المحتوى جنبها، وحالة "الطي" بس بتضيّق عرضها لأيقونات بدل ما تختفي */
@media (min-width: 992px) {
  .store-sidebar {
    transform: none;
    visibility: visible;
    box-shadow: none;
    border-inline-end-color: var(--store-divider-accent);
  }

  /* فراغ إضافي (24px) بعد عرض القائمة حتى ما يضل المحتوى ملتصق فيها مباشرة —
     الفوتر وحده ملتصق بدون فراغ لأنه المستخدم طلب هيك بالتحديد */
  body.storefront-page .store-main {
    margin-inline-start: calc(var(--store-sidebar-width) + 24px);
    transition: margin-inline-start 250ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.storefront-page .site-footer {
    margin-inline-start: var(--store-sidebar-width);
    transition: margin-inline-start 250ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.storefront-page.sidebar-collapsed .store-sidebar {
    width: var(--store-sidebar-collapsed-width);
  }

  body.storefront-page.sidebar-collapsed .store-main {
    margin-inline-start: calc(var(--store-sidebar-collapsed-width) + 24px);
  }

  body.storefront-page.sidebar-collapsed .site-footer {
    margin-inline-start: var(--store-sidebar-collapsed-width);
  }
}

/* بالموبايل/التابلت: القائمة تضل منبثقة فوق المحتوى (off-canvas) بخلفية
   معتمة — زي سلوك الأدمن والمصمم بنفس المقاسات بالضبط */
@media (max-width: 991px) {
  .store-sidebar {
    box-shadow: -18px 0 34px -20px rgb(11 31 58 / 22%);
    transform: translateX(100%);
    visibility: hidden;
  }

  .store-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: none;
    border-inline-end-color: var(--store-divider-accent);
  }
}

.store-sidebar[hidden],
.sidebar-backdrop[hidden] {
  display: none;
}

.sidebar-backdrop {
  inset-inline: 0;
  z-index: 1050;
  background: rgb(12 16 38 / 45%);
}

.sidebar-toggle {
  width: 42px;
  height: 42px;
  background: #fff;
  border-color: #e7e9f1;
  border-radius: 12px;
  font-size: 20px;
}

/* يبعد زر القائمة والعدسة عن الشعار (وبالتالي عن حافة القائمة الجانبية
   والخط الفاصل تبعها) أكتر — بالديسكتوب بس، حتى ما يكسر ترتيب الهيدير
   بالموبايل (القائمة هناك أصلًا منبثقة فوق المحتوى مش جنبه) */
@media (min-width: 992px) {
  .store-header__start .sidebar-toggle {
    margin-inline-start: 72px;
  }

  /* والقائمة مسكرة (مطوية) الشعار بيصغر لحرف الـ P بس، فمسافة الـ 72px
     الكبيرة ما عادت لازمة — الأيقونتين بتقربوا من بعض أكتر، بس لازم
     تضل مسافة كافية حتى ما يتقاطعوا مع الخط الفاصل (عرض القائمة المطوية
     أضيق بكتير من الموسّعة) */
  body.storefront-page.sidebar-collapsed .store-header__start .sidebar-toggle {
    margin-inline-start: 44px;
  }
}

.storefront-page .icon-button.sidebar-toggle,
.storefront-page .icon-button.sidebar-toggle:hover,
.storefront-page .icon-button.sidebar-toggle:active,
.storefront-page .icon-button.sidebar-toggle:focus,
.storefront-page .icon-button.sidebar-toggle:focus-visible,
.storefront-page .icon-button.sidebar-toggle[aria-expanded="true"] {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

.storefront-page .icon-button.sidebar-toggle > i {
  color: var(--store-primary) !important;
  animation: none !important;
  transition: color .18s ease, transform .18s ease;
}

.storefront-page .icon-button.sidebar-toggle:hover > i,
.storefront-page .icon-button.sidebar-toggle:focus-visible > i {
  color: var(--store-primary-hover) !important;
  transform: scale(1.16) !important;
}

.storefront-page .icon-button.sidebar-toggle:active > i {
  transform: scale(.92) !important;
}

.storefront-page .icon-button.sidebar-toggle[aria-expanded="true"]:hover > i,
.storefront-page .icon-button.sidebar-toggle[aria-expanded="true"]:focus-visible > i {
  color: #e5384f !important;
}

.storefront-page .icon-button.sidebar-toggle .pal-ripple {
  display: none;
}

.store-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 32px 12px 4px;
  overflow-x: hidden;
  overflow-y: auto;
}

.store-sidebar__item {
  position: relative;
  flex: 0 0 auto;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  line-height: 1.2;
  color: var(--store-body);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.store-sidebar__item > i {
  width: 26px;
  flex: 0 0 26px;
  color: var(--store-primary);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  transition: color 220ms ease;
}

.store-sidebar__item:hover,
.store-sidebar__item:focus-visible {
  color: var(--store-primary);
  background: var(--store-primary-soft);
}

.store-sidebar__item:focus-visible {
  box-shadow: 0 0 0 3px rgb(22 119 255 / 18%);
}

.store-sidebar__item.active:focus-visible,
.store-sidebar__item[aria-current="page"]:focus-visible {
  box-shadow: 0 6px 16px rgb(22 119 255 / 24%), 0 0 0 3px rgb(22 119 255 / 18%);
}

.store-sidebar__item.active,
.store-sidebar__item[aria-current="page"] {
  color: #fff;
  background: var(--store-primary);
  box-shadow: 0 6px 16px rgb(22 119 255 / 24%);
}

.store-sidebar__item.active > i,
.store-sidebar__item[aria-current="page"] > i {
  color: #fff;
}

.store-sidebar__item > span {
  min-width: 0;
  flex: 1;
  padding-block: 2px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-sidebar__logout > span {
  padding-block: 2px;
  line-height: 1.6;
}

.store-sidebar__divider {
  flex: 0 0 auto;
  height: 1px;
  margin: 8px 14px;
  background: var(--store-border);
}

.store-sidebar__logout {
  position: relative;
  width: calc(100% - 24px);
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 12px 14px;
  padding: 12px 18px;
  line-height: 1.2;
  color: var(--store-danger);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease;
}

/* حالة الطي (زي الأدمن بالضبط): أيقونات فقط مع tooltip بالـ hover */
@media (min-width: 992px) {
  body.storefront-page.sidebar-collapsed .store-sidebar__item > span,
  body.storefront-page.sidebar-collapsed .store-sidebar__logout > span {
    display: none;
  }

  body.storefront-page.sidebar-collapsed .store-sidebar__nav {
    align-items: center;
    padding-inline: 11px;
  }

  body.storefront-page.sidebar-collapsed .store-sidebar__item,
  body.storefront-page.sidebar-collapsed .store-sidebar__logout {
    width: 58px;
    justify-content: center;
    gap: 0;
    padding-inline: 0;
  }

  body.storefront-page.sidebar-collapsed .store-sidebar__divider {
    margin-inline: 14px;
  }

  body.storefront-page.sidebar-collapsed .store-sidebar [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 70;
    inset-inline-start: calc(100% + 12px);
    top: 50%;
    width: max-content;
    max-width: 180px;
    padding: 7px 10px;
    color: #fff;
    background: var(--store-navy);
    border-radius: 7px;
    box-shadow: var(--store-shadow);
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  body.storefront-page.sidebar-collapsed .store-sidebar [data-tooltip]:hover::after,
  body.storefront-page.sidebar-collapsed .store-sidebar [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.store-sidebar__logout > i {
  width: 26px;
  flex: 0 0 26px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.store-sidebar__logout:hover,
.store-sidebar__logout:focus-visible {
  background: #fdecee;
  border-color: rgb(229 56 79 / 22%);
}

.store-sidebar__logout:focus-visible {
  box-shadow: 0 0 0 3px rgb(229 56 79 / 16%);
}

/* مطوية على شكل دائرة بخط أزرق حوالين أيقونة العدسة افتراضيًا، وبتنفتح
   لصندوق بحث كامل لما الماوس يجي فوقها أو لما تاخد فوكس أو لما فيها نص
   مكتوب فعلاً — بدل ما تاخد مساحة ثابتة بالهيدير طول الوقت */
.store-search {
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  width: 42px;
  max-width: 42px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--store-body);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  overflow: hidden;
  transition: flex-basis 220ms ease, max-width 220ms ease, border-radius 220ms ease,
    border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.store-search:hover,
.store-search:focus-within,
.store-search:has(input:not(:placeholder-shown)) {
  flex-basis: 240px;
  max-width: 240px;
  background: #fff;
  border-color: var(--store-primary);
  box-shadow: 0 0 0 3px rgb(22 119 255 / 18%);
}

.store-search__icon {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  color: var(--store-primary);
}

.store-search input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 100%;
  padding-block: 0;
  padding-inline-end: 12px;
  font-size: 0.9rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: #15253b;
  opacity: 0;
  transition: opacity 160ms ease;
}

.store-search:hover input,
.store-search:focus-within input,
.store-search:has(input:not(:placeholder-shown)) input {
  opacity: 1;
}

.store-search input::placeholder {
  color: #70839d;
}

.store-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* خط رفيع يفصل أيقونات الحساب (الملف الشخصي، الإشعارات) عن السلة —
   أهم إجراء تجاري بالهيدير — فتبرز كأولوية بأقصى الطرف */
.store-header__actions-divider {
  inline-size: 1px;
  block-size: 22px;
  margin-inline: 2px;
  background: var(--store-border);
}

.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  font-size: 20px;
  place-items: center;
  color: var(--store-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.icon-button:hover,
.icon-button:focus-visible {
  color: var(--store-primary-hover);
  background: var(--store-primary-soft);
  border-color: var(--store-primary-border);
  box-shadow: 0 7px 20px rgb(26 33 74 / 7%);
}

.icon-button.sidebar-toggle[aria-expanded="true"]:hover,
.icon-button.sidebar-toggle[aria-expanded="true"]:focus-visible,
.icon-button.sidebar-toggle[aria-expanded="true"]:hover > i,
.icon-button.sidebar-toggle[aria-expanded="true"]:focus-visible > i {
  color: #e5384f !important;
}

.icon-button.sidebar-toggle[aria-expanded="true"]:hover,
.icon-button.sidebar-toggle[aria-expanded="true"]:focus-visible {
  background: #fdecee !important;
  border-color: transparent !important;
}

.store-search__icon i,
.icon-button i {
  display: inline-block;
  width: 21px;
  height: 21px;
  font-size: 18px;
  line-height: 1;
}

.icon-badge {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  background: #1677ff;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #fff;
}

.notifications-menu {
  position: relative;
}

.storefront-page .notifications-button.has-new-notification > .bi-bell {
  transform-origin: top center;
  animation: palBellRing .72s ease;
}

.notifications-badge[hidden],
.notifications-panel[hidden] {
  display: none;
}

/* سهم صغير يوصل لوحة الإشعارات بأيقونة الجرس اللي طلعت منها */
.notifications-menu::before {
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline-start: 50%;
  width: 14px;
  height: 14px;
  margin-inline-start: -7px;
  background: #fff;
  border-inline-start: 1px solid #d6e1ef;
  border-block-start: 1px solid #d6e1ef;
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
  z-index: 41;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.notifications-menu:has(.notifications-panel:not([hidden]))::before {
  opacity: 1;
  visibility: visible;
}

.notifications-panel {
  position: absolute;
  inset-block-start: calc(100% + 14px);
  inset-inline-end: -48px;
  z-index: 40;
  width: min(330px, calc(100vw - 32px));
  overflow: hidden;
  color: #182941;
  background: #fff;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgb(20 44 84 / 14%);
}

.notification-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 8px;
  position: relative;
  color: inherit;
  font: inherit;
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color .14s ease;
}

/* ثابتة بدون أي تأثير هوفر (الأزرار العامة كانت ترفعها وتضيف ظل) */
.notification-item:hover,
.notification-item:active {
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* interactions.css يضيف .pal-pressable على الأزرار (رفع + ظل + ارتداد)؛ هذا يثبّت الإشعار فوقه */
.notification-item:focus-visible {
  outline: 2px solid var(--store-primary);
  outline-offset: -2px;
}

/* غير المقروء: نقطة زرقاء صغيرة بدل الخلفية والشريط */
.notification-item.is-unread::after {
  content: "";
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 8px;
  width: 7px;
  height: 7px;
  background: #0a68eb;
  border-radius: 50%;
}

.notification-item__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #0a68eb;
  background: #eff6ff;
  border-radius: 9px;
  font-size: 1rem;
}

.notification-item__body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.notification-item__body strong {
  color: #182941;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.notification-item__body small {
  display: -webkit-box;
  overflow: hidden;
  color: #5a6b82;
  font-size: 10px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-item__body time {
  color: #8ca2c0;
  font-size: 9px;
}

.store-notification-toast {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-start: 92px; /* under the header */
  z-index: 4000;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #fff;
  background: #15253b;
  border-radius: 13px;
  box-shadow: 0 14px 35px rgb(11 31 58 / 24%);
  font: 600 .86rem Cairo, sans-serif;
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.store-notification-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

[dir="rtl"] .store-notification-toast { transform: translate(50%, -14px); }
[dir="rtl"] .store-notification-toast.is-visible { transform: translate(50%, 0); }

.store-notification-toast i {
  color: #fb7185;
  font-size: 1.1rem;
}

.cart-menu {
  position: relative;
}

/* سهم صغير يوصل القائمة المنسدلة بأيقونة السلة اللي طلعت منها */
.cart-menu::before {
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline-start: 50%;
  width: 14px;
  height: 14px;
  margin-inline-start: -7px;
  background: #fff;
  border-inline-start: 1px solid #d6e1ef;
  border-block-start: 1px solid #d6e1ef;
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
  z-index: 41;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.cart-menu:has(.cart-dropdown:not([hidden]))::before {
  opacity: 1;
  visibility: visible;
}

.cart-dropdown[hidden] {
  display: none;
}

.cart-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 14px);
  left: 0;
  right: auto;
  transform: none;
  z-index: 40;
  width: min(320px, calc(100vw - 32px));
  overflow: hidden;
  color: var(--store-navy);
  background: #fff;
  border: 1px solid #d6e1ef;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgb(20 44 84 / 18%);
}

.cart-dropdown__header {
  padding: 14px 16px 11px;
  border-bottom: 1px solid var(--store-border);
}

.cart-dropdown__header strong {
  font-size: .95rem;
}

.cart-dropdown__list {
  max-height: 280px;
  overflow-y: auto;
}

.cart-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--store-border);
}

.cart-dropdown__item-media {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--store-surface-muted);
  border-radius: 10px;
  overflow: hidden;
}

.cart-dropdown__item-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The customer's design on the product: a flex box gives it a definite height (a grid's auto row would shrink it). */
.cart-dropdown__item-media:has(.cart-mockup) {
  display: flex;
  justify-content: center;
}

.cart-dropdown__item-body {
  min-width: 0;
  flex: 1;
}

.cart-dropdown__item-body h4 {
  margin: 0;
  color: var(--store-navy);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-dropdown__item-body p {
  margin: 2px 0 0;
  color: var(--store-muted);
  font-size: .76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-dropdown__item-price {
  flex: 0 0 auto;
  color: var(--store-primary);
  font-size: .82rem;
  font-weight: 700;
}

.cart-dropdown__empty {
  margin: 0;
  padding: 24px 16px;
  color: var(--store-muted);
  font-size: .82rem;
  text-align: center;
}

.cart-dropdown__empty[hidden] {
  display: none;
}

.cart-dropdown__footer {
  padding: 10px 12px;
  border-top: 1px solid var(--store-border);
}

.cart-dropdown__view {
  display: block;
  padding: 9px;
  color: #fff;
  background: var(--store-primary);
  border-radius: 10px;
  font: 700 .84rem Cairo, sans-serif;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.cart-dropdown__view:hover,
.cart-dropdown__view:focus-visible {
  background: var(--store-primary-hover);
}

.profile-menu {
  position: relative;
}

/* سهم صغير يوصل قائمة الملف الشخصي بأيقونته اللي طلعت منها */
.profile-menu::before {
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 3px);
  inset-inline-start: 50%;
  width: 14px;
  height: 14px;
  margin-inline-start: -7px;
  background: #fff;
  border-inline-start: 1px solid #d6e1ef;
  border-block-start: 1px solid #d6e1ef;
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
  z-index: 31;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.profile-menu:has(.profile-dropdown:not([hidden]))::before {
  opacity: 1;
  visibility: visible;
}

.profile-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 12px);
  left: 50%;
  right: auto;
  z-index: 30;
  min-width: 170px;
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgb(20 44 84 / 14%);
  transform: translateX(-50%);
}

.profile-dropdown[hidden] {
  display: none;
}

.profile-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  color: #27588f;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
}

.profile-dropdown__item > i {
  flex: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.profile-dropdown__item > span {
  flex: 1;
}

.profile-dropdown__item:hover,
.profile-dropdown__item:focus-visible {
  color: #1677ff;
  background: transparent;
  border-color: transparent;
}

.profile-dropdown__item:focus-visible {
  background: var(--store-primary-soft);
  box-shadow: 0 0 0 3px rgb(22 119 255 / 18%);
}

.profile-dropdown__logout {
  color: #27588f;
}

.profile-dropdown__logout:hover,
.profile-dropdown__logout:focus-visible {
  color: #b42318;
}

.store-main {
  margin-inline: var(--store-gutter);
  padding: 18px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: margin-inline-start 280ms ease;
}

.store-main .section-space {
  padding-block: 0;
}


/* =========================================================
   03. الهيرو
   ========================================================= */

.hero-section {
  background: transparent;
}

.hero-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  min-height: 300px;
  padding-block: clamp(10px, 2vw, 24px);
}

.hero-visual {
  min-width: 0;
}

.storefront-motion-ready .hero-copy,
.storefront-motion-ready .hero-visual,
.storefront-motion-ready .section-heading,
.storefront-motion-ready .product-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.storefront-motion-ready .hero-visual {
  transform: translateY(22px) scale(0.98);
}

.storefront-motion-ready .hero-copy.is-revealed,
.storefront-motion-ready .hero-visual.is-revealed,
.storefront-motion-ready .section-heading.is-revealed,
.storefront-motion-ready .product-card.is-revealed {
  opacity: 1;
  transform: none;
}

.hero-visual__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-inline: 0;
  transform: scale(1);
  transform-origin: center center;
}

.hero-copy {
  direction: rtl;
  min-width: 0;
  text-align: center;
  max-width: 100%;
  justify-self: center;
}

.hero-copy--card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
  padding: 12px 16px 10px;
  background: transparent;
  box-shadow: none;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(3.8rem, 6vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--store-navy);
}

.hero-copy h1 span {
  display: block;
  color: var(--store-navy);
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0;
}

.hero-copy h1 strong {
  display: block;
  color: var(--store-primary);
  font-size: 1.08em;
  font-weight: 800;
  direction: ltr;
  letter-spacing: -0.05em;
}

.hero-copy__text {
  margin: 8px 0 0;
  color: #6a7280;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}

.hero-copy__text:hover {
  transform: scale(1.03);
  text-shadow: 0 4px 16px rgba(20, 94, 219, 0.18);
}

.hero-copy__line {
  display: inline-block;
  color: var(--store-navy);
  text-wrap: balance;
  transition: opacity 500ms ease, transform 500ms ease;
}

.storefront-motion-ready .hero-copy .hero-copy__line {
  opacity: 0;
  transform: translateY(10px);
}

.storefront-motion-ready .hero-copy.is-revealed .hero-copy__line {
  opacity: 1;
  transform: none;
}

.hero-copy__line--dark {
  font-size: 1.18em;
  font-weight: 800;
  transition-delay: 0ms;
}

.hero-copy__line--accent {
  font-size: 0.9em;
  font-weight: 500;
  transition-delay: 160ms;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 0;
}

.hero-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font: 700 1rem "Cairo", sans-serif;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.hero-cta__btn--primary {
  background: var(--store-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgb(22 119 255 / 24%);
}

.hero-cta__btn--primary:hover {
  background: var(--store-primary-hover);
  transform: translateY(-2px);
}

.hero-cta__btn--outline {
  background: transparent;
  color: var(--store-primary);
  border-color: var(--store-primary-border);
}

.hero-cta__btn--outline:hover {
  background: var(--store-primary-soft);
  border-color: var(--store-primary);
  transform: translateY(-2px);
}

.section-heading {
  text-align: center;
  margin-bottom: 22px;
}

.products-section > .container-palprints {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--store-primary);
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}

.section-heading h2:hover {
  color: var(--store-primary);
  transform: translateY(-1px);
  text-shadow: 0 4px 10px rgb(22 119 255 / 18%);
}

.section-heading p {
  margin: 10px auto 0;
  max-width: 720px;
  color: #5a6b82;
  line-height: 1.9;
}

/* =========================================================
   04. فلترة التصنيفات — غير مفعّلة حالياً
   لا يوجد لها أي عنصر في storefront.html، والجافاسكربت
   الخاص بها في storefront.js يعمل على قوائم فارغة.
   محفوظة لحين إعادة تركيب شريط الفلاتر في الصفحة.
   (فلترة البحث بالنص تعمل بشكل مستقل عن هذه الكتلة)
   ========================================================= */

.filter-controls {
  display: none;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin-bottom: 22px;
  direction: rtl;
}

.category-quick-filters {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  direction: rtl;
}

.category-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1677ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

.category-submenu-toggle {
  direction: ltr;
}

.category-submenu-toggle i {
  transition: transform 160ms ease;
}

.category-submenu-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.category-quick-pill:hover,
.category-quick-pill:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #27a9e1;
  text-shadow: 0 3px 8px rgb(22 119 255 / 18%);
  transform: translateY(-1px);
}

.category-quick-menu {
  position: relative;
}

.category-quick-menu .category-submenu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 50%;
  inset-inline-end: auto;
  z-index: 20;
  min-width: 150px;
  max-width: 220px;
  padding: 8px;
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgb(20 44 84 / 14%);
  transform: translateX(50%);
  white-space: nowrap;
}

.category-filter-dropdown {
  position: relative;
  width: fit-content;
  flex: none;
  display: none;
  direction: rtl;
}

.category-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  background: #fff;
  color: #27588f;
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

.category-filter-toggle:hover,
.category-filter-toggle:focus-visible,
.category-filter-toggle[aria-expanded="true"] {
  border-color: #1677ff;
  background: #1677ff;
  color: #fff;
  box-shadow: 0 8px 18px rgb(22 119 255 / 18%);
  transform: translateY(-1px);
}

.category-filters {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: auto;
  inset-inline-end: calc(100% + 8px);
  z-index: 20;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #d6e1ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgb(20 44 84 / 14%);
}

.category-pill {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #27588f;
  text-align: right;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.category-pill:hover,
.category-pill:focus-visible {
  border-color: #1677ff;
  background: #1677ff;
  color: #fff;
}

.category-filters[hidden] {
  display: none;
}

.category-menu-group {
  display: grid;
  gap: 4px;
}

.category-submenu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.category-submenu-toggle[aria-expanded="true"] {
  background: #eef5ff;
  border-color: #8bb9e8;
  color: #1677ff;
}

.category-submenu {
  display: grid;
  gap: 4px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid #d6e6fa;
}

.category-submenu[hidden] {
  display: none;
}

.products-section:has(.category-pill[data-category="all"]:hover) .product-card,
.products-section:has(.category-quick-pill[data-category="all"]:hover) .product-card {
  transform: translateY(-6px);
  border-color: #8bb9e8;
  box-shadow: 0 18px 40px rgb(20 44 84 / 16%);
}

.products-section:has(.category-pill[data-category="clothing"]:hover) .product-card[data-category="clothing"],
.products-section:has(.category-pill[data-category="accessories"]:hover) .product-card[data-category="accessories"],
.products-section:has(.category-pill[data-category="office"]:hover) .product-card[data-category="office"],
.products-section:has(.category-pill[data-category="drinkware"]:hover) .product-card[data-category="drinkware"],
.products-section:has(.category-quick-pill[data-category="clothing"]:hover) .product-card[data-category="clothing"],
.products-section:has(.category-quick-pill[data-category="accessories"]:hover) .product-card[data-category="accessories"],
.products-section:has(.category-quick-pill[data-category="office"]:hover) .product-card[data-category="office"],
.products-section:has(.category-quick-pill[data-category="drinkware"]:hover) .product-card[data-category="drinkware"],
.products-section:has(.category-submenu-toggle[aria-controls="clothingSubmenu"]:hover) .product-card[data-category="clothing"],
.products-section:has(.category-submenu-toggle[aria-controls="accessoriesSubmenu"]:hover) .product-card[data-category="accessories"],
.products-section:has(.category-submenu-toggle[aria-controls="officeSubmenu"]:hover) .product-card[data-category="office"],
.products-section:has(.category-submenu-toggle[aria-controls="drinkwareSubmenu"]:hover) .product-card[data-category="drinkware"] {
  transform: translateY(-6px);
  border-color: #8bb9e8;
  box-shadow: 0 18px 40px rgb(20 44 84 / 16%);
}

.products-section:has(.category-submenu-toggle[aria-controls="clothingSubmenu"][aria-expanded="true"]) .product-card[data-category="clothing"],
.products-section:has(.category-submenu-toggle[aria-controls="accessoriesSubmenu"][aria-expanded="true"]) .product-card[data-category="accessories"],
.products-section:has(.category-submenu-toggle[aria-controls="officeSubmenu"][aria-expanded="true"]) .product-card[data-category="office"],
.products-section:has(.category-submenu-toggle[aria-controls="drinkwareSubmenu"][aria-expanded="true"]) .product-card[data-category="drinkware"] {
  transform: translateY(-6px);
  border-color: #8bb9e8;
  box-shadow: 0 18px 40px rgb(20 44 84 / 16%);
}

@supports selector(.products-section:has(.category-pill:hover)) {
  .products-section:has(.category-pill[data-category="clothing"]:hover) .product-card:not([data-category="clothing"]),
  .products-section:has(.category-quick-pill[data-category="clothing"]:hover) .product-card:not([data-category="clothing"]),
  .products-section:has(.category-submenu-toggle[aria-controls="clothingSubmenu"]:hover) .product-card:not([data-category="clothing"]),
  .products-section:has(.category-pill[data-category="accessories"]:hover) .product-card:not([data-category="accessories"]),
  .products-section:has(.category-quick-pill[data-category="accessories"]:hover) .product-card:not([data-category="accessories"]),
  .products-section:has(.category-submenu-toggle[aria-controls="accessoriesSubmenu"]:hover) .product-card:not([data-category="accessories"]),
  .products-section:has(.category-pill[data-category="office"]:hover) .product-card:not([data-category="office"]),
  .products-section:has(.category-quick-pill[data-category="office"]:hover) .product-card:not([data-category="office"]),
  .products-section:has(.category-submenu-toggle[aria-controls="officeSubmenu"]:hover) .product-card:not([data-category="office"]),
  .products-section:has(.category-pill[data-category="drinkware"]:hover) .product-card:not([data-category="drinkware"]),
  .products-section:has(.category-quick-pill[data-category="drinkware"]:hover) .product-card:not([data-category="drinkware"]),
  .products-section:has(.category-submenu-toggle[aria-controls="drinkwareSubmenu"]:hover) .product-card:not([data-category="drinkware"]) {
    filter: blur(1.8px) saturate(0.75);
    opacity: 0.42;
    transform: scale(0.985);
  }

  .products-section:has(.category-pill[data-category="clothing"]:hover) .product-card[data-category="clothing"],
  .products-section:has(.category-quick-pill[data-category="clothing"]:hover) .product-card[data-category="clothing"],
  .products-section:has(.category-submenu-toggle[aria-controls="clothingSubmenu"]:hover) .product-card[data-category="clothing"],
  .products-section:has(.category-pill[data-category="accessories"]:hover) .product-card[data-category="accessories"],
  .products-section:has(.category-quick-pill[data-category="accessories"]:hover) .product-card[data-category="accessories"],
  .products-section:has(.category-submenu-toggle[aria-controls="accessoriesSubmenu"]:hover) .product-card[data-category="accessories"],
  .products-section:has(.category-pill[data-category="office"]:hover) .product-card[data-category="office"],
  .products-section:has(.category-quick-pill[data-category="office"]:hover) .product-card[data-category="office"],
  .products-section:has(.category-submenu-toggle[aria-controls="officeSubmenu"]:hover) .product-card[data-category="office"],
  .products-section:has(.category-pill[data-category="drinkware"]:hover) .product-card[data-category="drinkware"],
  .products-section:has(.category-quick-pill[data-category="drinkware"]:hover) .product-card[data-category="drinkware"],
  .products-section:has(.category-submenu-toggle[aria-controls="drinkwareSubmenu"]:hover) .product-card[data-category="drinkware"] {
    filter: none;
    opacity: 1;
    z-index: 1;
    position: relative;
  }
}


/* =========================================================
   05. شبكة المنتجات والبطاقات
   ========================================================= */

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  transition: filter 180ms ease;
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--store-border);
  border-radius: 16px;
  box-shadow: var(--store-shadow);
  transform-origin: center center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease,
    filter 180ms ease, opacity 180ms ease;
}

.storefront-motion-ready .product-card.is-revealed {
  animation: productCardFloat 4.8s ease-in-out infinite;
}

.storefront-motion-ready .product-card.is-revealed:nth-child(3n + 1) {
  animation-delay: 0s;
}

.storefront-motion-ready .product-card.is-revealed:nth-child(3n + 2) {
  animation-delay: 0.7s;
}

.storefront-motion-ready .product-card.is-revealed:nth-child(3n) {
  animation-delay: 1.3s;
}

.product-card[hidden] {
  display: none !important;
}

.product-card.is-filter-hidden {
  visibility: hidden;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--store-primary-border);
  box-shadow: 0 12px 28px rgb(15 23 42 / 12%);
}

.product-card.is-revealed:hover {
  animation-play-state: paused;
}

.product-card__media {
  width: calc(100% + 2px);
  margin: -1px -1px 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--store-surface-muted);
  border-radius: 15px 15px 0 0;
}

.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  transition: transform 220ms ease;
}

@supports selector(.products-grid:has(.product-card:hover)) {
  .products-grid:has(.product-card:hover) .product-card {
    filter: blur(1.8px) saturate(0.75);
    opacity: 0.42;
    transform: scale(0.985);
  }

  .products-grid:has(.product-card:hover) .product-card:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-10px) scale(1.03);
    z-index: 2;
    position: relative;
  }

}

.products-empty {
  margin: 24px 0 0;
  padding: 18px;
  color: #5a6b82;
  background: #fff;
  border: 1px dashed #cbd9e8;
  border-radius: 14px;
  text-align: center;
}

.products-empty > i,
.notifications-empty > i,
.cart-dropdown__empty > i {
  display: block;
  margin-bottom: 8px;
  color: #8aa4c4;
  font-size: 2.4rem;
  line-height: 1;
}

.notifications-empty > i,
.cart-dropdown__empty > i {
  font-size: 1.8rem;
}

.orders-table-empty > i {
  margin-inline-end: 6px;
  color: #8aa4c4;
  font-size: 1.2rem;
  vertical-align: middle;
}


/* =========================================================
   06. الفوتر
   الفوتر نفسه صار جزء مشترك — شكله ومحتواه بملف
   front/css/shared/site-footer.css (.site-footer)، مش هون.
   ========================================================= */

.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  text-align: center;
}

.product-card__body h3 {
  margin: 0;
  color: var(--store-navy);
  font-size: 1.04rem;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

.product-card__body h3:hover {
  transform: translateY(-1px);
  text-shadow: 0 3px 8px rgb(22 119 255 / 20%);
}

.product-card__body p {
  margin: 6px 0 12px;
  color: #60728a;
  font-size: 0.86rem;
  line-height: 1.8;
  min-height: 0;
  max-width: 28ch;
}

.product-card__price {
  margin-top: 0;
  color: var(--store-primary);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
}

.icon-button:focus-visible,
.button:focus-visible {
  outline: 3px solid rgb(22 119 255 / 22%);
  outline-offset: 2px;
}

.product-card:focus-within {
  /* box-shadow (not outline) so the focus ring follows the card's own
     16px border-radius instead of drawing square corners behind it;
     stacked with the card's normal shadow so it doesn't just replace it.
     35% (not the earlier 16%) so it's actually visible against a white card. */
  border-color: var(--store-primary);
  box-shadow: var(--store-shadow), 0 0 0 3px rgb(22 119 255 / 35%);
}


/* =========================================================
   07. الاستجابة للشاشات
   ========================================================= */

@media (max-width: 1199px) {
  .hero-copy {
    justify-self: center;
  }

  .hero-grid {
    gap: 28px;
  }

  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .products-grid > .product-card:nth-child(n) {
    grid-column: auto;
    transform: none;
  }

  .products-grid > .product-card:nth-child(9):hover,
  .products-grid > .product-card:nth-child(10):hover,
  .products-grid > .product-card:nth-child(11):hover,
  .products-grid > .product-card:nth-child(9):focus-within,
  .products-grid > .product-card:nth-child(10):focus-within,
  .products-grid > .product-card:nth-child(11):focus-within {
    transform: translateY(-3px);
  }
}

@media (max-width: 991px) {
  .store-header__inner {
    gap: 10px;
  }

  .store-header__brand,
  .store-nav {
    display: none;
  }

  /* مساحات لمس أوسع (44px) لعناصر القائمة الجانبية على الموبايل والتابلت */
  .store-sidebar__item,
  .store-sidebar__logout {
    min-height: 44px;
  }

  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones keep the desktop layout: big image on the left, a compact text block centred beside it on the right. */
@media (max-width: 820px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding-block: 8px 14px;
  }

  .hero-copy--card {
    padding: 0;
  }

  .hero-copy h1 {
    font-size: clamp(1.15rem, 6vw, 3rem);
  }

  .hero-copy__text {
    margin-top: 4px;
    font-size: clamp(0.62rem, 2.4vw, 1.05rem);
    line-height: 1.45;
  }

  .hero-copy .upload-design-cta {
    margin-top: 8px;
  }

  .hero-copy .upload-design-button {
    gap: 4px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: clamp(0.62rem, 2.5vw, 0.95rem);
    line-height: 1.3;
  }

  .hero-copy .upload-design-button i {
    font-size: 1.05em;
  }
}

@media (max-width: 640px) {
  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .category-quick-filters {
    justify-content: center;
  }

  .category-filter-dropdown {
    margin-inline-start: auto;
  }

  .category-filters {
    inset-block-start: calc(100% + 8px);
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .storefront-page .container-palprints {
    width: min(100% - 32px, 1240px);
  }

  .store-main {
    margin-inline: 16px !important;
    padding-inline: 0;
  }

  .store-main .container-palprints {
    width: 100%;
  }

  .store-header__inner {
    min-height: 52px;
    padding-inline: 16px;
    gap: 6px;
  }

  .icon-button {
    width: 44px;
    height: 44px;
  }

  .hero-visual__image {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-header,
  .store-main,
  .store-sidebar {
    transition: none;
  }

  .storefront-motion-ready .hero-copy,
  .storefront-motion-ready .hero-visual,
  .storefront-motion-ready .section-heading,
  .storefront-motion-ready .product-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .storefront-motion-ready .product-card.is-revealed {
    animation: none;
  }
}

@keyframes productCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@media (max-width: 480px) {
  .store-main {
    padding-inline: 0;
  }

  .storefront-page .container-palprints {
    width: 100%;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-card__body {
    padding: 10px 8px 12px;
  }

  .product-card__body h3 {
    font-size: 0.95rem;
  }

  .product-card__body p {
    display: -webkit-box;
    max-width: none;
    margin: 4px 0 8px;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.6;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.storefront-page .category-pill.is-active,
.storefront-page .category-quick-pill.is-active,
.storefront-page .category-submenu-toggle[aria-expanded="true"] {
  color: var(--store-primary);
  background: var(--store-primary-soft);
  border-color: var(--store-primary-border);
}

.storefront-page .store-brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
  white-space: nowrap;
  font-size: 27px;
}

.storefront-page .store-brand__wordmark span {
  color: var(--store-navy);
}

.storefront-page .store-brand__wordmark strong {
  color: var(--store-primary);
  font-weight: 800;
}

.storefront-page .store-brand:hover .store-brand__wordmark,
.storefront-page .store-brand:focus-visible .store-brand__wordmark {
  filter: drop-shadow(0 4px 8px rgb(22 119 255 / 18%));
}

.storefront-page .product-card[data-available="false"] {
  cursor: not-allowed;
}

.storefront-page .product-card[data-available="false"] .product-card__media {
  position: relative;
}

.storefront-page .product-card[data-available="false"] .product-card__media::after {
  content: "غير متوفر حاليًا";
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  z-index: 2;
  transform: none;
  padding: 0.15rem 0.65rem;
  color: #fff;
  background: var(--store-orange);
  border: 1px solid var(--store-orange);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.storefront-page .product-card[data-available="false"] .product-card__media img {
  filter: blur(1.2px) grayscale(0.12);
  opacity: 0.72;
}

.storefront-page .product-card[data-available="false"] .product-card__media::after {
  content: none;
}

.storefront-page .product-card__availability {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  z-index: 2;
  padding: 0.15rem 0.65rem;
  color: #fff;
  background: var(--store-orange);
  border: 1px solid var(--store-orange);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.storefront-page .product-card[data-product="shirt"] .product-card__media img,
.storefront-page .product-card[data-product="hoodie"] .product-card__media img,
.storefront-page .product-card[data-product="cap"] .product-card__media img,
.storefront-page .product-card[data-product="bag"] .product-card__media img,
.storefront-page .product-card[data-product="scarf"] .product-card__media img,
.storefront-page .product-card[data-product="notebooks"] .product-card__media img,
.storefront-page .product-card[data-product="posters"] .product-card__media img,
.storefront-page .product-card[data-product="stickers"] .product-card__media img,
.storefront-page .product-card[data-product="wedding-cards"] .product-card__media img {
  width: 80%;
  height: 80%;
  transform: none !important;
}

.storefront-page .product-card[data-product="cups"] .product-card__media img {
  width: 80%;
  height: 80%;
  transform: none !important;
}

.storefront-page .product-card[data-product="stickers"] .product-card__media img {
  width: 88%;
  height: 88%;
  margin-top: 0;
  transform: none !important;
}

.storefront-page .product-card[data-product="paper"] .product-card__media img {
  width: 74%;
  height: 78%;
  transform: none !important;
}

.storefront-page .product-card[data-product="phone-case"] .product-card__media img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  transform: translateY(-25px) !important;
}

.storefront-page .product-card:hover .product-card__media img,
.storefront-page .product-card:focus-within .product-card__media img,
.storefront-page .product-card.is-image-hovered .product-card__media img {
  transform: scale(1.08) !important;
}

.storefront-page .product-card[data-product="phone-case"]:hover .product-card__media img,
.storefront-page .product-card[data-product="phone-case"]:focus-within .product-card__media img,
.storefront-page .product-card[data-product="phone-case"].is-image-hovered .product-card__media img {
  transform: translateY(-25px) scale(1.08) !important;
}

.storefront-page .icon-button.pal-pressable {
  overflow: visible;
}

/* Header account actions stay icon-only in every interaction state. */
.storefront-page .store-header .sidebar-toggle:hover,
.storefront-page .store-header .sidebar-toggle:focus,
.storefront-page .store-header .sidebar-toggle:focus-visible,
.storefront-page .store-header .sidebar-toggle:active,
.storefront-page .store-header .sidebar-toggle.is-pressed,
.storefront-page .store-header .sidebar-toggle[aria-expanded="true"],
.storefront-page .store-header__actions .icon-button:hover,
.storefront-page .store-header__actions .icon-button:focus,
.storefront-page .store-header__actions .icon-button:focus-visible,
.storefront-page .store-header__actions .icon-button:active,
.storefront-page .store-header__actions .icon-button.is-pressed,
.storefront-page .store-header__actions .icon-button[aria-expanded="true"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.storefront-page .product-card[data-product="hoodie"] .product-card__media img.is-hover-image {
  height: calc(80% - 15px);
}

.storefront-page .product-card[data-product="shirt"]:hover .product-card__media img.is-hover-image,
.storefront-page .product-card[data-product="shirt"]:focus-within .product-card__media img.is-hover-image,
.storefront-page .product-card[data-product="shirt"].is-image-hovered .product-card__media img.is-hover-image {
  width: 75%;
  height: 75%;
  margin-top: -20px;
  transform: scale(1.08) !important;
}


/* Visitor who is not signed in: no side menu, so the page uses the full width, and two sign-in links replace the account icons. */
body.storefront-page.guest-shop .site-footer,
body.storefront-page.guest-shop.sidebar-collapsed .site-footer {
  margin-inline-start: 0;
}

/* The page keeps the same side gutter on both sides (not 0 on one side), so the content sits in the middle. */
body.storefront-page.guest-shop .store-main,
body.storefront-page.guest-shop.sidebar-collapsed .store-main {
  margin-inline-start: var(--store-gutter);
}

body.storefront-page.guest-shop .store-header::after {
  display: none;
}

.store-guest-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  color: var(--store-primary-hover);
  background: transparent;
  border: 1px solid var(--store-primary-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.store-guest-link:hover {
  background: var(--store-primary-soft);
}

.store-guest-link--primary {
  color: #fff;
  background: var(--store-primary);
  border-color: var(--store-primary);
}

.store-guest-link--primary:hover {
  color: #fff;
  background: var(--store-primary-hover);
}

@media (max-width: 575px) {
  .store-guest-link {
    padding: 0 10px;
    font-size: 12px;
  }
}

/* Count of unread answers from the support team, on the "مركز المساعدة" item. */
.store-sidebar__badge {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  padding: 0 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  background: #e5484d;
  border-radius: 999px;
  transform: translateY(-50%);
}
.store-sidebar__item.active .store-sidebar__badge { color: #e5484d; background: #fff; }

@media (min-width: 992px) {
  body.storefront-page.sidebar-collapsed .store-sidebar__badge {
    inset-block-start: 2px;
    inset-inline-start: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    font-size: 8px;
    border: 2px solid #fff;
    transform: none;
  }
}