/* CLS PWA — Mobile Navigation & Install Banner — Premium Edition */

/* ══════════════════════════════════════════════════════
   PWA Header Bar + Hamburger + Drawer Menu
   ══════════════════════════════════════════════════════ */

/* ── Header Bar ── */
.cls-pwa-header {
    display: none;
}

@media (display-mode: standalone) {
    .cls-pwa-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        background: linear-gradient(135deg, #001a33 0%, #003366 100%);
        padding-top: env(safe-area-inset-top, 0px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    }

    .cls-pwa-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 16px;
    }

    .cls-pwa-header-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #fff;
    }

    .cls-pwa-header-logo img {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        object-fit: cover;
        object-position: center;
        transform: scale(1.25);
        clip-path: inset(0 round 8px);
    }

    .cls-pwa-header-logo span {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* Hide theme header */
    .site-header,
    .site-header-main,
    #header-widget-area,
    .top-head {
        display: none !important;
    }

    /* Body offset for fixed header */
    body.cls-pwa-logged-in {
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    }

    /* ── Burger Button ── */
    .cls-pwa-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .cls-pwa-burger:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.15);
    }

    .cls-pwa-burger-line {
        display: block;
        width: 18px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease,
                    width 0.3s ease;
        transform-origin: center;
    }

    .cls-pwa-burger-line:nth-child(1) {
        width: 18px;
    }
    .cls-pwa-burger-line:nth-child(2) {
        width: 14px;
    }
    .cls-pwa-burger-line:nth-child(3) {
        width: 10px;
    }

    /* Burger → X animation */
    .cls-pwa-burger-open .cls-pwa-burger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
        width: 18px;
    }
    .cls-pwa-burger-open .cls-pwa-burger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .cls-pwa-burger-open .cls-pwa-burger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
        width: 18px;
    }

    .cls-pwa-burger-open {
        background: rgba(204, 0, 102, 0.2);
        border-color: rgba(204, 0, 102, 0.3);
    }

    /* ── Drawer Overlay ── */
    .cls-pwa-drawer-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 10, 30, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    .cls-pwa-drawer-overlay-open {
        display: block;
        opacity: 1;
    }

    /* ── Drawer Panel ── */
    .cls-pwa-drawer {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100%;
        z-index: 10000;
        background: linear-gradient(180deg, #001a33 0%, #002244 100%);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        padding-top: env(safe-area-inset-top, 0px);
    }

    .cls-pwa-drawer-open {
        transform: translateX(-300px);
    }

    /* ── Drawer Header / User ── */
    .cls-pwa-drawer-header {
        padding: 24px 20px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(135deg, rgba(204, 0, 102, 0.15), rgba(0, 67, 122, 0.3));
    }

    .cls-pwa-drawer-user {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cls-pwa-drawer-avatar img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid rgba(204, 0, 102, 0.5);
        box-shadow: 0 2px 12px rgba(204, 0, 102, 0.2);
    }

    .cls-pwa-drawer-name {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
    }

    .cls-pwa-drawer-email {
        display: block;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 2px;
    }

    /* ── Drawer Body ── */
    .cls-pwa-drawer-body {
        padding: 8px 0;
    }

    .cls-pwa-drawer-section {
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .cls-pwa-drawer-section:last-child {
        border-bottom: none;
    }

    .cls-pwa-drawer-label {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: rgba(255, 255, 255, 0.3);
        padding: 6px 20px 4px;
    }

    /* ── Drawer Links ── */
    .cls-pwa-drawer-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.2s ease,
                    color 0.2s ease,
                    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.4s ease;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        transform: translateX(30px);
    }

    .cls-pwa-drawer-link-in {
        opacity: 1;
        transform: translateX(0);
    }

    .cls-pwa-drawer-link:active {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        transform: scale(0.98);
    }

    .cls-pwa-drawer-link svg {
        color: #cc0066;
        flex-shrink: 0;
        opacity: 0.8;
    }

    .cls-pwa-drawer-count {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        background: rgba(204, 0, 102, 0.2);
        color: #ff4d94;
        padding: 2px 8px;
        border-radius: 10px;
    }

    /* ── Drawer Footer ── */
    .cls-pwa-drawer-footer {
        padding: 16px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        margin-top: auto;
    }

    .cls-pwa-drawer-logout {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .cls-pwa-drawer-logout:active {
        background: rgba(220, 38, 38, 0.1);
        border-color: rgba(220, 38, 38, 0.2);
        color: #f87171;
    }
}

/* ── Bottom Nav Bar ── */
.cls-pwa-nav {
    display: none;
}

@media (max-width: 782px) {
    body.cls-pwa-logged-in {
        padding-bottom: 70px !important;
    }

    .cls-pwa-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 99999;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.08);
        animation: clsNavSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes clsNavSlideIn {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* ── Nav Items ── */
    .cls-pwa-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: #8b8b9e;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.3px;
        padding: 6px 14px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cls-pwa-nav-item svg {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        filter: drop-shadow(0 0 0 transparent);
    }

    .cls-pwa-nav-item:active {
        transform: scale(0.88);
    }

    .cls-pwa-nav-item:active svg {
        transform: scale(0.85);
    }

    /* Ripple effect container */
    .cls-pwa-nav-item::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(204, 0, 102, 0.12) 0%, transparent 70%);
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.3s ease;
        opacity: 0;
    }

    .cls-pwa-nav-item:active::before {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 1;
        transition: transform 0s, opacity 0s;
    }

    /* Active state */
    .cls-pwa-nav-item.cls-pwa-nav-active {
        color: #cc0066;
    }

    .cls-pwa-nav-item.cls-pwa-nav-active svg {
        filter: drop-shadow(0 2px 6px rgba(204, 0, 102, 0.3));
        transform: scale(1.08);
    }

    /* Active dot indicator */
    .cls-pwa-nav-item.cls-pwa-nav-active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #cc0066;
        transform: translateX(-50%);
        box-shadow: 0 0 8px rgba(204, 0, 102, 0.5);
        animation: clsDotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsDotPop {
        from { transform: translateX(-50%) scale(0); }
        to { transform: translateX(-50%) scale(1); }
    }

    .cls-pwa-nav-account {
        color: #8b8b9e;
    }

    .cls-pwa-nav-account.cls-pwa-nav-active {
        color: #cc0066;
    }

    /* ── Home Button — center, elevated ── */
    .cls-pwa-nav-home {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        margin-top: -26px;
        -webkit-tap-highlight-color: transparent;
    }

    .cls-pwa-nav-home-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #cc0066 0%, #e6006f 50%, #ff1a8c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow:
            0 4px 15px rgba(204, 0, 102, 0.4),
            0 0 0 3px rgba(255, 255, 255, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.3s ease;
        animation: clsHomeFloat 3s ease-in-out infinite;
    }

    @keyframes clsHomeFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }

    .cls-pwa-nav-home:active .cls-pwa-nav-home-btn {
        transform: scale(0.88);
        box-shadow:
            0 2px 8px rgba(204, 0, 102, 0.3),
            0 0 0 3px rgba(255, 255, 255, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        animation: none;
    }

    /* Glow ring around home button */
    .cls-pwa-nav-home-btn::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid rgba(204, 0, 102, 0.15);
        animation: clsHomePulse 2.5s ease-in-out infinite;
    }

    @keyframes clsHomePulse {
        0%, 100% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.15); opacity: 0; }
    }

    /* ── Cart Badge ── */
    .cls-pwa-cart-badge {
        position: absolute;
        top: -2px;
        right: 2px;
        background: linear-gradient(135deg, #cc0066, #ff1a8c);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(204, 0, 102, 0.35);
        border: 2px solid #fff;
    }

    .cls-pwa-cart-badge.cls-pwa-badge-bounce {
        animation: clsBadgeBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes clsBadgeBounce {
        0% { transform: scale(0.3); }
        50% { transform: scale(1.3); }
        70% { transform: scale(0.9); }
        100% { transform: scale(1); }
    }

    /* Hide WooCommerce's default mobile bottom bar */
    .woocommerce-store-notice,
    .storefront-handheld-footer-bar {
        display: none !important;
    }
}

/* ── Install Banner ── */
.cls-pwa-install {
    position: fixed;
    bottom: 80px;
    left: 12px;
    right: 12px;
    z-index: 99998;
    background: linear-gradient(145deg, #002244 0%, #003366 40%, #00437a 100%);
    border-radius: 16px;
    padding: 18px;
    color: #fff;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: clsBannerIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
}

/* Shimmer overlay on banner */
.cls-pwa-install::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: clsBannerShimmer 4s ease-in-out infinite;
}

@keyframes clsBannerShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

@media (min-width: 783px) {
    .cls-pwa-install {
        bottom: 20px;
        left: auto;
        right: 20px;
        max-width: 360px;
    }
}

@keyframes clsBannerIn {
    from {
        transform: translateY(120%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.cls-pwa-install.cls-pwa-dismiss {
    animation: clsBannerOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes clsBannerOut {
    to {
        transform: translateY(120%) scale(0.9);
        opacity: 0;
    }
}

.cls-pwa-install-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.cls-pwa-install-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(204, 0, 102, 0.15);
    border: 1px solid rgba(204, 0, 102, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d94;
    flex-shrink: 0;
    animation: clsIconBob 2.5s ease-in-out infinite;
}

@keyframes clsIconBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-2deg); }
    75% { transform: translateY(2px) rotate(1deg); }
}

.cls-pwa-install-text {
    flex: 1;
    min-width: 140px;
}

.cls-pwa-install-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
    letter-spacing: -0.2px;
}

.cls-pwa-install-text span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.cls-pwa-install-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}

/* ── Animated Install Button ── */
.cls-pwa-install-btn {
    background: linear-gradient(135deg, #cc0066 0%, #e6006f 50%, #ff1a8c 100%);
    background-size: 200% auto;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(204, 0, 102, 0.35);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
    animation: clsBtnGradient 3s ease infinite;
}

@keyframes clsBtnGradient {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Shine sweep on button */
.cls-pwa-install-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: clsBtnShine 3s ease-in-out infinite;
}

@keyframes clsBtnShine {
    0%, 70%, 100% { left: -100%; }
    40% { left: 150%; }
}

.cls-pwa-install-btn:active {
    transform: scale(0.94);
    box-shadow: 0 2px 8px rgba(204, 0, 102, 0.3);
}

/* ── Later Button ── */
.cls-pwa-install-later {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cls-pwa-install-later:active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── iOS install steps ── */
.cls-pwa-install-ios {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
    animation: clsIosFadeIn 0.4s 0.2s ease both;
}

@keyframes clsIosFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cls-pwa-install-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.cls-pwa-install-step {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.cls-pwa-install-step strong {
    color: #fff;
}

.cls-pwa-step-num {
    background: rgba(204, 0, 102, 0.2);
    border: 1px solid rgba(204, 0, 102, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    color: #ff4d94;
}

/* ══════════════════════════════════════════════════════
   PWA Home — Welcome Screen
   ══════════════════════════════════════════════════════ */
.cls-pwa-home {
    display: none;
}

@media (display-mode: standalone) {
    .cls-pwa-home {
        display: block;
        position: relative;
        min-height: calc(100vh - 52px - 70px - env(safe-area-inset-top, 0px));
        background: linear-gradient(165deg, #001a33 0%, #003366 50%, #00437a 100%);
        overflow: hidden;
    }

    .cls-pwa-home-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .cls-pwa-home-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.4;
    }

    .cls-pwa-home-orb-1 {
        width: 200px;
        height: 200px;
        background: #cc0066;
        top: -40px;
        right: -60px;
        animation: clsHomeOrb1 8s ease-in-out infinite alternate;
    }

    .cls-pwa-home-orb-2 {
        width: 160px;
        height: 160px;
        background: #0066cc;
        bottom: 20%;
        left: -40px;
        animation: clsHomeOrb2 10s ease-in-out infinite alternate;
    }

    .cls-pwa-home-orb-3 {
        width: 120px;
        height: 120px;
        background: #cc0066;
        bottom: 10%;
        right: 10%;
        opacity: 0.2;
        animation: clsHomeOrb3 12s ease-in-out infinite alternate;
    }

    @keyframes clsHomeOrb1 {
        0% { transform: translate(0, 0) scale(1); }
        100% { transform: translate(-30px, 40px) scale(1.2); }
    }
    @keyframes clsHomeOrb2 {
        0% { transform: translate(0, 0) scale(1); }
        100% { transform: translate(40px, -30px) scale(1.15); }
    }
    @keyframes clsHomeOrb3 {
        0% { transform: translate(0, 0) scale(1); }
        100% { transform: translate(-20px, -40px) scale(1.3); }
    }

    /* ── Content ── */
    .cls-pwa-home-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 24px 30px;
        text-align: center;
    }

    /* ── Logo ── */
    .cls-pwa-home-logo {
        position: relative;
        width: 80px;
        height: 80px;
        margin-bottom: 28px;
        animation: clsHomeLogo 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .cls-pwa-home-logo img {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 1;
    }

    .cls-pwa-home-logo-ring {
        position: absolute;
        inset: -6px;
        border-radius: 24px;
        border: 2px solid rgba(204, 0, 102, 0.4);
        animation: clsHomeRing 2s ease-in-out infinite;
    }

    @keyframes clsHomeLogo {
        0% { opacity: 0; transform: scale(0.5) translateY(20px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    @keyframes clsHomeRing {
        0%, 100% { transform: scale(1); opacity: 0.4; }
        50% { transform: scale(1.1); opacity: 0.8; }
    }

    /* ── Greeting text ── */
    .cls-pwa-home-greeting {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 6px;
        animation: clsHomeText 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .cls-pwa-home-name {
        font-size: 28px;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 8px;
        animation: clsHomeText 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .cls-pwa-home-subtitle {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 400;
        margin-bottom: 36px;
        animation: clsHomeText 0.6s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsHomeText {
        0% { opacity: 0; transform: translateY(16px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* ── Action Cards Grid ── */
    .cls-pwa-home-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 340px;
    }

    .cls-pwa-home-card {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 18px 14px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.3s ease,
                    border-color 0.3s ease;
        -webkit-tap-highlight-color: transparent;
        animation: clsHomeCard 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .cls-pwa-home-card:nth-child(1) { animation-delay: 0.5s; }
    .cls-pwa-home-card:nth-child(2) { animation-delay: 0.6s; }
    .cls-pwa-home-card:nth-child(3) { animation-delay: 0.7s; }
    .cls-pwa-home-card:nth-child(4) { animation-delay: 0.8s; }

    @keyframes clsHomeCard {
        0% { opacity: 0; transform: translateY(24px) scale(0.9); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .cls-pwa-home-card:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .cls-pwa-home-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .cls-pwa-home-card-icon svg {
        color: #fff;
    }

    .cls-pwa-home-card-shop {
        background: linear-gradient(135deg, #cc0066, #ff1a8c);
        box-shadow: 0 4px 15px rgba(204, 0, 102, 0.35);
    }

    .cls-pwa-home-card-quotas {
        background: linear-gradient(135deg, #0d9488, #14b8a6);
        box-shadow: 0 4px 15px rgba(13, 148, 136, 0.35);
    }

    .cls-pwa-home-card-account {
        background: linear-gradient(135deg, #003366, #0066cc);
        box-shadow: 0 4px 15px rgba(0, 51, 102, 0.35);
    }

    .cls-pwa-home-card-cart {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
    }

    .cls-pwa-home-cart-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #cc0066;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #003366;
    }

    .cls-pwa-home-card-label {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
    }

    .cls-pwa-home-card-desc {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        margin-top: -4px;
    }
}

/* ── Standalone mode — hide install prompt + cookie banners ── */
@media (display-mode: standalone) {
    .cls-pwa-install {
        display: none !important;
    }

    /* CookieYes specific */
    .cky-consent-container,
    .cky-consent-bar,
    .cky-modal,
    .cky-overlay,
    #ckyBannerElement,
    [data-cky-tag="notice"],
    [data-cky-tag="detail"],
    /* Generic cookie plugins */
    .cookie-notice-container,
    .cc-window,
    .cc-banner,
    #cookie-notice,
    #cookie-law-info-bar,
    .cli-bar-container,
    .cmplz-cookiebanner,
    .gdpr-cookie-notice,
    [class*="cookie-banner"],
    [class*="cookie-consent"],
    [class*="cookie-notice"],
    [id*="cookie-banner"],
    [id*="cookie-notice"],
    [id*="cookie-consent"],
    [id*="cookie-law"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* ── Cookie banners — reposition above nav bar on mobile ── */
@media (max-width: 782px) {
    body.cls-pwa-logged-in .cookie-notice-container,
    body.cls-pwa-logged-in .cc-window,
    body.cls-pwa-logged-in .cc-banner,
    body.cls-pwa-logged-in #cookie-notice,
    body.cls-pwa-logged-in #cookie-law-info-bar,
    body.cls-pwa-logged-in .cli-bar-container,
    body.cls-pwa-logged-in .cky-consent-container,
    body.cls-pwa-logged-in .cmplz-cookiebanner,
    body.cls-pwa-logged-in .gdpr-cookie-notice,
    body.cls-pwa-logged-in [class*="cookie-banner"],
    body.cls-pwa-logged-in [class*="cookie-consent"],
    body.cls-pwa-logged-in [class*="cookie-notice"],
    body.cls-pwa-logged-in [id*="cookie-banner"],
    body.cls-pwa-logged-in [id*="cookie-notice"],
    body.cls-pwa-logged-in [id*="cookie-consent"],
    body.cls-pwa-logged-in [id*="cookie-law"] {
        bottom: 68px !important;
        top: auto !important;
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 99998 !important;
        font-size: 12px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }
}

/* ══════════════════════════════════════════════════════
   PWA STANDALONE — Custom Shop + Footer hide + Single Product
   ══════════════════════════════════════════════════════ */
@media (display-mode: standalone) {

    /* ── Hide theme footer in PWA ── */
    #main-footer, .main-footer, #colophon, .site-footer,
    footer.site-footer, footer.footer, .footer-custom-code,
    .lt-footer, .elementor-location-footer, .footer-widget-area,
    .site-below-footer-wrap, .site-above-footer-wrap,
    [class*="footer-wrap"], [class*="site-footer"] {
        display: none !important;
    }

    /* ── Kill whitespace from theme wrappers ── */
    #content, .site-content, .content-area, #primary, #main, .site-main,
    .page-wrap, .main-content-area, .content-wrapper, .inner-content,
    .page-title-area, .breadcrumb-area, .page-header,
    .woocommerce-breadcrumb, .woocommerce-products-header,
    article.page, article.post, .hentry {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
    }

    .page-title-area, .breadcrumb-area, .page-header,
    .woocommerce-breadcrumb, .woocommerce-products-header {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* ── Custom Shop Grid ── */
    .cls-pwa-shop {
        background: #f7f7f9;
        min-height: calc(100vh - 52px - 70px - env(safe-area-inset-top, 0px));
        padding-bottom: 20px;
        padding-top: 0;
        margin-top: 0;
    }

    /* ── Category Pills ── */
    .cls-pwa-shop-cats {
        display: flex;
        gap: 8px;
        padding: 14px 14px 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cls-pwa-shop-cats::-webkit-scrollbar { display: none; }

    .cls-pwa-shop-cat {
        flex-shrink: 0;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        color: #8b8b9e;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
    }

    .cls-pwa-shop-cat-active,
    .cls-pwa-shop-cat-active:hover,
    .cls-pwa-shop-cat-active:focus,
    .cls-pwa-shop-cat-active:active,
    .cls-pwa-shop-cat-active:visited {
        background: rgba(0, 51, 102, 0.9) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 2px 10px rgba(0, 51, 102, 0.25);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .cls-pwa-shop-cat:active {
        transform: scale(0.95);
    }

    /* ── Product Grid ── */
    .cls-pwa-shop-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 10px 14px;
    }

    /* ── Product Card ── */
    .cls-pwa-shop-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        animation: clsShopCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.25s ease;
    }

    .cls-pwa-shop-card:active {
        transform: scale(0.97);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    }

    @keyframes clsShopCardIn {
        0% { opacity: 0; transform: translateY(20px) scale(0.95); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .cls-pwa-shop-card-link {
        text-decoration: none;
        display: block;
        position: relative;
        flex: 1;
    }

    /* ── Badge Promo ── */
    .cls-pwa-shop-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0, 51, 102, 0.8);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 8px;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.15);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ── Product Image ── */
    .cls-pwa-shop-img {
        height: 150px;
        overflow: hidden;
        background: #f0f0f2;
    }

    .cls-pwa-shop-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .cls-pwa-shop-card:active .cls-pwa-shop-img img {
        transform: scale(1.05);
    }

    /* ── Product Info ── */
    .cls-pwa-shop-info {
        padding: 10px 12px 6px;
    }

    .cls-pwa-shop-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        font-weight: 600;
        color: #212121;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .cls-pwa-shop-price {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: #111 !important;
        letter-spacing: -0.2px;
    }

    /* ── Add to Cart Button — Glassmorphism Hi-Tech ── */
    .cls-pwa-shop-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto 10px 10px;
        padding: 10px;
        background: rgba(0, 51, 102, 0.85);
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.25s ease,
                    background 0.25s ease;
        box-shadow: 0 4px 16px rgba(0, 51, 102, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        gap: 6px;
        width: auto;
        letter-spacing: 0.3px;
    }

    .cls-pwa-shop-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
        pointer-events: none;
    }

    .cls-pwa-shop-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
        animation: clsShopShine 5s ease-in-out infinite;
    }

    @keyframes clsShopShine {
        0%, 75%, 100% { left: -100%; }
        50% { left: 150%; }
    }

    .cls-pwa-shop-btn:active {
        transform: scale(0.95);
        background: rgba(0, 51, 102, 0.95);
        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .cls-pwa-shop-btn-view {
        background: rgba(60, 70, 90, 0.8);
        box-shadow: 0 4px 16px rgba(60, 70, 90, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Button states */
    .cls-pwa-shop-btn-loading,
    .cls-pwa-shop-btn-done {
        display: none;
    }

    .cls-pwa-shop-btn-loading-state .cls-pwa-shop-btn-text { display: none; }
    .cls-pwa-shop-btn-loading-state .cls-pwa-shop-btn-loading { display: flex; }
    .cls-pwa-shop-btn-loading-state::before,
    .cls-pwa-shop-btn-loading-state::after { display: none; }

    .cls-pwa-shop-btn-done-state {
        background: rgba(5, 150, 105, 0.88) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }
    .cls-pwa-shop-btn-done-state .cls-pwa-shop-btn-text { display: none; }
    .cls-pwa-shop-btn-done-state .cls-pwa-shop-btn-done { display: flex; align-items: center; gap: 4px; }
    .cls-pwa-shop-btn-done-state::before,
    .cls-pwa-shop-btn-done-state::after { display: none; }

    /* ── Kill theme hover/focus red on ALL PWA elements ── */
    .cls-pwa-pdp a,
    .cls-pwa-pdp a:hover,
    .cls-pwa-pdp a:focus,
    .cls-pwa-pdp a:active,
    .cls-pwa-pdp a:visited,
    .cls-pwa-pdp button:hover,
    .cls-pwa-pdp button:focus,
    .cls-pwa-pdp button:active,
    .cls-pwa-shop a,
    .cls-pwa-shop a:hover,
    .cls-pwa-shop a:focus,
    .cls-pwa-shop a:active,
    .cls-pwa-shop a:visited,
    .cls-pwa-shop button:hover,
    .cls-pwa-shop button:focus,
    .cls-pwa-shop button:active {
        color: inherit !important;
        text-decoration: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        background-color: transparent !important;
    }

    .cls-pwa-pdp *:focus,
    .cls-pwa-shop *:focus {
        outline: none !important;
    }

    /* Re-set colors after the theme-kill reset above */
    .cls-pwa-shop-cat-active,
    .cls-pwa-shop-cat-active:hover,
    .cls-pwa-shop-cat-active:focus,
    .cls-pwa-shop-cat-active:active,
    .cls-pwa-shop-cat-active:visited {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.9) !important;
    }
    .cls-pwa-shop-btn,
    .cls-pwa-shop-btn:hover,
    .cls-pwa-shop-btn:focus,
    .cls-pwa-shop-btn:active {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.85) !important;
        backdrop-filter: blur(12px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    }
    .cls-pwa-shop-btn:active {
        background: rgba(0, 51, 102, 0.95) !important;
    }
    .cls-pwa-shop-btn-view,
    .cls-pwa-shop-btn-view:hover,
    .cls-pwa-shop-btn-view:focus {
        background: rgba(60, 70, 90, 0.8) !important;
    }
    .cls-pwa-pdp-cart,
    .cls-pwa-pdp-cart:hover,
    .cls-pwa-pdp-cart:focus,
    .cls-pwa-pdp-cart:active {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.88) !important;
    }
    .cls-pwa-pdp-back,
    .cls-pwa-pdp-back:hover,
    .cls-pwa-pdp-back:focus {
        color: #003366 !important;
        background: none !important;
    }

    /* ══════════════════════════════════════════════════
       Custom Cart Page
       ══════════════════════════════════════════════════ */
    .cls-pwa-cart {
        background: #f7f7f9;
        min-height: calc(100vh - 52px - 70px);
        padding-bottom: 30px;
    }

    /* ── Cart Header ── */
    .cls-pwa-cart-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        animation: clsCartSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsCartSlideDown {
        0% { opacity: 0; transform: translateY(-15px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .cls-pwa-cart-back {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        border: 1px solid rgba(0, 51, 102, 0.1);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #003366 !important;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.25s ease;
        position: relative;
        overflow: hidden;
    }
    .cls-pwa-cart-back::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 14px;
        background: rgba(0, 51, 102, 0.05);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .cls-pwa-cart-back:active {
        transform: scale(0.88) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
    .cls-pwa-cart-back:active::after { opacity: 1; }
    .cls-pwa-cart-back svg {
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .cls-pwa-cart-back:active svg { transform: translateX(-2px); }

    .cls-pwa-cart-h1 {
        font-size: 20px;
        font-weight: 800;
        color: #111;
        margin: 0;
        flex: 1;
    }

    .cls-pwa-cart-count {
        font-size: 12px;
        font-weight: 600;
        color: #fff !important;
        background: rgba(0, 51, 102, 0.85);
        padding: 4px 12px;
        border-radius: 20px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* ── Empty state ── */
    .cls-pwa-cart-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 30px;
        text-align: center;
        animation: clsCartEmptyIn 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsCartEmptyIn {
        0% { opacity: 0; transform: scale(0.9) translateY(20px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    .cls-pwa-cart-empty-icon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        animation: clsCartIconFloat 3s ease-in-out infinite;
    }

    @keyframes clsCartIconFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }

    .cls-pwa-cart-empty-text {
        font-size: 16px;
        font-weight: 600;
        color: #888;
        margin: 0 0 20px;
    }

    .cls-pwa-cart-empty-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 28px;
        background: rgba(0, 51, 102, 0.88) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 4px 16px rgba(0, 51, 102, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .cls-pwa-cart-empty-btn:active { transform: scale(0.96); }

    /* ── Cart Items ── */
    .cls-pwa-cart-items {
        padding: 0 14px;
    }

    .cls-pwa-cart-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border-radius: 16px;
        padding: 12px;
        margin-bottom: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        animation: clsCartItemIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }

    .cls-pwa-cart-item:nth-child(1) { animation-delay: 0.05s; }
    .cls-pwa-cart-item:nth-child(2) { animation-delay: 0.12s; }
    .cls-pwa-cart-item:nth-child(3) { animation-delay: 0.19s; }
    .cls-pwa-cart-item:nth-child(4) { animation-delay: 0.26s; }
    .cls-pwa-cart-item:nth-child(5) { animation-delay: 0.33s; }

    @keyframes clsCartItemIn {
        0% { opacity: 0; transform: translateX(-20px) scale(0.97); }
        100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    .cls-pwa-cart-item-img {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f0f0f2;
    }

    .cls-pwa-cart-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cls-pwa-cart-item-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cls-pwa-cart-item-name {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cls-pwa-cart-item-price {
        font-size: 15px;
        font-weight: 800;
        color: #111;
    }

    .cls-pwa-cart-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
    }

    /* ── Quantity selector ── */
    .cls-pwa-cart-item-qty {
        display: flex;
        align-items: center;
        background: #f5f5f7;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .cls-pwa-cart-qty-btn {
        width: 32px;
        height: 30px;
        border: none;
        background: transparent !important;
        color: #003366 !important;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, transform 0.15s ease;
    }
    .cls-pwa-cart-qty-btn:active {
        background: rgba(0, 51, 102, 0.08) !important;
        transform: scale(0.9);
    }
    .cls-pwa-cart-qty-btn-disabled {
        opacity: 0.2 !important;
        pointer-events: none;
    }

    .cls-pwa-cart-qty-val {
        min-width: 28px;
        text-align: center;
        font-size: 14px;
        font-weight: 800;
        color: #111;
    }

    .cls-pwa-cart-qty-bounce {
        animation: clsCartQtyBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes clsCartQtyBounce {
        0% { transform: scale(1); }
        40% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }

    .cls-pwa-cart-item-actions {
        flex-shrink: 0;
        position: relative;
        display: flex;
        align-items: center;
    }

    .cls-pwa-cart-item-del {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        border: none;
        background: rgba(220, 38, 38, 0.06) !important;
        color: #dc2626 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.2s ease,
                    opacity 0.2s ease;
    }
    .cls-pwa-cart-item-del:active {
        transform: scale(0.85) rotate(-8deg);
    }

    .cls-pwa-cart-item-confirm {
        display: none;
        padding: 8px 14px;
        border-radius: 10px;
        border: none;
        background: #dc2626 !important;
        color: #fff !important;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        animation: clsCartConfirmPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
        transition: transform 0.15s ease;
    }
    .cls-pwa-cart-item-confirm:active {
        transform: scale(0.92) !important;
    }

    @keyframes clsCartConfirmPop {
        0% { opacity: 0; transform: scale(0.6) translateX(10px); }
        100% { opacity: 1; transform: scale(1) translateX(0); }
    }

    /* Confirming state: hide trash, show confirm button */
    .cls-pwa-cart-confirming .cls-pwa-cart-item-del {
        display: none;
    }
    .cls-pwa-cart-confirming .cls-pwa-cart-item-confirm {
        display: block;
    }

    /* Remove animation */
    .cls-pwa-cart-item-removing {
        animation: clsCartItemOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    }

    @keyframes clsCartItemOut {
        0% { opacity: 1; transform: translateX(0) scale(1); }
        100% { opacity: 0; transform: translateX(80px) scale(0.9); }
    }

    .cls-pwa-cart-item-removing .cls-pwa-cart-item-confirm {
        animation: none;
    }

    /* ── Summary ── */
    .cls-pwa-cart-summary {
        margin: 20px 14px 0;
        background: #fff;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.03);
        animation: clsCartSummaryIn 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsCartSummaryIn {
        0% { opacity: 0; transform: translateY(20px) scale(0.97); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .cls-pwa-cart-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .cls-pwa-cart-summary-row span:first-child {
        font-size: 14px;
        font-weight: 600;
        color: #888;
    }

    .cls-pwa-cart-total {
        font-size: 24px;
        font-weight: 800;
        color: #111;
    }

    .cls-pwa-cart-checkout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 15px;
        background: rgba(0, 51, 102, 0.9) !important;
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 4px 18px rgba(0, 51, 102, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-sizing: border-box;
    }

    .cls-pwa-cart-checkout::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        pointer-events: none;
    }

    .cls-pwa-cart-checkout::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        animation: clsShopShine 5s ease-in-out infinite;
    }

    .cls-pwa-cart-checkout:active {
        transform: scale(0.97);
    }

    .cls-pwa-cart-continue {
        display: block;
        text-align: center;
        margin-top: 12px;
        font-size: 13px;
        font-weight: 600;
        color: #003366 !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease;
    }
    .cls-pwa-cart-continue:active { opacity: 0.5; }

    /* Kill theme styles on cart — exclude our own styled elements */
    .cls-pwa-cart a:not(.cls-pwa-cart-checkout):not(.cls-pwa-cart-empty-btn):not(.cls-pwa-cart-continue),
    .cls-pwa-cart a:not(.cls-pwa-cart-checkout):not(.cls-pwa-cart-empty-btn):not(.cls-pwa-cart-continue):hover,
    .cls-pwa-cart a:not(.cls-pwa-cart-checkout):not(.cls-pwa-cart-empty-btn):not(.cls-pwa-cart-continue):focus,
    .cls-pwa-cart a:not(.cls-pwa-cart-checkout):not(.cls-pwa-cart-empty-btn):not(.cls-pwa-cart-continue):active {
        color: inherit !important;
        text-decoration: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .cls-pwa-cart button:hover,
    .cls-pwa-cart button:focus,
    .cls-pwa-cart button:active {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .cls-pwa-cart *:focus { outline: none !important; }

    /* Explicit colors on styled elements */
    a.cls-pwa-cart-checkout,
    a.cls-pwa-cart-checkout:link,
    a.cls-pwa-cart-checkout:hover,
    a.cls-pwa-cart-checkout:focus,
    a.cls-pwa-cart-checkout:active,
    a.cls-pwa-cart-checkout:visited,
    .cls-pwa-cart .cls-pwa-cart-checkout {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.9) !important;
    }
    a.cls-pwa-cart-empty-btn,
    a.cls-pwa-cart-empty-btn:link,
    a.cls-pwa-cart-empty-btn:hover,
    a.cls-pwa-cart-empty-btn:focus,
    a.cls-pwa-cart-empty-btn:visited {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.88) !important;
    }
    a.cls-pwa-cart-continue,
    a.cls-pwa-cart-continue:link,
    a.cls-pwa-cart-continue:hover,
    a.cls-pwa-cart-continue:visited {
        color: #003366 !important;
    }
    .cls-pwa-cart-back,
    .cls-pwa-cart-back:hover,
    .cls-pwa-cart-back:focus,
    .cls-pwa-cart-back:visited {
        color: #003366 !important;
        background: rgba(255, 255, 255, 0.9) !important;
    }
    .cls-pwa-cart-item-del,
    .cls-pwa-cart-item-del:hover,
    .cls-pwa-cart-item-del:focus {
        color: #dc2626 !important;
        background: rgba(220, 38, 38, 0.06) !important;
    }
    .cls-pwa-cart-item-confirm,
    .cls-pwa-cart-item-confirm:hover,
    .cls-pwa-cart-item-confirm:focus,
    .cls-pwa-cart-item-confirm:active {
        color: #fff !important;
        background: #dc2626 !important;
    }
    .cls-pwa-cart-qty-btn,
    .cls-pwa-cart-qty-btn:hover,
    .cls-pwa-cart-qty-btn:focus {
        color: #003366 !important;
        background: transparent !important;
    }

    /* ══════════════════════════════════════════════════
       Custom Product Detail Page (PDP)
       ══════════════════════════════════════════════════ */
    .cls-pwa-pdp {
        background: #f7f7f9;
        min-height: calc(100vh - 52px - 70px);
        padding-bottom: 30px;
    }

    /* ── Back button ── */
    .cls-pwa-pdp-back {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 14px;
        background: none;
        border: none;
        color: #003366;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        animation: clsPdpFadeIn 0.4s ease both;
    }
    .cls-pwa-pdp-back:active { opacity: 0.6; }
    .cls-pwa-pdp-back svg { transition: transform 0.2s ease; }
    .cls-pwa-pdp-back:active svg { transform: translateX(-3px); }

    /* ── Image Gallery ── */
    .cls-pwa-pdp-gallery {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #fff;
        overflow: hidden;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        animation: clsPdpSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .cls-pwa-pdp-slides {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .cls-pwa-pdp-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity 0.4s ease, transform 0.4s ease;
        transform: scale(0.97);
    }

    .cls-pwa-pdp-slide-active {
        opacity: 1;
        transform: scale(1);
    }

    .cls-pwa-pdp-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: linear-gradient(135deg, #cc0066, #ff1a8c);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 10px;
        z-index: 3;
        box-shadow: 0 2px 10px rgba(204, 0, 102, 0.35);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        animation: clsPdpBadgePop 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsPdpBadgePop {
        0% { opacity: 0; transform: scale(0.5); }
        100% { opacity: 1; transform: scale(1); }
    }

    .cls-pwa-pdp-dots {
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 3;
    }

    .cls-pwa-pdp-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .cls-pwa-pdp-dot-active {
        background: #003366;
        width: 22px;
        border-radius: 4px;
    }

    /* ── Product Info ── */
    .cls-pwa-pdp-info {
        padding: 20px 18px;
        animation: clsPdpFadeIn 0.5s 0.15s ease both;
    }

    @keyframes clsPdpFadeIn {
        0% { opacity: 0; transform: translateY(12px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes clsPdpSlideUp {
        0% { opacity: 0; transform: translateY(30px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .cls-pwa-pdp-cats {
        font-size: 11px;
        font-weight: 600;
        color: #cc0066;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 6px;
    }

    .cls-pwa-pdp-title {
        font-size: 22px;
        font-weight: 800;
        color: #1a1a2e;
        line-height: 1.25;
        margin: 0 0 10px;
    }

    .cls-pwa-pdp-price {
        font-size: 26px;
        font-weight: 800;
        color: #111 !important;
        margin-bottom: 14px;
        letter-spacing: -0.3px;
    }

    /* ── Quota badge on PDP ── */
    .cls-pwa-pdp-quota {
        background: rgba(0, 51, 102, 0.05);
        border: 1px solid rgba(0, 51, 102, 0.1);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 14px;
        animation: clsPdpFadeIn .4s .2s both;
    }
    .cls-pwa-pdp-quota-low {
        background: rgba(245, 158, 11, 0.06);
        border-color: rgba(245, 158, 11, 0.15);
    }
    .cls-pwa-pdp-quota-full {
        background: rgba(220, 38, 38, 0.05);
        border-color: rgba(220, 38, 38, 0.12);
    }
    .cls-pwa-pdp-quota-top {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #555;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }
    .cls-pwa-pdp-quota-top svg { flex-shrink: 0; color: #003366; }
    .cls-pwa-pdp-quota-low .cls-pwa-pdp-quota-top svg { color: #d97706; }
    .cls-pwa-pdp-quota-full .cls-pwa-pdp-quota-top svg { color: #dc2626; }
    .cls-pwa-pdp-quota-top strong { color: #111; }
    .cls-pwa-pdp-quota-badge {
        margin-left: auto;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        background: rgba(5, 150, 105, 0.1);
        color: #059669;
    }
    .cls-pwa-pdp-quota-low .cls-pwa-pdp-quota-badge {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }
    .cls-pwa-pdp-quota-badge-full {
        background: rgba(220, 38, 38, 0.1) !important;
        color: #dc2626 !important;
    }
    .cls-pwa-pdp-quota-bar {
        height: 6px;
        background: rgba(0, 51, 102, 0.06);
        border-radius: 3px;
        overflow: hidden;
    }
    .cls-pwa-pdp-quota-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #003366, #0066cc);
        transition: width .8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .cls-pwa-pdp-quota-low .cls-pwa-pdp-quota-fill {
        background: linear-gradient(90deg, #f59e0b, #eab308);
    }
    .cls-pwa-pdp-quota-full .cls-pwa-pdp-quota-fill {
        background: linear-gradient(90deg, #dc2626, #ef4444);
    }

    /* ── Quota blocked message ── */
    .cls-pwa-pdp-quota-blocked {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        margin-top: 16px;
        background: rgba(220, 38, 38, 0.05);
        border: 1px solid rgba(220, 38, 38, 0.12);
        border-radius: 12px;
        color: #dc2626;
        font-size: 13px;
        font-weight: 600;
        animation: clsPdpFadeIn .4s .3s both;
    }
    .cls-pwa-pdp-quota-blocked svg { flex-shrink: 0; }

    .cls-pwa-pdp-stock-out {
        display: inline-block;
        background: #fee2e2;
        color: #dc2626;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .cls-pwa-pdp-desc {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        margin-bottom: 18px;
        padding: 14px;
        background: #fff;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    /* ── Attributes (variable products) ── */
    .cls-pwa-pdp-attrs {
        margin-bottom: 18px;
    }

    .cls-pwa-pdp-attr {
        margin-bottom: 12px;
    }

    .cls-pwa-pdp-attr-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .cls-pwa-pdp-attr-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cls-pwa-pdp-attr-opt {
        padding: 8px 16px;
        border-radius: 10px;
        border: 1.5px solid rgba(0, 0, 0, 0.1);
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
    }

    .cls-pwa-pdp-attr-opt-active {
        border-color: #003366;
        background: #003366;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 51, 102, 0.25);
    }

    .cls-pwa-pdp-attr-opt:active {
        transform: scale(0.95);
    }

    /* ── Quantity selector ── */
    .cls-pwa-pdp-actions {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 16px;
        animation: clsPdpFadeIn 0.5s 0.3s ease both;
    }

    .cls-pwa-pdp-qty {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 12px;
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .cls-pwa-pdp-qty-btn {
        width: 42px;
        height: 42px;
        border: none;
        background: none;
        font-size: 18px;
        font-weight: 600;
        color: #003366;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
    }

    .cls-pwa-pdp-qty-btn:active {
        background: rgba(0, 51, 102, 0.06);
    }
    .cls-pwa-pdp-qty-btn-disabled {
        opacity: 0.25;
        pointer-events: none;
    }

    .cls-pwa-pdp-qty-val {
        min-width: 32px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #1a1a2e;
    }

    /* ── Add to cart button ── */
    .cls-pwa-pdp-cart {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 20px;
        background: rgba(0, 51, 102, 0.88);
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(0, 51, 102, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        text-decoration: none;
    }

    .cls-pwa-pdp-cart::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        animation: clsShopShine 3s ease-in-out infinite;
    }

    .cls-pwa-pdp-cart:active {
        transform: scale(0.96);
    }

    .cls-pwa-pdp-cart-select {
        background: rgba(60, 70, 90, 0.85);
    }

    /* Cart button states */
    .cls-pwa-pdp-cart-loading,
    .cls-pwa-pdp-cart-done { display: none; }

    .cls-pwa-pdp-cart-loading-state .cls-pwa-pdp-cart-text { display: none; }
    .cls-pwa-pdp-cart-loading-state .cls-pwa-pdp-cart-loading { display: flex; }
    .cls-pwa-pdp-cart-loading-state::after { display: none; }

    .cls-pwa-pdp-cart-done-state {
        background: linear-gradient(135deg, #059669, #10b981) !important;
        box-shadow: 0 4px 18px rgba(5, 150, 105, 0.35) !important;
        animation: clsPdpCartPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .cls-pwa-pdp-cart-done-state .cls-pwa-pdp-cart-text { display: none; }
    .cls-pwa-pdp-cart-done-state .cls-pwa-pdp-cart-done { display: flex; align-items: center; gap: 6px; }
    .cls-pwa-pdp-cart-done-state::after { display: none; }

    @keyframes clsPdpCartPop {
        0% { transform: scale(0.92); }
        50% { transform: scale(1.04); }
        100% { transform: scale(1); }
    }

    /* ── Lightbox ── */
    .cls-pwa-pdp-lightbox {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .cls-pwa-pdp-lb-open {
        opacity: 1;
        visibility: visible;
    }

    .cls-pwa-pdp-lb-close {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: 12px;
        z-index: 10001;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .cls-pwa-pdp-lb-close:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.3);
    }

    .cls-pwa-pdp-lb-counter {
        position: absolute;
        top: calc(20px + env(safe-area-inset-top, 0px));
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        font-weight: 600;
        z-index: 10001;
    }

    .cls-pwa-pdp-lb-img-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
        overflow: hidden;
    }

    .cls-pwa-pdp-lb-img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.15s ease;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    .cls-pwa-pdp-lb-open .cls-pwa-pdp-lb-img {
        animation: clsPdpLbZoomIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes clsPdpLbZoomIn {
        0% { opacity: 0; transform: scale(0.8); }
        100% { opacity: 1; transform: scale(1); }
    }

    /* ── Meta ── */
    .cls-pwa-pdp-meta {
        font-size: 11px;
        color: #999;
        padding-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* ── Stagger card entrance ── */
    .cls-pwa-shop-card:nth-child(1) { animation-delay: 0s; }
    .cls-pwa-shop-card:nth-child(2) { animation-delay: 0.06s; }
    .cls-pwa-shop-card:nth-child(3) { animation-delay: 0.12s; }
    .cls-pwa-shop-card:nth-child(4) { animation-delay: 0.18s; }
    .cls-pwa-shop-card:nth-child(5) { animation-delay: 0.24s; }
    .cls-pwa-shop-card:nth-child(6) { animation-delay: 0.30s; }
    .cls-pwa-shop-card:nth-child(7) { animation-delay: 0.36s; }
    .cls-pwa-shop-card:nth-child(8) { animation-delay: 0.42s; }

    /* ── Product Tabs (single) ── */
    .woocommerce-tabs .tabs, .wc-tabs {
        display: flex !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 16px 0 !important;
        list-style: none !important;
        border: none !important;
    }

    .woocommerce-tabs .tabs li, .wc-tabs li {
        margin: 0 !important;
        border: none !important;
        background: none !important;
        padding: 0 !important;
    }

    .woocommerce-tabs .tabs li a, .wc-tabs li a {
        padding: 8px 14px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #8b8b9e !important;
        background: #f4f4f4 !important;
        text-decoration: none !important;
    }

    .woocommerce-tabs .tabs li.active a, .wc-tabs li.active a {
        background: #003366 !important;
        color: #fff !important;
    }

    /* ── WooCommerce notices ── */
    .woocommerce-message, .woocommerce-info {
        background: rgba(0, 51, 102, 0.05) !important;
        border: 1px solid rgba(0, 51, 102, 0.1) !important;
        border-left: 3px solid #003366 !important;
        border-radius: 10px !important;
        color: #003366 !important;
        font-size: 13px !important;
        margin: 12px !important;
    }

    .woocommerce-error {
        background: rgba(204, 0, 102, 0.05) !important;
        border: 1px solid rgba(204, 0, 102, 0.1) !important;
        border-left: 3px solid #cc0066 !important;
        border-radius: 10px !important;
        color: #cc0066 !important;
        font-size: 13px !important;
        margin: 12px !important;
    }

    @keyframes clsShopBtnGrad {
        0%, 100% { background-position: 0% center; }
        50% { background-position: 100% center; }
    }
}

/* ══════════════════════════════════════════════════════
   TOAST POPUP (add to cart)
   ══════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
    .cls-pwa-toast {
        position: fixed;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%) translateY(30px);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        background: rgba(0, 51, 102, 0.92);
        backdrop-filter: blur(16px) saturate(1.6);
        -webkit-backdrop-filter: blur(16px) saturate(1.6);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: none;
        max-width: calc(100vw - 40px);
        white-space: nowrap;
    }
    .cls-pwa-toast-in {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
        animation: clsToastIn .45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-toast-out {
        animation: clsToastOut .3s ease-in both;
    }
    .cls-pwa-toast-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(5, 150, 105, 0.9);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .cls-pwa-toast-body {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .cls-pwa-toast-title {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
    }
    .cls-pwa-toast-msg {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
    }

    /* ── Toast error variant ── */
    .cls-pwa-toast-error {
        background: rgba(153, 27, 27, 0.94);
    }
    .cls-pwa-toast-icon-error {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff;
    }

    @keyframes clsToastIn {
        from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(0.9); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    }
    @keyframes clsToastOut {
        from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        to   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
    }
}

/* ══════════════════════════════════════════════════════
   QUOTAS PAGE
   ══════════════════════════════════════════════════════ */
@media (display-mode: standalone) {

.cls-pwa-quotas {
    min-height: 100vh;
    padding: 56px 0 100px;
    background: #f4f6f9;
}

/* ── Header ── */
.cls-pwa-quotas-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    animation: clsPwaSlideDown .5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cls-pwa-quotas-back {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: none;
    background: rgba(0, 51, 102, 0.08);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #003366;
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s;
    flex-shrink: 0;
}
.cls-pwa-quotas-back:active { transform: scale(0.88); }

.cls-pwa-quotas-h1 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0;
    flex: 1;
}

.cls-pwa-quotas-count {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 51, 102, 0.7);
    background: rgba(0, 51, 102, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Stats ── */
.cls-pwa-quotas-stats {
    display: flex;
    gap: 10px;
    padding: 0 20px 16px;
    animation: clsPwaFadeUp .5s .1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cls-pwa-quotas-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cls-pwa-quotas-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #003366;
    line-height: 1.1;
}
.cls-pwa-quotas-stat-ok .cls-pwa-quotas-stat-val { color: #059669; }
.cls-pwa-quotas-stat-full .cls-pwa-quotas-stat-val { color: #dc2626; }
.cls-pwa-quotas-stat-lbl {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-top: 2px;
}

/* ── Info cards (family + delivery) ── */
.cls-pwa-quotas-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: clsPwaFadeUp .45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: .15s;
}
.cls-pwa-quotas-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 51, 102, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003366;
    flex-shrink: 0;
}
.cls-pwa-quotas-info-body { flex: 1; min-width: 0; }
.cls-pwa-quotas-info-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cls-pwa-quotas-info-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #003366;
    margin-top: 1px;
}
.cls-pwa-quotas-info-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(0, 51, 102, 0.2);
    background: rgba(0, 51, 102, 0.06);
    font-size: 12px;
    font-weight: 600;
    color: #003366;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    flex-shrink: 0;
}
.cls-pwa-quotas-info-btn:active {
    transform: scale(0.94);
    background: rgba(0, 51, 102, 0.12);
}
.cls-pwa-quotas-info-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.cls-pwa-quotas-info-badge-pending {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

/* ── Forms (family change + delivery change) ── */
.cls-pwa-quotas-form {
    margin: 0 20px 10px;
    animation: clsPwaFadeUp .35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cls-pwa-quotas-form-inner {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.cls-pwa-quotas-form-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}
.cls-pwa-quotas-form-desc {
    font-size: 12px;
    color: #888;
    margin: 0 0 14px;
}
.cls-pwa-quotas-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(0, 51, 102, 0.15);
    border-radius: 10px;
    font-size: 14px;
    color: #111;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23003366' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.cls-pwa-quotas-select:focus {
    border-color: rgba(0, 51, 102, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.08);
}
.cls-pwa-quotas-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 51, 102, 0.85);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s;
}
.cls-pwa-quotas-submit:active { transform: scale(0.97); }
.cls-pwa-quotas-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Section title ── */
.cls-pwa-quotas-section-title {
    padding: 16px 20px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Product cards ── */
.cls-pwa-quotas-cards {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cls-pwa-quotas-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: clsPwaFadeUp .5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: transform .2s;
}
.cls-pwa-quotas-card:active { transform: scale(0.985); }

.cls-pwa-quotas-card-full {
    border-color: rgba(220, 38, 38, 0.15);
    background: rgba(255, 255, 255, 0.6);
}

/* Card top row */
.cls-pwa-quotas-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.cls-pwa-quotas-card-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cls-pwa-quotas-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cls-pwa-quotas-card-info {
    flex: 1;
    min-width: 0;
}
.cls-pwa-quotas-card-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cls-pwa-quotas-card-period {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.cls-pwa-quotas-card-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.cls-pwa-quotas-badge-ok {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}
.cls-pwa-quotas-badge-high {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}
.cls-pwa-quotas-badge-full {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Progress bar */
.cls-pwa-quotas-card-progress {
    margin-bottom: 12px;
}
.cls-pwa-quotas-bar {
    height: 8px;
    background: rgba(0, 51, 102, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.cls-pwa-quotas-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #003366, #0066cc);
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cls-pwa-quotas-bar-fill.high {
    background: linear-gradient(90deg, #f59e0b, #eab308);
}
.cls-pwa-quotas-bar-fill.full {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}
.cls-pwa-quotas-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: #888;
}

/* Action button */
.cls-pwa-quotas-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    cursor: pointer;
}
.cls-pwa-quotas-action-buy {
    background: rgba(0, 51, 102, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cls-pwa-quotas-action-buy:active { transform: scale(0.96); }
.cls-pwa-quotas-action-full {
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
    font-weight: 600;
    font-size: 12px;
    cursor: default;
}

/* Empty state */
.cls-pwa-quotas-empty {
    text-align: center;
    padding: 60px 20px;
    animation: clsPwaFadeUp .5s .2s both;
}
.cls-pwa-quotas-empty p {
    font-size: 14px;
    color: #888;
    margin: 12px 0 0;
}

/* ── Keyframes ── */
@keyframes clsPwaSlideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes clsPwaFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Kill theme on quotas ── */
.cls-pwa-quotas a:not(.cls-pwa-quotas-action-buy) {
    color: inherit !important;
    text-decoration: none !important;
}
.cls-pwa-quotas a:not(.cls-pwa-quotas-action-buy):hover,
.cls-pwa-quotas a:not(.cls-pwa-quotas-action-buy):focus,
.cls-pwa-quotas a:not(.cls-pwa-quotas-action-buy):active {
    color: inherit !important;
}
a.cls-pwa-quotas-action-buy,
a.cls-pwa-quotas-action-buy:link,
a.cls-pwa-quotas-action-buy:visited,
a.cls-pwa-quotas-action-buy:hover,
a.cls-pwa-quotas-action-buy:focus,
a.cls-pwa-quotas-action-buy:active {
    color: #fff !important;
    text-decoration: none !important;
}

    /* ══════════════════════════════════════════════════
       Checkout Page
       ══════════════════════════════════════════════════ */
    .cls-pwa-checkout {
        background: #f7f7f9;
        min-height: calc(100vh - 52px - 70px);
        padding-bottom: 100px;
    }

    /* ── Header ── */
    .cls-pwa-co-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px 10px;
        animation: clsPwaSlideDown 0.35s ease both;
    }
    .cls-pwa-co-back {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        border: none;
        background: rgba(255, 255, 255, 0.9) !important;
        color: #003366 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }
    .cls-pwa-co-back:active { transform: scale(0.9); }
    .cls-pwa-co-back svg { transition: transform 0.2s ease; }
    .cls-pwa-co-back:active svg { transform: translateX(-2px); }
    .cls-pwa-co-h1 {
        font-size: 20px;
        font-weight: 800;
        color: #111;
        flex: 1;
        margin: 0;
    }
    .cls-pwa-co-step {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: #059669;
        background: rgba(5, 150, 105, 0.07);
        padding: 5px 10px;
        border-radius: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .cls-pwa-co-step svg { color: #059669; }

    /* ── Sections ── */
    .cls-pwa-co-section {
        margin: 10px 14px;
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        animation: clsPwaFadeUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-co-section:nth-child(2) { animation-delay: 0.05s; }
    .cls-pwa-co-section:nth-child(3) { animation-delay: 0.1s; }
    .cls-pwa-co-section:nth-child(4) { animation-delay: 0.15s; }
    .cls-pwa-co-section:nth-child(5) { animation-delay: 0.2s; }
    .cls-pwa-co-section:nth-child(6) { animation-delay: 0.25s; }

    .cls-pwa-co-section-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        color: #003366;
        font-size: 14px;
        font-weight: 700;
    }
    .cls-pwa-co-section-head svg {
        flex-shrink: 0;
        opacity: 0.7;
    }

    /* ── Order recap items ── */
    .cls-pwa-co-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .cls-pwa-co-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .cls-pwa-co-item-img {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f0f0f2;
    }
    .cls-pwa-co-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cls-pwa-co-item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .cls-pwa-co-item-name {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cls-pwa-co-item-meta {
        font-size: 11px;
        color: #888;
        font-weight: 500;
    }
    .cls-pwa-co-item-price {
        font-size: 14px;
        font-weight: 800;
        color: #111;
        flex-shrink: 0;
    }

    /* ── Delivery point ── */
    .cls-pwa-co-delivery {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: rgba(5, 150, 105, 0.05);
        border: 1px solid rgba(5, 150, 105, 0.12);
        border-radius: 12px;
        padding: 12px 14px;
    }
    .cls-pwa-co-delivery-name {
        font-size: 14px;
        font-weight: 700;
        color: #059669;
    }
    .cls-pwa-co-delivery-addr {
        font-size: 12px;
        color: #666;
    }

    /* ── Form fields ── */
    .cls-pwa-co-fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .cls-pwa-co-row {
        display: flex;
        gap: 10px;
    }
    .cls-pwa-co-field {
        flex: 1;
    }
    .cls-pwa-co-field-half {
        flex: 1;
    }
    .cls-pwa-co-field-third {
        flex: 0 0 38%;
    }
    .cls-pwa-co-field-twothird {
        flex: 1;
    }
    .cls-pwa-co-field label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #888;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .cls-pwa-co-field input,
    .cls-pwa-co-field textarea {
        width: 100%;
        padding: 11px 12px;
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #111;
        background: #fafafa;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        -webkit-appearance: none;
        box-sizing: border-box;
    }
    .cls-pwa-co-field input:focus,
    .cls-pwa-co-field textarea:focus {
        border-color: rgba(0, 51, 102, 0.3);
        box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.06);
        background: #fff;
    }
    .cls-pwa-co-field textarea {
        resize: vertical;
        min-height: 70px;
        font-family: inherit;
    }
    .cls-pwa-co-input-locked {
        background: rgba(0, 51, 102, 0.04) !important;
        color: #555 !important;
        border-color: rgba(0, 51, 102, 0.1) !important;
        cursor: not-allowed;
    }
    .cls-pwa-co-lock-hint {
        font-size: 9px;
        font-weight: 500;
        color: #059669;
        text-transform: none;
        letter-spacing: 0;
        margin-left: 4px;
    }
    .cls-pwa-co-input-error {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08) !important;
        animation: clsCoShake 0.4s ease;
    }
    @keyframes clsCoShake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-4px); }
        50% { transform: translateX(4px); }
        75% { transform: translateX(-2px); }
    }

    /* ── Payment gateways ── */
    .cls-pwa-co-gateways {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cls-pwa-co-gateway {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        border-radius: 12px;
        border: 1.5px solid rgba(0, 0, 0, 0.06);
        background: #fafafa;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .cls-pwa-co-gateway-active {
        border-color: rgba(0, 51, 102, 0.25);
        background: rgba(0, 51, 102, 0.03);
        box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.06);
    }
    .cls-pwa-co-gateway input[type="radio"] {
        display: none;
    }
    .cls-pwa-co-gw-radio {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
        position: relative;
        transition: border-color 0.2s ease;
        margin-top: 1px;
    }
    .cls-pwa-co-gw-radio::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #003366;
        transform: scale(0);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .cls-pwa-co-gateway-active .cls-pwa-co-gw-radio {
        border-color: #003366;
    }
    .cls-pwa-co-gateway-active .cls-pwa-co-gw-radio::after {
        transform: scale(1);
    }
    .cls-pwa-co-gw-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .cls-pwa-co-gw-title {
        font-size: 14px;
        font-weight: 700;
        color: #111;
    }
    .cls-pwa-co-gw-desc {
        font-size: 12px;
        color: #888;
        line-height: 1.4;
    }
    .cls-pwa-co-gw-desc p {
        margin: 0;
        font-size: 12px;
        color: #888;
    }

    /* ── Totals ── */
    .cls-pwa-co-totals {
        margin: 10px 14px;
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        animation: clsPwaFadeUp 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-co-totals-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        font-size: 13px;
        color: #666;
    }
    .cls-pwa-co-totals-row span:last-child {
        font-weight: 600;
        color: #333;
    }
    .cls-pwa-co-totals-discount span:last-child {
        color: #059669;
    }
    .cls-pwa-co-totals-total {
        border-top: 1.5px solid rgba(0, 0, 0, 0.06);
        margin-top: 6px;
        padding-top: 12px;
    }
    .cls-pwa-co-totals-total span:first-child {
        font-size: 15px;
        font-weight: 700;
        color: #111;
    }
    .cls-pwa-co-totals-total span:last-child {
        font-size: 22px;
        font-weight: 800;
        color: #111;
    }

    /* ── Error ── */
    .cls-pwa-co-error {
        margin: 10px 14px;
        padding: 12px 14px;
        background: rgba(220, 38, 38, 0.06);
        border: 1px solid rgba(220, 38, 38, 0.15);
        border-radius: 12px;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        color: #dc2626;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }
    .cls-pwa-co-error svg {
        flex-shrink: 0;
        margin-top: 1px;
    }
    .cls-pwa-co-error-in {
        animation: clsCoShake 0.4s ease;
    }

    /* ── Submit button ── */
    .cls-pwa-co-submit-wrap {
        margin: 16px 14px 0;
        animation: clsPwaFadeUp 0.5s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-co-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px;
        background: rgba(0, 51, 102, 0.92) !important;
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 51, 102, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }
    .cls-pwa-co-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        pointer-events: none;
    }
    .cls-pwa-co-submit::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        animation: clsShopShine 5s ease-in-out infinite;
    }
    .cls-pwa-co-submit:active {
        transform: scale(0.97);
    }
    .cls-pwa-co-submit-loading {
        opacity: 0.7;
        pointer-events: none;
    }
    .cls-pwa-co-submit-loading::after {
        animation: clsCoSpinShine 1s linear infinite;
    }
    @keyframes clsCoSpinShine {
        0% { left: -100%; }
        100% { left: 200%; }
    }
    .cls-pwa-co-legal {
        text-align: center;
        font-size: 11px;
        color: #aaa;
        margin: 10px 0 0;
    }

    /* ── Kill theme styles on checkout ── */
    .cls-pwa-checkout a,
    .cls-pwa-checkout a:hover,
    .cls-pwa-checkout a:focus,
    .cls-pwa-checkout a:active {
        color: inherit !important;
        text-decoration: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .cls-pwa-checkout button:hover,
    .cls-pwa-checkout button:focus {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .cls-pwa-checkout *:focus { outline: none !important; }

    /* Explicit colors on styled elements */
    .cls-pwa-co-back,
    .cls-pwa-co-back:hover,
    .cls-pwa-co-back:focus,
    .cls-pwa-co-back:visited {
        color: #003366 !important;
        background: rgba(255, 255, 255, 0.9) !important;
    }
    .cls-pwa-co-submit,
    .cls-pwa-co-submit:hover,
    .cls-pwa-co-submit:focus,
    .cls-pwa-co-submit:active {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.92) !important;
    }

    /* ══════════════════════════════════════════════════
       Order Received / Confirmation
       ══════════════════════════════════════════════════ */
    .cls-pwa-orcv {
        background: #f7f7f9;
        min-height: calc(100vh - 52px - 70px);
        padding-bottom: 100px;
    }

    /* ── Hero ── */
    .cls-pwa-orcv-hero {
        text-align: center;
        padding: 40px 20px 30px;
        animation: clsPwaFadeUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-orcv-check {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #059669, #10b981);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        box-shadow: 0 8px 30px rgba(5, 150, 105, 0.35);
        animation: clsOrcvPop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @keyframes clsOrcvPop {
        0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
        100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    .cls-pwa-orcv-check svg {
        animation: clsOrcvStroke 0.5s 0.6s ease both;
    }
    @keyframes clsOrcvStroke {
        0% { stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; }
        100% { stroke-dasharray: 30; stroke-dashoffset: 0; opacity: 1; }
    }
    .cls-pwa-orcv-title {
        font-size: 22px;
        font-weight: 800;
        color: #111;
        margin: 0 0 8px;
    }
    .cls-pwa-orcv-sub {
        font-size: 14px;
        color: #666;
        margin: 0;
        line-height: 1.5;
    }

    /* ── Card ── */
    .cls-pwa-orcv-card {
        margin: 0 14px;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.03);
        animation: clsPwaFadeUp 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-orcv-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 16px 16px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }
    .cls-pwa-orcv-order-num {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: #003366;
    }
    .cls-pwa-orcv-order-date {
        display: block;
        font-size: 11px;
        color: #888;
        margin-top: 2px;
    }
    .cls-pwa-orcv-status {
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Items ── */
    .cls-pwa-orcv-items {
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .cls-pwa-orcv-item {
        display: flex;
        align-items: center;
        gap: 10px;
        animation: clsPwaFadeUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-orcv-item:nth-child(1) { animation-delay: 0.25s; }
    .cls-pwa-orcv-item:nth-child(2) { animation-delay: 0.32s; }
    .cls-pwa-orcv-item:nth-child(3) { animation-delay: 0.39s; }
    .cls-pwa-orcv-item-img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f0f0f2;
    }
    .cls-pwa-orcv-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cls-pwa-orcv-item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .cls-pwa-orcv-item-name {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cls-pwa-orcv-item-qty {
        font-size: 11px;
        color: #888;
    }
    .cls-pwa-orcv-item-price {
        font-size: 14px;
        font-weight: 800;
        color: #111;
        flex-shrink: 0;
    }

    /* ── Details ── */
    .cls-pwa-orcv-details {
        padding: 12px 16px 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cls-pwa-orcv-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
    }
    .cls-pwa-orcv-detail span:first-child {
        color: #888;
    }
    .cls-pwa-orcv-detail span:last-child {
        font-weight: 600;
        color: #333;
    }
    .cls-pwa-orcv-detail-total {
        border-top: 1.5px solid rgba(0, 0, 0, 0.06);
        padding-top: 10px;
        margin-top: 4px;
    }
    .cls-pwa-orcv-detail-total span:first-child {
        font-size: 15px;
        font-weight: 700;
        color: #111;
    }
    .cls-pwa-orcv-detail-total span:last-child {
        font-size: 20px;
        font-weight: 800;
        color: #111;
    }

    /* ── Action buttons ── */
    .cls-pwa-orcv-actions {
        margin: 20px 14px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        animation: clsPwaFadeUp 0.5s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-orcv-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 15px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }
    .cls-pwa-orcv-btn:active {
        transform: scale(0.97);
    }
    .cls-pwa-orcv-btn-primary {
        background: rgba(0, 51, 102, 0.92) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        box-shadow: 0 4px 20px rgba(0, 51, 102, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .cls-pwa-orcv-btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        pointer-events: none;
    }
    .cls-pwa-orcv-btn-primary::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        animation: clsShopShine 5s ease-in-out infinite;
    }
    .cls-pwa-orcv-btn-secondary {
        background: #fff !important;
        color: #003366 !important;
        border: 1.5px solid rgba(0, 51, 102, 0.12);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }

    /* Kill theme */
    .cls-pwa-orcv a,
    .cls-pwa-orcv a:hover,
    .cls-pwa-orcv a:focus,
    .cls-pwa-orcv a:active,
    .cls-pwa-orcv a:visited {
        text-decoration: none !important;
        outline: none !important;
    }
    a.cls-pwa-orcv-btn-primary,
    a.cls-pwa-orcv-btn-primary:link,
    a.cls-pwa-orcv-btn-primary:visited,
    a.cls-pwa-orcv-btn-primary:hover,
    a.cls-pwa-orcv-btn-primary:focus,
    a.cls-pwa-orcv-btn-primary:active {
        color: #fff !important;
        background: rgba(0, 51, 102, 0.92) !important;
    }
    a.cls-pwa-orcv-btn-secondary,
    a.cls-pwa-orcv-btn-secondary:link,
    a.cls-pwa-orcv-btn-secondary:visited,
    a.cls-pwa-orcv-btn-secondary:hover,
    a.cls-pwa-orcv-btn-secondary:focus,
    a.cls-pwa-orcv-btn-secondary:active {
        color: #003366 !important;
        background: #fff !important;
    }

    /* ══════════════════════════════════════════════════
       Account page — Mon Compte
       ══════════════════════════════════════════════════ */
    .cls-pwa-account {
        background: #f7f7f9;
        min-height: calc(100vh - 52px - 70px);
        padding-bottom: 100px;
    }

    /* ── Hero / Profile ── */
    .cls-pwa-acct-hero {
        text-align: center;
        padding: 36px 20px 24px;
        animation: clsPwaFadeUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-acct-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin: 0 auto 14px;
        overflow: hidden;
        border: 3px solid #fff;
        box-shadow: 0 4px 20px rgba(0, 51, 102, 0.15);
    }
    .cls-pwa-acct-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cls-pwa-acct-name {
        font-size: 20px;
        font-weight: 800;
        color: #111;
        margin: 0 0 4px;
    }
    .cls-pwa-acct-email {
        font-size: 13px;
        color: #888;
        display: block;
    }

    /* ── Badges ── */
    .cls-pwa-acct-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .cls-pwa-acct-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 20px;
    }
    .cls-pwa-acct-badge-family {
        background: rgba(59, 130, 246, 0.08);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.15);
    }
    .cls-pwa-acct-badge-dp {
        background: rgba(5, 150, 105, 0.08);
        color: #059669;
        border: 1px solid rgba(5, 150, 105, 0.15);
    }

    /* ── Card menu ── */
    .cls-pwa-acct-menu {
        padding: 0 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .cls-pwa-acct-card {
        display: flex;
        align-items: center;
        gap: 14px;
        background: #fff;
        padding: 16px;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.03);
        text-decoration: none !important;
        color: inherit !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        animation: clsPwaFadeUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-acct-card:nth-child(1) { animation-delay: 0.05s; }
    .cls-pwa-acct-card:nth-child(2) { animation-delay: 0.1s; }
    .cls-pwa-acct-card:nth-child(3) { animation-delay: 0.15s; }
    .cls-pwa-acct-card:nth-child(4) { animation-delay: 0.2s; }
    .cls-pwa-acct-card:nth-child(5) { animation-delay: 0.25s; }
    .cls-pwa-acct-card:active {
        transform: scale(0.98);
    }

    /* Icon backgrounds */
    .cls-pwa-acct-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .cls-pwa-acct-card-icon-blue {
        background: rgba(0, 51, 102, 0.08);
        color: #003366;
    }
    .cls-pwa-acct-card-icon-teal {
        background: rgba(13, 148, 136, 0.08);
        color: #0d9488;
    }
    .cls-pwa-acct-card-icon-purple {
        background: rgba(139, 92, 246, 0.08);
        color: #8b5cf6;
    }
    .cls-pwa-acct-card-icon-orange {
        background: rgba(245, 158, 11, 0.08);
        color: #f59e0b;
    }
    .cls-pwa-acct-card-icon-green {
        background: rgba(5, 150, 105, 0.08);
        color: #059669;
    }

    .cls-pwa-acct-card-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .cls-pwa-acct-card-title {
        font-size: 15px;
        font-weight: 700;
        color: #111;
    }
    .cls-pwa-acct-card-sub {
        font-size: 12px;
        color: #888;
    }
    .cls-pwa-acct-card-arrow {
        color: #ccc;
        flex-shrink: 0;
    }

    /* ── Logout ── */
    .cls-pwa-acct-logout-wrap {
        padding: 24px 14px 0;
        animation: clsPwaFadeUp 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .cls-pwa-acct-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px;
        border-radius: 14px;
        background: rgba(220, 38, 38, 0.06) !important;
        color: #dc2626 !important;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none !important;
        border: 1px solid rgba(220, 38, 38, 0.1);
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }
    .cls-pwa-acct-logout:active {
        transform: scale(0.97);
    }

    /* Kill theme overrides */
    .cls-pwa-account a,
    .cls-pwa-account a:hover,
    .cls-pwa-account a:focus,
    .cls-pwa-account a:active,
    .cls-pwa-account a:visited {
        text-decoration: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    a.cls-pwa-acct-card,
    a.cls-pwa-acct-card:link,
    a.cls-pwa-acct-card:visited,
    a.cls-pwa-acct-card:hover,
    a.cls-pwa-acct-card:focus,
    a.cls-pwa-acct-card:active {
        color: inherit !important;
        text-decoration: none !important;
    }
    a.cls-pwa-acct-logout,
    a.cls-pwa-acct-logout:link,
    a.cls-pwa-acct-logout:visited,
    a.cls-pwa-acct-logout:hover,
    a.cls-pwa-acct-logout:focus,
    a.cls-pwa-acct-logout:active {
        color: #dc2626 !important;
        background: rgba(220, 38, 38, 0.06) !important;
    }

} /* end standalone */

/* ══════════════════════════════════════════════════════
   JS fallback — .cls-pwa-standalone (same custom grid)
   ══════════════════════════════════════════════════════ */
.cls-pwa-standalone .cls-pwa-shop { display: block !important; }
.cls-pwa-standalone #main-footer,
.cls-pwa-standalone .main-footer,
.cls-pwa-standalone .footer-custom-code,
.cls-pwa-standalone .lt-footer,
.cls-pwa-standalone .elementor-location-footer,
.cls-pwa-standalone [class*="footer-wrap"],
.cls-pwa-standalone [class*="site-footer"] {
    display: none !important;
}