/* Front page custom styles */
body {
    background: #f8f9fa
}

.product-list .d-flex {
    transition: box-shadow .15s;

}

.product-list .d-flex:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06)
}

#cart-sidebar {
    position: sticky;
    top: 20px
}

.product-name {
    font-size: 0.95rem
}

.category-item.active {
    background: #f1f5fb;
    font-weight: 600
}

@media (max-width:767px) {
    #cart-sidebar {
        position: static;
        margin-top: 1rem
    }
}

/* Styling the active category item */
.list-group-item.category-item.active {
    background-color: #0d6efd;
    /* Bootstrap primary blue, change to your brand color */
    border-color: #0d6efd;
    /* Matches the background border */
    color: #ffffff;
    /* Ensures text is easily readable */
    font-weight: 600;
    /* Makes the active item stand out a bit more */
}

/* Optional: Smooth transition when switching active states */
.category-item {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Multi-line truncation for category titles (max 2 lines) */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Circular Category Image Container */
.category-img-box {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    border: 1px solid #dee2e6 !important;
    background-color: #ffffff !important;
    padding: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
}



/* Category text labels styling */
.category-link span {
    color: #5a6b82 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, font-weight 0.2s ease;
    margin-top: 4px;
}

.category-link:hover span,
.category-link.active span {
    color: #0349b3 !important;
    font-weight: 700 !important;
}

/* Absolute Floating Prev/Next Scroll Chevrons */
#prev-category-btn,
#next-category-btn {
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #4a5568 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    top: 36% !important;
    /* aligns vertically with category circles center */
    transform: translateY(-50%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease-in-out !important;
    padding: 0 !important;
}

#prev-category-btn {
    left: 15px !important;
}

#next-category-btn {
    right: 15px !important;
}

#prev-category-btn:hover,
#next-category-btn:hover {
    background-color: #f8f9fa !important;
    color: #0349b3 !important;
    border-color: #0349b3 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

/* Scroll Container Padding and Offsets */
#category-scroll-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .category-nav-row {
        min-height: 120px !important;
    }

    .category-mobile-grid-btn-col {
        min-height: 120px !important;
    }

    .category-img-box {
        width: 78px !important;
        height: 78px !important;
        padding: 4px !important;
    }

    .category-item-wrapper {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    #prev-category-btn {
        left: 60px !important;
        /* offset to sit directly right of the mobile grid button line */
        width: 28px !important;
        height: 28px !important;
    }

    #next-category-btn {
        right: 8px !important;
        width: 28px !important;
        height: 28px !important;
    }

    #category-scroll-container {
        padding-left: 4px !important;
        /* offset left scrolling window past mobile grid + prev button */
        padding-right: 4px !important;
        /* offset right scrolling past next button */
        min-height: 120px !important;
    }
}

/* Premium bottom offcanvas styles */
.offcanvas.offcanvas-bottom {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
}

/* Sidebar and Offcanvas item styling */
.category-item {
    transition: all 0.2s ease;
}

.category-item:hover {
    background-color: #f1f5fb;
    transform: translateX(3px);
}

.list-group-item.category-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.list-group-item.category-item.active span {
    color: #ffffff !important;
}

.list-group-item.category-item.active img {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Mobile Search Bar Transition */
#mobile-search-bar-wrapper {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Floating button hover and active animation */
#cart-offcanvas-trigger {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#cart-offcanvas-trigger:hover,
#cart-offcanvas-trigger:focus {
    transform: scale(1.05);
    background-color: #0b5ed7 !important;
}

#cart-offcanvas-trigger:active {
    transform: scale(0.95);
}

/* Floating cart icon and label spacing */
#cart-offcanvas-trigger i {
    margin-right: 2px;
}

/* Premium Sort Dropdown Styling */
.dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 6px !important;
}

.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

.dropdown-item.sort-option {
    font-size: 0.95rem !important;
    color: #212529 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease;
    font-weight: 500;
}

.dropdown-item.sort-option:hover {
    background-color: #f3f4f6 !important;
    color: #111111 !important;
}

.dropdown-item.sort-option.active {
    background-color: #e5e7eb !important;
    color: #111111 !important;
    font-weight: 600 !important;
}

.dropdown-toggle.no-caret::after {
    display: none !important;
}