/* ============================================================
   دار المحاشي — dm-theme.css
   CSS مخصّص يطابق التصميم الأصلي (يُحمَّل فوق Tailwind)
   جميع المتغيّرات والكلاسات بادئتها dm- لتجنّب التعارض
   ============================================================ */

/* ── 1. TOKENS ── */
:root {
  --c-primary:      #435524;
  --c-primary-dark: #36461C;
  --c-secondary:    #737949;
  --c-cream:        #FEF7DF;
  --c-cream-200:    #FBF0CC;
  --c-cream-300:    #F4E6B8;
  --c-surface:      #FFFDF6;
  --c-ink:          #2A2E1B;
  --c-ink-soft:     #5A5E4A;
  --dm-muted:       #8C8F7A;
  --c-line:         #E7E1C8;
  --c-gold:         #C9A24B;
  --c-success:      #4E7A3A;
  --c-danger:       #B23A2E;
  --font-display:   'The Year of The Camel', 'IBM Plex Sans Arabic', sans-serif;
  --font-body:      'IBM Plex Sans Arabic', system-ui, sans-serif;
  --dm-ease:        cubic-bezier(.22,.61,.36,1);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sh-sm: 0 2px 8px rgba(67,85,36,.06);
  --sh-md: 0 8px 24px rgba(67,85,36,.10);
  --sh-lg: 0 18px 48px rgba(67,85,36,.14);
}

/* ── RESET للعناصر المخصّصة فقط ── */
.dm-header, .dm-footer, .dm-hero, .dm-announce,
.dm-nav, .dm-drawer, .dm-bottom-nav, .dm-why, .dm-cta-banner,
.dm-feature-strip, .dm-steps, .dm-section-head,
[class^="dm-btn"], [class^="dm-icon"] {
  box-sizing: border-box;
}

/* إعادة ضبط الخلفية للصفحة كلها */
body { background: var(--c-cream) !important; font-family: var(--font-body); color: var(--c-ink); }

/* تكبير الخط عاماً بدرجة ونص (دار المحاشي) — يكبّر كل النصوص المبنية على rem */
html { font-size: 17.5px; }
/* منع التجاوز الأفقي على صفحة السلة فقط (لا يؤثّر على العناصر الثابتة في بقية الصفحات) */
body[data-template="cart_page"] #main,
body[data-template="checkout"] #main { overflow-x: clip; }

/* ── 2. LAYOUT ── */
.dm-container { width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--sp-4); }
.dm-section    { padding-block: var(--sp-8); }
.dm-section-sm { padding-block: var(--sp-6); }

/* ── 3. ANNOUNCE BAR ── */
.dm-announce {
  background: var(--c-primary);
  color: var(--c-cream);
  text-align: center;
  font-size: .875rem;
  padding: 8px var(--sp-4);
  font-family: var(--font-body);
}
.dm-announce strong { color: var(--c-gold); }

/* ── 4. HEADER ── */
.dm-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
  font-family: var(--font-body);
}
.dm-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: var(--sp-4);
}
.dm-header__start { display: flex; align-items: center; gap: var(--sp-2); }

/* Brand */
.dm-brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.dm-brand__mark {
  width:40px; height:40px; border-radius:50%;
  background:var(--c-primary); color:var(--c-cream);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; flex:none;
}
.dm-brand__logo { height:52px; width:auto; object-fit:contain; max-width:170px; }
.dm-footer .dm-brand__logo { height:48px; }
.dm-brand__text { display:flex; flex-direction:column; }
.dm-brand__name { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--c-primary); line-height:1.1; }
.dm-brand__tag  { font-size:10px; color:var(--c-secondary); letter-spacing:.12em; }
.dm-footer__brand-name { color:var(--c-cream) !important; }

/* Nav */
.dm-nav {
  display:none; gap:2px; align-items:center;
  flex:1 1 auto; min-width:0; justify-content:center;
  overflow-x:auto; scrollbar-width:none;            /* أمان: تمرير أفقي بدل الالتفاف إن زادت العناصر */
}
.dm-nav::-webkit-scrollbar { display:none; }
.dm-nav__link {
  padding:8px 11px; border-radius:var(--r-pill);
  font-weight:500; color:var(--c-ink); text-decoration:none;
  font-size:.9rem; white-space:nowrap; flex:none;    /* كل عنصر في سطر واحد دائماً */
  transition:background .18s, color .18s;
}
.dm-nav__link:hover, .dm-nav__link.is-active {
  background:var(--c-cream-200); color:var(--c-primary);
}
/* على الشاشات الأوسع: مسافات أمريَح وخط أكبر قليلاً */
@media (min-width: 1280px) {
  .dm-nav { gap:4px; }
  .dm-nav__link { padding:9px 14px; font-size:.95rem; }
}

/* Searchbar */
.dm-searchbar {
  display:none; flex:1; max-width:400px; position:relative;
  align-items:center;
}
.dm-searchbar__btn {
  width:100%; padding:11px 44px 11px 16px;
  border-radius:var(--r-pill); border:1.5px solid var(--c-line);
  background:var(--c-surface); color:var(--dm-muted);
  text-align:right; cursor:pointer; font-size:.9rem;
  font-family:var(--font-body);
  transition:border-color .18s;
}
.dm-searchbar__btn:hover { border-color:var(--c-secondary); }

/* Header actions */
.dm-header__actions { display:flex; align-items:center; gap:4px; }
.dm-icon-btn {
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--c-ink); background:none; border:none;
  cursor:pointer; position:relative;
  transition:background .18s;
  text-decoration:none;
}
.dm-icon-btn:hover { background:var(--c-cream-200); }
/* حساب العميل: زر واحد فقط حسب حالة الدخول (يبدّله JS عبر كلاس hidden) */
.dm-account { display:none; align-items:center; gap:4px; }
.dm-icon-btn.hidden { display:none !important; }   /* يتغلّب على display:grid حتى يخفي زر الملف الشخصي افتراضياً */
@media (min-width: 860px) { .dm-account { display:flex; } }
.dm-cart-count, .dm-bottom-nav__count {
  position:absolute; top:4px; inset-inline-end:4px;
  min-width:18px; height:18px; padding:0 3px;
  border-radius:var(--r-pill);
  background:var(--c-danger); color:#fff;
  font-size:11px; font-weight:700;
  display:grid; place-items:center;
}
.dm-menu-toggle { display:grid; }

/* ── 5. DRAWER ── */
.dm-drawer {
  height:100%; background:var(--c-cream);
  display:flex; flex-direction:column;
  font-family:var(--font-body);
}
.dm-drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4); border-bottom:1px solid var(--c-line);
}
.dm-drawer__nav { padding:var(--sp-4); display:flex; flex-direction:column; gap:4px; }
.dm-drawer__nav a {
  padding:14px 16px; border-radius:var(--r-md);
  font-weight:500; font-size:1.05rem; color:var(--c-ink);
  text-decoration:none; transition:background .18s, color .18s;
}
.dm-drawer__nav a:hover { background:var(--c-cream-200); color:var(--c-primary); }
.dm-drawer__foot { margin-top:auto; padding:var(--sp-4); border-top:1px solid var(--c-line); }

/* ── 6. BOTTOM NAV ── */
.dm-bottom-nav {
  position:fixed; bottom:0; inset-inline:0; z-index:45;
  background:var(--c-surface); border-top:1px solid var(--c-line);
  display:flex; justify-content:space-around;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(67,85,36,.06);
  font-family:var(--font-body);
}
.dm-bottom-nav a {
  display:flex; flex-direction:column; align-items:center;
  gap:2px; font-size:11px; color:var(--dm-muted);
  padding:6px 10px; border-radius:var(--r-md);
  text-decoration:none; position:relative;
  transition:color .18s;
}
.dm-bottom-nav a.is-active, .dm-bottom-nav a:hover { color:var(--c-primary); }
body { padding-bottom:72px; }

/* ── 7. BUTTONS ── */
.dm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:14px 26px; border-radius:var(--r-pill);
  font-weight:600; font-size:1rem; line-height:1;
  text-decoration:none; border:none; cursor:pointer;
  transition:transform .18s var(--dm-ease), background .28s, box-shadow .28s;
  white-space:nowrap; font-family:var(--font-body);
}
.dm-btn:active { transform:translateY(1px) scale(.99); }
.dm-btn--primary { background:var(--c-primary); color:var(--c-cream); box-shadow:var(--sh-sm); }
.dm-btn--primary:hover { background:var(--c-primary-dark, #36461C); box-shadow:var(--sh-md); }
.dm-btn--ghost { background:transparent; color:var(--c-primary); border:1.5px solid var(--c-primary); }
.dm-btn--ghost:hover { background:var(--c-primary); color:var(--c-cream); }
.dm-btn--gold { background:var(--c-gold); color:#3a2e0e; }
.dm-btn--gold:hover { background:#b8912d; }
.dm-btn--lg { padding:17px 34px; font-size:1.05rem; }
.dm-btn--block { width:100%; }

/* ── 8b. HERO SLIDER (سلايدر كامل العرض) ── */
.dm-btn--ghost-light { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.75); backdrop-filter:blur(4px); }
.dm-btn--ghost-light:hover { background:#fff; color:var(--c-primary); }
.dm-herox { position:relative; width:100%; overflow:hidden; }
.dm-herox__embla { position:relative; width:100%; overflow:hidden; }
.dm-herox__container { height:100%; }
.dm-herox__slide { position:relative; display:flex; align-items:center; overflow:hidden; }
.dm-herox__bg { position:absolute; inset:0; z-index:0; }
.dm-herox__bg picture { display:block; width:100%; height:100%; }
.dm-herox__bg img { width:100%; height:100%; object-fit:cover; display:block; }
.dm-herox__overlay { position:absolute; inset:0; background:#2A2E1B; }
.dm-herox__content { position:relative; z-index:2; width:100%; }
.dm-herox__inner { display:flex; flex-direction:column; gap:16px; max-width:620px; padding-block:32px; }
.dm-herox--start  .dm-herox__inner { text-align:start;  align-items:flex-start; margin-inline-end:auto; }
.dm-herox--center .dm-herox__inner { text-align:center; align-items:center; margin-inline:auto; }
.dm-herox--end    .dm-herox__inner { text-align:end;    align-items:flex-end; margin-inline-start:auto; }
.dm-herox__eyebrow { color:var(--c-cream); font-weight:700; letter-spacing:.12em; font-size:1.05rem; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.45); }
@media (min-width:768px){
  .dm-herox__eyebrow { font-size:1.3rem; }
  /* إزاحة نصوص البانر قليلاً لليسار لتغطّي الصورة أكثر */
  .dm-herox--start .dm-herox__inner { transform: translateX(-70px); }
}
.dm-herox__title { font-family:var(--font-display); color:#fff; font-size:clamp(2rem,5vw,3.6rem); line-height:1.12; font-weight:700; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.dm-herox__sub { color:rgba(255,255,255,.92); font-size:clamp(1rem,2vw,1.15rem); max-width:46ch; line-height:1.7; text-shadow:0 1px 12px rgba(0,0,0,.45); }
.dm-herox__cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.dm-herox__dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:6px; }

/* طبقة الخلفية المموّهة — مخفية افتراضياً، تظهر فقط في وضع «احتواء» */
.dm-herox__blur { display:none; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; }

/* وضع «احتواء بارتفاع ثابت» — ارتفاع ثابت + الصورة كاملة بلا قص + فراغات تملؤها نسخة مموّهة */
.dm-herox--fit-contain .dm-herox__bg { background: var(--c-cream-200); }
.dm-herox--fit-contain .dm-herox__blur { display:block; filter:blur(26px) saturate(1.15); transform:scale(1.15); }
.dm-herox--fit-contain .dm-herox__bg picture { position:relative; z-index:1; }
.dm-herox--fit-contain .dm-herox__bg img { object-fit:contain !important; position:relative; z-index:1; }

/* وضع «إظهار الصورة كاملة» — الارتفاع يتبع نسبة الصورة، بلا قصّ */
.dm-herox--fit-full .dm-herox__embla,
.dm-herox--fit-full .dm-herox__container { height:auto !important; }
.dm-herox--fit-full .embla__slide { display:block !important; min-height:0 !important; }
.dm-herox--fit-full .dm-herox__bg { position:relative !important; inset:auto !important; }
.dm-herox--fit-full .dm-herox__bg picture { position:static !important; display:block; width:100%; }
.dm-herox--fit-full .dm-herox__bg img { position:static !important; width:100%; height:auto !important; object-fit:contain !important; display:block; }
.dm-herox--fit-full .dm-herox__content { position:absolute; inset:0; display:flex; align-items:center; }

/* تصغير نصوص وأزرار البانر على الجوال (يناسب الارتفاعات القصيرة) */
@media (max-width:767px){
  .dm-herox__inner { gap:8px; padding-block:16px; max-width:none; }
  .dm-herox__eyebrow { font-size:.66rem; letter-spacing:.1em; }
  .dm-herox__title { font-size:1.35rem; line-height:1.2; }
  .dm-herox__sub { font-size:.8rem; line-height:1.5; max-width:36ch; }
  .dm-herox__cta { gap:8px; margin-top:6px; }
  .dm-herox__cta .dm-btn { padding:9px 16px; font-size:.8rem; }
}

/* ── 8. HERO (النسخة القديمة — احتياط) ── */
.dm-hero { padding-block:var(--sp-7); overflow:hidden; }
.dm-hero__inner {
  display:grid; gap:var(--sp-5); align-items:center;
}
.dm-hero__copy { display:flex; flex-direction:column; gap:var(--sp-4); }
.dm-hero__title {
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 7vw, 4rem);
  line-height:1.1; font-weight:700; color:var(--c-primary);
  letter-spacing:-.01em;
}
.dm-hero__title em { color:var(--c-secondary); font-style:normal; }
.dm-hero__sub { font-size:1.1rem; color:var(--c-ink-soft); max-width:46ch; }
.dm-hero__cta { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-2); }
.dm-hero__trust { display:flex; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-4); }
.dm-hero__trust div { display:flex; flex-direction:column; }
.dm-hero__trust b { font-family:var(--font-display); font-size:1.4rem; color:var(--c-primary); }
.dm-hero__trust span { font-size:.875rem; color:var(--dm-muted); }
.dm-hero__media {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--sh-lg);
}
.dm-hero__media img { width:100%; height:100%; object-fit:cover; }
.dm-hero__float {
  position:absolute; bottom:18px; inset-inline-start:18px;
  background:var(--c-surface); border-radius:var(--r-lg);
  padding:12px 16px; box-shadow:var(--sh-md);
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:.875rem;
}
.dm-hero__float b { display:block; font-size:.95rem; color:var(--c-ink); }
.dm-hero__float span { font-size:.8rem; color:var(--dm-muted); }
.dm-hero__float-icon {
  width:38px; height:38px; border-radius:50%;
  background:var(--c-cream-300); display:grid; place-items:center;
  color:var(--c-primary); flex:none;
}

/* ── 9b. CIRCLE CATEGORIES (تصنيفات دائرية مع Peek لإظهار المزيد) ── */
.dm-circles-wrap { position:relative; }
.dm-circles-embla { overflow:hidden; }
.dm-circles-track { --cgap:16px; display:flex; gap:var(--cgap); align-items:flex-start; }
/* عرض الشريحة نسبي: تظهر 3.5 دائرة (3 كاملة + نصف يوضّح وجود المزيد) */
.dm-circle-slide { flex:0 0 calc((100% - 2.5 * var(--cgap)) / 3.5); }
.dm-circle { display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; width:100%; }
.dm-circle__img {
  width:100%; aspect-ratio:1/1; height:auto; border-radius:50%; overflow:hidden;
  background:var(--c-cream-200); border:3px solid var(--c-surface);
  box-shadow:var(--sh-md); transition:transform .28s var(--dm-ease), box-shadow .28s;
}
.dm-circle:hover .dm-circle__img { transform:translateY(-4px) scale(1.04); box-shadow:var(--sh-lg); }
.dm-circle__img img { width:100%; height:100%; object-fit:cover; display:block; }
.dm-circle__title { font-family:var(--font-display); font-weight:600; color:var(--c-ink); font-size:.92rem; text-align:center; line-height:1.3; }
.dm-circles-arrow {
  position:absolute; top:40%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--sh-md);
  display:none; place-items:center; color:var(--c-primary); cursor:pointer; z-index:4;
}
.dm-circles-arrow:hover { background:var(--c-cream-200); }
.dm-circles-arrow.embla__next { inset-inline-start:-6px; }   /* السهم التالي على اليسار في RTL */
.dm-circles-arrow.embla__prev { inset-inline-end:-6px; }     /* السابق على اليمين */
.dm-circles-arrow[disabled] { opacity:.35; cursor:default; }
/* تابلت: 4.5 دائرة */
@media (min-width:640px){
  .dm-circles-track { --cgap:20px; }
  .dm-circle-slide { flex:0 0 calc((100% - 3.5 * var(--cgap)) / 4.5); }
}
/* ديسكتوب: دوائر بحجم ثابت أنيق + أسهم تنقّل (تظهر الأسهم/النصف عند وجود المزيد) */
@media (min-width:1024px){
  .dm-circles-track { --cgap:28px; }
  .dm-circle-slide { flex:0 0 auto; }
  .dm-circle { width:160px; }
  .dm-circle__img { width:160px; height:160px; aspect-ratio:auto; max-width:none; }
  .dm-circle__title { font-size:1rem; }
  .dm-circles-arrow { display:grid; }
}

/* ── 9c. IMAGE BANNERS (بنر صورتين) ── */
.dm-banners { display:grid; gap:16px; grid-template-columns:1fr; }
.dm-banner {
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r-lg); background:var(--c-cream-200); box-shadow:var(--sh-sm);
}
.dm-banner img { transition:transform .45s var(--dm-ease); }
.dm-banner:hover img { transform:scale(1.045); }

/* النِسب الثابتة عبر «padding-hack» — مضمون 100% داخل الـ Grid وكل المتصفحات */
.dm-banner--wide::before     { content:""; display:block; padding-top:43.5%; }  /* 2.3:1 */
.dm-banner--standard::before { content:""; display:block; padding-top:56.25%; } /* 16:9 */
.dm-banner--square::before   { content:""; display:block; padding-top:100%; }   /* 1:1 */

/* الصورة تملأ الحاوية بالكامل (cover) مهما كان حجمها — تُقصّ الأطراف دون تشويه */
.dm-banner--wide > *, .dm-banner--standard > *, .dm-banner--square > * {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
}
.dm-banner--wide img, .dm-banner--standard img, .dm-banner--square img,
.dm-banner--wide picture, .dm-banner--standard picture, .dm-banner--square picture {
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important; display:block !important;
}

/* وضع «تلقائي»: الصورة بارتفاعها الطبيعي (مضمون بـ !important وتموضع ساكن) */
.dm-banner--auto { background:var(--c-cream-200); }
.dm-banner--auto > picture, .dm-banner--auto > img { position:static !important; inset:auto !important; }
.dm-banner--auto picture { display:block !important; width:100% !important; height:auto !important; }
.dm-banner--auto img { display:block !important; width:100% !important; height:auto !important; object-fit:contain !important; position:static !important; }

@media (min-width:768px){
  .dm-banners--2 { grid-template-columns:1fr 1fr; }
  .dm-banners--3 { grid-template-columns:repeat(3,1fr); }
}

/* ── 9. FEATURE STRIP ── */
.dm-feature-strip {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);
}
.dm-feature-strip__item {
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-md); padding:var(--sp-4);
  text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-2);
  font-family:var(--font-body);
}
.dm-feature-strip__icon {
  width:48px; height:48px; border-radius:50%;
  background:var(--c-cream-200); color:var(--c-primary);
  display:grid; place-items:center; flex:none;
}
.dm-feature-strip__item b { font-family:var(--font-display); font-size:1rem; color:var(--c-ink); }
.dm-feature-strip__item span { font-size:.875rem; color:var(--dm-muted); }

/* ── 10. SECTION HEAD ── */
.dm-section-head { text-align:center; max-width:640px; margin:0 auto var(--sp-6); }
.dm-section-head h2 { color:var(--c-primary); }
.dm-section-head p { color:var(--c-ink-soft); margin-top:var(--sp-2); }
.dm-eyebrow {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:.875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-secondary); font-weight:600; margin-bottom:var(--sp-2);
  font-family:var(--font-body);
}
.dm-eyebrow::before, .dm-eyebrow::after {
  content:""; width:28px; height:1px;
  background:currentColor; opacity:.5;
}

/* ── 11. WHY US ── */
.dm-why {
  background:var(--c-primary); border-radius:var(--r-xl);
  padding:var(--sp-7) var(--sp-5);
}
.dm-why__grid { display:grid; gap:var(--sp-5); }
.dm-why__item { display:flex; gap:var(--sp-3); align-items:flex-start; }
.dm-why__icon {
  width:52px; height:52px; border-radius:var(--r-md);
  background:rgba(254,247,223,.12); display:grid; place-items:center;
  color:var(--c-cream); flex:none;
}
.dm-why__item h3 { color:var(--c-cream); margin-bottom:4px; font-family:var(--font-display); font-size:1.1rem; }
.dm-why__item p  { color:var(--c-cream-300, #F4E6B8); font-size:.875rem; }

/* ── 12. STEPS ── */
.dm-steps { display:grid; gap:var(--sp-5); counter-reset:step; margin-top:var(--sp-5); }
.dm-step  { display:flex; gap:var(--sp-4); align-items:flex-start; }
.dm-step__num {
  width:52px; height:52px; border-radius:50%;
  background:var(--c-cream-300); color:var(--c-primary);
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  display:grid; place-items:center; flex:none;
}
.dm-step h3 { margin-bottom:4px; color:var(--c-ink); font-family:var(--font-display); font-size:1.05rem; }
.dm-step p  { color:var(--c-ink-soft); font-size:.875rem; }

/* ── 13. CTA BANNER ── */
.dm-cta-banner {
  border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  padding:var(--sp-8) var(--sp-5); text-align:center; color:var(--c-cream);
}
.dm-cta-banner h2 { color:var(--c-cream); font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem); }
.dm-cta-banner p  { color:rgba(254,247,223,.8); max-width:52ch; margin:var(--sp-3) auto var(--sp-5); }

/* ── 14. FOOTER ── */
.dm-footer {
  background:#36461C; color:rgba(254,247,223,.75);
  padding-block:var(--sp-7) var(--sp-5);
  margin-top:var(--sp-8);
  font-family:var(--font-body);
}
/* شريط المميزات العلوي */
.dm-footer__features {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);
  padding-block:var(--sp-6);
  border-bottom:1px solid rgba(254,247,223,.14);
  margin-bottom:var(--sp-6);
}
.dm-footer__feat { display:flex; align-items:center; gap:12px; }
.dm-footer__feat svg { width:30px; height:30px; color:var(--c-gold); flex:none; }
.dm-footer__feat b { display:block; color:var(--c-cream); font-family:var(--font-display); font-size:.98rem; }
.dm-footer__feat span { font-size:.78rem; color:rgba(254,247,223,.6); }
@media (min-width:860px){ .dm-footer__features { grid-template-columns:repeat(4,1fr); gap:var(--sp-5); } }

.dm-footer__grid { display:grid; gap:var(--sp-6); }
.dm-footer__heading {
  color:var(--c-cream); font-family:var(--font-display);
  font-size:1.1rem; margin-bottom:var(--sp-3);
}
.dm-footer__links { display:flex; flex-direction:column; gap:10px; }
.dm-footer__links a, .dm-footer__links span { font-size:.875rem; text-decoration:none; transition:color .18s; }
.dm-footer__links a:hover { color:var(--c-cream); }
.dm-footer p { font-size:.875rem; line-height:1.8; max-width:34ch; }
.dm-footer__social { display:flex; gap:10px; margin-top:var(--sp-3); }
.dm-footer__social a {
  width:40px; height:40px; border-radius:50%;
  background:rgba(254,247,223,.1); display:grid; place-items:center;
  color:var(--c-cream); text-decoration:none; transition:background .18s;
}
.dm-footer__social a:hover { background:rgba(254,247,223,.22); }
.dm-footer__pay-label { font-size:.8rem; margin-top:var(--sp-3); margin-bottom:var(--sp-2); }
.dm-footer__pay { display:flex; gap:8px; flex-wrap:wrap; }
.dm-footer__pay span {
  background:var(--c-cream); color:var(--c-primary);
  font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:6px;
}
.dm-footer__bottom {
  border-top:1px solid rgba(254,247,223,.14);
  margin-top:var(--sp-6); padding-top:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2);
  align-items:center; text-align:center; font-size:.75rem;
}
.dm-footer__bottom-logo img { height:34px; width:auto; opacity:.9; object-fit:contain; }

/* ── 15. RESPONSIVE ── */
.dm-hide-mobile  { display:none !important; }
.dm-show-mobile  { display:grid !important; }

@media (min-width: 860px) {
  .dm-hide-mobile  { display:revert !important; }
  .dm-show-mobile  { display:none !important; }
  .dm-hide-desktop { display:none !important; }
  .dm-menu-toggle  { display:none !important; }
  .dm-nav          { display:flex !important; }
  .dm-searchbar    { display:flex !important; }
  .dm-bottom-nav   { display:none !important; }
  body { padding-bottom:0 !important; }

  .dm-hero__inner { grid-template-columns:1.05fr 1fr; padding-block:var(--sp-9); }
  .dm-feature-strip { grid-template-columns:repeat(4,1fr); }
  .dm-why__grid { grid-template-columns:repeat(3,1fr); }
  .dm-steps { grid-template-columns:repeat(4,1fr); }
  .dm-step { flex-direction:column; text-align:center; align-items:center; }
  .dm-footer__grid { grid-template-columns:1.6fr 1fr 1fr 1.2fr; }
  .dm-footer__bottom { flex-direction:row; justify-content:space-between; }
}

/* ── Tailwind overrides: صفحات المنتجات والسلة ── */
/* إعادة ضبط خلفية صفحات الثيم الأخرى لتتناسق */
.bg-secondary { background-color: var(--c-cream-200) !important; }
.bg-background { background-color: var(--c-cream) !important; }
.text-foreground { color: var(--c-ink) !important; }
.text-muted { color: var(--dm-muted) !important; }
.border-border, .border-border-light { border-color: var(--c-line) !important; }

/* أزرار الثيم الرسمي: تطبيق ألوان دار المحاشي */
.btn-primary, [class*="btn-primary"] { background-color: var(--c-primary) !important; color: var(--c-cream) !important; }
.btn-primary:hover { background-color: var(--c-primary-dark, #36461C) !important; }

/* إخفاء زر البحث الزائد المضمّن من مكوّن الثيم (نستخدم بحث الهيدر فقط) */
[data-search-trigger]:not(.dm-icon-btn):not(.dm-searchbar__btn) { display:none !important; }
/* استبدال شريط البحث المضغوط بأيقونة أنيقة (لتجنّب التشوّه مع القائمة الطويلة) */
.dm-searchbar { display:none !important; }

/* إخفاء نص البانر على الجوال */
@media (max-width:767px){
  .dm-herox--notext-mobile .dm-herox__content { display:none !important; }
}

/* إخفاء زر GetButton (تطبيق واتساب طرف ثالث) — المعرّف الفعلي gb-widget */
[id^="gb-widget"], [id*="gb-widget" i],
[id*="getbutton" i], [class*="getbutton" i],
iframe[src*="getbutton"], a[href*="getbutton.io"], a[href*="getbutton.me"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* زر واتساب العائم */
.dm-wa {
  position:fixed; inset-inline-end:18px; bottom:88px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  transition:transform .2s var(--dm-ease), box-shadow .2s;
}
.dm-wa:hover { transform:scale(1.08); box-shadow:0 8px 26px rgba(37,211,102,.55); }
@media (min-width:860px){ .dm-wa { bottom:24px; } }

/* ════════════════════════════════════════════════════════════
   بطاقة المنتج — إعادة تصميم فاخر (دار المحاشي)
   ════════════════════════════════════════════════════════════ */

/* خلفية الصفحة خلف البطاقات: تدرّج كريمي خفيف جداً */
body { background: linear-gradient(180deg, #FEF7DF 0%, #F8F3E7 100%) !important; background-attachment: fixed; }

/* الكرت */
[data-product-card] {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFBF2 0%, #F7F1E3 100%);
  border: 1px solid rgba(67,85,36,0.12);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(67,85,36,0.06);
  padding: 12px;
  transition: border-color .25s var(--dm-ease), box-shadow .25s var(--dm-ease), transform .25s var(--dm-ease);
}
[data-product-card]:hover {
  border-color: #737949;
  box-shadow: 0 12px 26px rgba(67,85,36,0.10);
  transform: translateY(-3px);
}

/* منطقة الصورة — كبيرة، نظيفة، بلا زخارف خلفية */
[data-product-card] > a:first-of-type {
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 1 / 1; height: auto;
  background: #FFFDF8;
}
[data-product-card] > a:first-of-type img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
}
[data-grid="list"] [data-product-card] > a:first-of-type { aspect-ratio: auto; }

/* زر المفضلة — دائري أبيض أعلى الزاوية */
[data-product-card] .dm-wishlist {
  width: 38px; height: 38px; border-radius: 50%;
  background: #FFFFFF !important;
  border: 1px solid #E5E0D0 !important;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(67,85,36,0.08);
  color: var(--c-secondary);
  transition: transform .2s, color .2s;
}
[data-product-card] .dm-wishlist:hover { transform: scale(1.08); color: var(--c-sale); }
[data-product-card] .dm-wishlist svg { width: 18px; height: 18px; }

/* جسم الكرت */
[data-product-card] > div { padding-inline: 4px; }

/* اسم المنتج — أخضر داكن، عريض، سطران كحد أقصى */
.dm-prod-name {
  font-family: var(--font-display);
  color: #435524 !important;
  font-weight: 700; font-size: 1.02rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
.dm-prod-name a { color: inherit; text-decoration: none; }

/* الوصف القصير — زيتي فاتح، أصغر */
.dm-card-desc {
  color: #8A8F6B !important; font-size: .82rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* قسم السعر */
.dm-price-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dm-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dm-price {
  font-family: var(--font-display);
  color: #435524; font-weight: 700; font-size: 1.25rem; line-height: 1;
}
/* سعر التخفيض الحالي — أحمر ليبرز كعرض */
.dm-price--sale { color: #B23A2E; }
.dm-price--sale .dm-money__cur { color: #B23A2E; opacity: .85; }
/* سعر صفحة المنتج — حجم بارز فاخر */
.dm-price--xl { font-size: 2.1rem; }
@media (max-width:560px){ .dm-price--xl { font-size: 1.7rem; } }

/* صفّ ضمانات الثقة — مُزال نهائياً بطلب دار المحاشي (صفحة المنتج + النافذة السريعة) */
.dm-pdp-trust { display:none !important; }
.dm-pdp-trust--enabled { display:flex; flex-wrap:wrap; gap:14px 20px; margin-top:18px; padding-top:18px; border-top:1px solid var(--c-line); }
.dm-pdp-trust span { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--c-ink-soft); font-weight:500; }
.dm-pdp-trust svg { width:20px; height:20px; color:var(--c-success); flex:none; }

/* صفّ طمأنة السلة (أسفل زر الدفع) — مخفي على الجوال بطلب دار المحاشي */
.dm-cart-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 16px; padding:12px; background:var(--c-cream-200); border-radius:var(--r-md); }
@media (max-width:767px){ .dm-cart-trust { display:none !important; } }
.dm-cart-trust span { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--c-ink-soft); font-weight:500; }
.dm-cart-trust svg { width:17px; height:17px; color:var(--c-primary); flex:none; }

/* صفحة السلة (جوال): تصغير بوكس الكمية حتى تظهر أيقونة الحذف 🗑 والمفضّلة ♡ بجانبه */
@media (max-width: 1023px) {
  body[data-template="cart_page"] .qty-input-full {
    width: auto !important;
    max-width: 150px !important;
    flex: 0 1 auto !important;
  }
  body[data-template="cart_page"] .qty-input-full .qty-input-field {
    min-width: 2rem !important;
  }
  /* ضمان ظهور أيقونات إجراءات السلة (حذف/مفضّلة) بدل اقتصاصها */
  body[data-template="cart_page"] .qty-input-full ~ * { flex: 0 0 auto; }
}
.dm-price-old { color: var(--dm-muted); font-size: .9rem; text-decoration: line-through; }
.dm-discount-badge {
  align-self: flex-start;
  background: rgba(115,121,73,.12); color: #435524;
  font-size: .72rem; font-weight: 700;
  padding: 4px 9px; border-radius: 7px; line-height: 1; white-space: nowrap;
}

/* تنسيق فاخر للسعر: صحيح كبير + كسر صغير على نفس المستوى + عملة أنيقة */
.dm-price .dm-money__int  { font-size: 1em; line-height: 1; }
.dm-price .dm-money__frac { font-size: .6em; font-weight: 700; vertical-align: baseline; line-height: 1; }
.dm-price .dm-money__cur  { font-size: .62em; font-weight: 600; color: var(--c-secondary); margin-inline-start: 5px; display: inline-flex; align-items: center; }
.dm-price .dm-money__from { font-size: .58em; font-weight: 500; color: var(--dm-muted); }
/* رمز/أيقونة العملة (رمز الريال الجديد من زد) — حجم متناسق */
.dm-money__cur svg, .dm-money__cur img { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
/* السعر القديم (مشطوب) — نفس القاعدة بحجم أصغر على نفس المستوى */
.dm-price-old .dm-money__frac { font-size: .8em; vertical-align: baseline; }
.dm-price-old .dm-money__cur  { font-size: .82em; margin-inline-start: 3px; }

/* زر «أضف للسلة» — الـ CTA الأهم */
.dm-atc {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; margin-top: 12px;
  background: #435524; color: #FFFFFF !important;
  border: none; border-radius: 12px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
  transition: background .22s var(--dm-ease), transform .12s;
}
.dm-atc:hover { background: #737949; }
.dm-atc:active { transform: translateY(1px); }
.dm-atc__icon { flex: none; }
/* أزرار ثانوية داخل الكرت (تنبيهي/عداد) */
[data-product-card] .btn { border-radius: 12px; }

/* عدّاد الكمية داخل بطاقة المنتج: مضغوط ليبقى محتواه (− رقم +) ضمن الإطار ولا يخرج «+» */
[data-product-card] .qty-input { padding-inline: 6px !important; gap: 4px !important; height: 44px; }
[data-product-card] .qty-input-field { min-width: 1.5rem !important; }
[data-product-card] .qty-input-btn { width: 28px !important; height: 28px !important; }
@media (max-width: 767px) {
  .products-embla__slide .qty-input { padding-inline: 4px !important; gap: 2px !important; height: 40px; }
  .products-embla__slide .qty-input-btn { width: 26px !important; height: 26px !important; }
  .products-embla__slide .qty-input-field { min-width: 1.2rem !important; font-size: .85rem; }
}

/* عرض القائمة (list) */
[data-grid="list"] [data-product-card] { padding: 14px; }

/* تحسينات الجوال */
@media (max-width: 480px) {
  [data-product-card] { padding: 8px; border-radius: 14px; }
  .dm-prod-name { font-size: .92rem; }
  .dm-price { font-size: 1.1rem; }
  .dm-atc { height: 44px; font-size: .88rem; }
}

/* بطاقة مدمجة داخل كاروسيل المنتجات على الجوال (2.5 منتج) */
@media (max-width: 767px) {
  .products-embla__slide [data-product-card] { padding: 8px; border-radius: 13px; }
  .products-embla__slide .dm-card-desc { display: none; }
  .products-embla__slide .dm-prod-name { font-size: .82rem; min-height: 2.3em; line-height: 1.3; }
  .products-embla__slide .dm-price { font-size: 1rem; }
  .products-embla__slide .dm-discount-badge { display: none; }
  .products-embla__slide .dm-atc { height: 40px; font-size: .78rem; gap: 6px; border-radius: 10px; margin-top: 8px; }
  .products-embla__slide .dm-atc__icon { width: 16px; height: 16px; }
  .products-embla__slide .dm-wishlist { width: 30px; height: 30px; top: 7px; inset-inline-end: 7px; }
  .products-embla__slide .dm-wishlist svg { width: 15px; height: 15px; }
}