/* =====================================================================
   KOHI – Custom CSS
   1) Category banners  2) Fixed banners  3) Products
   4) Slider arrows  5) Banners grid  6) Footer
   ===================================================================== */


/* =====================================================================
   1) CATEGORY BANNERS – "اختر ما يناسب ذوقك"
   ===================================================================== */
li#offers {
    display:none !important;
}
[component-id="1595654731"] {
  --kb: #664A39;
  --kb-title: "اختر ما يناسب ذوقك";
  --kb-sub: "تصفح حسب الفئة";
  font-family: 'Somar Sans', sans-serif;
  direction: rtl;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

[component-id="1595654731"]::before {
  content: var(--kb-title);
  order: -2;
  font: 800 34px/1.3 'Somar Sans', sans-serif;
  color: #000;
  text-align: center;
}

[component-id="1595654731"]::after {
  content: var(--kb-sub);
  order: -1;
  font: 400 16px 'Somar Sans', sans-serif;
  color: var(--kb);
  text-align: center;
  padding-bottom: 8px;
  margin-bottom: 16px;
  background: linear-gradient(var(--kb), var(--kb)) no-repeat center bottom / 56px 2px;
}

[component-id="1595654731"] > .grid {
  order: 0;
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  gap: 16px !important;
}

[component-id="1595654731"] .banner-entry {
  position: relative;
  height: 300px !important;
  background: none !important;
  overflow: visible;
}

[component-id="1595654731"] .lazy__bg {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100% !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
}

[component-id="1595654731"] .banner-entry > a {
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (max-width: 1023px) {
  [component-id="1595654731"]::before { font-size: 24px; }
  [component-id="1595654731"]::after  { font-size: 14px; margin-bottom: 8px; }
  [component-id="1595654731"] > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [component-id="1595654731"] .banner-entry { height: 200px !important; }
}


/* =====================================================================
   2) FIXED BANNERS
   ===================================================================== */

[component-id="832000666"],
[component-id="1363801336"],
[component-id="734430479"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}


/* =====================================================================
   3) PRODUCTS
   ===================================================================== */

.product-card--filled-mini-cart .product-card__mini-cart__btn .s-button-btn,
.product-card--filled-normal-cart .product-card__normal-cart__btn .s-button-btn {
  background-color: #84796A !important;
  border: none;
  color: var(--white-color);
}

.s-button-primary-outline:hover {
  background-color: var(--main-color);
}

.s-product-card-entry {
  transform: translate(0, 0);
  transition: all .5s ease-in-out;
  border: 1px solid var(--main-color);
  box-shadow: 1px 1px 3px 2px #ddd !important;
}

.s-product-card-entry:hover {
  transform: translate(0, -10px);
  box-shadow: 3px 3px 5px 4px #ddd !important;
}

.s-product-card-content * {
  justify-content: center;
  text-align: center;
}

h4.s-product-card-price {
  color: red;
}

img.s-product-card-image-contain.lazy.loaded {
  background-color: var(--white-color);
}


/* =====================================================================
   4) SLIDER ARROWS & "DISPLAY ALL" LINK
   ===================================================================== */

button.s-slider-next.s-slider-nav-arrow:hover,
button.s-slider-prev.s-slider-nav-arrow:hover {
  background-color: var(--main-color);
  border: none;
  transform: translateX(-3px);
}

button.s-slider-prev.s-slider-nav-arrow:hover {
  transform: translateX(3px);
}

a.s-slider-block__display-all {
  color: var(--main-color);
}


/* =====================================================================
   5) BANNERS – generic 2-column grid
   ===================================================================== */

.s-block--banners.s-block--banners .grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 0;
}

section.s-block.s-block--banners.container:nth-of-type(8) .banner-entry {
  height: 385px !important;
}

section.s-block.s-block--banners.container a.banner-entry.square-photos {
  background-color: transparent;
}

@media (max-width: 767px) {
  .s-block--banners.s-block--banners .grid {
    grid-row-gap: 10px;
  }

  section.s-block.s-block--banners.container:nth-of-type(8) .banner-entry {
    height: 125px !important;
  }
}


/* =====================================================================
   6) FOOTER (dark #332B25, 100px top radius)
   ===================================================================== */
/* =====================================================================
   6) FOOTER (dark #332B25, 100px top radius)
   ===================================================================== */

.store-footer.basic-footer {
  background: #332B25 !important;
  border-radius: 100px 100px 0 0 !important;
  overflow: hidden;
}
.footer-bottom {
  background: #332B25 !important;
}
.store-footer.basic-footer .store-footer__inner {
  background: transparent !important;
}

@media (max-width: 1023px) {
  .store-footer.basic-footer {
    border-radius: 40px 40px 0 0 !important;
  }
}