/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Make product card text white - Salla Aali theme */
custom-salla-product-card .product-title,
custom-salla-product-card .product-subtitle,
custom-salla-product-card .pc-t,
custom-salla-product-card .price-wrapper,
custom-salla-product-card .price-wrapper *,
custom-salla-product-card .product-block__info {
  color: #ffffff !important;
}
/* Sticky full mobile header: logo + right + left */
@media (max-width: 1024px) {
  header.store-header,
  header.store-header #mainnav,
  header.store-header #mainnav > .inner,
  header.store-header #mainnav > .inner > .container,
  header.store-header .header-inner-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
  }

  header.store-header #mainnav {
    background: #09301d !important;
    height: 76px !important;
  }

  header.store-header .header-inner-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    height: 76px !important;
  }

  header.store-header .header-innerRight {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  header.store-header .header-logo-wrapper {
    grid-column: 2 !important;
    justify-self: center !important;
  }

  header.store-header .header-innerLeft {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  header.store-header .header-logo-wrapper img {
    max-height: 60px !important;
    width: auto !important;
  }
}
/* Product title */
.product-main-title {
  color: #fff !important;
}

/* Product description */
.product__description,
.product__description *,
div.product__description,
div.product__description * {
  color: #fff !important;
}

/* Category, price, availability text if needed */
.categ,
.categ *,
.p-price-outer,
.p-price-outer *,
.p-available-badge,
.p-available-badge * {
  color: #fff !important;
}
/* Force product page text to white */
.product-single .product-main-title,
.product-single .product__description,
.product-single .product__description *,
.product-single [class*="description"],
.product-single [class*="description"] * {
  color: #fff !important;
}
.product__description p {
  color: #fff !important;
}
.tamara-summary-widget__inline__text,
.tamara-widget__number-of-installments-node,
.tamara-summary-widget__amount,
.tamara-inline-learn-more-link,
.tamara-summary-widget__inline__text *,
.tamara-widget__number-of-installments-node *,
.tamara-summary-widget__amount *,
.tamara-inline-learn-more-link * {
  color: #fff !important;
}
/* Salla Aali - center ONLY the 2 bottom banner images */
.sq-awesome-banners .banner-outer:nth-child(4),
.sq-awesome-banners .banner-outer:nth-child(5) {
}

/* Keep it centered on all devices */
@media (max-width: 768px) {
  .sq-awesome-banners .banner-outer:nth-child(4),
  .sq-awesome-banners .banner-outer:nth-child(5) {
  }
}/* Fix this 4-icons row only */
section.home-sec-15 .grid,
section:has(img[alt="بنر ترويجي"]) .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

/* Make every icon stay inside its normal place */
section.home-sec-15 .banner-outer,
section:has(img[alt="بنر ترويجي"]) .banner-outer {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Same image size and spacing as the others */
section.home-sec-15 .banner-img,
section:has(img[alt="بنر ترويجي"]) .banner-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* Mobile */
@media (max-width: 768px) {
  section.home-sec-15 .grid,
  section:has(img[alt="بنر ترويجي"]) .grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* Pyramid grid ONLY for 5-banner section */
.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Reset all items */
.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-outer {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin: 0 !important;
}

/* Top row */
.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-outer:nth-child(1) {
  grid-column: 1 / 3 !important;
}

.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-outer:nth-child(2) {
  grid-column: 3 / 5 !important;
}

.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-outer:nth-child(3) {
  grid-column: 5 / 7 !important;
}

/* Bottom row centered */
.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-outer:nth-child(4) {
  grid-column: 2 / 4 !important;
}

.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-outer:nth-child(5) {
  grid-column: 4 / 6 !important;
}

/* Images fill their own boxes */
.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-entry,
.sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) .banner-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Same pyramid on mobile */
@media (max-width: 768px) {
  .sq-awesome-banners .grid:has(.banner-outer:nth-child(5)):not(:has(.banner-outer:nth-child(6))) {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 6px !important;
  }
}