:root {
                                /* Color Palette */
                                --carousel-bg: #f8f9fb;
                                --card-bg: #ffffff;
                                --card-bg-gradient: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
                                --text-primary: #1a1d23;
                                --text-secondary: #6b7280;
                                --text-muted: #9ca3af;
                                --accent-color: #4f46e5;
                                --accent-hover: #4338ca;
                                --accent-light: rgba(79, 70, 229, 0.08);
                                --badge-bg: #eef2ff;
                                --badge-text: #4f46e5;
                                --star-color: #f59e0b;
                                --star-empty: #d1d5db;
                                --border-color: #e5e7eb;
                                --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
                                --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
                                --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);
                                --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
                                --glass-bg: rgba(255, 255, 255, 0.75);
                                --glass-border: rgba(255, 255, 255, 0.5);
                                --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
                                --glass-blur: blur(16px);
                                --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
                                --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
                                --transition-card: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                --transition-slide: 600ms cubic-bezier(0.42, 0, 0.18, 1);
                                --card-radius: 18px;
                                --img-radius: 14px;
                                --section-padding: 10px 0;
                            }



                            /* ──────────────────────────────────────
           Section Wrapper
           ────────────────────────────────────── */
                            .products-section {
                                width: 100%;
                                /* max-width: 1280px; */
                                margin: 0 auto;
                                padding: var(--section-padding);
                                opacity: 0;
                                transform: translateY(30px);
                                transition: opacity 0.7s ease, transform 0.7s ease;
                            }

                            .products-section.is-visible {
                                opacity: 1;
                                transform: translateY(0);
                            }

                            .section-header {
                                text-align: center;
                                margin-bottom: 20px;
                            }

                            .section-header .section-label {
                                display: inline-block;
                                font-size: 0.8rem;
                                font-weight: 600;
                                letter-spacing: 0.08em;
                                text-transform: uppercase;
                                color: var(--accent-color);
                                background: var(--accent-light);
                                padding: 0.35rem 1rem;
                                border-radius: 999px;
                                margin-bottom: 0.75rem;
                            }

                            .section-header h2 {
                                font-size: 2rem;
                                font-weight: 700;
                                color: var(--text-primary);
                                margin: 0;
                                letter-spacing: -0.02em;
                                line-height: 1.2;
                            }

                            .section-header .section-subtitle {
                                font-size: 0.95rem;
                                color: var(--text-secondary);
                                margin-top: 0.4rem;
                                font-weight: 400;
                            }

                            /* ──────────────────────────────────────
           Carousel Container
           ────────────────────────────────────── */
                            .carousel-outer {
                                position: relative;
                                width: 100%;
                            }

                            /* Viewport – the visible window */
                            .carousel-viewport {
                                overflow: hidden;
                                border-radius: 4px;
                                position: relative;
                                /* Ensures no horizontal scroll */
                                margin: 0;
                                padding: 0;
                                /* Provide space for card shadows */
                                padding: 12px 4px 55px 4px;
                                margin: -12px -4px -20px -4px;
                            }

                            /* Track – holds all cards, moved via transform */
                            .carousel-track {
                                display: flex;
                                gap: 20px;
                                will-change: transform;
                                /* GPU acceleration */
                                transform: translateZ(0);
                                backface-visibility: hidden;
                                -webkit-backface-visibility: hidden;
                                transition: transform var(--transition-slide);
                            }

                            .carousel-track.no-transition {
                                transition: none !important;
                            }

                            .carousel-track.is-dragging {
                                transition: none !important;
                                cursor: grabbing;
                            }

                            /* ──────────────────────────────────────
           Product Card
           ────────────────────────────────────── */
                            .product-card {
                                flex-shrink: 0;
                                background: var(--card-bg-gradient);
                                border-radius: var(--card-radius);
                                border: 1px solid var(--border-color);
                                box-shadow: var(--shadow-sm);
                                display: flex;
                                flex-direction: column;
                                overflow: hidden;
                                cursor: pointer;
                                transition:
                                    transform var(--transition-card),
                                    box-shadow var(--transition-card),
                                    border-color var(--transition-fast);
                                position: relative;
                                /* Equal height – all cards in the row stretch */
                                align-self: stretch;
                                /* GPU acceleration for hover */
                                will-change: transform, box-shadow;
                                transform: translateZ(0);
                                backface-visibility: hidden;
                                -webkit-backface-visibility: hidden;
                                user-select: none;
                                -webkit-user-select: none;
                                -webkit-tap-highlight-color: transparent;
                            }

                            .product-card:hover {
                                transform: translateY(-8px) translateZ(0);
                                box-shadow: var(--shadow-xl);
                                border-color: #d4d7df;
                            }

                            .product-card:focus-visible {
                                outline: 3px solid var(--accent-color);
                                outline-offset: 4px;
                                border-radius: var(--card-radius);
                            }

                            /* Image Container */
                            .card-img-wrapper {
                                position: relative;
                                width: 100%;
                                aspect-ratio: 4 / 3;
                                /* Fixed aspect ratio prevents layout shift */
                                overflow: hidden;
                                background: #eef0f5;
                                /* Placeholder color while image loads */
                                flex-shrink: 0;
                            }

                            .card-img-wrapper img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                display: block;
                                transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                will-change: transform;
                                transform: translateZ(0);
                                backface-visibility: hidden;
                                -webkit-backface-visibility: hidden;
                                /* Lazy loading placeholder */
                                background: #eef0f5;
                            }

                            .product-card:hover .card-img-wrapper img {
                                transform: scale(1.07) translateZ(0);
                            }

                            /* Subtle overlay on hover */
                            .card-img-wrapper::after {
                                content: '';
                                position: absolute;
                                inset: 0;
                                background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.03) 100%);
                                pointer-events: none;
                                transition: opacity var(--transition-smooth);
                                opacity: 0;
                            }

                            .product-card:hover .card-img-wrapper::after {
                                opacity: 1;
                            }

                            /* Category Badge */
                            .card-badge {
                                position: absolute;
                                top: 12px;
                                left: 12px;
                                background: var(--badge-bg);
                                color: var(--badge-text);
                                font-size: 0.7rem;
                                font-weight: 600;
                                letter-spacing: 0.04em;
                                text-transform: uppercase;
                                padding: 0.3rem 0.7rem;
                                border-radius: 999px;
                                z-index: 2;
                                pointer-events: none;
                                backdrop-filter: blur(4px);
                                -webkit-backdrop-filter: blur(4px);
                                background: rgba(238, 242, 255, 0.85);
                                border: 1px solid rgba(79, 70, 229, 0.12);
                            }

                            /* Card Body */
                            .card-body-content {
                                padding: 5px 5px 5px;
                                display: flex;
                                flex-direction: column;
                                flex-grow: 1;
                                gap: 0.45rem;
                            }

                            .card-title {
                                font-size: 16px;
                                font-weight: 600;
                                color: var(--text-primary);
                                margin: 0;
                                line-height: 1.35;
                                letter-spacing: -0.01em;
                                /* 2-line clamp */
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                min-height: 35px;
                                text-transform: uppercase;
                                /* Approx 2 lines */
                                text-align: center;
                                margin-top: 10px;
                            }

                            .card-description {
                                font-size: 0.8rem;
                                color: var(--text-secondary);
                                margin: 0;
                                line-height: 1.45;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                flex-shrink: 0;
                            }

                            .card-rating {
                                display: flex;
                                align-items: center;
                                gap: 4px;
                                font-size: 0.82rem;
                                color: var(--star-color);
                                flex-shrink: 0;
                            }

                            .card-rating .rating-value {
                                color: var(--text-secondary);
                                font-size: 0.75rem;
                                margin-left: 3px;
                                font-weight: 500;
                            }

                            .card-rating .bi {
                                font-size: 0.85rem;
                            }

                            .star-empty {
                                color: var(--star-empty) !important;
                            }

                            .card-price-row {
                                display: flex;
                                align-items: baseline;
                                gap: 6px;
                                flex-shrink: 0;
                                margin-top: auto;
                                padding-top: 0.3rem;
                            }

                            .card-price {
                                font-size: 1.2rem;
                                font-weight: 700;
                                color: var(--text-primary);
                                letter-spacing: -0.02em;
                                line-height: 1;
                            }

                            .card-price-original {
                                font-size: 0.8rem;
                                color: var(--text-muted);
                                text-decoration: line-through;
                                font-weight: 400;
                            }

                            .card-btn {
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                gap: 6px;
                                width: 100%;
                                padding: 0.6rem 1rem;
                                font-size: 0.85rem;
                                font-weight: 500;
                                letter-spacing: 0.01em;
                                color: var(--accent-color);
                                background: transparent;
                                border: 1.5px solid var(--accent-color);
                                border-radius: 10px;
                                cursor: pointer;
                                transition:
                                    background var(--transition-fast),
                                    color var(--transition-fast),
                                    border-color var(--transition-fast),
                                    box-shadow var(--transition-fast);
                                flex-shrink: 0;
                                font-family: inherit;
                                text-decoration: none;
                            }

                            .card-btn:hover {
                                background: var(--accent-color);
                                color: #fff;
                                border-color: var(--accent-color);
                                box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
                            }

                            .card-btn:focus-visible {
                                outline: 3px solid var(--accent-color);
                                outline-offset: 3px;
                            }

                            .card-btn .bi {
                                font-size: 0.9rem;
                                transition: transform var(--transition-fast);
                            }

                            .card-btn:hover .bi {
                                transform: translateX(3px);
                            }

                            /* ──────────────────────────────────────
           Navigation Arrows – Glassmorphism
           ────────────────────────────────────── */
                            .carousel-arrow {
                                position: absolute;
                                top: 40%;
                                transform: translateY(-50%) translateZ(0);
                                z-index: 10;
                                width: 48px;
                                height: 48px;
                                border-radius: 50%;
                                border: 1.5px solid rgba(255, 255, 255, 0);
                                /* background: var(--glass-bg); */
                                /* backdrop-filter: var(--glass-blur); */
                                -webkit-backdrop-filter: var(--glass-blur);
                                box-shadow: var(--glass-shadow);
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                transition:
                                    background var(--transition-fast),
                                    box-shadow var(--transition-fast),
                                    transform var(--transition-fast),
                                    border-color var(--transition-fast);
                                color: var(--text-primary);
                                font-size: 1.2rem;
                                -webkit-tap-highlight-color: transparent;
                                user-select: none;
                                -webkit-user-select: none;
                                outline: none;
                            }

                            .carousel-arrow:hover {
                                background: rgba(255, 255, 255, 0.92);
                                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                                border-color: rgba(255, 255, 255, 0.8);
                                transform: translateY(-50%) scale(1.06) translateZ(0);
                            }

                            .carousel-arrow:active {
                                transform: translateY(-50%) scale(0.94) translateZ(0);
                                transition: transform 100ms ease;
                            }

                            .carousel-arrow:focus-visible {
                                outline: 3px solid var(--accent-color);
                                outline-offset: 4px;
                            }

                            .carousel-arrow.arrow-prev {
                                left: -30px;
                                /* display: none; */
                                
                            }

                            .carousel-arrow.arrow-next {
                                right: -30px;
                                /* display: none; */
                                
                            }

                            /* On mobile, bring arrows closer */
                            @media (max-width: 767.98px) {
                                .carousel-arrow.arrow-prev {
                                    left: -8px;
                                }

                                .carousel-arrow.arrow-next {
                                    right: -8px;
                                }

                                .carousel-arrow {
                                    width: 40px;
                                    height: 40px;
                                    font-size: 1rem;
                                }
                            }

                            /* ──────────────────────────────────────
           Pagination Dots
           ────────────────────────────────────── */
                            .carousel-pagination {
                                display: none;
                                justify-content: center;
                                align-items: center;
                                gap: 10px;
                                margin-top: 1.8rem;
                                flex-wrap: wrap;
                            }

                            .pagination-dot {
                                width: 10px;
                                height: 10px;
                                border-radius: 999px;
                                background: #d1d5db;
                                border: none;
                                cursor: pointer;
                                padding: 0;
                                transition:
                                    width var(--transition-smooth),
                                    background var(--transition-fast),
                                    box-shadow var(--transition-fast);
                                position: relative;
                                -webkit-tap-highlight-color: transparent;
                                outline: none;
                                flex-shrink: 0;
                            }

                            .pagination-dot.is-active {
                                width: 30px;
                                background: var(--accent-color);
                                box-shadow: 0 2px 10px rgba(79, 70, 229, 0.35);
                            }

                            .pagination-dot:hover:not(.is-active) {
                                background: #b0b7c3;
                                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
                            }

                            .pagination-dot:focus-visible {
                                outline: 2.5px solid var(--accent-color);
                                outline-offset: 3px;
                            }

                            /* ──────────────────────────────────────
           Responsive Breakpoints
           ────────────────────────────────────── */
                            @media (max-width: 1199.98px) {
                                .section-header h2 {
                                    font-size: 1.7rem;
                                }

                                .carousel-track {
                                    gap: 16px;
                                }

                                .card-body-content {
                                    padding: 0.85rem 1rem 1rem;
                                }

                                .card-title {
                                    font-size: 0.88rem;
                                    min-height: 2.4em;
                                }

                                .card-price {
                                    font-size: 1.1rem;
                                }

                                .card-btn {
                                    font-size: 0.8rem;
                                    padding: 0.5rem 0.8rem;
                                }
                            }

                            @media (max-width: 991.98px) {
                                .section-header h2 {
                                    font-size: 1.5rem;
                                }

                                .carousel-track {
                                    gap: 14px;
                                }

                                .card-body-content {
                                    padding: 0.75rem 0.9rem 0.9rem;
                                    gap: 0.35rem;
                                }

                                .card-title {
                                    font-size: 0.84rem;
                                    min-height: 2.3em;
                                }

                                .card-description {
                                    font-size: 0.75rem;
                                }

                                .card-price {
                                    font-size: 1rem;
                                }

                                .card-rating {
                                    font-size: 0.75rem;
                                }

                                .card-rating .bi {
                                    font-size: 0.78rem;
                                }
                            }

                            @media (max-width: 767.98px) {
                                .section-header h2 {
                                    font-size: 1.35rem;
                                }

                                .section-header .section-label {
                                    font-size: 0.7rem;
                                    padding: 0.25rem 0.8rem;
                                }

                                .carousel-track {
                                    gap: 0;
                                }

                                /* On mobile, single card fills the viewport with padding */
                                .product-card {
                                    border-radius: var(--card-radius);
                                }

                                .card-body-content {
                                    padding: 0.9rem 1rem 1rem;
                                }

                                .card-title {
                                    font-size: 0.9rem;
                                    min-height: 2.5em;
                                }

                                .card-price {
                                    font-size: 1.15rem;
                                }

                                .carousel-viewport {
                                    padding: 8px 0px 16px 0px;
                                    margin: -8px 0px -16px 0px;
                                }

                                .carousel-arrow.arrow-prev {
                                    left: 2px;
                                }

                                .carousel-arrow.arrow-next {
                                    right: 2px;
                                }

                                .carousel-arrow {
                                    width: 38px;
                                    height: 38px;
                                    font-size: 0.95rem;
                                }
                            }

                            /* ──────────────────────────────────────
           Accessibility – Reduced Motion
           ────────────────────────────────────── */
                            @media (prefers-reduced-motion: reduce) {
                                .carousel-track {
                                    transition: none !important;
                                }

                                .product-card {
                                    transition: none !important;
                                }

                                .product-card:hover {
                                    transform: none !important;
                                }

                                .card-img-wrapper img {
                                    transition: none !important;
                                }

                                .product-card:hover .card-img-wrapper img {
                                    transform: none !important;
                                }

                                .carousel-arrow {
                                    transition: none !important;
                                }

                                .pagination-dot {
                                    transition: none !important;
                                }

                                .card-btn {
                                    transition: none !important;
                                }
                            }


                            .card-title a{
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.card-title a:hover{
    color: var(--theme-color);
}

.card-img-wrapper a{
    display: block;
}



.card-img-wrapper{
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.card-img-link{
    display: block;
    width: 100%;
    height: 100%;
}

.card-img-link img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-title a{
    color: inherit;
    text-decoration: none;
}

.card-title a:hover{
    color: var(--theme-color);
}