.cart-panel.is-loading {
                visibility: hidden;
            }

            .cart-panel.is-ready {
                visibility: visible;
            }

            /* ====== Cart Overlay + Panel (keep in layout) ====== */

            .cart-overlay {

                position: fixed;

                inset: 0;

                background: rgba(10, 12, 16, .55);

                opacity: 0;

                pointer-events: none;

                transition: opacity .22s ease;

                z-index: 9998;

                backdrop-filter: blur(2px);

            }



            .cart-overlay.open {

                opacity: 1;

                pointer-events: auto;

            }



            .cart-panel {

                position: fixed;

                top: 0;

                right: 0;

                bottom: 0;

                width: min(420px, 92vw);

                /*max-width: 105%;*/

                width: 100%;

                background: #fff;

                transform: translateX(110%);

                transition: transform .28s cubic-bezier(.2, .9, .2, 1);

                z-index: 9999;

                display: flex;

                box-shadow: -22px 0 70px rgba(0, 0, 0, .26);

                border-left: 1px solid rgba(0, 0, 0, .06);

            }



            .cart-panel.open {

                transform: translateX(0);

            }



            .s-cart {

                /*width: 23%;*/

                width: 100%;

                display: flex;

                flex-direction: column;

                min-height: 100%;

                font-family: inherit;

            }



            /* ====== Head ====== */

            .s-cart__head {

                padding: 16px 16px 12px;

                border-bottom: 1px solid rgba(0, 0, 0, .08);

                display: flex;

                align-items: center;

                justify-content: space-between;

                position: sticky;

                top: 0;

                z-index: 3;

                background: #fff;

            }



            .s-cart__h {

                font-size: 16px;

                font-weight: 800;

                letter-spacing: .2px;

            }



            .s-cart__sub {

                font-size: 12px;

                color: rgba(0, 0, 0, .55);

                margin-top: 2px;

            }



            .s-cart__close {

                width: 38px;

                height: 38px;

                border-radius: 14px;

                border: 1px solid rgba(0, 0, 0, .10);

                background: #fff;

                cursor: pointer;

                display: grid;

                place-items: center;

                transition: transform .12s ease, box-shadow .12s ease, background .12s ease;

            }



            .s-cart__close:hover {

                box-shadow: 0 10px 22px rgba(0, 0, 0, .10);

                background: rgba(0, 0, 0, .02);

            }



            .s-cart__close:active {

                transform: scale(.98);

            }



            /* ====== Alert ====== */

            .s-cart__alert {

                margin: 12px 16px 0;

                border: 1px solid rgba(245, 158, 11, .30);

                background: rgba(245, 158, 11, .10);

                border-radius: 16px;

                padding: 12px;

                display: flex;

                gap: 10px;

                align-items: flex-start;

            }



            .s-cart__alertIcon {

                width: 30px;

                height: 30px;

                border-radius: 12px;

                display: grid;

                place-items: center;

                background: rgba(245, 158, 11, .18);

                font-weight: 900;

            }



            .s-cart__alertTxt strong {

                font-size: 13px;

            }



            .s-muted {

                font-size: 12px;

                color: rgba(0, 0, 0, .55);

            }



            /* ====== Benefits ====== */

            .s-cart__benefits {

                padding: 10px 16px 0;

                display: flex;

                gap: 8px;

                flex-wrap: wrap;

            }



            .s-pill {

                font-size: 11px;

                padding: 6px 10px;

                border-radius: 999px;

                background: rgba(64, 155, 43, .08);

                border: 1px solid rgba(64, 155, 43, .18);

                color: rgba(0, 0, 0, .75);

            }



            /* ====== Free Shipping ====== */

            .s-cart__ship {

                margin: 12px 16px 0;

                border-radius: 16px;

                border: 1px solid rgba(0, 0, 0, .08);

                background: rgba(0, 0, 0, .02);

                padding: 10px 12px;

            }



            .s-cart__shipRow {

                display: flex;

                justify-content: space-between;

                gap: 10px;

                font-size: 12px;

                color: rgba(0, 0, 0, .75);

                margin-bottom: 8px;

            }



            .s-bar {

                height: 8px;

                border-radius: 999px;

                background: rgba(0, 0, 0, .08);

                overflow: hidden;

            }



            .s-bar__fill {

                display: block;

                height: 100%;

                background: linear-gradient(90deg, #409b2b, #7bd157);

                border-radius: 999px;

            }



            /* ====== Body ====== */

            .s-cart__body {

                padding: 14px 16px 18px;

                overflow: auto;

                flex: 1;

            }



            /* ====== Empty ====== */

            .s-empty {

                border: 1px dashed rgba(0, 0, 0, .16);

                border-radius: 18px;

                padding: 22px 16px;

                text-align: center;

                background: rgba(0, 0, 0, .02);

            }



            .s-empty__icon {

                font-size: 28px;

            }



            .s-empty h4 {

                margin: 10px 0 6px;

                font-size: 16px;

                font-weight: 900;

            }



            .s-empty__note {

                margin-top: 10px;

                font-size: 12px;

                color: rgba(0, 0, 0, .55);

            }



            /* ====== Items ====== */

            .s-items {

                display: flex;

                flex-direction: column;

                gap: 12px;

            }



            .s-item {

                border: 1px solid rgba(0, 0, 0, .08);

                border-radius: 18px;

                padding: 12px;

                display: flex;

                gap: 12px;

                background: #fff;

                transition: transform .14s ease, box-shadow .14s ease;

            }



            .s-item:hover {

                box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

                transform: translateY(-1px);

            }



            .s-item__img {

                width: 74px;

                height: 74px;

                border-radius: 16px;

                border: 1px solid rgba(0, 0, 0, .06);

                background: #f6f7f8;

                overflow: hidden;

                flex: 0 0 auto;

                display: grid;

                place-items: center;

            }



            .s-item__img img {

                width: 100%;

                height: 100%;

                object-fit: cover;

            }



            .s-ph {

                font-size: 20px;

                opacity: .7;

            }



            .s-item__meta {

                flex: 1;

                min-width: 0;

            }



            .s-item__top {

                display: flex;

                justify-content: space-between;

                align-items: flex-start;

                gap: 10px;

            }



            .s-item__name {

                font-weight: 850;

                font-size: 14px;

                line-height: 1.2;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

            }



            .s-item__variant {

                font-size: 12px;

                color: rgba(0, 0, 0, .55);

                margin-top: 4px;

            }



            .s-icon {

                width: 34px;

                height: 34px;

                border-radius: 12px;

                border: 1px solid rgba(0, 0, 0, .10);

                background: #fff;

                cursor: pointer;

                display: grid;

                place-items: center;

                transition: background .12s ease, transform .12s ease, box-shadow .12s ease;

                color: rgba(0, 0, 0, .55);

            }



            .s-icon svg {

                width: 18px;

                height: 18px;

                stroke: red;

                stroke-width: 1.8;

                fill: none;

                stroke-linecap: round;

                stroke-linejoin: round;

            }



            .s-icon:hover {

                background: rgba(239, 68, 68, .08);

                color: #dc2626;

                box-shadow: 0 10px 22px rgba(0, 0, 0, .10);

            }



            .s-icon:active {

                transform: scale(.98);

            }



            .s-item__bottom {

                margin-top: 12px;

                display: flex;

                align-items: center;

                justify-content: space-between;

                gap: 10px;

            }



            .s-item__price {

                font-size: 13px;

                font-weight: 850;

                color: rgba(0, 0, 0, .80);

            }



            .s-qty {

                display: inline-flex;

                align-items: center;

                gap: 8px;

                padding: 6px;

                border-radius: 14px;

                border: 1px solid rgba(0, 0, 0, .10);

                background: rgba(0, 0, 0, .02);

            }



            .s-qty__btn {

                width: 34px;

                height: 34px;

                border-radius: 12px;

                border: 1px solid rgba(0, 0, 0, .12);

                background: #fff;

                cursor: pointer;

                font-size: 18px;

                line-height: 0;

                display: grid;

                place-items: center;

                transition: background .12s ease, transform .12s ease;

            }



            .s-qty__btn:hover {

                background: rgba(0, 0, 0, .04);

            }



            .s-qty__btn:active {

                transform: scale(.98);

            }



            .s-qty__in {

                width: 54px;

                height: 34px;

                border-radius: 12px;

                border: 1px solid rgba(0, 0, 0, .12);

                background: #fff;

                text-align: center;

                font-weight: 900;

                font-size: 13px;

                outline: none;

            }



            /* ====== Recommended Rail ====== */

            .s-rec {

                margin-top: 18px;

            }



            .s-rec__head {

                display: flex;

                align-items: baseline;

                justify-content: space-between;

                margin-bottom: 10px;

            }



            .s-rec__head h5 {

                margin: 0;

                font-size: 14px;

                font-weight: 900;

            }



            .s-link {

                font-size: 12px;

                color: #409b2b;

                text-decoration: none;

                font-weight: 800;

            }



            .s-link:hover {

                text-decoration: underline;

            }



            .s-rec__rail {

                display: flex;

                gap: 10px;

                overflow: auto;

                padding-bottom: 6px;

                scroll-snap-type: x mandatory;

            }



            .s-recCard {

                min-width: 115px;

                border: 1px solid rgba(0, 0, 0, .08);

                border-radius: 16px;

                padding: 6px;

                background: #fff;

                display: flex;

                gap: 10px;

                align-items: baseline;

                scroll-snap-align: start;

                flex-direction: column;

		overflow: scroll;

            }



            .s-recCard img {

                width: 165px;

                height: 145px;

                border-radius: 12px;

                object-fit: cover;

                background: #f6f7f8;

                border: 1px solid rgba(0, 0, 0, .06);

            }



            .s-recCard__name {

                font-size: 13px;

                font-weight: 850;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

                max-width: 120px;

            }



            .s-recCard__price {

                font-size: 12px;

                color: rgba(0, 0, 0, .60);

                margin-top: 2px;

            }



            .s-add {

                margin-left: auto;

                width: 34px;

                height: 34px;

                border-radius: 999px;

                border: 1px solid rgba(0, 0, 0, .10);

                background: #E9AD21;

                font-weight: 900;

                cursor: pointer;

                transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;

            }



            .s-add:hover {

                box-shadow: 0 12px 22px rgba(0, 0, 0, .14);

                filter: brightness(.98);

            }



            .s-add:active {

                transform: scale(.98);

            }



            /* ====== Footer ====== */

            .s-cart__foot {

                position: sticky;

                bottom: 0;

                z-index: 4;

                background: #fff;

                border-top: 1px solid rgba(0, 0, 0, .08);

                padding: 14px 16px calc(14px + env(safe-area-inset-bottom));

            }



            .s-sum {

                border: 1px solid rgb(64 155 43);

        	border-radius: 10px;
	
    		padding: 0px 40px;

                background: rgba(0, 0, 0, .02);

            }



            .s-sum__row {

                display: flex;

                justify-content: space-between;

                align-items: center;

                padding: 6px 0;

                font-size: 13px;

            }



            .s-sum__row--total {

                font-size: 14px;

                font-weight: 900;

            }



            .s-sum__div {

                height: 1px;

                background: rgba(0, 0, 0, .08);

                margin: 8px 0;

            }



            .s-actions {

                display: flex;

                gap: 10px;

                margin-top: 12px;

            }



            .s-btn {

                height: 46px;

                border-radius: 999px;

                display: inline-flex;

                align-items: center;

                justify-content: center;

                font-weight: 900;

                border: 1px solid rgba(0, 0, 0, .12);

                cursor: pointer;

                text-decoration: none;

                padding: 0 16px;

                transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;

                flex: 1;

            }



            .s-btn:active {

                transform: scale(.99);

            }



            .s-btn--ghost {

                background: #fff;

            }



            .s-btn--ghost:hover {

                background: rgba(0, 0, 0, .04);

            }



            .s-btn--primary {

                background: #409b2b;

                color: #fff;

                border-color: rgba(0, 0, 0, .08);

                box-shadow: 0 18px 38px rgba(64, 155, 43, .25);

            }



            .s-btn--primary:hover {

                opacity: .95;

            }



            .s-cart__secure {

                margin-top: 10px;

                font-size: 12px;

                color: rgba(0, 0, 0, .55);

                text-align: center;

            }



            @media (max-width:420px) {

                .cart-panel {

                    position: fixed;

                    top: 0;

                    right: 0;

                    bottom: 0;

                    /*width: min(420px, 92vw);*/

                    max-width: 105%;

                    width: 100%;

                    background: #fff;

                    transform: translateX(110%);

                    transition: transform .28s cubic-bezier(.2, .9, .2, 1);

                    z-index: 9999;

                    display: flex;

                    box-shadow: -22px 0 70px rgba(0, 0, 0, .26);

                    border-left: 1px solid rgba(0, 0, 0, .06);

                }

                .s-item__img {

                    width: 90px;

                    height: 90px;

                }



                .s-btn {

                    height: 44px;

                }



                .s-recCard {

                    min-width: 168px;

                }

            }



            .s-recCard__name {

                text-decoration: none;

                color: rgba(0, 0, 0, .85);

                display: block;

            }



            .s-recCard__name:hover {

                text-decoration: underline;

            }



            .s-recCard__media {

                display: block;

            }