/* ===== Mulhehah - Figma homepage ===== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root {
  --mlh-gold: #b99156;
  --mlh-bg: #faf8f5;
}

body,
body h1, body h2, body h3, body h4, body h5, body p, body a, body button, body input, body label {
  font-family: 'Tajawal', sans-serif !important;
}
body { background: var(--mlh-bg); }

/* ---------- Header ---------- */
.store-header .main-nav-container { background: var(--mlh-bg) !important; }

/* ---------- Spacing between homepage sections ---------- */
.s-block { margin-bottom: 32px !important; }
@media (min-width: 768px) { .s-block { margin-bottom: 48px !important; } }

/* ---------- Wide banners: full page width ---------- */
section.B_wide_banner {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.B_wide_banner .banner-slide,
.B_wide_banner .rounded-card,
.B_wide_banner img { border-radius: 0 !important; }

/* ---------- Wide banners: text style ---------- */
.B_wide_banner .banner-slide > .absolute.inset-0.z-10 { background: transparent !important; }
.B_wide_banner .banner-content { align-items: center; justify-content: center; text-align: center; }
.B_wide_banner .banner-content > * { position: relative; z-index: 1; }
.B_wide_banner .banner-content::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(760px, 95%); height: 85%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 40%, rgba(255,255,255,0) 72%);
  pointer-events: none;
  z-index: 0;
}
.B_wide_banner .banner-title {
  color: #000 !important;
  font-weight: 700 !important;
  text-align: center;
  letter-spacing: 0 !important;
}
.B_wide_banner .banner-subtitle {
  color: var(--mlh-gold) !important;
  font-weight: 400 !important;
  text-align: center;
}
.B_wide_banner .banner-content .flex { justify-content: center; }
.B_wide_banner .banner-content a.rounded-btn,
.B_shop_by_category .banner-content a.rounded-btn {
  background: var(--mlh-gold) !important;
  border-radius: 1000px !important;
  padding: 8px 40px !important;
  font-weight: 500 !important;
  border: 0 !important;
}
.B_wide_banner .banner-content a.rounded-btn { color: #000 !important; }
@media (min-width: 768px) {
  .B_wide_banner .banner-content a.rounded-btn { font-size: 22px !important; }
  .B_wide_banner .banner-content { align-items: flex-start !important; justify-content: center !important; padding-inline: 8% !important; }
  .B_wide_banner .banner-content::before { left: auto; right: 2%; transform: translateY(-50%); width: min(720px, 55%); height: 95%; }
  .B_wide_banner ~ .B_wide_banner .banner-content { align-items: flex-end !important; }
  .B_wide_banner ~ .B_wide_banner .banner-content::before { right: auto; left: 2%; }
}

/* ---------- Store categories (circles) like Figma ---------- */
.W_store_categories h4,
.W_store_categories .s-slider-block__title h2 {
  color: var(--mlh-gold) !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3.2vw, 44px) !important;
  margin-bottom: 8px !important;
}
.W_store_categories h4 + p,
.W_store_categories .s-slider-block__title p { display: none !important; }
.W_store_categories .grid-elements { gap: 24px !important; }
@media (min-width: 768px) {
  .W_store_categories .grid-elements { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 48px !important; max-width: 1200px; margin-inline: auto; }
}
.W_store_categories a.group { width: 100% !important; align-items: center; }
.W_store_categories a.group { gap: 16px !important; }
.W_store_categories a.group > div.rounded-full {
  width: 100% !important;
  max-width: 260px;
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: #efe6d8 !important;
  border: 2px solid var(--mlh-gold);
  box-shadow: none !important;
}
.W_store_categories a.group > div.rounded-full img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.W_store_categories a.group > p {
  color: var(--mlh-gold) !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 1.8vw, 26px) !important;
}

/* ---------- Shop by category 2x2 grid ---------- */
.B_shop_by_category .rounded-card img { filter: brightness(.8); }
.B_shop_by_category .banner-content { align-items: center !important; justify-content: center !important; text-align: center; }
.B_shop_by_category .banner-title { color: #fff !important; text-align: center; font-weight: 700 !important; }
.B_shop_by_category .banner-content a.rounded-btn { color: #fff !important; }

/* ---------- Footer: background color only ---------- */
.store-footer,
.store-footer .store-footer__inner,
.store-footer .store-footer__bottom { background: var(--mlh-gold) !important; }

/* ---------- Wide banners: show full image height (no crop) ---------- */
section.B_wide_banner,
.B_wide_banner .banner-slide { height: auto !important; min-height: 0 !important; max-height: none !important; }
.B_wide_banner .banner-slide > a { position: relative !important; display: block; height: auto !important; }
.B_wide_banner .banner-slide > a img { height: auto !important; width: 100% !important; object-fit: contain !important; display: block; }
.B_wide_banner .banner-content { position: absolute !important; inset: 0; height: 100% !important; }



.relative.w-\[124px\].h-\[105px\].flex-shrink-0 {
    visibility: hidden !important;
}



.s-product-card-content-footer .s-button-element, .s-product-card-content-footer button {
    background: #B99156 !important; 
}


.s-fast-checkout-button {
    background-color: #B99156 !important;
}

/* ---------- Product card: 'اشتر الآن' button color (inside shadow DOM, uses --color-primary) ---------- */
.s-product-card-content-footer salla-mini-checkout-widget {
  --color-primary: #B99156 !important;
  --color-primary-reverse: #ffffff !important;
}

/* ========== Mobile tuning (banners + sections + spacing) ========== */
@media (max-width: 767px) {
  /* أقل مسافة بين الأقسام */
  #main-content .s-block { margin-bottom: 18px !important; }

  /* البانرات العريضة */
  section.B_wide_banner .banner-slide { height: 210px !important; }
  section.B_wide_banner .banner-slide > a { height: 100% !important; }
  .W_store_categories { padding-top: 0 !important; margin-top: 0 !important; }
  section.B_wide_banner .banner-slide > a img {
    height: 100% !important; width: 100% !important;
    object-fit: cover !important; object-position: center !important;
  }
  section.B_wide_banner .banner-content { padding: 14px 16px !important; gap: 8px !important; }
  section.B_wide_banner .banner-content > * { width: 100% !important; max-width: 320px; }
  section.B_wide_banner .banner-title { font-size: 18px !important; line-height: 1.5 !important; padding: 0 !important; }
  section.B_wide_banner .banner-subtitle { font-size: 12px !important; line-height: 1.6 !important; padding: 0 !important; }
  section.B_wide_banner .banner-content a.rounded-btn { font-size: 13px !important; padding: 6px 26px !important; }

  /* أقسامنا المميزة: 3 دوائر أصغر في الشاشة */
  .W_store_categories h4, .W_store_categories .s-slider-block__title h2 { font-size: 22px !important; margin-bottom: 4px !important; }
  .W_store_categories .s-slider-container a.group.swiper-slide { width: calc((100% - 27.2px) / 2.7) !important; gap: 8px !important; }
  .W_store_categories .s-slider-container a.group > div.rounded-full { width: 100% !important; height: auto !important; }
  .W_store_categories a.group > p { font-size: 14px !important; }

  /* تسوقي حسب القسم: شبكة 2×2 وكروت أصغر */
  .B_shop_by_category .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .B_shop_by_category .grid > .rounded-card { height: 200px !important; }
  .B_shop_by_category .banner-content { padding: 10px !important; gap: 8px !important; }
  .B_shop_by_category .banner-title { font-size: 15px !important; line-height: 1.4 !important; }
  .B_shop_by_category .banner-content a.rounded-btn { font-size: 12px !important; padding: 5px 16px !important; }
}


/* ========== Mobile: centered banner text + centered footer ========== */
@media (max-width: 767px) {
  section.B_wide_banner .banner-content { justify-content: center !important; align-items: center !important; }

  .store-footer, .store-footer * { text-align: center !important; }
  .store-footer .footer-grid { justify-items: center !important; align-items: center !important; }
  .store-footer .footer-col,
  .store-footer .s-menu-footer-list,
  .store-footer .s-contacts-list,
  .store-footer .footer-bottom-col { align-items: center !important; justify-content: center !important; width: 100%; }
  .store-footer .footer-links-group { justify-content: center !important; align-items: center !important; width: 100%; }
  .store-footer .footer-col.store-data > a { margin-inline: auto !important; }
  .store-footer .footer-col.store-data img { margin-inline: auto !important; }
  .store-footer .s-contacts-item,
  .store-footer .s-social-list,
  .store-footer .footer-bottom-grid,
  .store-footer .s-trust-badges-wrapper,
  .store-footer .s-trust-badges-wrapper > *,
  .store-footer .s-payments-list { justify-content: center !important; }
  .store-footer .footer-bottom-grid { flex-direction: column !important; gap: 12px !important; }
  .store-footer .s-payments-list { flex-wrap: wrap !important; }
}


/* ========== Footer icons: white ========== */
.store-footer .s-contacts-icon,
.store-footer .s-social-list a {
  background: transparent !important;
  border: 1.5px solid #fff !important;
  color: #fff !important;
}
.store-footer .s-contacts-icon *,
.store-footer .s-social-list a * { color: #fff !important; }
.store-footer .s-contacts-icon svg,
.store-footer .s-contacts-icon svg *,
.store-footer .s-social-list a svg,
.store-footer .s-social-list a svg * { fill: #fff !important; }


/* ========== Footer icons: brand colors ========== */
.store-footer a[href*="whatsapp"] .s-contacts-icon, .store-footer a[href*="wa.me"] .s-contacts-icon { background: #25D366 !important; border-color: #25D366 !important; }
.store-footer a[href^="tel"] .s-contacts-icon { background: #34B7F1 !important; border-color: #34B7F1 !important; }
.store-footer a[href^="mailto"] .s-contacts-icon { background: #EA4335 !important; border-color: #EA4335 !important; }
.store-footer a[href*="t.me"] .s-contacts-icon, .store-footer a[href*="telegram"] .s-contacts-icon { background: #229ED9 !important; border-color: #229ED9 !important; }
.store-footer .s-social-list a[href*="tiktok"] { background: #000 !important; border-color: #000 !important; }
.store-footer .s-social-list a[href*="snapchat"] { background: #FFFC00 !important; border-color: #FFFC00 !important; }
.store-footer .s-social-list a[href*="snapchat"], .store-footer .s-social-list a[href*="snapchat"] * { color: #000 !important; }
.store-footer .s-social-list a[href*="snapchat"] svg, .store-footer .s-social-list a[href*="snapchat"] svg * { fill: #000 !important; }
.store-footer .s-social-list a[href*="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; border-color: transparent !important; }
.store-footer .s-social-list a[href*="facebook"] { background: #1877F2 !important; border-color: #1877F2 !important; }
.store-footer .s-social-list a[href*="twitter"], .store-footer .s-social-list a[href*="x.com"] { background: #000 !important; border-color: #000 !important; }
.store-footer .s-social-list a[href*="youtube"] { background: #FF0000 !important; border-color: #FF0000 !important; }

/* ---------- Shop by category: keep title + button centered in ALL cards ---------- */
/* 4th card has an empty decorative badge that pushed the content down */
.B_shop_by_category .banner-content > div.relative {
  position: absolute !important;
  top: 16px;
  inset-inline-end: 16px;
  pointer-events: none;
}


/* ---------- Header logo: bigger ---------- */
.store-header .navbar-brand img {
  max-height: none !important;
  height: 64px !important;
  width: auto !important;
}
@media (min-width: 768px) {
  .store-header .navbar-brand img { height: 90px !important; }
  .store-header .main-nav-container .container-narrow.h-16 { height: auto !important; min-height: 96px; }
}