:root{
    --red-950:#4f0d06; --red-900:#6d150c; --red-800:#8a1d11; --red-700:#a6231c;
    --orange-500:#f7941d; --orange-600:#ee7f0a;
    --gold-300:#f6d992; --gold-400:#eec066; --gold-500:#d9a441;
    --cream:#fff6ea; --cream-dim:#f3d7c2; --ink:#4a1505;
    --font-display:'Baloo 2',cursive; --font-body:'Plus Jakarta Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:var(--font-body); color:#2a2a2a;
    background:#faf4ea; min-height:100vh; display:flex; flex-direction:column;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1100px,92%);margin-inline:auto}

/* nav */
.nav{background:linear-gradient(120deg,var(--red-800),var(--red-700));position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;letter-spacing:.5px;display:block;line-height:1}
.brand-sub{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-300);font-weight:600}
.nav-links{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:600;color:var(--cream-dim)}
.nav-links a:hover{color:#fff}
.btn-solid{background:linear-gradient(135deg,var(--orange-500),var(--orange-600));color:var(--red-950)!important;padding:9px 18px;border-radius:10px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn-outline{border:1.5px solid rgba(246,217,146,.5);padding:8px 16px;border-radius:10px;color:var(--gold-300)!important}

/* flash */
.flash{padding:12px 0;text-align:center;font-size:14px;font-weight:600}
.flash span{display:inline-block}
.flash-success{background:#e5f6ec;color:#0f6e42}
.flash-error{background:#fce8e6;color:#a02417}

/* main */
.main{flex:1;padding:40px 0 60px}

/* auth card */
.auth-wrap{max-width:420px;margin:20px auto}
.auth-card{background:#fff;border-radius:22px;padding:34px 30px;box-shadow:0 20px 50px rgba(79,13,6,.12);border:1px solid #f0e6d6}
.auth-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--orange-600);font-weight:700}
.auth-title{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--red-800);margin:6px 0 4px}
.auth-sub{color:#7a6b5c;font-size:14px;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:#6a5a4a;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.field input{width:100%;padding:12px 14px;border:1.5px solid #e6dccb;border-radius:12px;font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--orange-500);box-shadow:0 0 0 3px rgba(247,148,29,.15)}
.field .hint{font-size:11px;color:#a89a88;margin-top:4px}
.btn-primary{width:100%;background:linear-gradient(135deg,var(--red-700),var(--red-800));color:#fff;border:0;padding:14px;border-radius:13px;font-family:var(--font-display);font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 10px 26px rgba(166,35,28,.3);transition:transform .15s}
.btn-primary:hover{transform:translateY(-2px)}
.auth-alt{text-align:center;margin-top:18px;font-size:14px;color:#7a6b5c}
.auth-alt a{color:var(--orange-600);font-weight:700}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:#a89a88;font-size:13px}

/* account */
.acct-head{background:linear-gradient(120deg,var(--red-800),var(--red-700));border-radius:22px;padding:28px 30px;color:#fff;margin-bottom:24px}
.acct-hi{font-family:var(--font-display);font-weight:800;font-size:26px}
.acct-hi .urdu{font-family:'Gulzar',serif}
.acct-meta{color:var(--cream-dim);font-size:14px;margin-top:4px}
.card{background:#fff;border-radius:18px;padding:24px;border:1px solid #f0e6d6;box-shadow:0 8px 24px rgba(79,13,6,.06);margin-bottom:18px}
.card h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--red-800);margin-bottom:14px}
.empty{text-align:center;color:#a89a88;padding:30px 0;font-size:14px}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.stat{flex:1;min-width:140px;background:#fff;border:1px solid #f0e6d6;border-radius:16px;padding:18px}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--red-800)}
.stat .l{font-size:12px;color:#8a7a68;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:2px}

/* footer */
.foot{background:var(--red-950);color:var(--cream-dim);padding:26px 0;text-align:center;font-size:13px;margin-top:auto}
.foot-sub{color:var(--gold-400);font-size:12px;margin-top:4px}

@media(max-width:600px){
    .nav-links{gap:12px;font-size:13px}
    .btn-solid,.btn-outline{padding:7px 12px}
}

/* ══ MENU + CART (Part 2) ══ */
[x-cloak]{display:none!important}
.menu-hero{text-align:center;padding:10px 0 24px}
.menu-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,4vw,40px);color:var(--red-800);line-height:1.1}
.menu-hero h1 span{color:var(--orange-500)}
.menu-hero p{color:#7a6b5c;font-size:15px;margin-top:8px}

.cat-bar{display:flex;gap:10px;overflow-x:auto;padding:6px 0 16px;position:sticky;top:62px;background:#faf4ea;z-index:20;-webkit-overflow-scrolling:touch}
.chip{white-space:nowrap;padding:9px 18px;border-radius:999px;border:1.5px solid #e6dccb;background:#fff;color:#6a5a4a;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;font-family:inherit}
.chip:hover{border-color:var(--orange-400)}
.chip-on{background:var(--red-700);border-color:var(--red-700);color:#fff}

.menu-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.sec-title{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--red-800);margin:16px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:8px}
.item-card{background:#fff;border:1px solid #f0e6d6;border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 4px 14px rgba(79,13,6,.05);transition:.15s}
.item-card:hover{box-shadow:0 8px 22px rgba(79,13,6,.1);transform:translateY(-2px)}
.item-body h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:#2a1a0e;line-height:1.2}
.item-sub{font-size:12px;color:#a89a88;margin-top:5px;line-height:1.4}
.item-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:8px}
.price{font-weight:800;color:var(--red-700);font-size:15px;white-space:nowrap}
.add-btn{background:linear-gradient(135deg,var(--orange-500),var(--orange-600));color:var(--red-950);border:0;padding:8px 16px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:.15s}
.add-btn:hover{transform:scale(1.04)}

/* cart sidebar */
.cart-col{position:sticky;top:120px}
.cart-box{background:#fff;border:1px solid #f0e6d6;border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(79,13,6,.08)}
.cart-box h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--red-800);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.cart-count{background:var(--orange-500);color:#fff;font-size:12px;min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cart-empty{color:#a89a88;font-size:14px;text-align:center;padding:24px 0}
.cart-lines{display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow-y:auto}
.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding-bottom:12px;border-bottom:1px solid #f4ece0}
.cl-name{font-size:13px;font-weight:600;color:#2a1a0e;line-height:1.3}
.cl-price{display:block;font-size:11px;color:#a89a88;font-weight:500}
.cl-qty{display:flex;align-items:center;gap:8px}
.cl-qty button{width:24px;height:24px;border-radius:7px;border:1px solid #e6dccb;background:#faf4ea;cursor:pointer;font-weight:800;color:var(--red-700);font-size:14px;line-height:1}
.cl-qty span{min-width:16px;text-align:center;font-weight:700;font-size:14px}
.cl-sub{font-weight:800;font-size:13px;color:var(--red-700);white-space:nowrap}
.cart-total{margin-top:16px;padding-top:14px;border-top:2px solid #f0e6d6}
.cart-total .row{display:flex;justify-content:space-between;font-weight:700;font-size:16px;margin-bottom:14px}
.checkout-btn{display:block;text-align:center;background:linear-gradient(135deg,var(--red-700),var(--red-800));color:#fff;padding:14px;border-radius:13px;font-family:var(--font-display);font-weight:700;font-size:16px;box-shadow:0 8px 20px rgba(166,35,28,.28)}

/* mobile cart bar */
.mob-cart{display:none}
.mob-cart-btn{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--red-700),var(--red-800));color:#fff;padding:15px 22px;border-radius:14px;font-weight:800;font-size:15px;box-shadow:0 10px 26px rgba(0,0,0,.25)}

/* variant modal */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-bg{position:absolute;inset:0;background:rgba(79,13,6,.55)}
.modal-card{position:relative;background:#fff;border-radius:22px;padding:26px;width:100%;max-width:380px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-card h3{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--red-800)}
.modal-sub{color:#7a6b5c;font-size:14px;margin:4px 0 16px}
.variant-row{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1.5px solid #e6dccb;border-radius:13px;background:#fff;margin-bottom:10px;cursor:pointer;font-weight:700;font-size:15px;color:#2a1a0e;font-family:inherit;transition:.15s}
.variant-row:hover{border-color:var(--orange-500);background:#fff8ef}
.variant-row span:last-child{color:var(--red-700);font-weight:800}
.modal-close{width:100%;padding:12px;border:0;background:none;color:#a89a88;font-weight:600;cursor:pointer;margin-top:6px}

@media(max-width:820px){
    .menu-layout{grid-template-columns:1fr}
    .cart-col{display:none}
    .mob-cart{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:40}
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ══ CHECKOUT + ORDERS (Part 2b) ══ */
.co-wrap{max-width:900px;margin:0 auto}
.co-title{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--red-800);margin-bottom:20px}
.co-empty{text-align:center;color:#a89a88;padding:40px 0}
.co-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.co-card{background:#fff;border:1px solid #f0e6d6;border-radius:16px;padding:20px;margin-bottom:16px}
.co-card h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--red-800);margin-bottom:14px}
.co-card textarea{width:100%;padding:12px 14px;border:1.5px solid #e6dccb;border-radius:12px;font-size:15px;font-family:inherit;resize:vertical}
.co-card textarea:focus{outline:none;border-color:var(--orange-500)}
.seg{display:flex;gap:10px}
.seg button{flex:1;padding:14px;border:1.5px solid #e6dccb;border-radius:12px;background:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;color:#6a5a4a}
.seg .seg-on{background:var(--red-700);border-color:var(--red-700);color:#fff}
.pay-opt{display:flex;align-items:center;gap:10px;padding:14px;border:1.5px solid #e6dccb;border-radius:12px;margin-bottom:10px;cursor:pointer;font-weight:600;font-size:15px}
.pay-opt.pay-on{border-color:var(--orange-500);background:#fff8ef}
.bank-box{background:#faf4ea;border-radius:12px;padding:14px;margin-top:6px}
.bank-title{font-size:13px;font-weight:600;color:#6a5a4a;margin-bottom:8px}
.bank-row{font-size:14px;padding:5px 0;border-bottom:1px solid #efe4d4}
.bank-row span{color:#a89a88;font-size:12px}
.co-summary{position:sticky;top:80px}
.sum-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:30vh;overflow-y:auto}
.sum-line{display:flex;justify-content:space-between;font-size:13px;color:#4a3a2a}
.sum-row{display:flex;justify-content:space-between;font-size:14px;font-weight:600;padding:4px 0}
.sum-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--red-800);border-top:2px solid #f0e6d6;padding-top:10px;margin-top:8px}
.free-hint{font-size:12px;color:var(--orange-600);font-weight:600;margin:8px 0}
.checkout-btn:disabled{opacity:.6}
.back-menu{display:block;text-align:center;color:#a89a88;font-weight:600;font-size:14px;margin-top:12px}

/* placed / order detail */
.placed-wrap{max-width:460px;margin:0 auto;text-align:center}
.placed-check{width:70px;height:70px;background:#e5f6ec;color:#0f6e42;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;margin:10px auto 18px}
.placed-wrap h1{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--red-800)}
.placed-no{color:#7a6b5c;font-weight:700;font-size:16px;margin:4px 0 14px}
.placed-status{display:inline-block;padding:8px 18px;border-radius:999px;font-weight:700;font-size:14px;margin-bottom:20px}
.placed-card{text-align:left}
.pl-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:#4a3a2a}
.pl-addr{font-size:14px;color:#4a3a2a;background:#faf4ea;padding:10px 12px;border-radius:10px;margin-bottom:4px}
.pl-item{display:flex;justify-content:space-between;font-size:14px;font-weight:600;padding:5px 0}
.pl-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--red-800);border-top:2px solid #f0e6d6;padding-top:10px;margin-top:8px}
.pl-pay{text-align:center;font-size:13px;font-weight:700;color:#6a5a4a;margin-top:10px}
.h-line{height:1px;background:#f0e6d6;margin:10px 0}
.placed-note{color:#7a6b5c;font-size:14px;margin:18px 0;line-height:1.6}
.placed-actions{display:flex;flex-direction:column;gap:10px;align-items:center}

.order-detail{max-width:500px;margin:0 auto}
.od-head{display:flex;justify-content:space-between;align-items:center;margin:12px 0 4px}
.od-head h1{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--red-800)}
.od-date{color:#7a6b5c;font-size:13px;margin-bottom:16px}

/* order list in account */
.order-list{display:flex;flex-direction:column;gap:10px}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid #f0e6d6;border-radius:13px;transition:.15s}
.order-row:hover{border-color:var(--orange-400);background:#fff8ef}
.or-no{font-weight:800;color:var(--red-800);font-size:15px}
.or-date{font-size:12px;color:#a89a88;margin-top:2px}
.or-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.or-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.or-total{font-weight:800;font-size:14px;color:#2a1a0e}

@media(max-width:820px){
    .co-grid{grid-template-columns:1fr}
    .co-summary{position:static}
}

/* ══ CART: remove button + mobile drawer ══ */
.cart-line{grid-template-columns:1fr auto auto auto}
.cl-remove{background:none;border:0;color:#c9b8a4;cursor:pointer;padding:4px 2px;font-size:13px;transition:color .15s}
.cl-remove:hover{color:#a02417}

/* mobile cart bar button */
.mob-cart-btn{width:100%;border:0;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--red-700),var(--red-800));color:#fff;padding:15px 22px;border-radius:14px;font-weight:800;font-size:15px;box-shadow:0 10px 26px rgba(0,0,0,.25)}

/* slide-up cart drawer (mobile) */
.cart-drawer{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end}
.drawer-bg{position:absolute;inset:0;background:rgba(79,13,6,.55)}
.drawer-panel{position:relative;width:100%;max-height:82vh;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:drawerUp .25s ease}
@keyframes drawerUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid #f0e6d6}
.drawer-head h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--red-800);display:flex;align-items:center;gap:8px;margin:0}
.drawer-close{background:none;border:0;font-size:30px;line-height:1;color:#a89a88;cursor:pointer;padding:0 4px}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.drawer-foot{padding:16px 20px 22px;border-top:2px solid #f0e6d6;background:#fffdf9}
.drawer-foot .row{display:flex;justify-content:space-between;font-weight:800;font-size:17px;margin-bottom:12px;color:var(--red-800)}
.drawer-continue{width:100%;background:none;border:0;color:#a89a88;font-weight:600;font-size:14px;padding:12px 0 0;cursor:pointer;font-family:inherit}

@media(max-width:820px){
    .drawer-panel{max-height:80vh}
}
@media(min-width:821px){
    .cart-drawer{display:none!important}
}

/* editable checkout summary lines */
.sum-line-edit{padding:10px 0;border-bottom:1px solid #f4ece0}
.sle-name{font-size:13px;font-weight:600;color:#2a1a0e;line-height:1.35;margin-bottom:6px}
.sle-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sle-sub{font-weight:800;font-size:13px;color:var(--red-700);white-space:nowrap;margin-left:auto}
.edit-cart-link{display:block;text-align:center;color:var(--orange-600);font-weight:700;font-size:13px;padding:10px 0 4px}

/* ══════════════════════════════════════════
   MOBILE REDESIGN — bottom nav + fixed cart drawer
   ══════════════════════════════════════════ */

/* ── Bottom navigation bar (mobile only) ── */
.bottom-nav{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:#fff;
    border-top:1px solid #f0e6d6;
    box-shadow:0 -6px 24px rgba(79,13,6,.10);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around; align-items:stretch;
}
.bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:7px 4px; border:0; background:none; cursor:pointer;
    font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.02em;
    color:#a89a88; border-radius:14px; transition:color .18s, background .18s;
    -webkit-tap-highlight-color:transparent;
}
.bn-item i{ font-size:18px; line-height:1; }
.bn-item:active{ background:#faf4ea; }
.bn-on{ color:var(--red-700); background:#fff2e8; }

/* cart icon + count bubble */
.bn-cart-icon{ position:relative; display:inline-flex; line-height:1; }
.bn-badge{
    position:absolute; top:-7px; right:-11px;
    min-width:18px; height:18px; padding:0 5px;
    background:var(--orange-500); color:#fff;
    font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
    border-radius:9px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.bn-badge[hidden]{ display:none; }

/* ── Cart drawer: always a real overlay, never inline ── */
.cart-drawer{
    position:fixed; inset:0; z-index:90;
    display:flex; align-items:flex-end;
}
.cart-drawer[x-cloak]{ display:none !important; }
.drawer-bg{ position:absolute; inset:0; background:rgba(79,13,6,.55); }
.drawer-panel{
    position:relative; width:100%; max-height:84vh;
    background:#fff; border-radius:22px 22px 0 0;
    display:flex; flex-direction:column;
    box-shadow:0 -10px 40px rgba(0,0,0,.3);
    animation:drawerUp .25s ease;
    padding-bottom:env(safe-area-inset-bottom);
}
.drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px 12px; border-bottom:1px solid #f0e6d6;
}
.drawer-head h3{
    font-family:var(--font-display); font-weight:700; font-size:19px;
    color:var(--red-800); display:flex; align-items:center; gap:8px; margin:0;
}
.drawer-close{
    background:#faf4ea; border:0; width:34px; height:34px; border-radius:50%;
    font-size:22px; line-height:1; color:#8a7a68; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.drawer-body{ flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:6px; }
.drawer-foot{ padding:14px 20px 18px; border-top:2px solid #f0e6d6; background:#fffdf9; }
.drawer-foot .row{
    display:flex; justify-content:space-between;
    font-weight:800; font-size:17px; margin-bottom:12px; color:var(--red-800);
}
.drawer-continue{
    width:100%; background:none; border:0; color:#a89a88;
    font-weight:600; font-size:14px; padding:12px 0 0; cursor:pointer; font-family:inherit;
}

/* cart line inside the drawer — clean 2-row layout, no stray boxes */
.drawer-body .cart-line{
    display:grid; grid-template-columns:1fr auto; gap:6px 10px;
    align-items:center; padding:12px 0; border-bottom:1px solid #f4ece0;
}
.drawer-body .cl-name{ grid-column:1; font-size:14px; }
.drawer-body .cl-sub{ grid-column:2; text-align:right; font-size:14px; }
.drawer-body .cl-qty{ grid-column:1; justify-self:start; }
.drawer-body .cl-remove{ grid-column:2; justify-self:end; padding:6px; font-size:14px; }
.drawer-body .cl-qty button{ width:30px; height:30px; font-size:16px; }

/* ══ Responsive switch ══ */
@media (max-width:820px){
    /* the sidebar cart must never render inline on phones */
    .cart-col{ display:none !important; }
    .mob-cart{ display:none !important; }

    .bottom-nav{ display:flex; }

    /* keep content clear of the fixed bar */
    body{ padding-bottom:74px; }
    .foot{ margin-bottom:0; }

    /* category chips sit under the sticky top nav */
    .cat-bar{ top:58px; }

    .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

@media (min-width:821px){
    .bottom-nav{ display:none !important; }
    .cart-drawer{ display:none !important; }
}

/* On phones the bottom bar handles navigation, so keep the top bar clean:
   just the brand + a single sign-in/logout action. */
@media (max-width:820px){
    .nav-inner{ padding:11px 0; }
    .nav-links a[href="index.php"],
    .nav-links a[href="index.php?page=account"]{ display:none; }
    .nav-links{ gap:10px; }
    .brand-name{ font-size:19px; }
    .brand-sub{ font-size:8px; }
}