/* General Styles (Optional, for context if needed) */


/* Section Title Styling */
/* Adjust these selectors if Theme::partial('section-title') generates different classes */
.tp-section-title-wrapper { /* Assuming the partial wraps titles in this */
    text-align: center;
    margin-bottom: 40px; /* Space below titles, before categories */
}

span.section-subtitle, /* Example selector for "Shop by Category" */
.tp-section-subtitle-2 { /* Alternative selector if used */
    display: block;
    font-size: 16px;
    color: #77a077; /* Greenish-gray from image */
    margin-bottom: 8px;
    font-weight: 500;
}

h2.section-main-title, /* Example selector for "Popular on the Shofi store." */
h3.tp-section-title { /* Alternative selector if used */
    font-size: 36px;
    color: #22292f; /* Dark color */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
}


/* Category Slider Area */


/* Swiper container adjustments */
.tp-category-slider-active-5.swiper-container {
    overflow: hidden; /* Default Swiper behavior, ensure it's not conflicting */
    padding-bottom: 10px; /* Small space if scrollbar is very close or overlapping */
}

/* Individual Category Item Styling */
.tp-category-item-5.swiper-slide {
    border-radius: 12px;
    overflow: hidden;
    height: 290px; /* Fixed height for consistent card appearance */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Subtle shadow for depth */
    /* Width is handled by Swiper's slidesPerView & spaceBetween */
}

.tp-category-item-5 a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Content at top, image container pushes to bottom */
    align-items: center;
    padding: 25px 15px 20px 15px; /* Top, H, Bottom padding */
    height: 100%;
    text-decoration: none;
    box-sizing: border-box;
}

.tp-category-content-5 {
    text-align: center;
    margin-bottom: 15px; /* Space between text block and image area */
    width: 100%;
}

.tp-category-title-5 {
    font-size: 17px;
    font-weight: 600;
    color: #2c3e50; /* Darker text color */
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.tp-category-count-5 { /* New class for item count span */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.tp-category-image-container-5 { /* New wrapper for the image */
    margin-top: auto; /* This pushes the image container to the bottom */
    width: 100%;
    max-height: 150px; /* Max height for the area containing the image */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aligns image to the bottom of this container */
}

.tp-category-actual-image-5 { /* Class for the actual  tag */
    max-width: 90%; /* Ensure image doesn't touch card edges */
    max-height: 120px; /* Control actual image size */
    object-fit: contain;
    display: block; /* Removes extra space below image if it's inline */
}

/* Specific Styles for Categories using :nth-child.
   This assumes the order in the $categories loop matches the desired visual order.
   If your backend can provide specific color codes per category,
   using inline styles or data-attributes would be more robust. */

/* 1. Frozen Foods */
.tp-category-item-5.swiper-slide:nth-child(5n+1) {
    background-color: #eff7ee; /* Very light green */
}
.tp-category-item-5.swiper-slide:nth-child(5n+1) .tp-category-count-5 {
    color: #509650; /* Green */
}

/* 2. Meat and Fish */
.tp-category-item-5.swiper-slide:nth-child(5n+2) {
    background-color: #fdeef0; /* Very light pink */
}
.tp-category-item-5.swiper-slide:nth-child(5n+2) .tp-category-count-5 {
    color: #e57373; /* Reddish */
}

/* 3. Milk & Dairy */
.tp-category-item-5.swiper-slide:nth-child(5n+3) {
    background-color: #fbf9f6; /* Very light off-white/beige */
}
.tp-category-item-5.swiper-slide:nth-child(5n+3) .tp-category-count-5 {
    color: #e57373; /* Reddish */
}

/* 4. Beverages */
.tp-category-item-5.swiper-slide:nth-child(5n+4) {
    background-color: #eff7ee; /* Very light green (same as Frozen Foods in image) */
}
.tp-category-item-5.swiper-slide:nth-child(5n+4) .tp-category-count-5 {
    color: #509650; /* Green */
}

/* 5. Vegetables */
.tp-category-item-5.swiper-slide:nth-child(5n+5) {
    background-color: #fef0e6; /* Very light peach */
}
.tp-category-item-5.swiper-slide:nth-child(5n+5) .tp-category-count-5 {
    color: #ff9800; /* Orange */
}


/* Swiper Scrollbar */
.tp-category-5-swiper-scrollbar.tp-swiper-scrollbar {
    position: relative; /* Swiper default might be absolute */
    bottom: auto; /* Reset if needed */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 60%, 300px); /* Responsive width: min, preferred, max */
    height: 5px; /* Thickness of the scrollbar track */
    background-color: #eef0f2; /* Light grey track */
    border-radius: 3px;
    margin-top: 35px; /* Space between cards and scrollbar */
    margin-bottom: 5px; /* Space below scrollbar */
}

.tp-category-5-swiper-scrollbar.tp-swiper-scrollbar .swiper-scrollbar-drag {
    background-color: #555d66; /* Darker grey for the drag handle */
    border-radius: 3px;
    height: 100%;
}

/* Utility classes from original HTML, if needed */
.fix::after { content: ""; display: table; clear: both; }
.p-relative { position: relative; }
.z-index-1 { z-index: 1; }
.text-center { text-align: center; } /* Ensure this is available if used by partial */
.mb-50 { margin-bottom: 50px; } /* Ensure this is available if used by partial */
.mb-60 { margin-bottom: 60px; } /* Ensure this is available if used by partial */

/* Ensure Swiper JS is initialized correctly, for example:
new Swiper('.tp-category-slider-active-5', {
    slidesPerView: 5, // Show 5 slides on larger screens
    spaceBetween: 20, // Adjust gap between slides
    loop: false, // Set to true if you want infinite loop
    grabCursor: true,
    scrollbar: {
        el: '.tp-category-5-swiper-scrollbar',
        draggable: true,
        hide: false, // Ensure scrollbar is always visible
    },
    breakpoints: { // Responsive adjustments for different screen sizes
        1200: { slidesPerView: 5, spaceBetween: 20 },
        992: { slidesPerView: 4, spaceBetween: 15 },
        768: { slidesPerView: 3, spaceBetween: 15 },
        576: { slidesPerView: 2, spaceBetween: 10 },
        0: { slidesPerView: 1.8, spaceBetween: 10, centeredSlides: false } // For very small screens
    }
});
*/