:root{
  --red:#c8102e; --red-d:#9e0c24; --amber:#f59e0b; --ink:#1c1a1b; --muted:#6b6264; --line:#ebe5e4;
  --bg:#f6f3f2; --card:#fff; --good:#1d7a47; --good-bg:#e3f4ea;
  --tabh:64px; --safeb:env(safe-area-inset-bottom,0px); --safet:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 "Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,.big,.price{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.2px}
h1{font-size:28px;margin:0 0 6px;line-height:1.05}
h2{font-size:22px;margin:0;line-height:1.1}
h3{font-size:18px;margin:0}

#demo-ribbon{background:#1c1a1b;color:#ffd48a;font-size:12px;text-align:center;padding:4px 8px;padding-top:calc(4px + var(--safet))}
#top{position:sticky;top:0;z-index:20;background:var(--red);display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safet)) 12px 10px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
#brand{background:#fff;border-radius:10px;padding:4px 8px;flex:none}
#brand img{height:32px;width:auto}
#back{background:none;border:0;color:#fff;font-size:34px;line-height:1;padding:0 4px 4px}
#searchbar{flex:1;min-width:0}
#q{width:100%;border:0;border-radius:999px;padding:10px 14px;font:inherit;font-size:15px;background:#fff}
#q:focus{outline:3px solid var(--amber)}

main{padding:14px 14px calc(var(--tabh) + var(--safeb) + 20px);max-width:720px;margin:0 auto;outline:none}
section{margin:0 0 18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.row a{font-weight:600;color:var(--red);text-decoration:none;font-size:15px}
.muted{color:var(--muted)} .small{font-size:13px}
.card{background:var(--card);border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.07)}

#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabh) + var(--safeb));padding-bottom:var(--safeb)}
#tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;position:relative}
#tabs .ic{font-size:22px;line-height:1}
#tabs a.on{color:var(--red)}
#tabs a.scan .ic{background:var(--red);color:#fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-top:-18px;box-shadow:0 4px 10px rgba(200,16,46,.4);font-size:22px}
#cartcount{position:absolute;top:6px;left:calc(50% + 6px);background:var(--amber);color:#1c1a1b;border-radius:999px;font-size:11px;padding:0 6px;min-width:18px;text-align:center}

/* hero */
.hero{background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff;border-radius:16px;padding:18px;position:relative;overflow:hidden}
.hero .tag{color:var(--amber);font-weight:800;letter-spacing:2px;font-size:13px;text-transform:uppercase}
.hero h1{font-size:34px;color:#fff;margin:4px 0}
.hero .count{display:flex;gap:8px;margin:10px 0 14px}
.hero .count div{background:rgba(0,0,0,.22);border-radius:10px;padding:6px 10px;text-align:center;min-width:54px}
.hero .count b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:24px;line-height:1}
.hero .count span{font-size:11px;text-transform:uppercase;opacity:.85}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--red);color:#fff;border:0;border-radius:10px;padding:12px 18px;font-weight:700;text-decoration:none;font-size:16px}
.btn.wa{background:#1fa855;color:#fff}.btn.wa:hover{background:#178a45}
.btn.amber{background:var(--amber);color:#1c1a1b}
.btn.white{background:#fff;color:var(--red)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.block{width:100%}
.btn:disabled{opacity:.5}

/* coupon */
.coupon{display:flex;align-items:center;gap:12px;background:#fff8ea;border:2px dashed var(--amber);border-radius:14px;padding:12px 14px}
.coupon .code{font-family:"Barlow Condensed",sans-serif;font-size:28px;color:var(--red);letter-spacing:3px;font-weight:800}
.coupon .grow{flex:1;min-width:0}

/* quick actions */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quick a{background:#fff;border-radius:14px;padding:12px 6px;text-align:center;text-decoration:none;font-weight:600;font-size:13px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.quick .qi{font-size:26px;display:block;margin-bottom:4px}

/* products */
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll .pc{scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}.hscroll{grid-auto-columns:31%}}
.pc{background:#fff;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 3px rgba(0,0,0,.07);position:relative;text-decoration:none}
.pc .im{aspect-ratio:1;background:#fff;display:grid;place-items:center;overflow:hidden;border-radius:10px}
.pc .im img{max-height:100%;object-fit:contain}
.pc .nm{font-size:14px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.price{color:var(--red);font-size:24px;font-weight:800;line-height:1}
.price s{color:var(--muted);font-family:"Barlow",sans-serif;font-size:13px;font-weight:500;margin-left:4px}
.badge{position:absolute;top:8px;left:8px;background:var(--amber);color:#1c1a1b;font-weight:800;font-size:11px;border-radius:999px;padding:2px 8px;z-index:1}
.badge.multi{background:#1c1a1b;color:var(--amber)}
.add{background:var(--red);color:#fff;border:0;border-radius:10px;padding:8px;font-weight:700;margin-top:auto}
.add.in{background:var(--good)}
.fav{position:absolute;top:6px;right:6px;background:#fff;border:0;border-radius:50%;width:32px;height:32px;font-size:18px;box-shadow:0 1px 3px rgba(0,0,0,.15);z-index:1}
.fav.on{color:var(--red)}
.oos{font-size:12px;color:var(--muted);font-weight:600}

/* categories */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cat{background:#fff;border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.07);font-weight:600;font-size:14px}
.cat img{width:44px;height:44px;object-fit:contain;flex:none}
.cat .ph{width:44px;height:44px;border-radius:10px;background:#fbe9ec;color:var(--red);display:grid;place-items:center;font-weight:800;flex:none}
.cat small{display:block;color:var(--muted);font-weight:500}

/* product page */
.pp .im{background:#fff;border-radius:16px;padding:10px}
.pp .im img{margin:0 auto;max-height:340px;object-fit:contain}
.pp h1{margin-top:12px}
.pp .price{font-size:36px}
.save{display:inline-block;background:var(--good-bg);color:var(--good);border-radius:999px;padding:2px 10px;font-weight:700;font-size:14px;margin-left:6px;vertical-align:middle}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.qty button{background:#fff;border:0;width:40px;height:40px;font-size:20px}
.qty span{min-width:34px;text-align:center;font-weight:700}

/* cart */
.line{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px;margin-bottom:8px}
.line img{width:64px;height:64px;object-fit:contain}
.line .nm{font-weight:600;font-size:14px;line-height:1.25}
.tot{display:flex;justify-content:space-between;padding:4px 0}
.tot.big{font-size:22px;font-weight:800;font-family:"Barlow Condensed",sans-serif;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.opt{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer}
.opt.on{border-color:var(--red);background:#fff7f8}
.opt input{margin-top:4px;accent-color:var(--red)}
select,input[type=text],input[type=tel],input[type=email],textarea{width:100%;padding:11px;border:1px solid #d9d2d0;border-radius:10px;font:inherit;background:#fff}
label.l{display:block;font-weight:600;margin:10px 0 4px;font-size:14px}

/* menus */
.menu{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.menu a,.menu button{display:flex;align-items:center;gap:12px;padding:14px;border:0;border-bottom:1px solid var(--line);background:#fff;width:100%;text-align:left;text-decoration:none;font-weight:600}
.menu a:last-child{border-bottom:0}
.menu .mi{font-size:22px;width:28px;text-align:center}
.menu .go{margin-left:auto;color:var(--muted)}

/* loyalty card */
.loyal{background:linear-gradient(135deg,#c8102e,#7d0a1c);color:#fff;border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(125,10,28,.35)}
.loyal .who{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:800}
.loyal .bc{background:#fff;border-radius:10px;padding:10px;margin-top:14px}
.loyal svg{width:100%;height:auto}

.notice{background:#fff8ea;border-left:4px solid var(--amber);border-radius:10px;padding:10px 12px;font-size:14px}
.good{background:var(--good-bg);border-left:4px solid var(--good);border-radius:10px;padding:10px 12px}
.skel{background:linear-gradient(90deg,#eee,#f7f7f7,#eee);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px;min-height:180px}
@keyframes sk{to{background-position:-200% 0}}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + var(--safeb) + 14px);background:#1c1a1b;color:#fff;padding:10px 16px;border-radius:999px;z-index:50;font-weight:600;font-size:14px;max-width:90vw;text-align:center}
#reader{border-radius:14px;overflow:hidden;background:#000;min-height:260px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* portal content (1 Oct 2026) */
.banners{position:relative;margin:0 0 14px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#c8102e,#7a0a1c);min-height:150px}
.banners .ban{display:none;color:#fff;text-decoration:none;position:relative}.banners .ban.on{display:block}
.banners img{width:100%;max-height:220px;object-fit:cover;display:block}
.banners .bt{display:block;padding:14px 16px 18px}.banners img+.bt{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.banners .bt b{display:block;font:800 24px/1.1 'Barlow Condensed',sans-serif}.banners .bt span{display:block;font-size:14px;margin-top:4px}
.banners .bt .btn{display:inline-block;margin-top:8px}.banners .dots{position:absolute;right:10px;top:10px;display:flex;gap:5px}
.banners .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}.banners .dots i.on{background:#fff}
.btn.sm{padding:6px 12px;font-size:13px}
.coupon.bday{background:linear-gradient(135deg,#fff7e0,#ffe9ef);border-color:#f3c76b}
.popup{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;animation:pf .2s}
@keyframes pf{from{opacity:0}to{opacity:1}}
.popup .pbox{background:#fff;border-radius:18px;max-width:380px;width:100%;overflow:hidden;text-align:center;max-height:90vh;overflow-y:auto}
.popup .pbox img{width:100%;display:block;max-height:260px;object-fit:cover}.popup .pin{padding:18px}
.popup h2{font:800 26px/1.1 'Barlow Condensed',sans-serif;margin:0 0 8px}.popup p{margin:0 0 14px;color:#3d3739;white-space:pre-line}/* 20 Oct 2026 (campaigns, review): the area line and the text are on their own lines (content pop-ups too) */
.popup.bday .pbox{background:linear-gradient(180deg,#fff7e0,#fff)}.code.big{font:800 30px 'Barlow Condensed',sans-serif;letter-spacing:3px;border:2px dashed #c8102e;color:#c8102e;border-radius:12px;padding:8px;margin:0 0 14px}

/* cart: bin icon to remove a line (1 Oct 2026) */
.line .lr{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:stretch;justify-content:space-between}
.line .rm{border:0;background:#f6eef0;color:#8a6d72;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.line .rm:active,.line .rm:hover{background:#fbe0e5;color:#c8102e}

/* one-page checkout (1 Oct 2026) */
.ck{margin-bottom:12px}.ck h3{margin:0 0 10px;font-size:16px}
.seg{display:flex;gap:8px}.seg button{flex:1;border:1.5px solid #e1d8da;background:#fff;border-radius:12px;padding:12px 8px;font:600 14px Barlow,sans-serif;color:#1c1a1b;cursor:pointer}
.seg button.on{border-color:#c8102e;background:#fff3f5;color:#c8102e}
.sumrow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.lnk{border:0;background:none;color:#c8102e;font:600 14px Barlow,sans-serif;cursor:pointer;padding:0;text-decoration:underline}
.btn.big{padding:16px;font-size:18px}.btn:disabled{opacity:.55}
.bank .tot{font-size:14px}.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:#f1e9ea;color:#6b6264}

/* v14 (7 Oct 2026): department icons, sub-department chips, WhatsApp logo tile */
.cat .ph{font-size:24px;font-weight:400;background:#fdf1f3}
.quick .qi.wa{display:flex;justify-content:center;align-items:center;height:38px;margin-bottom:4px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin:0 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;background:#fff;border:1px solid #e7e1e2;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;text-decoration:none;color:inherit;white-space:nowrap}
.chips a.on{background:var(--red);border-color:var(--red);color:#fff}
#sim{margin-top:18px}

/* Back to school (8 Oct 2026): the Stationery department tile is highlighted first on Home */
.cat.bts{border:2px solid #c8102e;background:linear-gradient(135deg,#fff8e8,#fff);position:relative;overflow:hidden}
.cat.bts:before{content:"BACK TO SCHOOL";position:absolute;top:0;right:0;background:#c8102e;color:#fff;font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:0 12px 0 10px}
.cat.bts small{color:#c8102e;font-weight:700}

/* Stationery department banner (8 Oct 2026): upload your list = instant quote */
.bts-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff3c4,#ffe08a);border:1.5px solid #f2c200;border-radius:14px;padding:12px 14px;margin:0 0 14px;text-decoration:none;color:#1c1a1b;font-size:14px;line-height:1.4}
.bts-banner .ic{font-size:30px;flex:none}
.bts-banner u{color:#c8102e;font-weight:700;text-decoration:none;border-bottom:2px solid #c8102e}

/* Search suggestions as you type (8 Oct 2026) */
#sugg{position:fixed;left:0;right:0;top:0;z-index:60;background:#fff;border-radius:0 0 18px 18px;box-shadow:0 14px 30px rgba(0,0,0,.22);max-height:72vh;overflow-y:auto;padding:6px 0 10px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
#sugg.open{opacity:1;transform:none;pointer-events:auto}
#sugg .sh{padding:10px 16px 4px;font-size:12px;font-weight:700;letter-spacing:.4px;color:#8a8a90;text-transform:uppercase}
#sugg .sp{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:15px;color:#1c1a1b;cursor:pointer;border:0;background:none;width:100%;text-align:left;font-family:inherit}
#sugg .sp:active,#sugg .sp.on{background:#fbe9ec}
#sugg .sp .ic{width:22px;text-align:center;color:#8a8a90;flex:none}
#sugg .sp b{color:#c8102e;font-weight:700}
#sugg .pr{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;border:0;background:none;width:100%;text-align:left;font-family:inherit;color:#1c1a1b}
#sugg .pr img{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#f4f4f6;flex:none}
#sugg .pr .nm{flex:1;min-width:0;font-size:14px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#sugg .pr .pz{font-weight:800;color:#c8102e;flex:none}
#sugg .all{display:block;margin:8px 16px 0;padding:11px;border-radius:12px;background:#c8102e;color:#fff;font-weight:700;text-align:center;text-decoration:none}

/* A5 area rule (8 Oct 2026): where a special applies */
.area{display:block;font-size:12px;font-weight:700;margin-top:4px;opacity:.95}
.ban .area{color:#fff}
.hero-area{margin:0 0 12px;font-size:13px}
.area-h{display:block;font-size:12px;font-weight:700;color:#c8102e;margin:-6px 0 10px}
.coupon .area{color:#c8102e;margin:2px 0}
/* What's new card (8 Oct 2026) */
.wn{background:linear-gradient(135deg,#fff8e8,#fff);border:1.5px solid #f2c200;border-radius:14px;padding:12px 14px;margin:0 0 14px}
.wn h3{margin:0;font-size:16px}
.wn ul{margin:8px 0 0 18px;padding:0;font-size:14px;line-height:1.5}
.wn .btn.sm{margin-top:10px}

/* In-page camera scanner (8 Oct 2026) */
#scan{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:flex;flex-direction:column;font-family:inherit}
body.scanning{overflow:hidden}
#scan .sc-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#111}
#scan .sc-top button{background:none;border:0;color:#fff;font:600 15px Barlow,sans-serif}
#scan .sc-title{font-weight:700}#scan .sc-count{font-size:13px;opacity:.8;min-width:60px;text-align:right}
#scan .sc-view{flex:1;position:relative;overflow:hidden;background:#000}
#scan video,#scan .sc-preview{width:100%;height:100%;object-fit:contain;display:block}
#scan .sc-frame{position:absolute;inset:8% 6%;border:2px solid rgba(255,255,255,.7);border-radius:10px;pointer-events:none}
#scan .sc-msg{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(0,0,0,.7);padding:10px 12px;border-radius:10px;font-size:14px;text-align:center}
#scan .sc-msg.err{background:#b3261e}
#scan .sc-bar{background:#111;padding:14px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
#scan .sc-hint{width:100%;margin:0 0 8px;text-align:center;font-size:13px;opacity:.85}
#scan .sc-shutter{width:68px;height:68px;border-radius:50%;background:#fff;border:5px solid #c8102e;cursor:pointer}
#scan .sc-bar[hidden]{display:none}
#scan .sc-bar .btn{flex:1}
#scan .btn.ghost{background:transparent;color:#fff;border:1.5px solid #fff}
/* School list in the app (8 Oct 2026) */
.sline{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.sline.off{opacity:.55}
.sline img,.sline .ph{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#f4f4f6;flex:none}
.sline .t{flex:1;min-width:0;display:flex;flex-direction:column}
.sline .t b{font-size:14px;line-height:1.3}
.sline .pz{font-weight:800;color:#c8102e;flex:none}
/* 16 Oct 2026: in-store flyers - IN STORE ONLY, loud and clear (never buyable) */
.flystrip{display:flex;align-items:center;gap:12px;margin:12px 0 4px;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.18);border-left:6px solid var(--red)}
.flystrip .tag{background:var(--red);color:#fff;font-weight:800;font-size:11px;letter-spacing:.04em;padding:5px 8px;border-radius:6px;white-space:nowrap}
.flystrip .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.flystrip .t b{font-size:15px}
.flystrip .t span{font-size:12.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flystrip .go{font-size:24px;line-height:1}
.instore-top{background:var(--red);color:#fff;border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.4;margin-bottom:14px;text-align:center}
.instore-top b{font-size:17px;letter-spacing:.03em}
.flyer{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:18px}
.flyhead{background:var(--ink);color:#fff;font-weight:800;font-size:13px;letter-spacing:.03em;text-align:center;padding:10px 12px;border-bottom:4px solid var(--red)}
.flymeta{padding:12px 14px 6px}
.flymeta h2{margin:0 0 6px;font-size:18px}
.flymeta .where,.flymeta .when{font-weight:700;font-size:14px;margin:2px 0}
.flymeta .when{color:var(--red)}
.flyimg{display:block;width:100%;padding:0;margin:0;border:0;background:#f4f4f4;position:relative;cursor:zoom-in}
.flyimg img{display:block;width:100%;height:auto;min-height:200px;object-fit:contain}
.flyimg .zoomhint{display:block;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:6px;text-align:center} /* under the picture: it never hides part of the flyer */
.flycond{padding:12px 14px;font-size:13.5px;line-height:1.45;border-top:1px solid #eee}
.flycond div{white-space:pre-wrap;margin-top:4px}
.flyfoot{padding:12px 14px 14px;border-top:1px solid #eee}
.flyfoot span{display:block;text-align:center;font-weight:700;font-size:13px;color:var(--red);margin-bottom:10px}
.flyzoom{position:fixed;inset:0;z-index:80;background:#000;display:flex;flex-direction:column}
.flyzoom .bar{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;color:#fff;font-weight:800;font-size:13px;background:var(--ink);border-bottom:4px solid var(--red)}
.flyzoom .bar button{background:#fff;color:var(--ink);border:0;border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.flyzoom .sc{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;display:flex;align-items:flex-start;justify-content:center}
.flyzoom img{width:100%;height:auto;cursor:zoom-in}
.flyzoom.big .sc{display:block}
.flyzoom.big img{width:250%;max-width:none;cursor:zoom-out}
/* Campaigns: Spin the wheel (20 Oct 2026) - the Home card, the game screen, the wheel + pointer, prizes and rules */
.camp{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff3cd,#fff);border:2px solid var(--amber);border-radius:16px;padding:12px 14px;margin:0 0 14px;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.camp img,.camp .ci{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none}
.camp .ci{display:grid;place-items:center;font-size:44px;background:#fbe9ec}
.camp .ct{flex:1;min-width:0}
.camp .ct b{display:block;font:800 21px/1.1 'Barlow Condensed',sans-serif}
.camp .cx{display:block;font-size:13.5px;color:#3d3739;margin-top:3px}
.camp .area{color:var(--red)}
.camp .ct .btn{margin-top:8px}
.play .phead{display:flex;align-items:center;gap:12px;margin:0 0 10px}/* 20 Oct 2026 (review): the poster as a thumbnail beside the title, so the wheel + Spin button stay on a 360 x 640 first screen (the pop-up and the Home card show it in full) */
.play .phead .poster{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.play .phead h1{margin:0}.play .phead .area-h{margin:2px 0 0}
.wheelbox{position:relative;width:86vw;max-width:300px;margin:4px auto 14px}/* 20 Oct 2026 (wheel v2): square box = the ring of lights (static) with the wheel turning inside it */
.wrim{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.wrim .wb0,.wrim .wb1{fill:#ffd166;stroke:#fff3cd;stroke-width:.8}
.wheelbox.spinning .wb0,.wheelbox.won .wb0{animation:wbl .16s steps(1,end) infinite}/* 20 Oct 2026 (rewards tiers): .won = the chase runs again with the jackpot fanfare (campResult -> wheelChase, ~1.5 s) */
.wheelbox.spinning .wb1,.wheelbox.won .wb1{animation:wbl .16s steps(1,end) infinite .08s}
@keyframes wbl{0%{fill:#ffd166}50%{fill:#7d0a1c}100%{fill:#ffd166}}
.wheel{position:absolute;left:4%;top:4%;width:92%;height:92%;display:block;border-radius:50%;transition:transform 4s cubic-bezier(.12,.8,.18,1);will-change:transform}
.wheelbox:after{content:"";display:block;padding-top:100%}/* the box is square (its height = its width); the ring and the wheel sit in it */
.wheel path.won{animation:wpulse .55s ease-in-out 4}
@keyframes wpulse{50%{opacity:.35}}
.wpin{position:absolute;left:50%;top:-6px;transform:translateX(-50%);transform-origin:50% 0;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:36px solid var(--ink);z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:transform .07s ease-out}
.wpin.flick{transform:translateX(-50%) rotate(-24deg)}/* 20 Oct 2026 (wheel v2): the needle kicks over every slice edge */
.wpin:after{content:"";position:absolute;left:-6px;top:-34px;width:12px;height:12px;border-radius:50%;background:var(--amber)}
.wprizes{margin:8px 0 0;padding:0 0 0 20px;font-size:14px;line-height:1.7}
.wrules{margin:12px 0 0;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.wrules summary{font-weight:700;color:var(--red);cursor:pointer}
.wrules div{white-space:pre-wrap;font-size:13px;line-height:1.5;color:var(--muted);margin-top:8px}
/* 20 Oct 2026 (wheel v2, Imoo after testing the preview): the FLOATING wheel - a bottom sheet over the screen (centred card on wide screens) with a round X
   and a mute button, the Spin button, the result panel inside the sheet, confetti canvas over the whole sheet, "Spin again!" burst, pending surprise gift lines */
.popup.wheelov{align-items:flex-end;padding:0 12px calc(12px + var(--safeb));z-index:55}/* 20 Oct 2026 (wheel v2, review): a FLOATING card, not a page - gutters all round so the dark backdrop and the screen underneath show (at most 82% of the screen tall; the prizes and the T&Cs scroll inside it) */
.wheelov .pbox.wov{position:relative;max-width:440px;border-radius:24px;max-height:82vh;max-height:82dvh;overflow-y:auto;background:linear-gradient(180deg,#fff3cd 0,#fff 150px);animation:wup .28s cubic-bezier(.2,.9,.3,1)}
@keyframes wup{from{transform:translateY(40px);opacity:0}}
@media(min-width:480px){.popup.wheelov{align-items:center;padding:20px}}
.whdr{position:sticky;top:0;height:0;z-index:6}/* 20 Oct 2026 (wheel v2, review): the X and the speaker ride along when the card is scrolled down to the prizes / T&Cs (they used to scroll off the top) */
.wheelov .pin{padding:18px 14px 20px}
.wheelov h2{font:800 26px/1.1 'Barlow Condensed',sans-serif;margin:0 42px 4px}
.wheelov .area-h{margin:0 0 6px}
.wheelov .wtxt{margin:0 0 6px;color:#3d3739;font-size:14px;white-space:pre-line}
.wx,.wmute{position:absolute;top:10px;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0;line-height:1}
.wx{right:10px;background:var(--ink);color:#fff;font-size:16px;font-weight:700}
.wmute{left:10px;background:#fff;color:var(--ink);border:1px solid var(--line);font-size:18px}
.wmute.off{opacity:.55}
.wconf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.wheelov .wspin{display:flex;margin-top:4px;background:linear-gradient(135deg,#c8102e,#9e0c24);box-shadow:0 6px 16px rgba(200,16,46,.35);font:800 22px/1 'Barlow Condensed',sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:16px}
.wheelov .wspin.again{background:linear-gradient(135deg,#f59e0b,#d97706);color:var(--ink);animation:wshake .5s ease-in-out 2}
.wheelov a.wspin{color:#fff;text-decoration:none}
.wheelov #wleft{text-align:center;margin:8px 0 10px}
.wres{margin:0 0 12px;background:#fff;border:2px dashed var(--red);border-radius:16px;padding:14px;animation:wpop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes wpop{from{transform:scale(.6);opacity:0}}
.wres .wrt{font:800 24px/1.1 'Barlow Condensed',sans-serif;color:var(--red);margin:0 0 8px}
.wres.win .wrt{animation:wrtp .8s ease-in-out .1s 1;transform-origin:50% 50%}/* 20 Oct 2026 (rewards tiers): the "You won ..." heading pulses ONCE with the fanfare (off under reduced motion by the global rule) */
@keyframes wrtp{0%,100%{transform:scale(1)}45%{transform:scale(1.15)}}
.wres p{margin:0 0 10px;font-size:14px;color:#3d3739}
.wres .code.big{margin:0 0 10px}
.wres.gift{border-color:var(--good);background:linear-gradient(180deg,#e3f4ea,#fff)}.wres.gift .wrt{color:var(--good)}
.wres.respin{border-color:var(--amber);background:#fff8ea}
.wres.respin .wrt{font-size:32px;color:#b45309;animation:wshake .5s ease-in-out 2}
@keyframes wshake{25%{transform:rotate(-3deg) scale(1.08)}75%{transform:rotate(3deg) scale(1.08)}}
.wheelov .coupon{text-align:left;margin:0 0 12px}
.wheelov .wpz{text-align:left;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.07);margin:0 0 12px}
.wheelov .wpz h3{margin:0 0 4px}
.wgnote{margin:8px 0 0;color:#3d3739;line-height:1.4}
.wheelov .wrules{text-align:left;margin:0}
.wgift{margin:0 0 12px;font-size:14px;line-height:1.4;text-align:left}
/* 21 Oct 2026 (photos; Imoo after testing v52: "When they win can a photo of the items pop up as well"): the gift's picture. .wimg = the photo card above the "You won a surprise gift"
   heading (white rounded box, soft shadow, the picture at most 170 px tall) popping in with the fanfare (.wimgpop: .6 -> 1.04 -> 1 over .55 s; app.js leaves the class off under
   reduced motion and the global rule near the top stops every animation too, so it just appears). .gimg = every gift picture (app.js hides one that fails to load - never a
   broken-image icon): 40 px in the Prizes list (.wpl), 48 px on the "Your prize" card / the pending-gift lines / the checkout gift line (.wthumb), 56 px "free gift options" on a points win (.wgo).
   Every size rule names img.gimg (tag + class): inside the wheel overlay ".popup .pbox img" above (full width, 260 px tall, cover) outranks a lone class and blew a 48 px thumbnail up to the full width */
.wimg{background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.14);padding:10px;margin:0 0 12px;min-height:120px;display:flex;align-items:center;justify-content:center}/* 21 Oct 2026 (photos, review): min-height + centred - on a slow signal the card is a proper box from the start instead of a 20 px strip that jumps to ~190 px when the picture lands */
.wimg.wimgpop{animation:wimgpop .55s cubic-bezier(.2,.9,.3,1.1)}
@keyframes wimgpop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
img.gimg{background:#fff;border-radius:8px;object-fit:contain;flex:none}
.wimg img.gimg{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:170px;object-fit:contain}
.wprizes .wpl{display:flex;align-items:center;gap:10px}.wprizes .wpl>div{min-width:0}/* the thumbnail at the left, the label + terms wrap beside it (the bullet stays: the li itself is untouched) */
.wprizes .wpl img.gimg{width:40px;height:40px;max-height:40px;object-fit:contain;border:1px solid var(--line)}
img.gimg.wthumb{width:48px;height:48px;max-height:48px;object-fit:contain;border:1px solid var(--line)}
.wgift.pic{display:flex;align-items:flex-start;gap:10px}.wgift.pic .grow{flex:1;min-width:0}/* a pending-gift line with a picture: thumbnail left, the words beside it (never wider than the screen at 375 px) */
.wgopts{margin:0 0 10px;text-align:center}.wgopts .wgol{display:flex;justify-content:center;gap:8px;margin-top:6px}
.wgopts .wgo{display:block;width:56px;height:56px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#fff}.wgopts .wgo img.gimg{width:100%;height:100%;max-height:100%;display:block;object-fit:contain}
@media (prefers-reduced-motion:reduce){.wpin{transition:none}.wheel{transition-duration:.9s}}
/* Points & Rewards (20 Oct 2026, rewards): the points box on Share / the loyalty card, the Rewards screen (balance + bar, 3 gift cards, claim / confirm / claimed, money off, history), the wheel's points line + result.
   20 Oct 2026 (rewards tiers): the gifts grouped by tier (.rtier / .rth), a locked card in a tier not reached (.rgift.lock), the bar's end labels (.pbl) */
.ptsbox{background:linear-gradient(135deg,#fff7e0,#ffe9ef);border:2px solid #f3c76b;border-radius:14px;padding:12px 14px;margin:0 0 12px;text-align:left}
.ptsrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ptsbig{font:800 42px/1 'Barlow Condensed',sans-serif;color:var(--red)}
.pbar{height:12px;background:#f1e9ea;border-radius:999px;overflow:hidden;margin:8px 0 6px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f59e0b,#c8102e);border-radius:999px;transition:width .6s ease}
.rgifts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.rgift{position:relative;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.rgift.pick{cursor:pointer}.rgift.pick:active{transform:scale(.97)}
.rgift.on{border-color:var(--red);background:#fff7f8}
.rgift .im{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#fff;font-size:34px}
.rgift .im img{max-height:100%;object-fit:contain}
.rgift .nm{font-size:12.5px;font-weight:600;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:62px} /* 20 Oct 2026 (rewards, review): 4 lines - a real shop name ("Ailyons Electric Steam Iron 1400W Ceramic Soleplate Blue") fits at 360 px */
.rgift .val{font-size:12px;color:var(--good);font-weight:700;margin-top:4px}
.rgift .cue{font-size:11px;color:var(--red);font-weight:700;margin-top:4px} /* (review) "Tap to choose" / "Your pick" on a pickable card */
.ptsrow .btn.sm{min-height:44px;padding:8px 14px} /* (review) "See my rewards" on Share / the loyalty card: a 44 px tap target (it was 31 px) */
.rgift .tick{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rtier{margin:0 0 18px}/* 20 Oct 2026 (rewards tiers): one section per tier - "100 points" / "200 points" heading, its cards, its own Claim */
.rth{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;font:800 22px/1.1 'Barlow Condensed',sans-serif;color:var(--ink)}
.rth .rts{font:600 12.5px/1.2 Barlow,sans-serif;color:var(--muted);text-align:right}
.rtier.ok .rth .rts{color:var(--good)}
.rgift.lock{opacity:.55}.rgift.lock .im img{filter:grayscale(.5)}/* a gift in a tier the member has not reached yet */
.pbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:-2px 2px 4px}/* the bar's two ends: the tier reached and the next one */
.rconf{background:#fff8ea;border:2px dashed var(--amber);border-radius:14px;padding:12px 14px;margin:0 0 12px;animation:wpop .3s cubic-bezier(.2,1.4,.4,1)}
.rbtns{display:flex;gap:8px;margin-top:10px}.rbtns .btn{flex:1;padding:12px 8px}
.rdone{background:linear-gradient(180deg,#e3f4ea,#fff);border:2px dashed var(--good);border-radius:16px;padding:14px;margin:0 0 12px;font-size:14px;line-height:1.45;animation:wpop .4s cubic-bezier(.2,1.4,.4,1)}
.phist .ph{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.3}
.phist .ph:last-child{border-bottom:0;padding-bottom:0}.phist .ph:first-child{padding-top:0}
.phist .pn{font:800 19px/1 'Barlow Condensed',sans-serif;min-width:44px;text-align:right;flex:none}
.phist .pn.up{color:var(--good)}.phist .pn.dn{color:var(--red)}
.phist .pt{flex:1;min-width:0}.phist .pd{flex:none}
.wpts{text-align:center;margin:-4px 0 10px;color:#3d3739}.wpts a{color:var(--red);font-weight:700}.wpts:empty{display:none}
.wres.pts{border-color:var(--amber);background:linear-gradient(180deg,#fff7e0,#fff)}.wres.pts .wrt{color:#b45309}
/* 21 Oct 2026 (header v4, Imoo's Temu video): the search pill's sliding hint (#qhint) + the round search button (#qgo); the Me tab's unread badge (#mecount, the #cartcount shape in A5 red) */
#searchbar{position:relative}
#q{padding-right:46px}
#qhint{position:absolute;left:14px;right:46px;top:50%;transform:translateY(-50%);color:#6b6264;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#qhint[hidden]{display:none}
#qhint.in{animation:qhin .28s ease-out}
@keyframes qhin{from{opacity:0;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}
#qgo{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
#qgo:focus-visible{outline:3px solid var(--amber)}
#mecount{position:absolute;top:6px;left:calc(50% + 6px);background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;min-width:18px;text-align:center}
#mecount[hidden]{display:none}
/* 21 Oct 2026 (header v4): the Home header block #hs = the promo strip (.hstrip: "the current thing" + two product tiles, full-bleed under the red header)
   and the "Why choose A5?" trust strip (.trust, cream) with its green bar (.whybar). Looks: data-look dark (default) / red / diwali / bf / school - CSS only */
#hs{margin:-14px -14px 14px}
#hs:empty{display:none}
.hstrip{display:flex;align-items:center;gap:10px;min-height:76px;padding:6px 12px;background:var(--ink);color:#fff;text-decoration:none;border-bottom:1px solid #000;position:relative;overflow:hidden}
.hstrip .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;pointer-events:none}
.hstrip .hst{flex:1;min-width:0;position:relative;display:block;color:inherit;text-decoration:none}
.hstrip .tag{display:inline-block;background:var(--amber);color:var(--ink);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:2px 6px;line-height:1.2}
.hstrip .hst b{display:block;font:800 18px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hstrip .sub{display:block;font-size:12.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hstrip.tiles .sub{display:none}
.hstrip .btn.sm{font-size:12px;line-height:1.15;padding:4px 10px;margin-top:3px}
.hstrip .hsp{display:flex;gap:8px;flex:none;position:relative}
.hstrip .hsp[hidden]{display:none}
.hst-tile{display:block;width:56px;text-decoration:none;color:inherit;position:relative;text-align:center}
.hst-tile.in{animation:hsin .2s ease-out}
@keyframes hsin{from{opacity:0}}
.hst-tile .gi{position:static;width:54px;height:54px;margin:0 auto;border-radius:8px;background:#fff;display:grid;place-items:center;font-size:28px} /* 21 Oct 2026 (fixer, review B1): the gift square is the in-flow box, so a prize picture that fails (hidden by the error listener) leaves the square + label in place */
.hst-tile img{position:relative;width:54px;height:54px;object-fit:cover;border-radius:8px;background:#fff;margin:0 auto;display:block}
.hst-tile .gi+img{position:absolute;top:0;left:1px;margin:0} /* the prize picture lies over the square while it shows; product tiles have no square and keep the picture in flow */
.hst-tile .pz{display:block;font-size:13px;font-weight:800;color:var(--amber);line-height:1.1;margin-top:2px;white-space:nowrap}
.hst-tile .pz s{font-weight:400;font-size:11px;opacity:.7;margin-left:2px}
.hst-tile .lb{display:block;font-size:11px;line-height:1.1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hst-tile .badge{top:2px;left:2px;font-size:9px;padding:1px 5px}
@media (max-width:339px){.hstrip .hsp{display:none}.hstrip.tiles .sub{display:block}}
.hstrip[data-look=dark]{background:var(--ink) radial-gradient(circle at 85% 20%,rgba(245,158,11,.25),transparent 55%)}
.hstrip[data-look=red]{background:linear-gradient(135deg,#c8102e,#7a0a1c)}
.hstrip[data-look=red] .hst-tile .pz,.hstrip[data-look=school] .hst-tile .pz{color:#fff}
.hstrip[data-look=diwali]{background:linear-gradient(135deg,#f59e0b,#d97706);color:var(--ink)}
.hstrip[data-look=diwali] .tag{background:var(--ink);color:var(--amber)}
.hstrip[data-look=diwali] .btn.amber{background:var(--ink);color:#fff}
.hstrip[data-look=diwali] .hst-tile .pz{color:var(--ink)}
.hstrip[data-look=bf]{background:#111}
.hstrip[data-look=bf] .tag,.hstrip[data-look=bf] .btn.amber{background:#ffd500;color:#111}
.hstrip[data-look=bf] .hst-tile .pz{color:#ffd500}
.hstrip[data-look=school]{background:linear-gradient(135deg,#1d4ed8,#1e3a8a)}
.trust{display:grid;background:#fff8ea;padding:10px 14px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.trust .tp{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0;transition:opacity .3s;pointer-events:none}
.trust .tp.on{opacity:1;pointer-events:auto}
.trust .ti{display:flex;gap:5px;align-items:flex-start;min-width:0}
.trust .ti i{color:var(--good);font-style:normal;font-weight:800;flex:none;font-size:13px;line-height:1.2}
.trust .ti>div{min-width:0;flex:1}
.trust .ti b{display:block;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trust .ti span{display:block;font-size:12px;color:var(--muted);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:339px){.trust{padding:10px 12px 8px}.trust .tp{gap:8px}.trust .ti b{font-size:12.5px}.trust .ti span{font-size:11.5px}}
.whybar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--good);color:#fff;font-weight:700;font-size:13px;padding:8px 14px;border-radius:0 0 14px 14px;cursor:pointer}
.whybar .wl{white-space:nowrap}
.whybar .wr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trust:focus-visible,.whybar:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
/* the "Why choose A5?" bottom sheet (.sheet, never .popup - the pop-up code tests for .popup) */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0 12px calc(12px + var(--safeb));animation:pf .2s}
.sheet .sbox{position:relative;background:#fff;border-radius:22px;max-width:440px;width:100%;max-height:82vh;overflow-y:auto;padding:18px 16px 16px}
.sheet .sx{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:16px;font-weight:700;display:grid;place-items:center;padding:0;line-height:1}
.sheet h2{font:800 26px/1.1 "Barlow Condensed",sans-serif;margin:0 42px 6px}
.trustsheet ul{list-style:none;margin:10px 0 0;padding:0}
.trustsheet li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.trustsheet li i{color:var(--good);font-style:normal;font-weight:800;flex:none}
.trustsheet li>div{min-width:0}
.trustsheet .btn{margin-top:12px}
@media(min-width:480px){.sheet{align-items:center;padding:20px}}
/* 21 Oct 2026 (header v4): Me - the two-number strip (.stats) and the four quick links (.quick.four) */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 10px}
.stats a{background:#fff;border-radius:14px;padding:12px 10px;text-align:center;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.stats b{display:block;font:800 28px/1 "Barlow Condensed",sans-serif;color:var(--red)}
.stats span{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick.four{grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 4px}
.quick.four a{font-size:11.5px;padding:10px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .go .pill.red{background:var(--red);color:#fff}
/* 21 Oct 2026 (header v4): Messages - four group cards (.mg: coloured circle, name, latest title, date, red count), the group list rows (.msg) */
.msgs .mg{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px;text-decoration:none;color:inherit}
.msgs .mg .mc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none;color:#fff;line-height:1}
.mc.amber{background:var(--amber)}.mc.red{background:var(--red)}.mc.good{background:var(--good)}.mc.ink{background:var(--ink)}
.msgs .mg .mt{flex:1;min-width:0}
.msgs .mg .mt b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.msgs .mg .mt span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs .mg .mr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.msgs .mg .md{font-size:12px;color:var(--muted);white-space:nowrap}
.msgs .mg .mn{background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
.msgs .mg .go{color:var(--muted);font-size:22px;line-height:1}
.msg{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;text-decoration:none;color:inherit;width:100%;text-align:left;border:0;font:inherit;cursor:pointer}
.msg img.mi{width:54px;height:54px;border-radius:8px;object-fit:cover;flex:none;background:#f4f4f6}
.msg .mt{flex:1;min-width:0}
.msg .mt b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.msg .mt p{margin:3px 0 0;font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.msg.open .mt p{display:block;-webkit-line-clamp:unset}
.msg .md{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
.msg .dot,.mg .dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;margin-top:6px}
@media (max-width:359px){.msg{flex-wrap:wrap}.msg .md{order:3;width:100%;text-align:right;margin-top:-4px}}
@media (prefers-reduced-motion:reduce){.trust .tp,.hst-tile,#qhint,#mecount{transition:none!important}}
/* 22 Oct 2026 (sign-in safety): "One more check" / "My number changed" - the server's sentence (wrong tries, locked, already on another card), the plain links (44 px tap target), the date-of-birth selects in one row */
.idbad{background:#fdecea;border-left:4px solid #b3261e;border-radius:10px;padding:10px 12px;font-size:14px;margin-top:12px;color:#5c1410}
.lnk.idlnk{display:block;margin:6px auto 0;padding:12px 10px;min-height:44px;text-align:center}
.dobsel{display:flex;gap:6px}.dobsel select{width:auto;min-width:0}
/* 26 Oct 2026 (school upload): the school list upload inside the app (V.stationery) - the three steps, the school search, the grade buttons, the page thumbnails (with remove), the sending / reading bar */
.slsteps{display:flex;gap:6px;list-style:none;margin:8px 0 12px;padding:0}
.slsteps li{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 8px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.slsteps li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eee;color:var(--muted);font-size:12px;flex:none}
.slsteps li.on{color:var(--red)}.slsteps li.on b{background:var(--red);color:#fff}
.slsteps li.done b{background:var(--good);color:#fff}
.slres{margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.slres button{display:block;width:100%;min-height:48px;text-align:left;padding:10px 12px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink);font:inherit}
.slres button:last-child{border-bottom:0}
.slres button b{display:block;font-size:15px;line-height:1.3}
.slres button span{display:block;font-size:13px;color:var(--muted)}
.slpick{display:flex;align-items:center;gap:10px;background:#fff7f8;border:2px solid var(--red);border-radius:12px;padding:10px 12px}
.slpick b{display:block;line-height:1.3;overflow-wrap:anywhere}
.slpick .lnk{flex:none;padding:10px 4px}
.slgr{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.slgr button{min-height:46px;border:1.5px solid #e1d8da;background:#fff;border-radius:10px;font:700 16px Barlow,sans-serif;color:var(--ink)}
.slgr button.on{border-color:var(--red);background:var(--red);color:#fff}
.slth{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.slth:empty{display:none}
.slth .th{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#f4f4f6;border:1px solid var(--line)}
.slth .th img{width:100%;height:100%;object-fit:cover}
.slth .th .pdf{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:13px}
.slth .th .pdf span{font-size:34px}
.slth .th .n{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px}
.slth .th button{position:absolute;top:4px;right:4px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:1;padding:0}
.slth.mini{grid-template-columns:repeat(5,1fr);gap:6px}
.slth.mini .th{border-radius:8px}
.slbar{height:8px;border-radius:999px;background:#f1e9ea;overflow:hidden;margin:12px 0}
.slbar i{display:block;height:100%;width:0;background:var(--red);border-radius:999px;transition:width .3s}
.slbar.run i{width:40%;animation:slrun 1.4s ease-in-out infinite}
@keyframes slrun{from{margin-left:-40%}to{margin-left:100%}}
.slweb{text-align:center;margin:18px 0 0}
#slsign:not(:empty){margin-top:12px}
@media (prefers-reduced-motion:reduce){.slbar.run i{width:100%;opacity:.6}}