:root {
            --c-red: #B80000;
            --c-dark: #111111;
            --c-bg: #F8F9FA;
            --c-line: #E4E4E4;
            --rule: linear-gradient(90deg, var(--c-dark) 0%, var(--c-red) 100%);
        }
        
        
        /* Smooth Desktop Dropdown Hover Effect */
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.2s ease-in-out;
        }

        .group:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Sidebar Accordion Smooth Transition */
        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }

        .submenu.open {
            max-height: 300px;
        }

        /* flash sale */
        /* Slick Track padding override to remove left/right gaps */
        .vegetablesSlider .slick-list {
            margin: 0 -8px;
            /* Smooth spacing between product cards */
        }

        /* Custom Styling for Slick Arrows */
        .slick-prev,
        .slick-next {
            z-index: 10;
            width: 38px;
            height: 38px;
            background-color: #ffffff !important;
            border-radius: 9999px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            border: 1px solid #E5E7EB;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .slick-prev:hover,
        .slick-next:hover {
            background-color: #B80000 !important;
            border-color: #B80000;
        }

        .slick-prev:before,
        .slick-next:before {
            color: #111827 !important;
            font-size: 16px;
            opacity: 1;
        }

        .slick-prev:hover:before,
        .slick-next:hover:before {
            color: #ffffff !important;
        }

        .slick-prev {
            left: 8px;
        }

        .slick-next {
            right: 8px;
        }


        /* Swiper Custom Pagination Styles */
        .swiper-pagination-bullet {
            background-color: #cbd5e1;
            opacity: 1;
            width: 10px;
            height: 10px;
            transition: all 0.3s ease;
        }

        .swiper-pagination-bullet-active {
            background-color: #B80000 !important;
            width: 24px;
            border-radius: 6px;
        }

        /* Wave Pulse Animation for Floating Main Button */
        @keyframes pulse-ring {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(184, 0, 0, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 16px rgba(184, 0, 0, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(184, 0, 0, 0);
            }
        }

        .animate-pulse-ring {
            animation: pulse-ring 2s infinite;
        }

        /*  */

        

       
        /* recurring brand motif: a two-tone rule used at section thresholds */
        .brand-rule {
            height: 3px;
            background: var(--rule);
            border: none;
        }

        .brand-rule-thin {
            height: 2px;
            background: var(--rule);
            border: none;
            opacity: .9;
        }

        ::selection {
            background: var(--c-red);
            color: #fff;
        }

        .qty-btn {
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--c-dark);
            background: #fff;
            transition: background .15s;
        }

        .qty-btn:hover {
            background: #FBEFEF;
        }

        .qty-input {
            width: 2.75rem;
            height: 2.5rem;
            text-align: center;
            border: none;
            font-weight: 700;
            font-size: .95rem;
            color: var(--c-dark);
            background: #fff;
        }

        .qty-input:focus {
            outline: none;
        }

        .ic-input {
            width: 100%;
            border-radius: .65rem;
            border: 1.5px solid var(--c-line);
            background: #fff;
            padding: .8rem .9rem .8rem 2.5rem;
            font-size: .9rem;
            outline: none;
            transition: border-color .15s, box-shadow .15s;
        }

        .ic-input:focus {
            border-color: var(--c-red);
            box-shadow: 0 0 0 3px rgba(184, 0, 0, .10);
        }

        .ic-sublabel {
            font-size: .72rem;
            font-weight: 600;
            color: #6B7280;
            margin-bottom: .3rem;
            display: block;
        }

        .ptab-btn[aria-selected="true"] {
            color: var(--c-dark);
            border-color: var(--c-red);
        }

        .ptab-btn[aria-selected="false"] {
            color: #8A8A8A;
            border-color: transparent;
        }

        .payment-option {
            transition: border-color .15s, background .15s, box-shadow .15s;
        }

        .payment-option[data-active="true"] {
            border-color: var(--c-red);
            background: #FBEFEF;
            box-shadow: 0 4px 14px rgba(184, 0, 0, .12);
        }

        .step-dot {
            width: 1.9rem;
            height: 1.9rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75rem;
            font-weight: 700;
        }

        /* min-w-0 keeps flex text children from forcing overflow on narrow screens */
        .truncate-flex {
            min-width: 0;
        }

        .rel-track {
            width: max-content;
            will-change: transform;
        }

        .rel-nav-btn {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 9999px;
            background: #fff;
            border: 1.5px solid var(--c-line);
            color: var(--c-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(17, 17, 17, .08);
            transition: background .15s, color .15s;
        }

        .rel-nav-btn:hover {
            background: var(--c-dark);
            color: #fff;
            border-color: var(--c-dark);
        }

        @media (prefers-reduced-motion: reduce) {

            .brand-rule,
            .brand-rule-thin,
            .payment-option,
            .rel-nav-btn {
                transition: none;
            }
        }



        .marquee-viewport {
            overflow: hidden;
        }

        .marquee-track {
            width: max-content;
            will-change: transform;
        }

        .marquee-nav-btn {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 9999px;
            background: #fff;
            border: 1.5px solid #E2E8F0;
            color: #0F2C59;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
            transition: background .15s, color .15s;
        }

        .marquee-nav-btn:hover {
            background: #0F2C59;
            color: #fff;
            border-color: #0F2C59;
        }

        .product-card {
            width: 210px;
        }

        @media (min-width:640px) {
            .product-card {
                width: 230px;
            }
        }

        @media (min-width:1024px) {
            .product-card {
                width: 250px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .marquee-track {
                transition: none !important;
            }
        }