:root{
  --bg:#E7E9EF; --surface:#FFFFFF; --surface-2:#EEF0F5; --border:#D8DCE6;
  --text:#1F2733; --muted:#6E7888; --accent:#6D5CF5; --accent-2:#0E9F6E;
  --ok-bg:rgba(14,159,110,.12); --ok-fg:#0B7A54; --danger:#E5484D;
  --r:10px; --r-lg:14px; --wrap:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.page{padding-top:24px; padding-bottom:64px; min-height:60vh}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
h1{font-size:25px; font-weight:600; margin:0 0 6px}
h2.section-title{font-size:18px; font-weight:600; margin:30px 0 14px}
h3{font-size:15px; font-weight:600; margin:0 0 8px}
.ico{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---- top bar ---- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.topbar-inner{display:flex; align-items:center; gap:14px; height:62px}
.brand{font-weight:600; font-size:18px; letter-spacing:-.01em}
.brand-accent{color:var(--accent)}
.mega-wrap{position:relative}
.mega-btn{display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  color:var(--text); border:1px solid var(--border); border-radius:var(--r);
  padding:8px 12px; font:inherit; font-size:14px; cursor:pointer}
.mega-btn:hover{background:var(--surface-2)}
.chev{color:var(--muted); font-size:11px}
.mega-panel{position:absolute; top:calc(100% + 8px); left:0; width:250px; max-width:90vw;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.14s ease; box-shadow:0 18px 50px rgba(20,30,50,.16)}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel{opacity:1; visibility:visible; transform:none}
.mega-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px 18px}
.mega-col{display:flex; flex-direction:column; padding:6px 0}
.mega-head{font-weight:500; padding:5px 8px; border-radius:8px}
.mega-head:hover{background:var(--surface-2); color:var(--accent)}
.mega-sub{font-size:13px; color:var(--muted); padding:3px 8px; border-radius:6px}
.mega-sub:hover{color:var(--text); background:var(--surface-2)}
.mega-hint{font-size:12px; color:var(--muted); padding:2px 8px}
.search{flex:1; display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:0 12px; height:40px; color:var(--muted)}
.search:focus-within{border-color:var(--accent)}
.search input{flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:14px}
.topbar-actions{display:flex; align-items:center; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-size:14px}
.chip b{color:var(--accent-2)}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); color:var(--muted)}
.icon-btn:hover{color:var(--text); background:var(--surface-2)}

/* ---- secondary tab menu ---- */
.subnav{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:62px; z-index:30}
.subnav-inner{display:flex; align-items:center; gap:4px; height:50px}
.tab{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px;
  color:var(--muted); font-size:14px; white-space:nowrap}
.tab i{font-size:17px}
.tab:hover{background:var(--surface-2); color:var(--text)}
.tab.on{background:var(--accent); color:#fff}
.tab-label{display:inline}
.tab-short{display:none}

/* ---- coming-soon stub ---- */
.soon{max-width:520px; margin:30px auto; text-align:center; padding:40px 30px}
.soon-badge{width:60px; height:60px; border-radius:50%; margin:0 auto 14px; display:flex;
  align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent); font-size:28px}
.soon-actions{display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap}

/* ---- faq ---- */
.faq{display:grid; gap:12px; max-width:760px}
.faq-item h3{margin:0 0 6px}
.faq-item p{margin:0}

/* ---- hero ---- */
.hero{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 30px}
.hero-text h1{font-size:27px; max-width:34ch}
.hero-text p{margin:0; max-width:48ch}
.hero-badges{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.hero-badges li{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; white-space:nowrap}
.hero-badges i{color:var(--accent)}

/* ---- category tiles ---- */
.ctile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px}
.ctile{display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; transition:.12s}
.ctile:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,30,50,.08)}
.ctile-vis{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px}
.ctile-name{font-weight:500}

/* ---- product cards (image-forward) ---- */
.pcard-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:16px}
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; transition:.13s}
.pcard:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 14px 30px rgba(20,30,50,.12)}
.pcard.sold{opacity:.62}
.pcard-vis{position:relative; height:120px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px}
.pcard-deliver{position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.22); color:#fff; font-size:11.5px; padding:3px 9px; border-radius:999px; backdrop-filter:blur(2px)}
.pcard-body{display:flex; flex-direction:column; gap:9px; padding:13px 14px}
.pcard-name{font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.pcard-foot{display:flex; align-items:center; justify-content:space-between; gap:8px}
.price{font-size:17px; font-weight:600}
.price .per{font-size:12px; font-weight:400}

/* ---- pills ---- */
.pill{font-size:12px; padding:3px 9px; border-radius:999px; white-space:nowrap}
.pill.ok{color:var(--ok-fg); background:var(--ok-bg)}
.pill.off{color:var(--muted); background:var(--surface-2)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; background:var(--accent);
  color:#fff; border:none; border-radius:9px; padding:8px 16px; font-size:14px; font-weight:500; cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.block{width:100%}
.btn.ghost{background:var(--surface-2); color:var(--muted)}
.btn.big{width:100%; padding:12px; font-size:15px; margin-top:4px}

/* ---- listing head / sort ---- */
.listing-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.listing-head-left{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.catpick-btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  border:none; border-radius:9px; padding:9px 15px; font:inherit; font-size:14px; font-weight:500; cursor:pointer}
.catpick-btn:hover{filter:brightness(1.06)}
.catpick-btn .chev{color:rgba(255,255,255,.85); font-size:11px}
.sortbar{display:flex; align-items:center; gap:8px; font-size:14px}
.sort{padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted)}
.sort:hover{color:var(--text)}
.sort.active{color:#fff; background:var(--accent); border-color:var(--accent)}
.empty{padding:34px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg)}

/* ---- breadcrumbs ---- */
.crumbs{font-size:13px; display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}

/* ---- product page ---- */
.product{display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start}
.pbanner{position:relative; height:130px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:62px; margin-bottom:16px}
.pbanner-cat{position:absolute; bottom:12px; left:14px; font-size:13px; background:rgba(255,255,255,.22); padding:3px 10px; border-radius:999px; backdrop-filter:blur(2px)}
.meta-row{display:flex; align-items:center; gap:10px; margin:6px 0 18px; flex-wrap:wrap}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px}
.prose p{margin:0; color:var(--muted); white-space:pre-wrap}
.buybox{position:sticky; top:84px}
.price-big{font-size:30px; font-weight:600}
.price-big .per{font-size:14px; font-weight:400}
.qty{display:flex; align-items:center; gap:8px; margin:16px 0}
.qty input{flex:1; text-align:center; height:42px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:16px}
.step{width:42px; height:42px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:20px; cursor:pointer}
.step:hover{border-color:var(--accent)}
.total-row{display:flex; align-items:center; justify-content:space-between; margin:6px 0 12px}
.total-row b{font-size:20px}
.tiny{font-size:12px; margin:10px 0 0}

/* ---- footer ---- */
.footer{background:#161B26; color:#C7CEDB; margin-top:52px}
.footer-top{display:flex; justify-content:space-between; gap:40px; padding:36px 20px 26px; flex-wrap:wrap}
.foot-brand{max-width:430px}
.foot-logo{font-size:19px; font-weight:600; color:#fff}
.foot-logo span{color:var(--accent)}
.foot-tag{margin:11px 0 16px; font-size:13.5px; line-height:1.65; color:#929DB2}
.foot-trust{display:flex; gap:18px; flex-wrap:wrap}
.foot-trust span{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#C7CEDB}
.foot-trust i{color:var(--accent-2); font-size:16px}
.foot-links{display:flex; gap:50px}
.foot-col{display:flex; flex-direction:column; gap:10px}
.foot-h{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#69748A; margin-bottom:2px}
.foot-col a{font-size:13.5px; color:#A9B2C2}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; border-top:1px solid rgba(255,255,255,.07); font-size:12.5px; color:#7C8597}
.foot-bottom a{color:var(--accent)}
.foot-bottom a:hover{filter:brightness(1.15)}

/* ---- shop layout + filters ---- */
.shop-layout{display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start}
.filters{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 16px 18px; position:sticky; top:80px}
.fgroup{margin-bottom:14px}
.flabel{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px}
.frow{display:flex; align-items:center; gap:8px}
.filters select, .filters input[type=number], .filters input[type=text]{
  width:100%; height:38px; background:var(--bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font:inherit; font-size:14px; padding:0 10px}
.filters select:focus, .filters input:focus{outline:none; border-color:var(--accent)}
.fcheck{display:flex; align-items:center; gap:8px; font-size:14px; margin:4px 0 14px; cursor:pointer}
.fcheck input{width:16px; height:16px; accent-color:var(--accent)}
.fcatlist{display:flex; flex-direction:column; gap:2px}
.fcat{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:7px; cursor:pointer; font-size:13.5px}
.fcat:hover{background:var(--surface-2)}
.fcat input{width:15px; height:15px; accent-color:var(--accent); flex:none}
.fcat-dot{width:22px; height:22px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px}
.fcat-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- 'All products' hover dropdown ---- */
.tab-wrap{position:relative}
.tab-panel{position:absolute; top:calc(100% + 4px); left:0; width:250px; max-width:88vw;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.14s ease; z-index:50;
  box-shadow:0 18px 50px rgba(20,30,50,.16)}
.tab-wrap.open .tab-panel{opacity:1; visibility:visible; transform:none}
.chev{transition:transform .15s ease}
.tab-wrap.open .chev{transform:rotate(180deg)}
.tab-panel-head{font-size:12px; padding:4px 8px 6px}
.np-list{max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:2px}
.np-row{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px}
.np-row:hover{background:var(--surface-2)}
.np-dot{width:26px; height:26px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px}
.np-name{flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.np-price{font-weight:500; font-size:13.5px}

/* ---- two-level category menu (categories -> products on hover) ---- */
.cmenu{display:flex; flex-direction:column; gap:1px}
.cmenu-row{position:relative}
.cmenu-cat{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px}
.cmenu-cat:hover{background:var(--surface-2)}
.cmenu-dot{width:26px; height:26px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px}
.cmenu-name{flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmenu-badge{font-size:11.5px}
.cmenu-chev{font-size:16px; color:var(--muted)}
.cmenu-fly{position:absolute; top:-6px; left:100%; width:300px; max-width:62vw;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:6px;
  opacity:0; visibility:hidden; transform:translateX(-6px); transition:.13s ease; z-index:60;
  box-shadow:0 18px 50px rgba(20,30,50,.18); max-height:380px; overflow-y:auto}
.cmenu-row:hover .cmenu-fly{opacity:1; visibility:visible; transform:none}
.cmenu-fly-head{font-size:12px; padding:5px 8px 7px}

/* ---- auth + banners ---- */
.auth{max-width:420px; margin:24px auto; padding:28px}
.auth h1{margin-bottom:16px}
.inp{width:100%; height:42px; background:var(--bg); border:1px solid var(--border); border-radius:9px;
  color:var(--text); font:inherit; font-size:15px; padding:0 12px; margin-bottom:14px}
.inp:focus{outline:none; border-color:var(--accent)}
.auth-alt{text-align:center; margin-top:16px; font-size:14px}
.auth-alt a, .foot-link{color:var(--accent)}
.banner{padding:10px 12px; border-radius:9px; font-size:14px; margin-bottom:14px}
.banner.danger{background:rgba(229,72,77,.1); color:var(--danger)}
.bal-line{font-size:13.5px; margin:8px 0 10px}
.guest-or{display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--muted); font-size:13px}
.guest-or::before,.guest-or::after{content:""; flex:1; height:1px; background:var(--border)}

/* ---- account dashboard ---- */
.acct-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.stat{display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px}
.stat span{font-size:13px}
.stat b{font-size:22px}
.stat-cta b{font-size:16px; color:var(--accent)}
.stat-cta:hover{border-color:var(--accent)}
.tbl{max-width:820px; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.pay-total-line{font-size:14px; margin:0 0 10px}
.paylist{max-width:520px; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.pay-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); font-size:14px}
.pay-row:last-child{border-bottom:none}
.pay-row > :first-child{margin-right:auto}
.pay-amt{font-weight:600; min-width:56px; text-align:right}
.trow{display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--border)}
.trow:last-child{border-bottom:none}
.tmain{font-weight:500}
.tcell{font-size:14px}
.tlink{color:var(--accent); display:inline-flex; align-items:center; gap:5px}
.tlink:hover{filter:brightness(1.1)}

/* ---- confirm modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(15,20,30,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px}
.modal{width:380px; max-width:100%; padding:22px}
.modal h3{margin:0 0 14px}
.modal-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px}
.modal-row:last-of-type{border-bottom:none}
.modal-actions{display:flex; gap:10px; margin-top:18px}
.modal-actions .btn{flex:1}

/* ---- delivered items list ---- */
.delivered{text-align:left; margin:8px 0 16px; display:flex; flex-direction:column; gap:8px}
.delivered-head{font-size:13px}
.delivered-item{background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:9px 12px}
.delivered-item code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; white-space:pre-wrap; word-break:break-word; color:var(--text)}

/* ---- cart ---- */
.cart-btn{position:relative}
.cart-badge{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center}
.cart{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); margin:6px 0 16px}
.cart-row{display:grid; grid-template-columns:42px 1fr 80px 80px 36px; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border)}
.cart-row:last-child{border-bottom:none}
.cart-vis{width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px}
.cart-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.cart-name{font-weight:500}
.cart-name:hover{color:var(--accent)}
.cart-qty{margin:0}
.cart-qty input{width:64px; height:36px; text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit}
.cart-sub{font-weight:600; text-align:right}
.cart-rm{width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:16px}
.cart-rm:hover{color:var(--danger); border-color:var(--danger)}
.cart-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.cart-foot form{margin:0}
.cart-total{display:flex; align-items:baseline; gap:10px}
.cart-total b{font-size:22px}
.cart-done-list{display:flex; flex-direction:column; gap:8px; margin:6px 0 14px; text-align:left}
.cart-done-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:10px}
.cart-done-row:hover{border-color:var(--accent)}

/* ---- order success ---- */
.ordersuccess{max-width:600px; margin:30px auto; text-align:center; padding:34px 28px}
.ok-badge{width:62px; height:62px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--ok-bg); color:var(--ok-fg); font-size:30px}
.ordersuccess .btn.big{margin-top:8px}
.ordersuccess-actions{display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap}

/* ---- top up / payment ---- */
.topup-presets{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.preset{flex:1; min-width:70px; height:42px; background:var(--bg); border:1px solid var(--border); border-radius:9px; color:var(--text); font:inherit; font-size:15px; font-weight:500; cursor:pointer}
.preset:hover{border-color:var(--accent); color:var(--accent)}
.pay-status{margin:18px 0 6px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:15px; color:var(--muted)}
.spinner{width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* top-up: compact entry box + centered payment history below it */
.topup-wrap{max-width:380px; margin:22px auto 0}
.topup-wrap .auth.card{max-width:none; width:100%; margin:0}
.topup-history{margin-top:26px; text-align:center}
.topup-history .section-title{text-align:center; margin-top:0}
.topup-history .pay-total-line{text-align:center}
.topup-history .paylist{margin:14px auto 0; max-width:100%}

/* ---- responsive ---- */
@media (max-width:760px){
  .wrap{padding:0 10px}

  /* top bar: scrolls away; brand centered, search full width, actions centered */
  .topbar{position:static}
  .topbar-inner{flex-wrap:wrap; height:auto; padding:10px 0; gap:9px; justify-content:center}
  .brand{flex-basis:100%; text-align:center; font-size:20px}
  .search{order:4; flex-basis:100%}
  .topbar-actions{order:5; width:100%; justify-content:center; gap:8px}

  /* secondary nav: sticky at very top; all 5 tabs fit (icon over short label) */
  .subnav{position:sticky; top:0; z-index:30}
  .subnav-inner{height:auto; gap:0; padding:0}
  .tab{flex:1 1 0; flex-direction:column; gap:3px; padding:6px 1px; font-size:9.5px;
       border-radius:0; text-align:center; min-width:0; white-space:normal; line-height:1.25}
  .tab i{font-size:19px}
  .tab .chev{display:none}
  .tab-full{display:none}
  .tab-short{display:inline}

  /* mobile: hide the redundant "All Products" tab — Select Category replaces it */
  .tab-products{display:none}

  /* Select Category dropdown: anchored under its tab, compact list + small icons */
  .tab-wrap{position:relative}
  .tab-panel{width:236px; max-width:calc(100vw - 12px); padding:5px}
  .cmenu-cat{padding:7px 9px; gap:9px}
  .cmenu-dot{width:22px; height:22px; font-size:13px}
  .cmenu-name{font-size:13px}
  .cmenu-badge{font-size:10.5px}
  .cmenu-fly,.cmenu-chev{display:none}

  /* filter removed entirely on mobile — products use the full width */
  .shop-layout{display:block}
  .filters{display:none}
  .listing-head-left{width:100%; justify-content:space-between}
  .catpick-btn{padding:8px 12px; font-size:13px}

  /* products: 3 across, compact */
  .pcard-grid{grid-template-columns:repeat(3,1fr); gap:7px}
  .pcard-vis{height:58px; font-size:24px}
  .pcard-deliver{display:none}
  .pcard-body{padding:7px 7px; gap:6px}
  .pcard-name{font-size:11px; min-height:2.5em; line-height:1.3}
  .pcard-foot{flex-direction:column; align-items:flex-start; gap:3px}
  .price{font-size:13px}
  .price .per{display:none}
  .pcard .btn.block{padding:6px; font-size:11.5px}
  .pill{font-size:9.5px; padding:2px 6px}

  .listing-head{margin-bottom:12px}
  .listing-head h1{font-size:19px}

  /* misc */
  .product{grid-template-columns:1fr}
  .buybox{position:static}
  .hero-badges{grid-template-columns:1fr 1fr}
  .trow{grid-template-columns:1fr auto; row-gap:4px}
  .cart-row{grid-template-columns:42px 1fr auto; row-gap:8px}
  .cart-sub{grid-column:2 / 4; text-align:left}
  .footer-top{flex-direction:column; gap:24px; padding:28px 16px 20px}
  .foot-links{gap:40px}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:6px}
}

/* ---- admin ---- */
.ok-banner{background:var(--ok-bg); color:var(--ok-fg)}
.admin-inline{display:flex; gap:8px; align-items:center; margin:0; flex-wrap:wrap}
.admin-inline .inp{margin:0; flex:1; min-width:130px}
.inp.slim{height:36px; font-size:14px; margin:0}
.admin-form{display:flex; flex-direction:column; gap:10px}
.admin-form .inp{margin:0}
.admin-form textarea.inp,.admin-stock textarea.inp{height:auto; line-height:1.5; padding:9px 12px; resize:vertical}
.admin-list{display:flex; flex-direction:column; gap:10px}
.admin-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 16px}
.admin-row-main{display:flex; flex-direction:column; gap:2px; min-width:160px}
.admin-row-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.admin-name{font-weight:600}
.admin-name:hover{color:var(--accent)}
.admin-prod{padding:14px 16px}
.admin-prod-head{display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.admin-prod-head .price{font-size:16px; margin-left:auto}
.admin-prod-forms{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.admin-stock{display:flex; flex-direction:column; gap:8px; margin:0}
.admin-prod-mini{display:flex; flex-direction:column; gap:8px}
.admin-prod-mini form{margin:0}
.admin-prod-danger{display:flex; gap:8px; flex-wrap:wrap}
.danger-btn{display:inline-flex; align-items:center; justify-content:center; background:var(--danger);
  color:#fff; border:none; border-radius:9px; padding:8px 16px; font-size:14px; font-weight:500; cursor:pointer}
.danger-btn:hover{filter:brightness(1.05)}
.admin-cta{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.admin-cta:hover{border-color:var(--accent)}
@media (max-width:760px){
  .admin-prod-forms{grid-template-columns:1fr}
  .admin-row-actions{width:100%}
  .admin-row-actions .admin-inline{width:100%}
}