/* Add custom CSS styles below */ 
/* دمج هيدر فانتوم مع أول بنر */
body.index .kayan-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999 !important;
    height: auto !important;
    overflow: visible !important;

    background: linear-gradient(
        to bottom,
        rgba(25, 17, 11, 0.62) 0%,
        rgba(25, 17, 11, 0.25) 58%,
        rgba(25, 17, 11, 0) 100%
    ) !important;

    box-shadow: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* لون أيقونات الهيدر فوق البنر */
body.index:not(.phantom-header-scrolled)
.kayan-header .kayan-color-text {
    color: #fff !important;
}

/* تحويل الشعار للأبيض فوق البنر */
body.index:not(.phantom-header-scrolled)
.kayan-header img {
    filter: brightness(0) invert(1);
}

/* أول بنر يبدأ من أعلى الصفحة خلف الهيدر */
body.index .craffo-components-hero-image {
    margin-top: 0 !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 650px;
}



/* الهيدر عند النزول: شفاف ومطفي */
body.index.phantom-header-scrolled .kayan-header {
    background: rgba(31, 23, 17, 0.58) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.14) !important;

    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* الأيقونات تبقى بيضاء */
body.index.phantom-header-scrolled
.kayan-header .kayan-color-text {
    color: #fff !important;
}

/* الشعار يبقى أبيض */
body.index.phantom-header-scrolled
.kayan-header img {
    filter: brightness(0) invert(1);
}

/* شريط التصنيفات على الكمبيوتر */
@media (min-width: 1024px) {
    body.index.phantom-header-scrolled .navbar {
        background: rgba(31, 23, 17, 0.58) !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12) !important;

        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);

        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    body.index.phantom-header-scrolled .navbar a {
        color: #fff !important;
        text-shadow: 0 1px 7px rgba(0, 0, 0, 0.25);
    }
}





/* إعادة حاوية القائمة لوضعها الطبيعي */
body.index .kayan-header .container > div > .flex-1:nth-child(2) {
    position: static !important;
    transform: none !important;
}

/* تكبير وتوسيط شعار فانتوم فقط */
body.index .kayan-header .container > div > .flex-1:nth-child(2) .w-24 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 155px !important;
    min-width: 155px !important;
    z-index: 5;
}

/* مقاس الشعار في الجوال */
@media (max-width: 1023px) {
    body.index .kayan-header .container > div > .flex-1:nth-child(2) .w-24 {
        width: 200px !important;
        min-width: 135px !important;
    }
}





/* ألوان خلفية متجر فانتوم */
:root {
    --phantom-background: #F1E7D8;
    --phantom-card: #FAF5ED;
    --phantom-text: #2B2118;
    --phantom-border: #D8C5AB;
}

/* الخلفية العامة */
body,
body.index,
.app-inner,
main {
    background-color: var(--phantom-background) !important;
    color: var(--phantom-text);
}

/* خلفيات أقسام الصفحة الرئيسية */
body.index section:not(.craffo-components-hero-image):not(.kayan-banner-full-width) {
    background-color: var(--phantom-background) !important;
}

/* بطاقات المنتجات */
body.index .s-product-card-entry,
body.index .product-entry,
body.index salla-product-card {
    background-color: var(--phantom-card) !important;
    border-color: var(--phantom-border) !important;
}

/* الحقول والقوائم */
input,
textarea,
select {
    background-color: var(--phantom-card) !important;
    border-color: var(--phantom-border) !important;
    color: var(--phantom-text) !important;
}








/* قسم تصنيفات فانتوم */
.phantom-categories {
  width: 100%;
  padding: 60px 20px;
  background: #f2e9dc;
  box-sizing: border-box;
}

.phantom-categories * {
  box-sizing: border-box;
}

.phantom-categories__heading {
  margin: 0 auto 32px;
  text-align: center;
  color: #3b271a;
}

.phantom-categories__heading h2 {
  margin: 0 0 8px;
  color: #3b271a;
  font-family: inherit;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.3;
}

.phantom-categories__heading p {
  margin: 0;
  color: #80664f;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
}

/* بنران جنب بعض دائمًا */
.phantom-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.phantom-category-card {
  display: block;
  min-width: 0;
  color: #3b271a;
  text-align: center;
  text-decoration: none !important;
}

.phantom-category-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: #d8c1a3;
  box-shadow: 0 8px 28px rgba(58, 38, 25, 0.08);
}

.phantom-category-card__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}

.phantom-category-card h3 {
  margin: 18px 0 0;
  color: #3b271a;
  font-family: inherit;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* تأثير الكمبيوتر فقط */
@media (hover: hover) {
  .phantom-category-card:hover .phantom-category-card__image img {
    transform: scale(1.035);
    filter: brightness(0.96);
  }

  .phantom-category-card:hover h3 {
    color: #a57543;
  }
}

/* الجوال: يظلان جنب بعض */
@media (max-width: 600px) {
  .phantom-categories {
    padding: 36px 10px;
  }

  .phantom-categories__heading {
    margin-bottom: 20px;
  }

  .phantom-categories__heading h2 {
    font-size: 26px;
  }

  .phantom-categories__heading p {
    font-size: 14px;
  }

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

  .phantom-category-card__image {
    border-radius: 12px;
  }

  .phantom-category-card h3 {
    margin-top: 11px;
    font-size: 17px;
  }
}