/* Add custom CSS styles below */ 

/* Global font weight for titles*/
.index.mobile_small_blocks_titles .home-block-title h2{
    font-weight: 400;
}

/* header cart icon margin remove */
.rtl\:mr-4:where([dir=rtl],[dir=rtl] *) {
    margin-right: auto!important;
}


/* Global btn radius*/
:root{
  --s-radius: 4px!important;
}

/* S-Block Spaces - Global home */

.s-block {
      margin-top: 50px;
  }

@media (max-width: 768px) {
  .s-block {
      margin-top: 32px;
  }
  .index.mobile_small_blocks_titles .home-block-title h2{
    text-align: start;
  }
}

/* Hide our suggestions in category page */

.center-between div.flex.items-center:has(> #product-filter){display:none!important;}

nav.breadcrumbs.w-full.py-5 {
    display: none;
}

.s-infinite-scroll-status{
  display: none;
}

/* SHOP BY NOTE */

section.s-block.s-block--circle-links.force-center.khalouf-custom-circles.\!mt-2.custom-pattern.circle-links-9.khalouf-pattern.khalouf-pattern--over{
  margin-top: 20px!important;
}

/* START -== Desc for All products sliders ==- */
.khalouf-blockhead__desc {
      background-color: rgba(144, 145, 87, 0.2);
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: .875rem;
      width: fit-content;
      line-height: 1.5;
  }

@media (max-width: 768px) {
  .khalouf-blockhead__desc {
    font-size:0.75rem!important;
  }
}

@media (min-width: 640px) {
    .sm\:text-4xl {
        font-size: 1.5rem !important;
    }
}
/* END -== Desc for All products sliders ==- */

/* START -== Main Slider ==- */

/* hide all homepage titles bar  */
.my-2.mx-auto.w-28.h-0.border-2.border-primary{
  display: none!important;
}

.khalouf-custom-main-slider .advanced-slider__caption {
    align-items: flex-end!important;
    padding-bottom: 5rem;
}

.khalouf-custom-main-slider .advanced-slider__caption__inner__content__heading{
  color: #fff;
}

.khalouf-custom-main-slider .advanced-slider__caption__inner__content__button{
  padding-inline: 3rem; 
}

/* END -== Main Slider ==- */

/* START -== Category Circles ==- */
.khalouf-custom-circles {
    background-color: #FFF4DA;
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 10px;
}

.khalouf-custom-circles .s-block--circle-links salla-slider .custom-width {
        width: 31%!important;
}

.s-block--circle-links salla-slider .swiper-slide img {
    aspect-ratio: 1/1!important;
}

.khalouf-custom-circles .carousel-slider .swiper-wrapper > div{
  padding-right:0;
  padding-left: 5px;
}

.khalouf-custom-circles h3 {
    font-size: .875rem !important;
  font-weight: 500;
    white-space: nowrap;
    margin-top: 8px !important;
}
/* END -== Category Circles ==- */

/* START -== HEADER ==- */
.main-nav-container, .top-navbar, .store-header{
  background-color: rgba(252, 227, 187, 0.8)!important;
}
.main-nav-container {
    min-height: 68px;
}

.main-nav-container .inner {
    padding-bottom: 0!important;
    padding-top: 0!important;
}

.navbar-brand img{
  height:58px!important;
}

@media (max-width: 768px) {
  .header__main-row {
      align-items: flex-end;
  }
}
.header__main-start, .header__main-end{
  padding-bottom: 5px;
}

@media (min-width: 768px) {
  .header__main-end {
    gap: 16px;
}
}

.s-cart-summary-count{
  height: 1rem!important;
  width:1rem!important;
}
.s-cart-summary-count {
    top: 0!important;
}
/* END -== HEADER ==- */

/* START -== Products Slider ==- */


/* END -== Products Slider ==- */


/* START -== Shop By Category Section ==- */

/* ------------------------------------------------------------------
 *  every width — unchanged from before
 * ------------------------------------------------------------------ */

.s-block--rectangular-links:not(.free_aspect_ratio) img{
  aspect-ratio: auto!important
}

.khalouf-custom-shop-by-category{
  --mobile-row-items: 1!important;
}

.khalouf-custom-shop-by-category img {
    transform: scale(1) !important;
}

.khalouf-custom-shop-by-category h2{
  text-align: start!important;
  padding-inline: 10px!important;
}

.khalouf-custom-shop-by-category .overflow-hidden.w-fit.mx-auto {
    margin: 0;
    width: 100%;
}

/* ------------------------------------------------------------------
 *  desktop only — 992px up, because the theme's own breakpoint for this
 *  block is 991px, not 768. nothing below this line reaches mobile.
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {

  /* the home blocks that are not meant to be edge to edge carry the theme's
     own `container` class on the section — e.g.
       <section class="s-block--custom-products container s-block">
     this block does not, so it spans the page. these rules are what
     .container resolves to, measured off the theme stylesheet, so the block
     lines up with every other section rather than a width of our choosing. */
  .khalouf-custom-shop-by-category {
    box-sizing: border-box;
    width: 100%;
    /* margin-inline, not margin — .s-block's own top margin has to survive */
    margin-inline: auto;
    padding-inline: 10px;
  }

  /* four across in a single row. the theme reads this straight into
     flex-basis. !important is required: the block carries its own value in a
     style attribute, and an inline custom property outranks any plain rule. */
  .khalouf-custom-shop-by-category {
    --desktop-row-items: 4!important;
  }

  /* the theme wraps each picture in w-fit, so the frame shrinks to the
     picture's own width and never fills the column. take the column. */
  .khalouf-custom-shop-by-category .rectangular-links__image-wrap {
    width: 100%!important;
    margin: 0!important;
    overflow: hidden;
  }

  /* square, edge to edge, cropped instead of letterboxed. the extra class in
     the selector is deliberate — it has to outrank the aspect-ratio:auto rule
     at the top of this file on something other than source order. */
  .khalouf-custom-shop-by-category .rectangular-list-item .rectangular-links__image-wrap img {
    display: block;
    width: 100%!important;
    height: auto!important;
    aspect-ratio: 1 / 1!important;
    object-fit: cover!important;
    object-position: center;
  }

  /* the gutter comes from the container above now, so the heading needs none
     of its own — with the 10px it sits inset from the first tile. */
  .khalouf-custom-shop-by-category h2 {
    padding-inline: 0!important;
  }
}

/* the theme swaps its container gutter to 30px only in this band, then back
   to 10px above it — both are already past the 992px line */
@media (min-width: 1200px) and (max-width: 1510px) {
  .khalouf-custom-shop-by-category {
    padding-inline: 30px;
  }
}

@media (min-width: 1440px) {
  .khalouf-custom-shop-by-category {
    max-width: 1440px;
  }
}

/* END -== Shop By Category Section ==- */



/* START -== Special Product ==- */
.khalouf-special-product .product-card--special {
    flex-direction: row;
}

.khalouf-special-product .product-card--vertical:not(.product-card--fit-height) .product-card__image {
    flex: none!important;
    width: 48%;
}

@media (max-width:767px){
  .khalouf-special-product .flex.flex-col.w-1\/2{
    width: 98%!important;
  }
}

.special-product.mini .pie-wrapper{
  display: none!important;
}
/* END -== Special Product ==- */


/* START -== FAQs ==- */

@media (min-width: 768px) {
    .khalouf-faqs .md\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr))!important;
    }
    .khalouf-faqs .md\:grid-cols-2 {
      max-width: 840px;
      margin: auto;
    }
}


.khalouf-faqs .grid.items-start.grid-cols-1.md\:grid-cols-2.gap-4 {
    gap: 0 !important;
}

/* rounded top on the first card, rounded bottom on the last — a single card gets both */
.khalouf-faqs .faq__grid .single-faq:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.khalouf-faqs .faq__grid .single-faq:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* keeps the header/answer backgrounds from squaring the corners off again */
.khalouf-faqs .faq__grid .single-faq:first-child, .khalouf-faqs .faq__grid .single-faq:last-child { overflow: hidden; }

.khalouf-faqs .single-faq {
    border-radius: 0;
    border-color: rgba(239, 239, 239, 1);
}

.khalouf-faqs .faq-btn i {
    background-color: transparent !important;
    color: #000;
    font-size: 1.25rem;
}

.khalouf-faqs .single-faq.open {
    background-color: rgba(251, 248, 241, 1);
}

.khalouf-faqs .faq-content p {
    color: rgba(102, 87, 56, 1);
}


.khalouf-faqs .open .faq-btn i {
    color: rgba(230, 70, 73, 1);
}


/* END -== FAQs ==- */