@media (max-width: 768px) {
  /* Make the banner wrapper a positioning context */
  .banner-wrapper {
    position: relative;
  }

  /* Move the content box to the bottom on mobile */
  .py-6.md\:py-0.w-full.px-4.md\:px-16 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 2;
    margin-top: auto;
    margin-bottom: 0;
  }

  /* Center the inner container and its content */
  .py-6.md\:py-0.w-full.px-4.md\:px-16 .theme-container {
    margin-inline: auto;
    align-items: center !important;
    text-align: center !important;
  }

  /* Center the text block and the button row */
  .py-6.md\:py-0.w-full.px-4.md\:px-16 .theme-container > div {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  /* Center the headings and paragraph text */
  .py-6.md\:py-0.w-full.px-4.md\:px-16 h2,
  .py-6.md\:py-0.w-full.px-4.md\:px-16 p {
    text-align: center;
    width: 100%;
  }

  /* Center the "Shop Now" button horizontally */
  .py-6.md\:py-0.w-full.px-4.md\:px-16 .flex.gap-4 {
    justify-content: center;
    width: 100%;
  }

  /* تصغير صور قسم الأقسام في الصفحة الرئيسية */




.embla__slide a.group.flex.flex-col.gap-4 {
  max-width: 140px;
}

.embla__slide a.group.flex.flex-col.gap-4 .overflow-hidden.rounded {
  max-width: 180px;
}



.embla__slide a.group.flex.flex-col.gap-4 h3 {
  text-align: center;
  font-size: 1rem;
}

[section-id="1e19c622-b5cb-4d9b-a6f8-b20de06e6cc0"] .embla__slide {
  flex: 0 0 155px !important;
}

footer#footer {
    text-align: center;
}

footer#footer * {
    justify-content: center;
}

footer img.block.md\:hidden {
    margin: auto;
}
}

@media (min-width: 768px) {
[section-id="1e19c622-b5cb-4d9b-a6f8-b20de06e6cc0"] .embla {
    --slide-size: 355px;
}
}
/* ============================================
   متغيرات الـ Theme الأساسية
   ============================================ */
:root {
  --font-family: 'IBM Plex Sans Arabic', sans-serif;
  --background: #FFFFFF;
  --foreground: #111111;
  --primary: #000000;
  --primary-foreground: #FFFFFF;
  --secondary: #F5F5F5;
  --muted: #6B6B6B;
  --accent: #F0822B;
  --border: #DDDDDD;
  --input: #D1D1D1;
  --ring: #000000;
  --radius: 4px;
  --cols-mobile: 2;
  --cols-desktop: 4;
}

/* ============================================
   الخط العام للموقع
   ============================================ */
body, html {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* ============================================
   الهيدر (Header): خلفية سوداء + نص أبيض
   نستثني الـ dialog المتداخل (القائمة الجانبية)
   ============================================ */
header {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-bottom-color: #333333 !important;
}

header > *:not(dialog):not([role="dialog"]),
header > *:not(dialog):not([role="dialog"]) * {
  color: #FFFFFF !important;
}

header > *:not(dialog):not([role="dialog"]) svg,
header > *:not(dialog):not([role="dialog"]) svg * {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

header > *:not(dialog):not([role="dialog"]) svg path[fill]:not([fill="none"]) {
  fill: #FFFFFF !important;
}

header > *:not(dialog):not([role="dialog"]) input,
header > *:not(dialog):not([role="dialog"]) [role="searchbox"] {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border-color: #444444 !important;
}

header > *:not(dialog):not([role="dialog"]) input::placeholder {
  color: #BBBBBB !important;
}

/* الإبقاء على الأزرار المميزة (Accent) باللون البرتقالي */
header [class*="bg-accent"],
header [class*="bg-primary"] {
  background-color: #F0822B !important;
  color: #000000 !important;
}

/* ============================================
   القائمة الجانبية (Side Drawer / Dialog)
   ============================================ */
header dialog .bg-background,
header [role="dialog"] .bg-background,
dialog[open] .bg-background {
  background-color: #000000 !important;
}

header dialog a,
header dialog button,
header dialog span,
header dialog p,
header dialog div,
header dialog li,
header dialog h1,
header dialog h2,
header dialog h3,
header dialog h4,
dialog[open] a,
dialog[open] button,
dialog[open] span,
dialog[open] p,
dialog[open] li {
  color: #FFFFFF !important;
}

header dialog svg,
header dialog svg *,
dialog[open] svg,
dialog[open] svg * {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

header dialog svg path[fill]:not([fill="none"]),
dialog[open] svg path[fill]:not([fill="none"]) {
  fill: #FFFFFF !important;
}

header dialog a:hover,
dialog[open] a:hover {
  color: #F0822B !important;
  background-color: #111111 !important;
}

header dialog [class*="border"],
dialog[open] [class*="border"] {
  border-color: #333333 !important;
}

header dialog input,
dialog[open] input {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border-color: #444444 !important;
}

header dialog input::placeholder,
dialog[open] input::placeholder {
  color: #BBBBBB !important;
}

/* ============================================
   الفوتر (Footer): خلفية سوداء + نص أبيض
   ============================================ */
footer {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

footer *,
footer a,
footer span,
footer p,
footer h1,
footer h2,
footer h3,
footer h4,
footer button,
footer li,
footer div,
footer label {
  color: #FFFFFF !important;
}

footer svg,
footer svg * {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

footer svg path[fill]:not([fill="none"]) {
  fill: #FFFFFF !important;
}

footer a:hover {
  color: #F0822B !important;
  text-decoration: underline;
}

footer hr,
footer [class*="border"] {
  border-color: #333333 !important;
}

footer input {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border-color: #444444 !important;
}

footer input::placeholder {
  color: #BBBBBB !important;
}

.btn-filled {
    border-color: #ff2f30;
    background-color: #fe2f2e;
    color: var(--primary-foreground);
}

/* جعل سلايد البنر يحتوي على عناصر بشكل نسبي لوضع الزر في الأسفل */
.section-carousel .embla__slide {
  position: relative;
  min-height: 500px; /* عدّل الارتفاع حسب الحاجة */
}

/* الحاوية الداخلية للنص والزر */
.section-carousel .embla__slide .theme-container {
  padding-bottom: 90px; /* مساحة للزر في الأسفل */
}

/* إخفاء div الذي يحتوي الزر من مكانه الأصلي ووضعه في الأسفل بمنتصف الشاشة */
.section-carousel .embla__slide .flex.gap-4 {
  position: absolute;
  bottom: 30px;          /* المسافة من أسفل البنر */
  left: 50%;             /* بدء التوسيط */
  transform: translateX(-50%); /* توسيط دقيق */
  right: auto;
  margin: 0;
  z-index: 5;
  justify-content: center;
}

/* تنسيق الزر نفسه ليكون واضحاً وفي المنتصف */
.section-carousel .embla__slide .btn.btn-filled.btn-lg {
  display: inline-block;
  text-align: center;
  padding: 12px 40px;
  font-size: 1.1rem;
  border-radius: 8px;
}

/* للموبايل */
@media (max-width: 768px) {
  .section-carousel .embla__slide .flex.gap-4 {
    bottom: 55px;
    width: auto;
  }
  .section-carousel .embla__slide {
    min-height: 420px;
  }
}

.bg-primary.text-primary-foreground.overflow-hidden {
    background-color: #ff3130;
}

.bottom-8 {
    bottom: 5px;
}

.embla__slide .group.flex.flex-col.gap-4 > .overflow-hidden.rounded img {   width: 180px;   height: 225px;   object-fit: cover; }
.embla__slide a.group.flex.flex-col.gap-4 img {   width: 180px;   height: 225px;   object-fit: cover; }
.embla__slide .group.flex.flex-col.gap-4 > .overflow-hidden.rounded {   max-width: 180px;   margin-left: auto;   margin-right: auto; }