/**********************************************
  PRODUCT SLIDER: Container + Splide
**********************************************/
.aiit-products-slider-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Ensures the product slides or peeks remain visible */
}

/* The Splide container for products */
.aiit-products-slider-container .splide {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Track */
.aiit-products-slider-container .splide__track {
    overflow: hidden; /* Prevent slides from overflowing */
}

/* List */
.aiit-products-slider-container .splide__list {
    display: flex;
}

/* Optional: if you need custom RTL handling here */
.splide[dir="rtl"] .splide__list {
    /* e.g., direction-specific rules if needed */
}

/* Slide */
.aiit-products-slider-container .splide__slide {
    text-align: center;
}

/**********************************************
  PRODUCT SLIDER: Specific Elements
**********************************************/
/* Product Slide Layout */
.aiit-product-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Product Image Styles */
.aiit-product-slide img {
    border-radius: 20px !important;
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.aiit-product-slide:hover img {
	opacity: 0.7;
	transition-duration: 0.3s;
}

/* Product Info Container */
.aiit-product-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 300px; /* Matches image width */
    margin-top: 8px;  /* Space between image and text */
    align-items: baseline;
}

/* Product Price Styles */
.aiit-product-price {
    font-family: 'Almarai', sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    color: #4F4745;
    white-space: nowrap;
}

/* Product Title Styles */
.aiit-product-title {
    font-size: 0.8em;
    margin: 0;
    font-family: 'Almarai', sans-serif;
    text-align: right;
    flex: 1;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
}

/* Product Slide Link */
a.aiit-product-slide {
    color: #4F4745;
    text-decoration: none;
    transition: color 0.3s;
}
a.aiit-product-slide:hover {
    color: #018d46;
}

/* ==========================
   Empty Slide Styling
   ========================== */
.aiit-empty-slide {
    background-color: #fff;
    border: 0px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5; /* Makes the empty slide appear less prominent */
}


/**********************************************
  BANNER SLIDER: Container + Splide
**********************************************/
.aiit-banner-slider-container {
    width: 100%;
    margin: 0 auto;
}

/* The banner root. We keep "splide" for Splide's core styling 
   and add "aiit-banner-splide" for custom styles. */
.aiit-banner-splide {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Banner track */
.aiit-banner-splide__track {
    overflow: hidden;
}

/* Banner list */
.aiit-banner-splide__list {
    display: flex;
    padding: 0; /* Adjust if you want spacing around banners */
}

/* Banner slide */
.aiit-banner-splide__slide {
    text-align: center;
    overflow: hidden;
}

/* Banner image */
.aiit-banner-image {
    width: 545px;
    max-width: 100%;
    height: auto;
    border-radius: 20px !important;
    object-fit: cover;
    display: block;
}

/**********************************************
  BANNER SLIDER: Arrows / Pagination (optional)
**********************************************/
.aiit-banner-splide__arrows {
    /* Custom styling for arrow container */
}
.aiit-banner-splide__arrow {
    /* Custom arrow styles */
}
.aiit-banner-splide__arrow--prev {
    /* Optional styling for prev arrow */
}
.aiit-banner-splide__arrow--next {
    /* Optional styling for next arrow */
}

.aiit-banner-splide__pagination {
    /* Custom pagination container styling */
}
.aiit-banner-splide__pagination__page {
    /* Custom pagination button styling */
}