/* ==================================================
   ELMATJAR COLLECTION PAGE
   VERTICAL PREMIUM CATEGORY CARDS
================================================== */

main:has(.category_section_header) {
  --elmatjar-bg: #f3ecdf;
  --elmatjar-card: #fffaf3;
  --elmatjar-ink: #241b13;
  --elmatjar-muted: #766756;
  --elmatjar-gold: #b97a20;
  --elmatjar-light-gold: #d7b56c;
  --elmatjar-border: rgba(185, 122, 32, 0.18);

  background:
    radial-gradient(
      circle at 90% 4%,
      rgba(215, 181, 108, 0.18),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fffaf3 0%,
      #f3ecdf 100%
    );

  padding-top: 45px !important;
  padding-bottom: 80px !important;
}


/* ==================================================
   COLLECTION HEADER
================================================== */

main:has(.category_section_header) .category_section_header {
  width: min(100%, 1180px);
  margin: 0 auto 36px !important;
  padding: 28px 32px !important;

  border: 1px solid var(--elmatjar-border);
  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 250, 243, 0.72)
    );

  box-shadow:
    0 22px 60px rgba(95, 63, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

main:has(.category_section_header)
.category_section_header_title {
  margin: 0 !important;

  color: var(--elmatjar-ink) !important;

  font-size: clamp(30px, 3vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.2;
}

main:has(.category_section_header)
.category_section_header_title::before {
  content: "ALMATJARR COLLECTION";

  display: block;
  margin-bottom: 9px;

  color: var(--elmatjar-gold);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}


/* Sort button */

main:has(.category_section_header)
.category_section_header button {
  min-height: 48px;

  padding: 0 18px !important;

  color: var(--elmatjar-ink) !important;

  border: 1px solid rgba(185, 122, 32, 0.25) !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    0 8px 24px rgba(95, 63, 27, 0.06);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

main:has(.category_section_header)
.category_section_header button:hover {
  transform: translateY(-2px);

  border-color: rgba(185, 122, 32, 0.55) !important;
  background: #ffffff !important;
}


/* ==================================================
   REMOVE MOBILE HORIZONTAL CAROUSEL
================================================== */

main:has(.category_section_header)
.home_section_top_container
+ .md\:hidden {
  display: none !important;
}


/* ==================================================
   SHOW ONE CATEGORY VERSION ON ALL SCREENS
================================================== */

main:has(.category_section_header)
.hidden.md\:block {
  display: block !important;
}


/* Remove the empty default heading */

main:has(.category_section_header)
.home_section_top_container {
  display: none !important;
}


/* ==================================================
   DISABLE SWIPER LAYOUT
================================================== */

main:has(.category_section_header)
.carouselWrapper {
  width: min(100%, 1180px) !important;

  margin: 0 auto 55px !important;
}

main:has(.category_section_header)
.carouselWrapper .swiper {
  width: 100% !important;

  overflow: visible !important;
}

main:has(.category_section_header)
.carouselWrapper .swiper-wrapper {
  display: flex !important;
  flex-direction: column !important;

  gap: 20px !important;

  height: auto !important;

  transform: none !important;
  transition: none !important;
}

main:has(.category_section_header)
.carouselWrapper .swiper-slide {
  width: 100% !important;
  height: auto !important;

  margin: 0 !important;

  transform: none !important;
}


/* Hide carousel arrows */

main:has(.category_section_header)
.slider_buttons_container {
  display: none !important;
}


/* ==================================================
   PREMIUM VERTICAL CATEGORY CARD
================================================== */

main:has(.category_section_header)
.default_category_card {
  position: relative;

  display: grid !important;
  grid-template-columns: minmax(210px, 34%) 1fr;
  align-items: center;

  gap: clamp(24px, 4vw, 60px);

  width: 100%;
  min-height: 250px;

  padding: 18px;

  overflow: hidden;

  direction: rtl;
  text-align: right !important;

  border: 1px solid var(--elmatjar-border);
  border-radius: 30px;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(215, 181, 108, 0.20),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(255, 248, 237, 0.88)
    );

  box-shadow:
    0 24px 65px rgba(95, 63, 27, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

main:has(.category_section_header)
.default_category_card:hover {
  transform: translateY(-5px);

  border-color: rgba(185, 122, 32, 0.38);

  box-shadow:
    0 32px 80px rgba(95, 63, 27, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}


/* Decorative number */

main:has(.category_section_header)
.swiper-slide:nth-child(1)
.default_category_card::before {
  content: "01";
}

main:has(.category_section_header)
.swiper-slide:nth-child(2)
.default_category_card::before {
  content: "02";
}

main:has(.category_section_header)
.swiper-slide:nth-child(3)
.default_category_card::before {
  content: "03";
}

main:has(.category_section_header)
.swiper-slide:nth-child(4)
.default_category_card::before {
  content: "04";
}

main:has(.category_section_header)
.default_category_card::before {
  position: absolute;

  left: 28px;
  top: 20px;

  color: rgba(185, 122, 32, 0.13);

  font-size: clamp(55px, 7vw, 100px);
  font-weight: 900;
  line-height: 1;

  pointer-events: none;
}


/* ==================================================
   CATEGORY IMAGE
================================================== */

main:has(.category_section_header)
.default_category_card
> .relative.inline-flex {
  grid-column: 1;

  width: 100%;
  height: 215px;

  margin: 0 !important;

  overflow: hidden;

  border-radius: 22px !important;

  background: #f6efe5;

  box-shadow:
    0 14px 35px rgba(95, 63, 27, 0.09);
}

main:has(.category_section_header)
.default_category_card_img {
  width: 100% !important;
  height: 100% !important;

  aspect-ratio: auto !important;

  border-radius: 22px;

  background: #f6efe5 !important;

  object-fit: cover !important;

  transition:
    transform 0.7s cubic-bezier(.22, 1, .36, 1) !important;
}

main:has(.category_section_header)
.default_category_card:hover
.default_category_card_img {
  transform: scale(1.06) !important;
}


/* ==================================================
   CATEGORY TITLE
================================================== */

main:has(.category_section_header)
.default_category_card_name {
  grid-column: 2;

  display: flex !important;
  flex-direction: column;
  align-items: flex-start;

  margin: 0 !important;

  color: var(--elmatjar-ink) !important;

  font-size: clamp(25px, 2.5vw, 39px) !important;
  font-weight: 800 !important;
  line-height: 1.35;

  text-align: right !important;
}

main:has(.category_section_header)
.default_category_card_name::before {
  content: "WATER FILTER COLLECTION";

  margin-bottom: 12px;

  color: var(--elmatjar-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

main:has(.category_section_header)
.default_category_card_name::after {
  content: "تصفح منتجات القسم";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  height: 48px;

  margin-top: 25px;
  padding: 0 22px;

  color: #ffffff;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #d7a447 0%,
      #b97a1f 100%
    );

  box-shadow:
    0 12px 30px rgba(174, 112, 25, 0.22);

  font-size: 14px;
  font-weight: 700;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

main:has(.category_section_header)
.default_category_card:hover
.default_category_card_name::after {
  transform: translateY(-2px);

  box-shadow:
    0 17px 38px rgba(174, 112, 25, 0.30);
}


/* Hide original small arrow */

main:has(.category_section_header)
.default_category_card_name > svg {
  display: none !important;
}


/* ==================================================
   PRODUCTS GRID
================================================== */

main:has(.category_section_header)
.category_products_grid_container {
  width: min(100%, 1180px);

  margin: 0 auto;

  gap: 24px !important;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

  main:has(.category_section_header) {
    padding: 22px 14px 60px !important;
  }

  main:has(.category_section_header)
  .category_section_header {
    align-items: flex-start !important;

    gap: 18px;

    margin-bottom: 24px !important;
    padding: 22px 18px !important;

    border-radius: 23px;
  }

  main:has(.category_section_header)
  .category_section_header_title {
    font-size: 29px !important;
  }

  main:has(.category_section_header)
  .category_section_header button {
    min-height: 44px;

    padding: 0 13px !important;
  }

  main:has(.category_section_header)
  .carouselWrapper .swiper-wrapper {
    gap: 15px !important;
  }

  main:has(.category_section_header)
  .default_category_card {
    display: flex !important;
    flex-direction: column;

    gap: 0;

    min-height: auto;

    padding: 12px 12px 22px;

    border-radius: 24px;
  }

  main:has(.category_section_header)
  .default_category_card
  > .relative.inline-flex {
    width: 100%;
    height: auto;

    margin: 0 0 20px !important;

    aspect-ratio: 16 / 10;

    border-radius: 19px !important;
  }

  main:has(.category_section_header)
  .default_category_card_img {
    border-radius: 19px;
  }

  main:has(.category_section_header)
  .default_category_card_name {
    width: 100%;

    padding: 0 8px;

    font-size: 25px !important;

    text-align: right !important;
  }

  main:has(.category_section_header)
  .default_category_card_name::after {
    width: 100%;
    min-width: 0;
    height: 48px;

    margin-top: 20px;
  }

  main:has(.category_section_header)
  .default_category_card::before {
    display: none;
  }

}
/* ==================================================
   ELMATJAR COLLECTION BACKGROUND ONLY
   DOES NOT TOUCH THE HEADER
================================================== */

body main:has(.category_section_header) {
  max-width: 100% !important;

  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(215, 181, 108, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(185, 122, 32, 0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #fffaf3 0%,
      #f3ecdf 48%,
      #ead7b9 100%
    ) !important;
}


/* الكونتينرات الموجودة داخل صفحة الكولكشن فقط */

body main:has(.category_section_header) > div,
body main:has(.category_section_header) > div > div {
  background-color: transparent !important;
}


/* غلاف الأقسام والمنتجات */

body main:has(.category_section_header)
.mb-4.md\:mb-8.xl\:mb-12 {
  padding: 30px !important;

  border: 1px solid rgba(185, 122, 32, 0.12);
  border-radius: 34px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 250, 243, 0.72),
      rgba(243, 236, 223, 0.72)
    ) !important;

  box-shadow:
    0 28px 80px rgba(95, 63, 27, 0.07);
}


/* رأس الكولكشن */

body main:has(.category_section_header)
.category_section_header {
  background:
    linear-gradient(
      135deg,
      #fffaf3 0%,
      #f6efe5 100%
    ) !important;
}


/* كروت الأقسام */

body main:has(.category_section_header)
.default_category_card {
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(215, 181, 108, 0.18),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #fffaf3 0%,
      #f6efe5 100%
    ) !important;
}


/* الموبايل */

@media (max-width: 767px) {
  body main:has(.category_section_header)
  .mb-4.md\:mb-8.xl\:mb-12 {
    padding: 14px !important;
    border-radius: 25px;
  }
}
/* ==================================================
   ELMATJAR — CATEGORIES PAGE ONLY
   لا يلمس الهيدر أو الفوتر
================================================== */

body main:has(> ul.grid) {
  --cat-bg: #f3ecdf;
  --cat-bg-soft: #fffaf3;
  --cat-card: #f8f0e4;
  --cat-ink: #241b13;
  --cat-muted: #766756;
  --cat-gold: #b97a20;
  --cat-champagne: #d7b56c;
  --cat-border: rgba(185, 122, 32, 0.18);

  position: relative;
  isolation: isolate;

  max-width: 100% !important;
  min-height: 100vh;

  padding:
    clamp(45px, 6vw, 90px)
    clamp(16px, 5vw, 70px)
    clamp(75px, 8vw, 120px) !important;

  direction: rtl;

  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(215, 181, 108, 0.24),
      transparent 28%
    ),
    radial-gradient(
      circle at 6% 92%,
      rgba(185, 122, 32, 0.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #fffaf3 0%,
      #f3ecdf 55%,
      #ead7b9 100%
    ) !important;
}


/* زخرفة خفيفة في الخلفية */

body main:has(> ul.grid)::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.48),
      transparent 36%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(185, 122, 32, 0.018) 0,
      rgba(185, 122, 32, 0.018) 1px,
      transparent 1px,
      transparent 90px
    );
}


/* ==================================================
   PAGE TITLE
================================================== */

body main:has(> ul.grid)
> .animate-slideIn:first-child {
  width: min(1180px, 100%);

  margin: 0 auto 42px;
  padding: clamp(28px, 4vw, 48px);

  border: 1px solid var(--cat-border);
  border-radius: 30px;

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(215, 181, 108, 0.17),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 250, 243, 0.66)
    );

  box-shadow:
    0 24px 70px rgba(95, 63, 27, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* إلغاء العنوان المكرر الموجود بالخلفية */

body main:has(> ul.grid)
.home_section_top_title > span {
  display: none !important;
}


/* العنوان الأساسي */

body main:has(> ul.grid)
.home_section_top_title {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0 !important;

  color: var(--cat-ink) !important;

  font-size: clamp(34px, 4.5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
}


/* السطر الإنجليزي فوق العنوان */

body main:has(> ul.grid)
.home_section_top_title::before {
  content: "EXPLORE ALMATJARR";

  margin-bottom: 12px;

  color: var(--cat-gold);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}


/* وصف أسفل العنوان */

body main:has(> ul.grid)
.home_section_top_title::after {
  content: "تصفح جميع أقسام المتجر واختر المنتجات المناسبة لاحتياجات بيتك";

  max-width: 600px;

  margin-top: 15px;

  color: var(--cat-muted);

  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
}


/* ==================================================
   CATEGORIES GRID
================================================== */

body main:has(> ul.grid)
> ul.grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: clamp(18px, 2vw, 28px) !important;

  width: min(1180px, 100%);

  margin: 0 auto !important;
}


/* ==================================================
   CATEGORY CARD
================================================== */

body main:has(> ul.grid)
> ul.grid > li {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--cat-border);
  border-radius: 26px;

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(215, 181, 108, 0.14),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(246, 239, 229, 0.92)
    );

  box-shadow:
    0 18px 50px rgba(95, 63, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);

  transition:
    transform 0.4s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

body main:has(> ul.grid)
> ul.grid > li:hover {
  transform: translateY(-7px);

  border-color: rgba(185, 122, 32, 0.38);

  box-shadow:
    0 28px 70px rgba(95, 63, 27, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}


/* الكارت الداخلي */

body main:has(> ul.grid)
> ul.grid > li > div {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;

  height: 100%;

  padding: 12px 12px 20px;
}


/* ==================================================
   CATEGORY IMAGE
================================================== */

body main:has(> ul.grid)
> ul.grid > li
> div
> div.relative {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: 19px !important;

  background: #eee3d3;

  box-shadow:
    0 12px 30px rgba(95, 63, 27, 0.08);
}


/* طبقة ذهبية خفيفة فوق الصورة */

body main:has(> ul.grid)
> ul.grid > li
> div
> div.relative::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(36, 27, 19, 0.15),
      transparent 52%
    );

  opacity: 0.55;

  transition: opacity 0.35s ease;
}

body main:has(> ul.grid)
> ul.grid > li:hover
> div
> div.relative::after {
  opacity: 0.25;
}


/* الصور */

body main:has(> ul.grid)
> ul.grid > li img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 19px !important;

  transform: scale(1);
  transition:
    transform 0.75s cubic-bezier(.22, 1, .36, 1),
    filter 0.4s ease !important;
}

body main:has(> ul.grid)
> ul.grid > li:hover img {
  transform: scale(1.065);
}


/* ==================================================
   CATEGORY NAME
================================================== */

body main:has(> ul.grid)
> ul.grid > li p {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 62px;

  margin: 0 !important;
  padding: 17px 8px 4px;

  color: var(--cat-ink) !important;

  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.5;

  text-align: right !important;
}


/* السهم الدائري */

body main:has(> ul.grid)
> ul.grid > li p::after {
  content: "←";

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: 10px;

  border: 1px solid rgba(185, 122, 32, 0.23);
  border-radius: 50%;

  color: var(--cat-gold);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.9),
      rgba(231, 208, 165, 0.46)
    );

  font-size: 16px;

  transition:
    transform 0.3s ease,
    color 0.3s ease,
    background 0.3s ease;
}

body main:has(> ul.grid)
> ul.grid > li:hover p::after {
  transform: translateX(-4px);

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #d7a447,
      #b97a1f
    );
}


/* ==================================================
   SPECIAL FIRST CARDS
================================================== */

body main:has(> ul.grid)
> ul.grid > li:nth-child(-n + 4) {
  border-color: rgba(185, 122, 32, 0.27);
}


/* رقم القسم */

body main:has(> ul.grid)
> ul.grid > li::before {
  position: absolute;
  top: 20px;
  right: 20px;

  z-index: 4;

  min-width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;

  color: #ffffff;

  background: rgba(36, 27, 19, 0.38);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 11px;
  font-weight: 700;
}

body main:has(> ul.grid)
> ul.grid > li:nth-child(1)::before { content: "01"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(2)::before { content: "02"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(3)::before { content: "03"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(4)::before { content: "04"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(5)::before { content: "05"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(6)::before { content: "06"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(7)::before { content: "07"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(8)::before { content: "08"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(9)::before { content: "09"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(10)::before { content: "10"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(11)::before { content: "11"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(12)::before { content: "12"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(13)::before { content: "13"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(14)::before { content: "14"; }

body main:has(> ul.grid)
> ul.grid > li:nth-child(15)::before { content: "15"; }


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1024px) {

  body main:has(> ul.grid)
  > ul.grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

  body main:has(> ul.grid) {
    padding:
      28px
      13px
      70px !important;
  }

  body main:has(> ul.grid)
  > .animate-slideIn:first-child {
    margin-bottom: 22px;
    padding: 26px 18px;

    border-radius: 24px;
  }

  body main:has(> ul.grid)
  .home_section_top_title {
    font-size: 34px !important;
  }

  body main:has(> ul.grid)
  .home_section_top_title::before {
    margin-bottom: 9px;

    font-size: 9px;
  }

  body main:has(> ul.grid)
  .home_section_top_title::after {
    max-width: 310px;

    margin-top: 12px;

    font-size: 12px;
    line-height: 1.75;
  }

  body main:has(> ul.grid)
  > ul.grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }

  body main:has(> ul.grid)
  > ul.grid > li {
    border-radius: 19px;
  }

  body main:has(> ul.grid)
  > ul.grid > li > div {
    padding: 8px 8px 14px;
  }

  body main:has(> ul.grid)
  > ul.grid > li
  > div
  > div.relative {
    aspect-ratio: 1 / 1;

    border-radius: 14px !important;
  }

  body main:has(> ul.grid)
  > ul.grid > li img {
    border-radius: 14px !important;
  }

  body main:has(> ul.grid)
  > ul.grid > li p {
    min-height: 54px;

    padding:
      12px
      3px
      0;

    font-size: 13px !important;
  }

  body main:has(> ul.grid)
  > ul.grid > li p::after {
    width: 27px;
    height: 27px;

    flex-basis: 27px;

    margin-right: 5px;

    font-size: 13px;
  }

  body main:has(> ul.grid)
  > ul.grid > li::before {
    top: 14px;
    right: 14px;

    min-width: 28px;
    height: 28px;

    font-size: 9px;
  }

}


/* شاشة موبايل صغيرة */

@media (max-width: 380px) {

  body main:has(> ul.grid)
  > ul.grid {
    gap: 9px !important;
  }

  body main:has(> ul.grid)
  > ul.grid > li p {
    font-size: 12px !important;
  }

}
/* ==================================================
   ELMATJAR — PRODUCT CARDS
   COLLECTION PRODUCTS GRID
================================================== */

body main:has(.category_products_grid_container) {
  --product-card-bg: #fffaf3;
  --product-card-soft: #f6efe5;
  --product-ink: #241b13;
  --product-muted: #766756;
  --product-gold: #b97a20;
  --product-champagne: #d7b56c;
  --product-border: rgba(185, 122, 32, 0.18);
}


/* شبكة المنتجات */

body main:has(.category_products_grid_container)
.category_products_grid_container {
  width: min(1180px, 100%);

  margin: 0 auto !important;

  gap: clamp(16px, 2vw, 26px) !important;

  align-items: stretch;
}


/* الغلاف الخارجي لكل منتج */

body main:has(.category_products_grid_container)
.category_products_grid_container
> .animate-slideIn {
  height: 100%;

  opacity: 1 !important;
}


/* الكارت الأساسي */

body main:has(.category_products_grid_container)
.category_products_grid_container
> .animate-slideIn
> .group {
  position: relative;

  display: flex !important;
  flex-direction: column;

  width: 100%;
  height: 100%;

  padding-bottom: 20px !important;

  overflow: hidden;

  border: 1px solid var(--product-border);
  border-radius: 26px !important;

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(215, 181, 108, 0.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 239, 229, 0.94)
    ) !important;

  box-shadow:
    0 18px 50px rgba(95, 63, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transform: none !important;

  transition:
    transform 0.4s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease !important;
}

body main:has(.category_products_grid_container)
.category_products_grid_container
> .animate-slideIn
> .group:hover {
  transform: translateY(-7px) !important;

  border-color: rgba(185, 122, 32, 0.38);

  box-shadow:
    0 30px 75px rgba(95, 63, 27, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}


/* ==================================================
   PRODUCT IMAGE
================================================== */

/* غلاف الصورة */

body main:has(.category_products_grid_container)
.category_products_grid_container
> .animate-slideIn
> .group
> .flex.relative {
  position: relative;

  width: calc(100% - 20px);

  margin: 10px 10px 0;

  overflow: hidden;

  border-radius: 20px;

  background: #eee3d3;

  box-shadow:
    0 12px 30px rgba(95, 63, 27, 0.08);
}


/* الغلاف الداخلي للصورة */

body main:has(.category_products_grid_container)
.category_products_grid_container
> .animate-slideIn
> .group
> .flex.relative
> .relative.overflow-hidden {
  width: 100%;
  aspect-ratio: 1 / 1;

  border-radius: 20px !important;

  background: #f4ecdf;
}


/* الصورة */

body main:has(.category_products_grid_container)
.category_products_grid_container img {
  width: 100% !important;
  height: 100% !important;

  aspect-ratio: 1 / 1;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 20px !important;

  transform: scale(1);

  transition:
    transform 0.75s cubic-bezier(.22, 1, .36, 1),
    filter 0.4s ease !important;
}

body main:has(.category_products_grid_container)
.category_products_grid_container
.group:hover img {
  transform: scale(1.055);
}


/* طبقة ناعمة فوق الصورة */

body main:has(.category_products_grid_container)
.category_products_grid_container
> .animate-slideIn
> .group
> .flex.relative::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  border-radius: 20px;

  background:
    linear-gradient(
      to top,
      rgba(36, 27, 19, 0.09),
      transparent 42%
    );
}


/* ==================================================
   DISCOUNT BADGE
================================================== */

body main:has(.category_products_grid_container)
.category_products_grid_container
span.absolute.top-3.left-3 {
  top: 18px !important;
  left: 18px !important;

  z-index: 5;

  padding: 8px 13px !important;

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #b97a20,
      #865414
    ) !important;

  box-shadow:
    0 8px 22px rgba(95, 63, 27, 0.24);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 11px !important;
  font-weight: 800 !important;
}


/* ==================================================
   QUICK ACTIONS
================================================== */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.flex.flex-col.items-center.justify-center {
  right: 18px !important;
  bottom: 18px !important;

  z-index: 5;

  gap: 13px !important;

  padding: 10px !important;

  border: 1px solid rgba(185, 122, 32, 0.2);
  border-radius: 999px !important;

  background:
    rgba(255, 250, 243, 0.88) !important;

  box-shadow:
    0 12px 30px rgba(95, 63, 27, 0.13) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* أزرار المعاينة والسلة */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.flex.flex-col.items-center.justify-center
button {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(185, 122, 32, 0.13);
  border-radius: 50%;

  color: var(--product-ink);

  background:
    rgba(255, 255, 255, 0.78);

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.flex.flex-col.items-center.justify-center
button:hover {
  transform: scale(1.08);

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #d7a447,
      #b97a1f
    );
}

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.flex.flex-col.items-center.justify-center
button svg {
  width: 20px !important;
  height: 20px !important;

  color: inherit !important;
}


/* ==================================================
   PRODUCT CONTENT
================================================== */

/* منطقة النصوص */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
> .text-center {
  display: flex;
  flex-direction: column;

  flex: 1;

  width: 100%;

  padding: 0 17px !important;

  direction: rtl;
  text-align: right !important;
}


/* اسم القسم الصغير */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
> .text-center
> div:first-child {
  margin-top: 18px !important;
}

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
> .text-center
> div:first-child
span {
  color: var(--product-gold) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;

  text-align: right;
}


/* اسم المنتج */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
h3 {
  min-height: 57px;

  margin-top: 10px !important;

  color: var(--product-ink) !important;

  font-size: clamp(15px, 1.25vw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;

  text-align: right !important;
}


/* ==================================================
   PRICE
================================================== */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
h3
+ div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: auto !important;
  padding-top: 16px;
}


/* السعر الحالي */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
h3
+ div
> span {
  color: var(--product-gold) !important;

  font-size: clamp(19px, 1.7vw, 25px) !important;
  font-weight: 800 !important;
}


/* العملة */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
h3
+ div
> span
span {
  color: var(--product-gold) !important;

  font-size: 0.72em;
}


/* السعر القديم */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
del {
  color: #9a8b79 !important;

  font-size: 14px !important;
  font-weight: 500 !important;

  opacity: 0.9;
}


/* ==================================================
   COLOR VARIANTS
================================================== */

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.text-center
> .mt-3\.5.flex.flex-col {
  margin-top: 15px !important;

  align-items: flex-start !important;
}

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.text-center
> .mt-3\.5.flex.flex-col
> div
> div {
  width: 28px !important;
  height: 28px !important;

  border: 2px solid rgba(255, 250, 243, 0.95);
  border-radius: 50% !important;

  box-shadow:
    0 0 0 1px rgba(185, 122, 32, 0.25),
    0 5px 14px rgba(95, 63, 27, 0.12) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

body main:has(.category_products_grid_container)
.category_products_grid_container
.group
.text-center
> .mt-3\.5.flex.flex-col
> div
> div:hover {
  transform: scale(1.12);

  box-shadow:
    0 0 0 2px rgba(185, 122, 32, 0.38),
    0 7px 17px rgba(95, 63, 27, 0.16) !important;
}


/* ==================================================
   TABLET
================================================== */

@media (min-width: 768px) and (max-width: 1180px) {

  body main:has(.category_products_grid_container)
  .category_products_grid_container {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

  body main:has(.category_products_grid_container)
  .category_products_grid_container {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 11px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  > .animate-slideIn
  > .group {
    padding-bottom: 14px !important;

    border-radius: 19px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  > .animate-slideIn
  > .group
  > .flex.relative {
    width: calc(100% - 12px);

    margin: 6px 6px 0;

    border-radius: 15px;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  > .animate-slideIn
  > .group
  > .flex.relative
  > .relative.overflow-hidden,
  body main:has(.category_products_grid_container)
  .category_products_grid_container img {
    border-radius: 15px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  > .text-center {
    padding: 0 10px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  > .text-center
  > div:first-child {
    margin-top: 12px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  > .text-center
  > div:first-child
  span {
    font-size: 9px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  h3 {
    min-height: 48px;

    margin-top: 7px !important;

    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  h3
  + div {
    gap: 4px;

    padding-top: 10px;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  h3
  + div
  > span {
    font-size: 17px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  del {
    font-size: 11px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  span.absolute.top-3.left-3 {
    top: 11px !important;
    left: 11px !important;

    padding: 6px 9px !important;

    font-size: 9px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  .flex.flex-col.items-center.justify-center {
    right: 10px !important;
    bottom: 10px !important;

    gap: 8px !important;

    padding: 7px !important;
  }

  body main:has(.category_products_grid_container)
  .category_products_grid_container
  .group
  .flex.flex-col.items-center.justify-center
  button {
    width: 31px;
    height: 31px;
  }

}

/* ==================================================
   FINAL PAGE SPACING FIX
   REMOVE OUTER PAGE PADDING, KEEP INNER CONTENT SPACING
================================================== */

body main:has(.category_section_header) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body main:has(.category_section_header) > div {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body main:has(.category_section_header)
.mb-4.md\:mb-8.xl\:mb-12 {
  padding: 20px !important;
}

@media (max-width: 767px) {
  body main:has(.category_section_header) {
    padding: 0 !important;
  }

  body main:has(.category_section_header) > div {
    width: calc(100% - 20px) !important;
  }

  body main:has(.category_section_header)
  .mb-4.md\:mb-8.xl\:mb-12 {
    padding: 10px !important;
    border-radius: 22px !important;
  }
}