/* Header Styles */

/* 1. تغيير خلفية الهيدر للون العنابي وإزالة الضل */
#mainnav {
    background-color: #3e161d !important; /* دي درجة اللون العنابي في الصورة */
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. تغيير لون جميع النصوص والروابط والأيقونات للأبيض */
#mainnav a, 
#mainnav i, 
#mainnav span, 
#mainnav p,
#mainnav .s-user-menu-title {
    color: #ffffff !important;
}

/* 3. تبييض اللوجو (عشان يبان على الخلفية الغامقة) */
/* الكود ده بيحول أي صورة سوداء للون الأبيض */
#mainnav img {
    filter: brightness(0) invert(1) !important;
}

/* 4. إزالة الدوائر والحدود اللي حوالين أيقونة السلة والحساب */
#mainnav button, 
#mainnav .rounded-full, 
#mainnav div[class*="border"] {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 5. لو فيه أيقونات SVG (فيكتور) نخلي لونها أبيض */
#mainnav svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.s-cart-summary-total {
  color: white !important;
}

/* Button Styles */

.primary-button {
  background-color: white;
  color: #47181E;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
}

.primary-button:hover {
  background-color: #47181E;
  color: white;
  transition: 0.2s;
}

.secondary-button {
  background-color: transparent;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid white;
  border-radius: 0.5rem;
  font-weight: 700;
}

.secondary-button:hover {
  background-color: white;
  color: #47181E;
  transition: 0.2s;
}

/* Banner Styles */

.full-banner-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px
}

.full-banner-entry:before {
  content: none !important;
}

.full-banner-entry:after, .full-banner-entry:before {
  content: none !important;
}

.full-banner-entry h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.full-banner-entry p {
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.full-banner-entry button {
  background-color: white;
  color: #47181E;
  border-radius: 10px;
  width: fit-content;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 10px;
}

.full-banner-entry button:hover {
  background-color: #47181E;
  color: white;
  transition: 0.2s;
}

/* Quick Links Box Styles */

salla-slider .slide--one-sixth {
  width: 33.333333%;
}

.slide--cat-entry {
  color: #47181E;
  font-size: 15px;
  align-items: center;
  border: 1px solid #731E3399;
  border-radius: 1rem;
  /* border-width: 1px; */
  display: flex;
  flex-direction: column;
  height: 9rem;
  justify-content: center;
  --tw-border-opacity: 1;
  /* border-color: #f3f4f6; */
  /* border-color: rgba(243, 244, 246, var(--tw-border-opacity, 1)); */
  --tw-bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
  padding: .75rem;
  text-align: center;
  transition-duration: .5s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.slide--cat-entry:hover {
  background: linear-gradient(135deg, #c8babc, #47181e);
  color: white;
}

.slide--cat-entry h2 {
  font-size: 1.25rem;
  line-height: 1.8rem;
}

/* Footer Styles */ 

}
.footer-is-light .store-footer {
  --tw-bg-opacity: 1;
  background-color: #47181E;
  --tw-text-opacity: 1;
  color: white;
}

.footer-is-light .store-footer .store-footer__inner {
  --tw-border-opacity: 1;
  border-bottom-color: #e5e7eb;
  border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: #47181E;
  color: white;
}

/* Responsive Styles */

@media (max-width: 1024px) {
  salla-slider .slide--one-sixth {
      width: 33.333333%;
  }
}

@media (max-width: 768px) {
  salla-slider .slide--one-sixth {
      width: 88%;
  }

  /* .slide--cat-entry h2 {
      font-size: 0.8rem;
      line-height: 1.5rem;
  } */

  .full-banner-entry h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .full-banner-entry p {
    font-size: 1rem;
    line-height: 1rem;
  }

  .full-banner-entry img {
    width: 38%
  }
}