.menu-shell{padding:18px 0 110px}
        .menu-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
        .menu-brand{display:flex;align-items:center;gap:14px}
        .menu-logo{width:68px;height:68px;border-radius:18px;object-fit:cover;background:#fff;border:1px solid #e5e7eb}
        .menu-fallback{width:68px;height:68px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-weight:800;background:#111827;color:#fff}
        .menu-title h1{margin:0;font-size:28px}
        .menu-title p{margin:4px 0 0;color:#6b7280}

        .menu-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}
        .menu-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.05)}

        .category-list{display:flex;flex-direction:column;gap:10px}
        .category-btn{
            width:100%;
            text-align:left;
            border:0;
            border-radius:16px;
            padding:14px 16px;
            background:#f3f4f6;
            cursor:pointer;
            font-weight:700;
            transition:.18s ease;
        }
        .category-btn:hover{transform:translateY(-1px)}
        .category-btn.active{background:#111827;color:#fff}

        .mobile-category-bar{
            display:none;
            position:sticky;
            top:0;
            z-index:50;
            background:linear-gradient(180deg,rgba(248,251,255,.98),rgba(248,251,255,.88));
            backdrop-filter:blur(10px);
            padding:10px 0 14px;
            margin-bottom:12px;
        }

        .mobile-category-dropdown{position:relative}

        .mobile-category-trigger{
            width:100%;
            border:0;
            border-radius:24px;
            padding:15px 16px;
            font:inherit;
            cursor:pointer;
            color:#fff;
            background:
                radial-gradient(circle at top left,rgba(250,204,21,.35),transparent 35%),
                linear-gradient(135deg,#0f172a 0%,#2563eb 45%,#7c3aed 100%);
            box-shadow:0 16px 38px rgba(37,99,235,.30);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }

        .mobile-category-trigger-left{display:flex;align-items:center;gap:12px;min-width:0;text-align:left}
        .mobile-category-icon{
            width:46px;height:46px;border-radius:18px;
            background:rgba(255,255,255,.18);
            display:grid;place-items:center;
            font-size:25px;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
            flex-shrink:0;
        }
        .mobile-category-copy{min-width:0}
        .mobile-category-label{
            display:block;
            font-size:12px;
            font-weight:1000;
            text-transform:uppercase;
            letter-spacing:1.15px;
            color:#fde68a;
            line-height:1.1;
        }
        .mobile-category-current{
            display:block;
            font-size:18px;
            font-weight:1000;
            text-transform:uppercase;
            letter-spacing:.4px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            max-width:calc(100vw - 150px);
            line-height:1.18;
        }
        .mobile-category-hint{
            display:block;
            font-size:12px;
            font-weight:800;
            color:rgba(255,255,255,.80);
            margin-top:3px;
        }
        .mobile-category-arrow{
            width:42px;height:42px;border-radius:16px;
            background:#fff;color:#111827;
            display:grid;place-items:center;
            font-size:22px;
            font-weight:1000;
            box-shadow:0 10px 20px rgba(15,23,42,.22);
            flex-shrink:0;
            transition:.18s ease;
        }
        .mobile-category-trigger.open .mobile-category-arrow{transform:rotate(180deg)}

        .mobile-category-menu{
            position:absolute;
            left:0;
            right:0;
            top:calc(100% + 10px);
            background:#fff;
            border:1px solid #dbeafe;
            border-radius:24px;
            box-shadow:0 22px 45px rgba(15,23,42,.18);
            padding:10px;
            display:none;
            max-height:380px;
            overflow:auto;
        }
        .mobile-category-menu.open{display:grid;gap:9px}

        .mobile-category-option{
            width:100%;
            text-align:left;
            border:1px solid rgba(37,99,235,.10);
            border-radius:18px;
            padding:15px 14px;
            font:inherit;
            font-size:16px;
            font-weight:1000;
            text-transform:uppercase;
            letter-spacing:.35px;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            box-shadow:0 8px 18px rgba(15,23,42,.05);
        }
        .mobile-category-option::after{content:'›';font-size:24px;line-height:1;font-weight:1000;opacity:.55}
        .mobile-category-option:nth-child(6n+1){background:linear-gradient(135deg,#fff7ed,#ffedd5);color:#9a3412}
        .mobile-category-option:nth-child(6n+2){background:linear-gradient(135deg,#ecfeff,#cffafe);color:#155e75}
        .mobile-category-option:nth-child(6n+3){background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#166534}
        .mobile-category-option:nth-child(6n+4){background:linear-gradient(135deg,#f5f3ff,#ede9fe);color:#5b21b6}
        .mobile-category-option:nth-child(6n+5){background:linear-gradient(135deg,#fdf2f8,#fce7f3);color:#9d174d}
        .mobile-category-option:nth-child(6n+6){background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8}
        .mobile-category-option:hover,
        .mobile-category-option.active{
            background:linear-gradient(135deg,#111827 0%,#2563eb 55%,#7c3aed 100%);
            color:#fff;
            border-color:transparent;
            transform:translateY(-1px);
        }

        .search-wrap{margin-bottom:16px}
        .search-input{
            width:100%;
            padding:12px 14px;
            border:1px solid #d1d5db;
            border-radius:14px;
            font:inherit;
        }

        .item-list{display:flex;flex-direction:column;gap:14px}
        .item-card{
            border:1px solid #e5e7eb;
            border-radius:18px;
            padding:14px;
            background:#fff;
        }

        .item-summary{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            cursor:pointer;
        }

        .item-summary-title{
            display:flex;
            align-items:flex-start;
            gap:12px;
            flex:1;
            min-width:0;
        }

        .item-image{
            width:74px;
            height:74px;
            border-radius:16px;
            object-fit:cover;
            background:#f3f4f6;
            border:1px solid #e5e7eb;
            flex-shrink:0;
        }

        .item-name{margin:0 0 5px;font-size:18px}
        .item-desc{margin:0;color:#6b7280;font-size:14px}
        .item-caret{
            font-size:22px;
            font-weight:800;
            line-height:1;
            color:#111827;
            min-width:18px;
            text-align:center;
        }

        .item-body{display:none}
        .item-card.open .item-body{display:block}
        .item-card.no-expand .item-summary{cursor:default}
        .item-card.no-expand .item-caret{display:none}
        .item-card.no-expand .item-body{display:none !important}

        .variant-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
        .variant-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            background:#f9fafb;
            border:1px solid #e5e7eb;
            padding:10px 12px;
            border-radius:14px;
        }

        .qty-controls{display:flex;align-items:center;gap:8px}
        .qty-btn{
            width:32px;
            height:32px;
            border-radius:10px;
            border:0;
            background:#111827;
            color:#fff;
            font-size:18px;
            cursor:pointer;
        }
        .qty-count{min-width:24px;text-align:center;font-weight:700}

        .single-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-top:14px;
            background:#f9fafb;
            border:1px solid #e5e7eb;
            padding:10px 12px;
            border-radius:14px;
        }

        .choose-btn{
            border:0;
            background:#111827;
            color:#fff;
            padding:10px 14px;
            border-radius:12px;
            cursor:pointer;
            font-weight:700;
        }


        .quick-price-line{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
        .quick-price-pill{display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;color:#166534;border:1px solid #bbf7d0;border-radius:999px;padding:6px 10px;font-weight:900;font-size:13px}
        .cart-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
        .checkout-btn.whatsapp{background:#22c55e}.checkout-btn.place{background:#111827}
        .order-type-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
        .order-type-box label{border:1px solid #dbe4f0;border-radius:14px;padding:10px;background:#fff;font-weight:800;display:flex;gap:8px;align-items:center}
        .customer-auth-backdrop,.active-order-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:180;display:none;align-items:center;justify-content:center;padding:18px}
        .customer-auth-backdrop.open,.active-order-backdrop.open{display:flex}
        .auth-card,.active-order-card{background:#fff;border-radius:26px;padding:18px;width:100%;max-width:560px;max-height:92vh;overflow:auto;box-shadow:0 24px 70px rgba(15,23,42,.24)}
        .auth-tabs{display:flex;gap:8px;margin-bottom:12px}.auth-tabs button{flex:1;border:0;border-radius:14px;padding:12px;font-weight:900;cursor:pointer;background:#eef2ff;color:#3730a3}.auth-tabs button.active{background:#111827;color:#fff}
        .auth-form{display:grid;gap:10px}.auth-form input,.auth-form textarea{width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:14px;font:inherit}
        /* Keep the active-order bell stacked above the WhatsApp button in the same bottom-left corner. */
        .active-order-float{position:fixed;left:18px;bottom:82px;z-index:85;width:54px;height:54px;border:0;border-radius:50%;background:linear-gradient(135deg,#dc2626,#f97316);color:#fff;font-size:24px;box-shadow:0 16px 36px rgba(220,38,38,.35);display:none;place-items:center;animation:activeBlink 1s infinite;cursor:pointer}
        .active-order-float.show{display:grid}@keyframes activeBlink{50%{transform:scale(1.08);filter:brightness(1.18)}}
        .track-step{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #eef2f7}.track-dot{width:16px;height:16px;border-radius:50%;background:#cbd5e1;margin-top:2px}.track-step.done .track-dot{background:#16a34a}.track-step strong{display:block}.track-step small{color:#64748b}.order-detail-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:12px;margin:12px 0}.order-detail-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #dbe4f0;padding:7px 0}.order-detail-row:last-child{border-bottom:0}.cancel-btn{border:0;border-radius:14px;background:#dc2626;color:#fff;font-weight:900;padding:12px 14px;cursor:pointer;width:100%}

        .cart-fab{
            position:fixed;
            right:18px;
            bottom:18px;
            z-index:70;
            min-width:112px;
            height:56px;
            border:0;
            border-radius:999px;
            padding:0 15px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            background:linear-gradient(135deg,#111827 0%,#2563eb 55%,#7c3aed 100%);
            color:#fff;
            font-weight:1000;
            font-size:15px;
            letter-spacing:.2px;
            box-shadow:0 16px 36px rgba(37,99,235,.30);
            cursor:pointer;
            border:2px solid rgba(255,255,255,.75);
        }
        .cart-fab-icon{font-size:21px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.20))}
        .cart-fab-count{min-width:26px;height:26px;border-radius:999px;background:#facc15;color:#111827;display:inline-flex;align-items:center;justify-content:center;font-weight:1000;font-size:13px;box-shadow:0 8px 18px rgba(250,204,21,.35)}
        .cart-fab:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(37,99,235,.38)}
        @media(max-width:640px){.cart-fab{right:12px;bottom:12px;min-width:120px;height:58px;font-size:15px;padding:0 16px}.cart-fab-icon{font-size:23px}.cart-fab-count{min-width:28px;height:28px;font-size:13px}}


        .cart-drawer{
            position:fixed;
            top:0;
            right:-460px;
            width:100%;
            max-width:460px;
            height:100%;
            background:#fff;
            z-index:110;
            box-shadow:-10px 0 30px rgba(0,0,0,.12);
            transition:right .25s ease;
            display:flex;
            flex-direction:column;
        }
        .cart-drawer.open{right:0}
        .cart-head{
            padding:18px;
            border-bottom:1px solid #e5e7eb;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        .cart-body{padding:18px;overflow:auto;flex:1}
        .cart-item{
            border:1px solid #e5e7eb;
            border-radius:16px;
            padding:12px;
            margin-bottom:12px;
        }
        .cart-foot{padding:18px;border-top:1px solid #e5e7eb}
        .summary-row{display:flex;justify-content:space-between;margin-bottom:8px}
        .checkout-btn{
            width:100%;
            border:0;
            background:#16a34a;
            color:#fff;
            font-weight:800;
            border-radius:16px;
            padding:14px;
            cursor:pointer;
        }

        .close-btn,.small-btn{
            border:0;
            background:#efefef;
            border-radius:10px;
            padding:8px 12px;
            cursor:pointer;
        }

        .customer-form{display:grid;gap:10px;margin-top:14px}
        .customer-form input,.customer-form textarea{
            width:100%;
            padding:12px 14px;
            border:1px solid #d1d5db;
            border-radius:14px;
            font:inherit;
        }

        .modal-backdrop{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,.45);
            display:none;
            align-items:center;
            justify-content:center;
            z-index:120;
            padding:18px;
        }
        .modal-backdrop.open{display:flex}
        .modal-card{
            background:#fff;
            border-radius:22px;
            padding:18px;
            width:100%;
            max-width:540px;
            max-height:90vh;
            overflow:auto;
        }
        .modal-title{margin:0 0 12px}
        .choice-block{margin-bottom:16px}
        .choice-list{display:grid;gap:10px}
        .choice-option{
            border:1px solid #e5e7eb;
            border-radius:14px;
            padding:12px;
            background:#fafafa;
        }

        .empty-box{
            padding:24px;
            text-align:center;
            color:#6b7280;
            background:#fafafa;
            border:1px dashed #d1d5db;
            border-radius:18px;
        }

        .connection-status{
            display:inline-flex;
            align-items:center;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            font-size:12px;
            font-weight:800;
            background:#f3f4f6;
            color:#111827;
        }
        .connection-status.online{
            background:#ecfdf5;
            color:#166534;
        }
        .connection-status.offline{
            background:#fff7ed;
            color:#9a3412;
        }

        @media (max-width: 900px){
    html {
        font-size: 13px;
    }

    body {
        zoom: 0.90;
    }

    .menu-layout{
        grid-template-columns:1fr;
    }

            .desktop-category-card{
                display:none;
            }

            .mobile-category-bar{
                display:block;
            }

            .single-row,
            .variant-row{
                flex-direction:column;
                align-items:stretch;
            }

            .item-summary-title{
                align-items:flex-start;
            }

            .menu-head{
                align-items:flex-start;
            }

            .menu-shell{
                padding:12px 0 90px;
            }

            .menu-title h1{
                font-size:22px;
            }

            .menu-title p{
                font-size:13px;
            }

                .menu-logo,
    .menu-fallback{
        width:52px;
        height:52px;
        border-radius:15px;
    }

    .item-image{
        width:64px;
        height:64px;
        border-radius:14px;
    }

    .item-name{
        font-size:15px;
    }

    .item-desc{
        font-size:12px;
    }

    .menu-card{
        padding:14px;
        border-radius:18px;
    }
        }

        .active-order-list{display:grid;gap:12px;margin-top:12px}
        .active-order-mini-card{
            border:1px solid #e5e7eb;
            border-radius:18px;
            background:#fff;
            overflow:hidden;
            box-shadow:0 8px 22px rgba(15,23,42,.06);
        }
        .active-order-mini-head{
            width:100%;
            border:0;
            background:linear-gradient(135deg,#f8fafc,#eef2ff);
            padding:12px;
            text-align:left;
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:center;
            cursor:pointer;
        }
        .active-order-mini-head strong{display:block;color:#0f172a}
        .active-order-mini-head small{display:block;color:#64748b;font-weight:800;margin-top:3px}
        .active-order-pill{
            display:inline-flex;
            align-items:center;
            border-radius:999px;
            padding:6px 9px;
            background:#111827;
            color:#fff;
            font-size:12px;
            font-weight:900;
            white-space:nowrap;
        }
        .active-order-mini-body{display:none;padding:12px;border-top:1px solid #e5e7eb}
        .active-order-mini-card.open .active-order-mini-body{display:block}
        .active-order-topline{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:8px;
            margin:10px 0;
        }
        .active-order-topline div{
            background:#f8fafc;
            border:1px solid #e5e7eb;
            border-radius:14px;
            padding:10px;
            font-size:13px;
            font-weight:900;
        }
        .active-order-updated{
            background:#ecfdf5;
            border:1px solid #bbf7d0;
            color:#166534;
            border-radius:14px;
            padding:10px;
            font-weight:900;
            margin:10px 0;
            display:none;
        }
        .active-order-updated.show{display:block}
        @media(max-width:640px){.active-order-topline{grid-template-columns:1fr}}

    
/* v166 customer delivery range display */
.delivery-range-note{
    margin:-4px 0 8px;
    color:#9a3412;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:12px;
    padding:8px 10px;
    font-size:12px;
    font-weight:850;
    line-height:1.35;
}


/* v167 customer Order & Payment floating card */
.customer-order-hidden-controls{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}
.customer-order-method-card{
    width:100%;
    margin-top:12px;
    border:1px solid #dbeafe;
    border-radius:18px;
    padding:12px;
    background:linear-gradient(135deg,#eff6ff,#ffffff);
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    text-align:left;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(37,99,235,.08);
}
.customer-order-method-card .method-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,#111827,#2563eb,#7c3aed);
    box-shadow:0 10px 20px rgba(37,99,235,.18);
}
.customer-order-method-card strong{
    display:block;
    color:#0f172a;
    font-size:15px;
}
.customer-order-method-card small{
    display:block;
    color:#64748b;
    font-weight:850;
    margin-top:3px;
}
.customer-order-method-card em{
    font-style:normal;
    border-radius:999px;
    background:#111827;
    color:#fff;
    padding:7px 10px;
    font-size:12px;
    font-weight:1000;
}
.customer-method-backdrop{
    position:fixed;
    inset:0;
    z-index:260;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.60);
    backdrop-filter:blur(8px);
}
.customer-method-backdrop.open{display:flex}
.customer-method-card{
    width:100%;
    max-width:620px;
    max-height:92vh;
    overflow:hidden;
    border-radius:28px;
    background:#fff;
    box-shadow:0 30px 90px rgba(15,23,42,.34);
    display:flex;
    flex-direction:column;
    animation:customerMethodPop .16s ease-out;
}
@keyframes customerMethodPop{
    from{opacity:.35;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.customer-method-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    color:#fff;
    background:linear-gradient(135deg,#0f172a,#2563eb,#7c3aed);
}
.customer-method-head h3{margin:0;font-size:22px;letter-spacing:-.02em}
.customer-method-head p{margin:5px 0 0;color:rgba(255,255,255,.82);font-weight:850}
.customer-method-head button{
    border:0;
    min-height:38px;
    border-radius:14px;
    padding:0 12px;
    color:#fff;
    background:rgba(255,255,255,.16);
    font-weight:1000;
    cursor:pointer;
}
.customer-method-body{
    padding:18px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,#fff,#f8fbff);
}
.method-group{margin-bottom:16px}
.method-group > strong{
    display:block;
    color:#0f172a;
    margin-bottom:10px;
    font-size:16px;
}
.method-choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.method-choice{
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:14px;
    min-height:126px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:7px;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.method-choice span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:#f1f5f9;
    font-size:19px;
}
.method-choice b{
    color:#0f172a;
    font-size:15px;
}
.method-choice small{
    color:#64748b;
    font-weight:850;
    line-height:1.35;
}
.method-choice.active{
    border-color:#2563eb;
    background:linear-gradient(135deg,#eff6ff,#ffffff);
    box-shadow:0 14px 30px rgba(37,99,235,.16);
}
.method-choice.active span{
    background:linear-gradient(135deg,#111827,#2563eb);
    color:#fff;
}
.method-done-btn{
    width:100%;
    border:0;
    min-height:48px;
    border-radius:17px;
    color:#fff;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    font-weight:1000;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(34,197,94,.18);
}
@media(max-width:640px){
    .customer-method-backdrop{
        align-items:flex-start;
        padding:10px;
    }
    .customer-method-card{
        max-height:94vh;
        border-radius:22px;
    }
    .customer-method-head{
        padding:14px;
    }
    .customer-method-head h3{
        font-size:18px;
    }
    .customer-method-body{
        padding:13px;
    }
    .method-choice-grid{
        grid-template-columns:1fr;
    }
    .method-choice{
        min-height:auto;
        border-radius:17px;
    }
}


/* v168 customer details floating card */
.customer-details-card{
    width:100%;
    margin-top:12px;
    border:1px solid #dcfce7;
    border-radius:18px;
    padding:12px;
    background:linear-gradient(135deg,#ecfdf5,#ffffff);
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    text-align:left;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(22,163,74,.08);
}
.customer-details-card .details-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,#14532d,#16a34a,#22c55e);
    box-shadow:0 10px 20px rgba(22,163,74,.18);
}
.customer-details-card strong{
    display:block;
    color:#0f172a;
    font-size:15px;
}
.customer-details-card small{
    display:block;
    color:#64748b;
    font-weight:850;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.customer-details-card em{
    font-style:normal;
    border-radius:999px;
    background:#14532d;
    color:#fff;
    padding:7px 10px;
    font-size:12px;
    font-weight:1000;
}
.customer-details-backdrop{
    position:fixed;
    inset:0;
    z-index:265;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.60);
    backdrop-filter:blur(8px);
}
.customer-details-backdrop.open{display:flex}
.customer-details-modal-card{
    width:100%;
    max-width:560px;
    max-height:92vh;
    overflow:hidden;
    border-radius:28px;
    background:#fff;
    box-shadow:0 30px 90px rgba(15,23,42,.34);
    display:flex;
    flex-direction:column;
    animation:customerDetailsPop .16s ease-out;
}
@keyframes customerDetailsPop{
    from{opacity:.35;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.customer-details-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    color:#fff;
    background:linear-gradient(135deg,#14532d,#16a34a,#22c55e);
}
.customer-details-head h3{
    margin:0;
    font-size:22px;
    letter-spacing:-.02em;
}
.customer-details-head p{
    margin:5px 0 0;
    color:rgba(255,255,255,.86);
    font-weight:850;
}
.customer-details-head button{
    border:0;
    min-height:38px;
    border-radius:14px;
    padding:0 12px;
    color:#fff;
    background:rgba(255,255,255,.16);
    font-weight:1000;
    cursor:pointer;
}
.customer-details-body{
    padding:18px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,#fff,#f8fbff);
}
.customer-form-floating{
    display:grid;
    gap:12px;
    margin:0;
}
.customer-form-floating label{
    display:block;
    color:#475569;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.35px;
    font-weight:1000;
}
.customer-form-floating input,
.customer-form-floating textarea{
    margin-top:6px;
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:16px;
    padding:12px 14px;
    font:inherit;
    font-weight:850;
    background:#fff;
}
.customer-form-floating textarea{
    resize:vertical;
    min-height:96px;
}
.customer-details-save-btn{
    width:100%;
    margin-top:14px;
    border:0;
    min-height:48px;
    border-radius:17px;
    color:#fff;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    font-weight:1000;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(34,197,94,.18);
}
@media(max-width:640px){
    .customer-details-backdrop{
        align-items:flex-start;
        padding:10px;
    }
    .customer-details-modal-card{
        max-height:94vh;
        border-radius:22px;
    }
    .customer-details-head{
        padding:14px;
    }
    .customer-details-head h3{
        font-size:18px;
    }
    .customer-details-body{
        padding:13px;
    }
}


/* v169 modal opening reliability */
.customer-details-backdrop.open,
.customer-method-backdrop.open{
    display:flex!important;
}


/* v171 modal reliability */
.customer-details-backdrop.open,
.customer-method-backdrop.open{
    display:flex!important;
}
.customer-details-backdrop{z-index:320!important}
.customer-method-backdrop{z-index:315!important}


/* v172 business WhatsApp in header and floating button */
.brand-whatsapp-line{cursor:pointer;

    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    width:max-content;
    max-width:100%;
    border-radius:999px;
    padding:6px 10px;
    color:#166534;
    background:#dcfce7;
    border:1px solid #bbf7d0;
    font-size:13px;
    font-weight:1000;
    box-shadow:0 8px 18px rgba(22,163,74,.10);
}
.brand-whatsapp-number{
    text-decoration:none;
    white-space:nowrap;
}
.wa-mini-icon{
    width:22px;
    height:22px;
    display:inline-grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:#22c55e;
    font-size:13px;
    line-height:1;
}
.customer-wa-float{
    position:fixed;
    left:18px;
    bottom:18px;
    z-index:86;
    width:54px;
    height:54px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    font-size:25px;
    box-shadow:0 16px 36px rgba(22,163,74,.34);
    display:grid;
    place-items:center;
    cursor:pointer;
    border:2px solid rgba(255,255,255,.82);
}
.customer-wa-float:active{transform:scale(.96)}
@media(max-width:640px){
    .brand-whatsapp-line{
        font-size:12px;
        padding:5px 9px;
    }
    .customer-wa-float{
        left:12px;
        bottom:12px;
        width:50px;
        height:50px;
        font-size:23px;
    }
    .active-order-float{
        left:12px;
        bottom:72px;
        width:50px;
        height:50px;
        font-size:22px;
    }
}


/* v175 step text removed */
.method-done-btn{margin-top:4px;}
/* v174 cleaner smaller order/payment icons */
.method-choice{
    min-height:112px!important;
    padding:12px!important;
    border-radius:18px!important;
}
.method-choice span{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
    font-size:15px!important;
    box-shadow:none!important;
}
.method-choice b{
    font-size:14px!important;
    line-height:1.2!important;
}
.method-choice small{
    font-size:11px!important;
    line-height:1.3!important;
}
.method-choice.active{
    box-shadow:0 10px 22px rgba(37,99,235,.12)!important;
}
.method-choice.active span{
    background:linear-gradient(135deg,#111827,#2563eb)!important;
}
@media(max-width:640px){
    .method-choice{
        min-height:auto!important;
        padding:11px!important;
        display:grid!important;
        grid-template-columns:34px 1fr!important;
        align-items:center!important;
        column-gap:10px!important;
    }
    .method-choice span{
        grid-row:1 / span 2;
    }
    .method-choice b,
    .method-choice small{
        display:block!important;
    }
}


/* v176 automatic customer registration and old-customer fetch */
.old-customer-box{
    margin:12px 0 0;
    border:1px solid #bbf7d0;
    background:linear-gradient(135deg,#ecfdf5,#ffffff);
    color:#14532d;
    border-radius:18px;
    padding:12px;
    box-shadow:0 10px 24px rgba(22,163,74,.08);
}
.old-customer-box strong{
    display:block;
    font-size:16px;
    margin-bottom:4px;
}
.old-customer-box span{
    display:block;
    color:#166534;
    font-weight:850;
    line-height:1.35;
}
.customer-phone-searching{
    opacity:.75;
}


/* v177 single final button + loading effect */
.customer-details-save-btn.is-loading,
.customer-details-save-btn:disabled{
    opacity:.75;
    cursor:wait;
    filter:saturate(.9);
}


/* v178 beautiful colorful close/cross buttons */
.pretty-x-btn,
.customer-details-head .pretty-x-btn,
.customer-method-head .pretty-x-btn,
.close-btn.pretty-x-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    display:inline-grid!important;
    place-items:center!important;
    color:#fff!important;
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 34%),
        linear-gradient(135deg,#ef4444,#f97316,#ec4899)!important;
    font-size:28px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 14px 30px rgba(239,68,68,.28)!important;
    cursor:pointer!important;
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease!important;
}
.pretty-x-btn:hover,
.close-btn.pretty-x-btn:hover{
    transform:translateY(-1px) scale(1.04)!important;
    filter:brightness(1.06)!important;
    box-shadow:0 18px 38px rgba(239,68,68,.34)!important;
}
.pretty-x-btn:active,
.close-btn.pretty-x-btn:active{
    transform:scale(.94)!important;
}
.cart-head .pretty-x-btn{
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 34%),
        linear-gradient(135deg,#0f172a,#2563eb,#7c3aed)!important;
    box-shadow:0 14px 30px rgba(37,99,235,.25)!important;
}
.customer-details-head .pretty-x-btn{
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 34%),
        linear-gradient(135deg,#14532d,#16a34a,#22c55e)!important;
    box-shadow:0 14px 30px rgba(22,163,74,.25)!important;
}
.customer-method-head .pretty-x-btn{
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 34%),
        linear-gradient(135deg,#0f172a,#2563eb,#7c3aed)!important;
    box-shadow:0 14px 30px rgba(37,99,235,.25)!important;
}
@media(max-width:640px){
    .pretty-x-btn,
    .close-btn.pretty-x-btn{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        min-height:38px!important;
        font-size:25px!important;
    }
}



/* v183 exact Google Maps location field */
.accurate-location-field{
    margin-top:6px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 58px;
    gap:8px;
    align-items:stretch;
}
.accurate-location-field input{
    margin-top:0!important;
    cursor:pointer;
    background:#f8fafc!important;
}
.accurate-gps-btn{
    border:0;
    border-radius:16px;
    min-height:48px;
    color:#fff;
    background:
        radial-gradient(circle at 30% 25%,rgba(255,255,255,.32),transparent 34%),
        linear-gradient(135deg,#0f172a,#2563eb,#16a34a);
    box-shadow:0 14px 28px rgba(37,99,235,.22);
    cursor:pointer;
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    font-weight:1000;
}
.accurate-gps-btn span{font-size:22px;line-height:1}
.accurate-gps-btn small{font-size:10px;letter-spacing:.55px;text-transform:uppercase}
.customer-location-backdrop{
    position:fixed;
    inset:0;
    z-index:340;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(8px);
}
.customer-location-backdrop.open{display:flex!important}
.customer-location-card{
    width:100%;
    max-width:580px;
    max-height:92vh;
    overflow:hidden;
    border-radius:28px;
    background:#fff;
    box-shadow:0 30px 90px rgba(15,23,42,.34);
    display:flex;
    flex-direction:column;
    animation:customerDetailsPop .16s ease-out;
}
.customer-location-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    color:#fff;
    background:linear-gradient(135deg,#0f172a,#2563eb,#16a34a);
}
.customer-location-head h3{margin:0;font-size:22px;letter-spacing:-.02em}
.customer-location-head p{margin:5px 0 0;color:rgba(255,255,255,.84);font-weight:850}
.customer-location-body{
    padding:16px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,#fff,#f8fbff);
}
.customer-location-status{
    margin-bottom:10px;
    border-radius:15px;
    padding:10px 12px;
    font-weight:900;
    font-size:13px;
    line-height:1.35;
    color:#1d4ed8;
    background:#eff6ff;
    border:1px solid #bfdbfe;
}
.customer-location-status.success{color:#166534;background:#ecfdf5;border-color:#bbf7d0}
.customer-location-status.error{color:#991b1b;background:#fee2e2;border-color:#fecaca}
.customer-location-map{
    width:100%;
    min-height:230px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #dbeafe;
    background:#f8fafc;
    box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.customer-location-map iframe{width:100%;height:230px;border:0;display:block}
.customer-location-map-placeholder{
    min-height:230px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    text-align:center;
    color:#64748b;
    padding:18px;
}
.customer-location-map-placeholder strong{color:#0f172a}
.customer-location-preview{
    margin-top:12px;
    border:1px dashed #cbd5e1;
    border-radius:16px;
    padding:12px;
    background:#fff;
    color:#334155;
    font-weight:850;
    line-height:1.45;
    white-space:pre-wrap;
    max-height:150px;
    overflow:auto;
}
.customer-location-actions{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.location-refresh-btn,.location-use-btn{
    border:0;
    min-height:48px;
    border-radius:16px;
    font-weight:1000;
    cursor:pointer;
}
.location-refresh-btn{
    background:linear-gradient(135deg,#dc2626,#ef4444,#f97316);
    color:#fff;
    box-shadow:0 14px 30px rgba(220,38,38,.24);
}
.location-use-btn{color:#fff;background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 14px 30px rgba(34,197,94,.18)}
@media(max-width:640px){
    .accurate-location-field{grid-template-columns:1fr}
    .accurate-gps-btn{grid-auto-flow:column;justify-content:center}
    .customer-location-backdrop{align-items:flex-start;padding:10px}
    .customer-location-card{max-height:94vh;border-radius:22px}
    .customer-location-head{padding:14px}
    .customer-location-head h3{font-size:18px}
    .customer-location-body{padding:13px}
    .customer-location-actions{grid-template-columns:1fr}
}



/* =========================================================
   Modern ecommerce storefront refresh
   Keeps the existing ordering, cart, checkout and API logic.
   ========================================================= */
body.storefront-modern{
    --store-bg:#f6f6f3;
    --store-surface:#ffffff;
    --store-ink:#171717;
    --store-muted:#6b7280;
    --store-line:#e7e7e2;
    --store-soft:#f3f4f1;
    --store-accent:#111827;
    --store-success:#16803d;
    margin:0;
    color:var(--store-ink);
    background:
        radial-gradient(circle at 7% 0%,rgba(255,255,255,.95),transparent 24%),
        linear-gradient(180deg,#fbfbf9 0%,var(--store-bg) 100%);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body.storefront-modern .container{
    width:min(1420px,calc(100% - 32px));
}
body.storefront-modern .menu-shell{
    padding:0 0 118px;
}
body.storefront-modern .menu-head{
    position:sticky;
    top:0;
    z-index:90;
    min-height:82px;
    margin:0 0 24px;
    padding:12px 18px;
    border:1px solid rgba(231,231,226,.92);
    border-top:0;
    border-radius:0 0 22px 22px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px) saturate(1.2);
    box-shadow:0 10px 30px rgba(17,24,39,.055);
}
body.storefront-modern .menu-brand{
    min-width:0;
    gap:12px;
}
body.storefront-modern .menu-logo,
body.storefront-modern .menu-fallback{
    width:56px;
    height:56px;
    border-radius:14px;
    border:1px solid var(--store-line);
    box-shadow:none;
}
body.storefront-modern .menu-fallback{
    background:var(--store-accent);
    font-size:18px;
    letter-spacing:.04em;
}
body.storefront-modern .menu-title h1{
    max-width:min(52vw,620px);
    margin:0;
    overflow:hidden;
    color:var(--store-ink);
    font-size:24px;
    font-weight:850;
    letter-spacing:-.035em;
    line-height:1.08;
    text-overflow:ellipsis;
    white-space:nowrap;
}
body.storefront-modern .brand-whatsapp-line{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:6px;
    color:var(--store-muted);
    font-size:12px;
    font-weight:750;
}
body.storefront-modern .wa-mini-icon{
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:#22c55e;
    font-size:10px;
}
body.storefront-modern .connection-status{
    min-height:32px;
    padding:0 11px;
    border:1px solid var(--store-line);
    color:#4b5563;
    background:#fff;
    box-shadow:none;
}
body.storefront-modern .connection-status.online{
    border-color:#bbf7d0;
    color:#166534;
    background:#f0fdf4;
}
body.storefront-modern .connection-status.offline{
    border-color:#fed7aa;
    color:#9a3412;
    background:#fff7ed;
}

body.storefront-modern .menu-layout{
    grid-template-columns:220px minmax(0,1fr);
    gap:24px;
    align-items:start;
}
body.storefront-modern .desktop-category-card{
    position:sticky;
    top:104px;
    max-height:none;
    overflow:visible;
    padding:14px;
    border:1px solid var(--store-line);
    border-radius:20px;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 28px rgba(17,24,39,.045);
}
body.storefront-modern .desktop-category-card.category-scroll-enabled{
    max-height:calc(100vh - 124px);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#cbd5e1 transparent;
}
body.storefront-modern .desktop-category-card.category-scroll-enabled::-webkit-scrollbar{width:6px}
body.storefront-modern .desktop-category-card.category-scroll-enabled::-webkit-scrollbar-track{background:transparent}
body.storefront-modern .desktop-category-card.category-scroll-enabled::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
body.storefront-modern .desktop-category-card.category-no-scroll{
    max-height:none;
    overflow:visible;
}
body.storefront-modern .desktop-category-card .section-title{
    padding:4px 6px 10px;
    margin:0;
}
body.storefront-modern .desktop-category-card .section-title h3{
    margin:0;
    color:#6b7280;
    font-size:12px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}
body.storefront-modern .category-list{
    gap:4px;
}
body.storefront-modern .category-list .category-btn{
    min-height:44px;
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:12px;
    color:#374151!important;
    background:transparent!important;
    font-size:14px;
    font-weight:720;
    letter-spacing:0;
    text-transform:none;
}
body.storefront-modern .category-list .category-btn:hover{
    transform:none;
    border-color:var(--store-line);
    background:var(--store-soft)!important;
}
body.storefront-modern .category-list .category-btn.active{
    border-color:var(--store-accent)!important;
    color:#fff!important;
    background:var(--store-accent)!important;
    box-shadow:0 7px 16px rgba(17,24,39,.13);
}

body.storefront-modern .menu-layout > .menu-card:last-child{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
body.storefront-modern .menu-layout > .menu-card:last-child > .section-title{
    min-height:44px;
    margin:0 0 12px;
    padding:0 2px;
}
body.storefront-modern .menu-layout > .menu-card:last-child > .section-title h3{
    margin:0;
    color:var(--store-ink);
    font-size:28px;
    font-weight:850;
    letter-spacing:-.04em;
}
body.storefront-modern .search-wrap{
    position:relative;
    margin:0 0 20px;
}
body.storefront-modern .search-wrap::before{
    content:"⌕";
    position:absolute;
    left:17px;
    top:50%;
    z-index:1;
    transform:translateY(-53%);
    color:#6b7280;
    font-size:23px;
    line-height:1;
    pointer-events:none;
}
body.storefront-modern .search-input{
    min-height:52px;
    padding:0 18px 0 48px;
    border:1px solid var(--store-line);
    border-radius:16px;
    outline:none;
    color:var(--store-ink);
    background:#fff;
    font-size:15px;
    font-weight:650;
    box-shadow:0 7px 20px rgba(17,24,39,.035);
    transition:border-color .16s ease,box-shadow .16s ease;
}
body.storefront-modern .search-input:focus{
    border-color:#9ca3af;
    box-shadow:0 0 0 4px rgba(17,24,39,.055),0 10px 24px rgba(17,24,39,.045);
}
body.storefront-modern .search-input::placeholder{
    color:#9ca3af;
}

body.storefront-modern .item-list{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}
body.storefront-modern .item-card{
    min-width:0;
    height:100%;
    padding:0;
    overflow:hidden;
    border:1px solid var(--store-line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 8px 24px rgba(17,24,39,.045);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.storefront-modern .item-card:hover{
    transform:translateY(-3px);
    border-color:#d2d2cc;
    box-shadow:0 18px 38px rgba(17,24,39,.09);
}
body.storefront-modern .item-summary{
    display:flex;
    position:relative;
    min-height:100%;
    flex-direction:column;
}
body.storefront-modern .item-summary-title{
    display:flex;
    min-width:0;
    height:100%;
    flex:1 1 auto;
    flex-direction:column;
}
body.storefront-modern .item-image{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    display:block;
    border:0;
    border-bottom:1px solid var(--store-line);
    border-radius:0;
    object-fit:cover;
    background:#f1f1ee;
    transition:transform .35s ease;
}
body.storefront-modern .item-card:hover .item-image{
    transform:scale(1.025);
}
body.storefront-modern .item-card:not(:has(.item-image)) .item-summary::before{
    content:"🛍️";
    width:100%;
    aspect-ratio:4/3;
    display:grid;
    place-items:center;
    border-bottom:1px solid var(--store-line);
    color:#9ca3af;
    background:linear-gradient(145deg,#f8f8f5,#eeeee9);
    font-size:38px;
}
body.storefront-modern .item-summary-title > div{
    display:flex;
    min-height:164px;
    padding:13px 14px 14px;
    flex:1 1 auto;
    flex-direction:column;
}
body.storefront-modern .item-name{
    display:-webkit-box;
    min-height:57px;
    max-height:57px;
    margin:0 0 6px;
    overflow:hidden;
    color:var(--store-ink);
    font-size:15.5px;
    font-weight:820;
    letter-spacing:-.02em;
    line-height:1.22;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}
body.storefront-modern .item-desc{
    display:-webkit-box;
    min-height:36px;
    margin:0;
    overflow:hidden;
    color:var(--store-muted);
    font-size:13px;
    font-weight:500;
    line-height:1.38;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
body.storefront-modern .item-caret{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.9);
    border-radius:999px;
    color:#111827;
    background:rgba(255,255,255,.94);
    box-shadow:0 7px 18px rgba(17,24,39,.14);
    font-size:18px;
}
body.storefront-modern .quick-price-line{
    min-height:40px;
    margin-top:auto;
    padding-top:10px;
    gap:8px;
}
body.storefront-modern .quick-price-pill{
    padding:0;
    border:0;
    color:var(--store-ink);
    background:transparent;
    font-size:15px;
    font-weight:850;
}
body.storefront-modern .qty-controls{
    gap:6px;
    padding:3px;
    border:1px solid var(--store-line);
    border-radius:999px;
    background:#fff;
}
body.storefront-modern .qty-btn{
    width:32px;
    height:32px;
    border-radius:999px;
    background:var(--store-accent);
    font-size:17px;
    font-weight:650;
}
body.storefront-modern .qty-controls .qty-btn:first-child{
    border:1px solid var(--store-line);
    color:#111827;
    background:#f7f7f5;
}
body.storefront-modern .qty-count{
    min-width:24px;
    color:#111827;
    font-size:13px;
    font-weight:850;
}
body.storefront-modern .item-body{
    border-top:1px solid var(--store-line);
    background:#fbfbf9;
}
/* Variation/deal cards must grow when opened. The previous full-height summary
   caused the options area to be rendered below the clipped card. */
body.storefront-modern .item-card.open{
    height:auto;
    align-self:start;
    overflow:hidden;
}
body.storefront-modern .item-card.open .item-summary{
    min-height:0;
    height:auto;
}
body.storefront-modern .item-card.open .item-summary-title{
    height:auto;
}
body.storefront-modern .item-card.open .item-body{
    display:block !important;
    position:relative;
    z-index:2;
}
body.storefront-modern .variation-item-card .item-summary,
body.storefront-modern .deal-item-card .item-summary{
    cursor:pointer;
}
body.storefront-modern .variant-empty-note{
    padding:12px;
    border:1px dashed #d1d5db;
    border-radius:12px;
    color:#6b7280;
    background:#fff;
    font-size:13px;
    font-weight:750;
    text-align:center;
}
body.storefront-modern .variant-list{
    gap:8px;
    margin:0;
    padding:12px;
}
body.storefront-modern .variant-row,
body.storefront-modern .single-row{
    margin:0;
    padding:10px 11px;
    border:1px solid var(--store-line);
    border-radius:14px;
    background:#fff;
}
body.storefront-modern .variant-row strong,
body.storefront-modern .single-row strong{
    color:#1f2937;
    font-size:13px;
}
body.storefront-modern .variant-row span,
body.storefront-modern .single-row span{
    color:#6b7280;
    font-size:12px;
    font-weight:750;
}
body.storefront-modern .choose-btn{
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    background:var(--store-accent);
}
body.storefront-modern .empty-box{
    border-color:#d7d7d1;
    color:#6b7280;
    background:#fff;
}

body.storefront-modern .cart-fab{
    right:22px;
    bottom:22px;
    min-width:136px;
    height:58px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:999px;
    color:#fff;
    background:var(--store-accent);
    box-shadow:0 18px 42px rgba(17,24,39,.25);
}
body.storefront-modern .cart-fab-count{
    color:#111827;
    background:#fff;
    box-shadow:none;
}
body.storefront-modern .customer-wa-float{
    box-shadow:0 16px 34px rgba(34,197,94,.24);
}
body.storefront-modern .cart-drawer{
    right:-500px;
    max-width:480px;
    border-left:1px solid var(--store-line);
    background:#fff;
    box-shadow:-24px 0 70px rgba(17,24,39,.14);
}
body.storefront-modern .cart-head{
    min-height:74px;
    padding:16px 18px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
}
body.storefront-modern .cart-head h3{
    font-size:22px;
    font-weight:850;
    letter-spacing:-.03em;
}
body.storefront-modern .pretty-x-btn,
body.storefront-modern .close-btn{
    width:40px;
    height:40px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--store-line);
    border-radius:999px;
    color:#111827;
    background:#f7f7f5;
    font-size:22px;
}
body.storefront-modern .cart-body{
    padding:16px;
    background:#fafaf8;
}
body.storefront-modern .cart-item{
    padding:13px;
    border:1px solid var(--store-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 16px rgba(17,24,39,.035);
}
body.storefront-modern .cart-foot{
    padding:16px 18px 18px;
    border-top:1px solid var(--store-line);
    background:#fff;
    box-shadow:0 -10px 26px rgba(17,24,39,.05);
}
body.storefront-modern .summary-row{
    color:#4b5563;
    font-size:14px;
}
body.storefront-modern .summary-row strong{
    color:#111827;
}
body.storefront-modern .cart-action-grid{
    gap:8px;
}
body.storefront-modern .checkout-btn{
    min-height:50px;
    border-radius:14px;
    font-size:14px;
    font-weight:850;
}
body.storefront-modern .checkout-btn.place{
    background:#111827;
}
body.storefront-modern .checkout-btn.whatsapp{
    background:#1fa855;
}
body.storefront-modern .delivery-range-note{
    border-color:#e7e7e2;
    color:#6b7280;
    background:#f7f7f5;
}

body.storefront-modern .modal-backdrop,
body.storefront-modern .customer-auth-backdrop,
body.storefront-modern .active-order-backdrop,
body.storefront-modern .customer-method-backdrop,
body.storefront-modern .customer-details-backdrop,
body.storefront-modern .customer-location-backdrop{
    background:rgba(17,24,39,.54);
    backdrop-filter:blur(8px);
}
body.storefront-modern .modal-card,
body.storefront-modern .auth-card,
body.storefront-modern .active-order-card,
body.storefront-modern .customer-method-card,
body.storefront-modern .customer-details-modal-card,
body.storefront-modern .customer-location-card{
    border:1px solid rgba(255,255,255,.7);
    border-radius:24px;
    box-shadow:0 30px 90px rgba(17,24,39,.24);
}
body.storefront-modern .customer-order-method-card,
body.storefront-modern .customer-details-card{
    border-color:var(--store-line);
    background:#fff;
    box-shadow:0 6px 18px rgba(17,24,39,.04);
}
body.storefront-modern .customer-order-method-card em,
body.storefront-modern .customer-details-card em{
    background:#111827;
}

body.storefront-modern .mobile-category-bar{
    top:84px;
    padding:0 0 14px;
    background:linear-gradient(180deg,rgba(246,246,243,.98),rgba(246,246,243,.90));
}
body.storefront-modern .mobile-category-trigger{
    min-height:56px;
    padding:8px 10px;
    border:1px solid var(--store-line);
    border-radius:16px;
    color:#111827;
    background:#fff;
    box-shadow:0 8px 22px rgba(17,24,39,.055);
}
body.storefront-modern .mobile-category-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    color:#111827;
    background:#f3f4f1;
    box-shadow:none;
    font-size:20px;
}
body.storefront-modern .mobile-category-label{
    color:#9ca3af;
    font-size:10px;
    letter-spacing:.1em;
}
body.storefront-modern .mobile-category-current{
    color:#111827;
    font-size:15px;
    letter-spacing:-.01em;
    text-transform:none;
}
body.storefront-modern .mobile-category-hint{
    display:none;
}
body.storefront-modern .mobile-category-arrow{
    width:36px;
    height:36px;
    border-radius:11px;
    color:#111827;
    background:#f3f4f1;
    box-shadow:none;
    font-size:18px;
}
body.storefront-modern .mobile-category-menu{
    top:calc(100% + 8px);
    padding:8px;
    border-color:var(--store-line);
    border-radius:18px;
    box-shadow:0 22px 60px rgba(17,24,39,.16);
}
body.storefront-modern .mobile-category-option{
    min-height:46px;
    padding:10px 12px;
    border:0!important;
    border-radius:12px;
    color:#374151!important;
    background:#fff!important;
    box-shadow:none;
    font-size:14px;
    letter-spacing:0;
    text-transform:none;
}
body.storefront-modern .mobile-category-option:hover,
body.storefront-modern .mobile-category-option.active{
    transform:none;
    color:#fff!important;
    background:#111827!important;
}


@media(max-width:1380px) and (min-width:1181px){
    body.storefront-modern .item-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1180px){
    body.storefront-modern .item-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
    html{font-size:16px!important}
    body.storefront-modern{zoom:1!important}
    body.storefront-modern .container{width:min(100% - 20px,760px)}
    body.storefront-modern .menu-head{
        min-height:74px;
        margin-bottom:12px;
        padding:10px 12px;
        border-radius:0 0 18px 18px;
    }
    body.storefront-modern .menu-logo,
    body.storefront-modern .menu-fallback{
        width:48px;
        height:48px;
        border-radius:12px;
    }
    body.storefront-modern .menu-title h1{
        max-width:52vw;
        font-size:19px;
    }
    body.storefront-modern .brand-whatsapp-line{margin-top:4px;font-size:11px}
    body.storefront-modern .connection-status{font-size:10px;min-height:28px;padding:0 8px}
    body.storefront-modern .menu-layout{grid-template-columns:1fr;gap:0}
    body.storefront-modern .menu-layout > .menu-card:last-child > .section-title{margin-bottom:8px}
    body.storefront-modern .menu-layout > .menu-card:last-child > .section-title h3{font-size:23px}
    body.storefront-modern .search-wrap{margin-bottom:14px}
    body.storefront-modern .search-input{min-height:48px;border-radius:14px}
    body.storefront-modern .mobile-category-bar{top:74px}
}

/* Refined storefront card rhythm + reliable cart drawer */
body.storefront-modern .cart-drawer.open{
    right:0 !important;
}
body.storefront-modern .mobile-category-trigger.open .mobile-category-arrow{
    transform:none !important;
    color:#fff;
    background:var(--store-accent);
}
@media(max-width:1180px) and (min-width:801px){
    body.storefront-modern .item-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
    body.storefront-modern .container{width:calc(100% - 16px)}
    body.storefront-modern .menu-shell{padding-bottom:100px}
    body.storefront-modern .menu-head{gap:8px}
    body.storefront-modern .menu-title h1{max-width:48vw;font-size:18px}
    body.storefront-modern .connection-status{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    body.storefront-modern .item-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }
    body.storefront-modern .item-card{
        border-radius:16px;
    }
    body.storefront-modern .item-card:hover{
        transform:none;
    }
    body.storefront-modern .item-image,
    body.storefront-modern .item-card:not(:has(.item-image)) .item-summary::before{
        aspect-ratio:4/3;
    }
    body.storefront-modern .item-summary-title > div{
        min-height:132px;
        padding:9px 9px 10px;
    }
    body.storefront-modern .item-name{
        min-height:48px;
        max-height:48px;
        margin-bottom:4px;
        font-size:13px;
        line-height:1.23;
        -webkit-line-clamp:3;
    }
    body.storefront-modern .item-desc{
        display:none;
    }
    body.storefront-modern .quick-price-line{
        min-height:36px;
        align-items:center;
        flex-direction:row;
        justify-content:space-between;
        margin-top:auto;
        padding-top:8px;
    }
    body.storefront-modern .quick-price-pill{font-size:12px;white-space:nowrap}
    body.storefront-modern .qty-controls{
        width:auto;
        align-self:auto;
        justify-content:flex-start;
        gap:3px;
        padding:2px;
    }
    body.storefront-modern .qty-btn{width:27px;height:27px;font-size:15px}
    body.storefront-modern .qty-count{min-width:18px;font-size:12px}
    body.storefront-modern .item-caret{top:8px;right:8px;width:30px;height:30px;font-size:16px}
    body.storefront-modern .item-card.open{
        grid-column:1/-1;
    }
    body.storefront-modern .item-card.open .item-image{
        aspect-ratio:16/8;
    }
    body.storefront-modern .variant-row,
    body.storefront-modern .single-row{
        flex-direction:row;
        align-items:center;
    }
    body.storefront-modern .cart-fab{
        right:12px;
        bottom:12px;
        min-width:126px;
        height:54px;
        padding:0 14px;
    }
    body.storefront-modern .cart-drawer{
        right:-105%;
        max-width:none;
        border-left:0;
    }
    body.storefront-modern .cart-head{min-height:66px;padding:12px 14px}
    body.storefront-modern .cart-head h3{font-size:20px}
    body.storefront-modern .cart-body{padding:12px}
    body.storefront-modern .cart-foot{padding:13px 14px 15px}
    body.storefront-modern .customer-method-backdrop,
    body.storefront-modern .customer-details-backdrop,
    body.storefront-modern .customer-location-backdrop,
    body.storefront-modern .modal-backdrop,
    body.storefront-modern .active-order-backdrop{
        padding:8px;
        align-items:flex-end;
    }
    body.storefront-modern .customer-method-card,
    body.storefront-modern .customer-details-modal-card,
    body.storefront-modern .customer-location-card,
    body.storefront-modern .modal-card,
    body.storefront-modern .active-order-card{
        width:100%;
        max-height:92vh;
        border-radius:22px 22px 14px 14px;
    }
}
@media(max-width:380px){
    body.storefront-modern .menu-title h1{max-width:44vw;font-size:17px}
    body.storefront-modern .item-list{gap:8px}
    body.storefront-modern .item-summary-title > div{padding:10px}
    body.storefront-modern .item-name{font-size:13px}
}


/* vCustomer exact-location centered popup refinement */
.location-refresh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.location-refresh-btn .gps-circle-icon{font-size:23px;line-height:1;font-weight:1000;transform:translateY(-1px)}
body.storefront-modern .customer-location-head > div{display:flex;align-items:center;min-height:42px}
body.storefront-modern .customer-location-head h3{margin:0}
@media(max-width:640px){
    body.storefront-modern .customer-location-backdrop{
        align-items:center !important;
        justify-content:center !important;
        padding:14px !important;
    }
    body.storefront-modern .customer-location-card{
        width:min(100%,520px) !important;
        max-height:calc(100vh - 28px) !important;
        border-radius:22px !important;
        margin:auto !important;
    }
}

/* vModern customer card click + centered checkout modals */
body.storefront-modern .clickable-single-item{cursor:pointer;-webkit-tap-highlight-color:transparent}
body.storefront-modern .clickable-single-item:active{transform:scale(.985)}
body.storefront-modern .clickable-single-item.item-added-flash{box-shadow:0 0 0 3px rgba(37,99,235,.18),0 14px 34px rgba(17,24,39,.12)}
body.storefront-modern .customer-method-head > div,
body.storefront-modern .customer-details-head > div{display:flex;align-items:center;min-height:42px}
body.storefront-modern .customer-method-head h3,
body.storefront-modern .customer-details-head h3{margin:0}
@media(max-width:640px){
    body.storefront-modern .customer-method-backdrop,
    body.storefront-modern .customer-details-backdrop{
        align-items:center !important;
        justify-content:center !important;
        padding:14px !important;
    }
    body.storefront-modern .customer-method-card,
    body.storefront-modern .customer-details-modal-card{
        width:min(100%,520px) !important;
        max-height:calc(100vh - 28px) !important;
        border-radius:22px !important;
        margin:auto !important;
    }
}



/* Direct live-location button + tighter two-line product cards */
body.storefront-modern .customer-live-location-btn{
    width:100%;
    min-height:48px;
    margin:4px 0 3px;
    border:0;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    font-size:15px;
    font-weight:1000;
    cursor:pointer;
    transition:transform .16s ease,filter .16s ease,background .2s ease,box-shadow .2s ease;
}
body.storefront-modern .customer-live-location-btn .gps-circle-icon{
    font-size:22px;
    line-height:1;
    font-weight:1000;
}
body.storefront-modern .customer-live-location-btn.is-not-loaded{
    background:linear-gradient(135deg,#dc2626,#ef4444,#f97316);
    box-shadow:0 12px 26px rgba(220,38,38,.22);
}
body.storefront-modern .customer-live-location-btn.is-loading{
    background:linear-gradient(135deg,#b45309,#f59e0b);
    box-shadow:0 12px 26px rgba(245,158,11,.22);
    cursor:wait;
}
body.storefront-modern .customer-live-location-btn.is-loaded{
    background:linear-gradient(135deg,#15803d,#16a34a,#22c55e);
    box-shadow:0 12px 26px rgba(34,197,94,.20);
}
body.storefront-modern .customer-live-location-btn:active{transform:scale(.985)}
body.storefront-modern .customer-live-location-btn:disabled{opacity:.92}
body.storefront-modern .customer-details-save-btn{margin-top:3px!important}

body.storefront-modern .item-summary-title > div{
    min-height:112px;
    padding:12px 13px 13px;
}
body.storefront-modern .item-name{
    min-height:38px;
    max-height:38px;
    margin:0 0 3px;
    font-size:14.5px;
    line-height:1.3;
    -webkit-line-clamp:2;
}
body.storefront-modern .item-name.long-item-name{font-size:13.25px;line-height:1.38}
body.storefront-modern .item-desc{display:none!important}
body.storefront-modern .quick-price-line{
    min-height:38px;
    margin-top:2px;
    padding-top:3px;
}
@media(max-width:640px){
    body.storefront-modern .item-summary-title > div{
        min-height:94px;
        padding:8px 9px 9px;
    }
    body.storefront-modern .item-name{
        min-height:34px;
        max-height:34px;
        margin-bottom:2px;
        font-size:12.75px;
        line-height:1.34;
        -webkit-line-clamp:2;
    }
    body.storefront-modern .item-name.long-item-name{font-size:11.7px;line-height:1.43}
    body.storefront-modern .quick-price-line{
        min-height:32px;
        margin-top:1px;
        padding-top:2px;
    }
}


/* v16: mobile cart FAB text hidden (icon + count only). Desktop remains unchanged. */
@media (max-width: 640px){
  .cart-fab{min-width:64px!important;width:auto!important;padding:0 12px!important;gap:8px!important;justify-content:center!important}
  .cart-fab > span:nth-child(2):not(.cart-fab-count){display:none!important}
}

/* Compact mobile cart and a single clear card action below the image. */
body.storefront-modern .catalog-card-view{
  position:relative;z-index:2;align-self:center;display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;min-height:27px;margin:-14px auto 3px;padding:5px 13px;border:1px solid #cbd5e1;border-radius:999px;
  color:#111827;background:#fff;box-shadow:0 5px 14px rgba(15,23,42,.10);font-size:10px;font-weight:1000;letter-spacing:.07em;text-transform:uppercase;
}
@media(max-width:640px){
  body.storefront-modern .cart-fab{right:10px!important;bottom:10px!important;width:54px!important;min-width:54px!important;height:48px!important;padding:0 7px!important;gap:5px!important}
  body.storefront-modern .cart-fab-icon{font-size:18px!important}
  body.storefront-modern .cart-fab-count{min-width:21px!important;width:21px!important;height:21px!important;font-size:10px!important}
  body.storefront-modern .cart-fab>span:nth-child(2):not(.cart-fab-count){display:none!important}
  body.storefront-modern .catalog-card-view{min-width:54px;min-height:24px;margin-top:-12px;padding:4px 10px;font-size:9px}
}

/* Compact catalog rows after replacing the old "View prices & options" line. */
body.storefront-modern .item-list{align-items:start}
body.storefront-modern .item-card{height:auto;align-self:start}
body.storefront-modern .variation-item-card .item-summary,
body.storefront-modern .variation-item-card .item-summary-title{min-height:0;height:auto}
body.storefront-modern .variation-item-card .item-summary-title{flex:none}
body.storefront-modern .variation-item-card .item-summary-title > div:last-child{
  min-height:0;flex:0 0 auto;padding-bottom:11px
}
body.storefront-modern .variation-starting-line{min-height:30px;margin-top:0;padding-top:1px}
@media(max-width:640px){
  body.storefront-modern .variation-item-card .item-summary-title > div:last-child{min-height:0;padding-bottom:8px}
  body.storefront-modern .variation-starting-line{min-height:27px;margin-top:0;padding-top:0}
}

/* Keep the mobile category selector at the viewport top after the main header scrolls away. */
@media(max-width:900px){
  body.storefront-modern .mobile-category-bar{top:0!important;z-index:7900!important}
}


/* v20260830-cart2: cleaner floating cart button with detached quantity badge. */
body.storefront-modern .cart-fab{
  min-width:142px!important;height:60px!important;padding:0 12px!important;border-radius:20px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  position:fixed!important;overflow:visible!important;box-shadow:0 18px 42px rgba(15,23,42,.24)!important;
}
body.storefront-modern .cart-fab-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);filter:none!important;font-size:0!important;
}
body.storefront-modern .cart-fab-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.storefront-modern .cart-fab-label{display:inline!important;font-size:14px;font-weight:950;letter-spacing:.01em}
body.storefront-modern .cart-fab-count{
  min-width:27px!important;width:auto!important;height:27px!important;padding:0 7px!important;border-radius:999px!important;
  display:grid!important;place-items:center!important;font-size:12px!important;font-weight:1000!important;line-height:1!important;
  box-shadow:none!important;
}
@media(max-width:640px){
  body.storefront-modern .cart-fab{
    right:14px!important;bottom:14px!important;width:60px!important;min-width:60px!important;height:58px!important;padding:0!important;
    border-radius:18px!important;gap:0!important;
  }
  body.storefront-modern .cart-fab-icon{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:14px!important}
  body.storefront-modern .cart-fab-icon svg{width:23px!important;height:23px!important}
  body.storefront-modern .cart-fab-label{display:none!important}
  body.storefront-modern .cart-fab-count{
    position:absolute!important;right:-6px!important;top:-7px!important;min-width:23px!important;width:auto!important;height:23px!important;
    padding:0 6px!important;border:2px solid #fff!important;font-size:10px!important;box-shadow:0 6px 14px rgba(15,23,42,.22)!important;
  }
}