/* Color Pill Button Styles */
        .color-btn-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            border: 1px solid #e4e4e4;
            border-radius: 4px;
            background-color: #fff;
            color: #101010;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .color-btn-text:hover:not(:disabled) {
            border-color: #101010;
        }

        /* Active Selected State */
        .color-btn-text.active {
            border-color: #101010;
            background-color: #101010;
            color: #ffffff;
        }

        /* Disabled/Out-of-Stock State */
        .color-btn-text:disabled,
        .color-btn-text.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            text-decoration: line-through;
            background-color: #f5f5f5;
            border-color: #e4e4e4;
        }

        .swatch-color-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid #e2e8f0;
            padding: 2px;
            background: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        .swatch-color-btn:hover {
            border-color: #000;
            transform: scale(1.05);
        }

        .swatch-color-btn.active {
            border: 2px solid #000;
            box-shadow: 0 0 0 1px #fff inset;
        }

        .swatch-color-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: block;
            border: 1px solid rgba(0, 0, 0, 0.08); /* Keeps white/light swatches clearly defined */
        }

        .banner-tall {
            aspect-ratio: 3 / 4; /* Tall aspect ratio for Category 1 */
            object-fit: cover;
            width: 100%;
        }

        .banner-wide {
            aspect-ratio: 16 / 9; /* Wide aspect ratio for stacked categories */
            object-fit: cover;
            width: 100%;
        }

        /* Base modal backdrop (1st modal) */
        .modal-backdrop {
            z-index: 1040 !important;
        }

        /* Auth / Standard Modals */
        .modal-log,
        .modal {
            z-index: 1050 !important;
        }

        /* Secondary/Even Backdrops (When opening a 2nd modal on top of a 1st) */
        .modal-backdrop + .modal-backdrop,
        .modal-backdropssss {
            z-index: 1055 !important;
        }

        /* Higher Priority Modals (QuickAdd, QuickView) */
        #quickAdd,
        #quickView {
            z-index: 1060 !important;
        }

        /* Offcanvas Drawers & Overlays */
        .offcanvas-backdrop {
            z-index: 1065 !important;
        }

        .offcanvas,
        .offcanvas.canvas-cart {
            z-index: 1070 !important;
        }

        .offcanvas-lg.blog-offcanvas-sidebar {
            z-index: 1080 !important;
        }

        /*
        |--------------------------------------------------------------------------
        | Product Grid
        |--------------------------------------------------------------------------
        */

        .responsive-product-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
            width: 100%;
            max-width: 100%;
        }


        /*
        |--------------------------------------------------------------------------
        | Grid Items
        |--------------------------------------------------------------------------
        */

        .product-grid-item {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }


        /*
        |--------------------------------------------------------------------------
        | Make Product Card Responsive
        |--------------------------------------------------------------------------
        */

        .product-grid-item > * {
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }


        /*
        |--------------------------------------------------------------------------
        | Tablet
        |--------------------------------------------------------------------------
        */

        @media (max-width: 1199.98px) {

            .responsive-product-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 20px;
            }

        }


        /*
        |--------------------------------------------------------------------------
        | Small Tablet
        |--------------------------------------------------------------------------
        */

        @media (max-width: 991.98px) {

            .responsive-product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
            }

        }


        /*
        |--------------------------------------------------------------------------
        | Mobile
        |--------------------------------------------------------------------------
        */

        @media (max-width: 767.98px) {

            .responsive-product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px 12px;
            }

            .tf-shop-control {
                flex-wrap: wrap;
            }

            .tf-shop-control .text-caption-01 {
                font-size: 12px;
            }

        }


        /*
        |--------------------------------------------------------------------------
        | Small Mobile
        |--------------------------------------------------------------------------
        */

        @media (max-width: 575.98px) {

            .responsive-product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px 10px;
            }

            .tf-shop-control {
                gap: 10px !important;
            }

            .tf-shop-control .text-caption-01 {
                font-size: 11px;
                line-height: 1.4;
            }

            .tf-dropdown-sort {
                max-width: 170px;
            }

            .tf-dropdown-sort select {
                max-width: 170px;
                font-size: 12px;
            }

        }


        /*
        |--------------------------------------------------------------------------
        | Loading Overlay
        |--------------------------------------------------------------------------
        */

        .shop-products-wrapper {
            position: relative;
            width: 100%;
            min-width: 0;
        }

        .shop-loading-overlay {
            position: absolute;
            inset: 0;
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.7);
        }

        @media (max-width: 575px) {
            .tf-btn.small.w-100 {
                padding: 3px 3px;
                font-size: 13px;
            }
            
        }

        @media (min-width: 576px) {
            .tf-table-page-cart.my-custom-table td:nth-child(1),
            .tf-table-page-cart.my-custom-table th:nth-child(1) {
                min-width: 75px;
            }
        }