/* Layout: white marketplace storefront. Sticky search header, blue category bar, split hero (large slider + solid blue promo), icon category row, product grid. Blue and white only. */
:root{
  --bg:#FFFFFF; --soft:#F4F7FD; --sunk:#EAF0FB; --ink:#0B1B3A; --muted:#5F6E8A; --line:#E3E9F4;
  --blue:#1456F0; --blue-d:#0E43C2; --blue-l:#E6EEFF; --blue-xl:#F2F6FF;
  --danger:#C0291D; --ok:#157F45; --warn:#9A6200;
  --f-display:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,sans-serif;
  --r:16px; --shadow:0 1px 2px rgba(11,27,58,.05); --shadow-lift:0 18px 40px rgba(20,86,240,.14);
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:#FFFFFF;color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#FFFFFF}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.15;font-weight:700;letter-spacing:-.015em}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.ic{flex:none;display:block}

/* header */
.hdr-wrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#FFFFFF;border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:28px;padding-block:16px}
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;padding:0;color:var(--ink);text-align:left}
.brand-mark{width:40px;height:40px;border-radius:11px;background:var(--blue);color:#FFFFFF;display:grid;place-items:center}
.brand-text b{display:block;font:800 22px/1 var(--f-display);letter-spacing:-.02em}
.brand-text small{display:block;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:4px;font-weight:600}
.hsearch{flex:1;max-width:620px;display:flex;align-items:center;height:46px;border:1px solid var(--line);background:var(--soft);border-radius:11px;overflow:hidden}
.hsearch:focus-within{border-color:var(--blue);background:#FFFFFF}
.hsearch select{border:0;background:transparent;height:100%;padding:0 14px;max-width:176px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-right:1px solid var(--line);outline:none;color:var(--ink)}
.hsearch input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:0 14px;font-size:14px;height:100%}
.hs-btn{width:48px;height:100%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center}
.hs-btn:hover{color:var(--blue)}
.hphone{margin-left:auto;text-align:right;line-height:1.3}
.hphone b{display:block;font:700 16px var(--f-display);letter-spacing:-.01em}
.hphone small{font-size:12px;color:var(--muted)}
.hicons{display:flex;align-items:center;gap:6px}
.hicon{position:relative;width:44px;height:44px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.hicon:hover{background:var(--soft)}
.hbadge{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--blue);color:#FFFFFF;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #FFFFFF}
.hcart{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:0 4px 0 0;color:var(--ink);text-align:left;border-radius:12px}
.hcart:hover .hicon{background:var(--soft)}
.hcart-t small{display:block;font-size:11.5px;color:var(--muted);line-height:1.2}
.hcart-t b{display:block;font:700 14px var(--f-display)}
.navbar{border-bottom:1px solid var(--line);background:#FFFFFF}
.nav{display:flex;align-items:center;gap:10px;height:62px}
.catmenu{position:relative;flex:none}
.catbtn{display:flex;align-items:center;gap:11px;height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--blue);color:#FFFFFF;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.catbtn:hover{background:var(--blue-d)}
.catbtn .sm{display:none}
.menu-pop{position:absolute;top:calc(100% + 10px);left:0;width:min(320px,calc(100vw - 32px));background:#FFFFFF;border:1px solid var(--line);border-radius:16px;box-shadow:0 28px 56px rgba(11,27,58,.18);padding:8px;z-index:25}
.mi{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;background:none;border-radius:11px;text-align:left;font-size:14px;font-weight:500}
.mi:hover{background:var(--soft)}
.mi .mi-ic{width:38px;height:38px;border-radius:10px;background:var(--blue-l);display:grid;place-items:center;flex:none}
.mi .mi-ic svg{width:28px;height:28px}
.mi span.n{margin-left:auto;font-size:12px;color:var(--muted)}
.links{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.link{display:flex;align-items:center;gap:8px;flex:none;border:0;background:none;padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--ink);border-radius:9px;white-space:nowrap}
.link:hover{color:var(--blue);background:var(--blue-xl)}
.link[aria-current="page"]{color:var(--blue);font-weight:600}
.link svg{color:var(--muted)}
.link:hover svg,.link[aria-current="page"] svg{color:var(--blue)}
.recent{margin-left:auto;flex:none}

/* hero */
.hero-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;padding-block:24px 6px}
.hero-main{position:relative;overflow:hidden;border-radius:20px;background:radial-gradient(circle,rgba(20,86,240,.1) 0 1.6px,transparent 2.4px) 0 0/30px 30px,linear-gradient(115deg,#DCE8FF 0%,#EAF2FF 55%,#F5F9FF 100%);min-height:360px;padding:48px 52px;display:flex;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:46%}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.hero-copy h1{font-size:clamp(28px,3.5vw,46px);line-height:1.08;margin:12px 0 14px;font-weight:800}
.hero-copy p{color:var(--muted);max-width:40ch;margin:0 0 26px;font-size:15px}
.hero-art{position:absolute;right:0;top:0;bottom:0;width:58%;pointer-events:none}
.blob{position:absolute;right:-70px;top:50%;width:440px;height:440px;border-radius:50%;background:rgba(20,86,240,.1);transform:translateY(-50%)}
.blob.b2{right:90px;top:auto;bottom:-120px;width:240px;height:240px;transform:none;background:rgba(20,86,240,.08)}
.g{position:absolute;display:block;border-radius:16px;overflow:hidden;background:#FFFFFF;border:5px solid #FFFFFF;box-shadow:0 18px 34px rgba(20,86,240,.22);aspect-ratio:4/5}
.g img{width:100%;height:100%;object-fit:cover;display:block}
.g1{width:190px;right:215px;top:44px;transform:rotate(-6deg)}
.g2{width:210px;right:36px;top:26px;transform:rotate(5deg)}
.g3{width:150px;right:150px;bottom:-34px;transform:rotate(-2deg)}
.hero-main .hero-copy{animation:fadein .6s ease both}

.hero-nav{position:absolute;right:20px;bottom:20px;display:flex;gap:8px;z-index:3}
.hero-nav button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#FFFFFF;display:grid;place-items:center;color:var(--ink)}
.hero-nav button.next{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.dots{position:absolute;left:52px;bottom:24px;display:flex;gap:6px;z-index:3}
.dots button{display:block;width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(20,86,240,.25);cursor:pointer;transition:width .25s,background .25s;position:relative}
.dots button::after{content:"";position:absolute;inset:-10px -4px}
.dots button.on{width:26px;background:var(--blue)}
.hero-main{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.hero-main.dragging{cursor:grabbing}
.hero-main img{-webkit-user-drag:none;pointer-events:none}
.hero-copy,.hero-art{transition:transform .25s ease}
.hero-main.from-r .hero-copy,.hero-main.from-r .hero-art{animation:heroR .45s cubic-bezier(.2,.8,.2,1) both}
.hero-main.from-l .hero-copy,.hero-main.from-l .hero-art{animation:heroL .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes heroL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
.hero-side{position:relative;overflow:hidden;border-radius:20px;background:var(--blue);color:#FFFFFF;padding:40px 34px;min-height:360px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero-side .eyebrow{color:#CFE0FF}
.hero-side h2{font-size:clamp(30px,3.2vw,42px);font-weight:800;line-height:1.05;margin:10px 0 12px;position:relative;z-index:2}
.hero-side p{margin:0 0 24px;color:#E1EBFF;max-width:26ch;position:relative;z-index:2;font-size:14.5px}
.hero-side .eyebrow,.hero-side .btn{position:relative;z-index:2}
.side-art{position:absolute;right:-24px;bottom:-26px;width:240px;opacity:.9;transform:rotate(-8deg)}
.side-art svg{width:100%;height:auto;display:block}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-block:20px 0}
.ti{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;min-width:0}
.ti .tic{width:46px;height:46px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;flex:none}
.ti b{display:block;font:700 14.5px var(--f-display)}
.ti small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}

/* sections */
.shead{display:flex;align-items:baseline;gap:18px;padding-block:44px 20px}
.shead h2{font-size:28px;font-weight:800}
.more{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font-size:13.5px;color:var(--muted);padding:0}
.more:hover{color:var(--blue)}
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cat{background:var(--soft);border:1.5px solid transparent;border-radius:16px;padding:24px 8px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-size:13px;font-weight:600;line-height:1.3;transition:background .15s,box-shadow .15s,border-color .15s}
.cat .cat-ph{width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--blue-l);box-shadow:0 6px 14px rgba(11,27,58,.14);transition:transform .25s}
.cat .cat-art{display:grid;place-items:center;width:100%;height:100%}.cat .cat-art svg{width:62%;height:62%}
.cat .cat-ph img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.cat:hover .cat-ph{transform:scale(1.06)}
.cat svg{width:54px;height:54px;filter:drop-shadow(0 4px 5px rgba(11,27,58,.15))}
.cat small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px}
.cat:hover{background:#FFFFFF;border-color:var(--line);box-shadow:var(--shadow-lift)}
.cat[aria-pressed="true"]{background:#FFFFFF;border-color:var(--blue)}

/* shop controls */
#products{scroll-margin-top:96px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:16px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:14px}
.chip{flex:none;border:1px solid var(--line);background:#FFFFFF;border-radius:999px;padding:8px 16px;font-weight:500;font-size:13.5px;color:var(--ink)}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue);color:#FFFFFF;border-color:var(--blue)}
.price-box{display:flex;align-items:center;gap:6px;background:#FFFFFF;border:1px solid var(--line);border-radius:10px;padding:4px 12px;height:42px}
.price-box:focus-within{border-color:var(--blue)}
.price-box input{width:80px;border:0;background:none;outline:none;padding:4px}
.preset{border:1px solid var(--line);background:#FFFFFF;border-radius:10px;padding:0 14px;height:42px;font-size:13px;font-weight:500;color:var(--muted)}
.preset:hover{border-color:var(--blue);color:var(--blue)}
.preset[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);font-weight:600}
.toolbar select{border:1px solid var(--line);background:#FFFFFF;border-radius:10px;height:42px;padding:0 12px;font-size:13.5px;margin-left:auto}
.result-line{font-size:13px;color:var(--muted);padding-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{position:relative;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);border-color:#CBD9F6}
.card-hit{position:absolute;inset:0;z-index:1;background:none;border:0;padding:0;margin:0;cursor:pointer}
.pimg{position:relative;aspect-ratio:4/5;background:linear-gradient(100deg,var(--soft) 30%,#FFFFFF 50%,var(--soft) 70%) 0 0/220% 100%;animation:shimmer 1.4s linear infinite;overflow:hidden}
.pimg.ready{animation:none;background:var(--soft)}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.03);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pimg img.ld{opacity:1;transform:none}
.card:hover .pimg img.ld{transform:scale(1.04)}
.pimg .count{position:absolute;left:12px;bottom:12px;z-index:2;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(11,27,58,.72);color:#FFFFFF;backdrop-filter:blur(4px)}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.grid.enter .card,.cats.enter .cat,.trust.enter .ti{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*50ms)}
.heart.pop svg{animation:pop .38s ease}
.sk-line{height:12px;border-radius:6px;background:linear-gradient(100deg,var(--soft) 30%,#FFFFFF 50%,var(--soft) 70%) 0 0/220% 100%;animation:shimmer 1.4s linear infinite}
.sk-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sk-card .sk-b{padding:14px 16px 18px;display:grid;gap:10px}
.sk-hero{border-radius:20px;min-height:360px;background:linear-gradient(100deg,var(--soft) 30%,#FFFFFF 50%,var(--soft) 70%) 0 0/220% 100%;animation:shimmer 1.4s linear infinite}
.ph-art{width:100%;height:100%;display:grid;place-items:center;background:#E4ECFF}
.ph-art svg{width:62%;height:auto;display:block;filter:drop-shadow(0 12px 14px rgba(11,27,58,.2))}
.flag{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 9px;border-radius:7px;background:#FFFFFF;color:var(--blue)}
.flag.out{background:var(--ink);color:#FFFFFF}
.heart{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;background:transparent;border:0;display:grid;place-items:center;color:#FFFFFF;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25))}
.heart svg{width:24px;height:24px}
.heart:hover{transform:scale(1.12)}
.heart[aria-pressed="true"]{color:#FF3B5C}
.heart[aria-pressed="true"] svg{fill:#FF3B5C}
.pbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pcat{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.pname{font:600 15px/1.35 var(--f-display);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;letter-spacing:-.005em}
.pmeta{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.pprice b{display:block;font:800 19px/1.1 var(--f-display);letter-spacing:-.01em}
.pprice small{font-size:11.5px;color:var(--muted)}
.padd{position:relative;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:var(--blue);color:#FFFFFF;display:grid;place-items:center;flex:none}
.padd:hover{background:var(--blue-d)}
.empty{grid-column:1/-1;text-align:center;padding:56px 16px;color:var(--muted);border:1px dashed #C7D5F2;border-radius:var(--r);background:var(--blue-xl)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 20px;font-weight:600;font-size:14px;border:1px solid transparent;text-decoration:none;transition:background .15s,border-color .15s}
.btn-primary,.btn-wa{background:var(--blue);color:#FFFFFF}
.btn-primary:hover,.btn-wa:hover{background:var(--blue-d)}
.btn-white{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.btn-white:hover{background:var(--blue-xl)}
.btn-ghost{background:#FFFFFF;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-danger{background:#FFFFFF;border-color:var(--line);color:var(--danger)}
.btn-danger:hover{border-color:var(--danger)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.btn-sm{padding:8px 13px;font-size:12.5px}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(11,27,58,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#FFFFFF;width:100%;max-width:840px;max-height:92vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:24px max(22px,env(safe-area-inset-right,0px)) calc(26px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));animation:up .22s cubic-bezier(.2,.8,.2,1)}
@media (min-width:840px){.scrim{align-items:center}.sheet{border-radius:20px;max-height:88vh}}
@keyframes up{from{transform:translateY(20px);opacity:.4}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.card{transition:none}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.sheet-head h2{font-size:22px}
.close{border:1px solid var(--line);background:#FFFFFF;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--ink)}
.close:hover{border-color:var(--blue);color:var(--blue)}
.pd{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:700px){.pd{grid-template-columns:320px minmax(0,1fr)}}
.pd-img{position:relative;border-radius:16px;overflow:hidden;background:var(--soft);aspect-ratio:1/1.05}
.pd-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd-info{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-info h2{font-size:26px;font-weight:800}
.price-big{font:800 28px var(--f-display);color:var(--blue);letter-spacing:-.01em}
.price-big small{font:500 13px var(--f-body);color:var(--muted);margin-left:8px}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:46px;border:1px solid var(--line);background:#FFFFFF;border-radius:10px;padding:9px 12px;font-weight:600;font-size:13.5px}
.size:hover{border-color:var(--blue)}
.size[aria-pressed="true"]{background:var(--blue);color:#FFFFFF;border-color:var(--blue)}
.label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.seller-box{background:var(--soft);border-radius:12px;padding:14px 16px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.copy-num{border:0;background:none;color:var(--blue);font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#B9CCF8}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px}
.qty button{border:0;background:none;width:36px;height:36px;font-size:17px}
.qty span{min-width:28px;text-align:center;font-weight:600}

/* forms */
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:600}
.field input,.field select,.field textarea{border:1px solid var(--line);background:#FFFFFF;border-radius:10px;padding:11px 13px;width:100%;min-width:0;font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.field textarea{min-height:90px;resize:vertical}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hint{font-size:12px;color:var(--muted);line-height:1.5}

/* cart + lists */
.cart-group{border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;margin-bottom:14px}
.cart-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center}
.cart-item .t{min-width:0}
.cart-item .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cart-item .t span{font-size:13px;color:var(--muted)}
.mini{width:56px;height:62px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#EDF3FF,#D8E5FF);display:grid;place-items:center}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.mini svg{width:72%;height:auto;display:block}
.link-btn{border:0;background:none;color:var(--danger);font-size:12.5px;padding:0;font-weight:500}

/* pages: requests + sell */
.page{padding-block:40px 64px;display:grid;gap:28px}
.page h1{font-size:clamp(26px,4vw,38px);font-weight:800}
.split{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:860px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.panel{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:16px;align-content:start;min-width:0}
.panel h2{font-size:20px}
.req{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:5px}
.req:first-of-type{border-top:0;padding-top:0}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid currentColor}
.pill.pending{color:var(--warn)} .pill.accepted{color:var(--ok)} .pill.rejected{color:var(--danger)} .pill.active{color:var(--ok)} .pill.expired{color:var(--danger)}
.plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.plan{border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:8px;align-content:start;background:var(--blue-xl)}
.plan h3{font-size:18px}
.plan ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.8}
.steps{margin:0;padding-left:20px;display:grid;gap:8px}
.bank{white-space:pre-wrap;background:var(--soft);border-radius:12px;padding:14px 16px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px}

/* admin */
.admin-bar{background:var(--ink);color:#FFFFFF}
.admin-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:10px;font-size:13.5px}
.admin-bar .btn{padding:7px 14px;font-size:12.5px}
.admin-bar .btn-ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.35)}
.admin-bar .btn-save{background:var(--blue);color:#FFFFFF}
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.admin-list{display:grid;gap:8px}
.arow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px}
.arow .mini{font-weight:700;color:var(--blue)}
.arow .t{min-width:0}
.arow .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.arow .t span{font-size:12.5px;color:var(--muted)}
.arow .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:end}
.pf-prev{width:100%;max-width:200px;aspect-ratio:1/1.05;border-radius:12px;overflow:hidden;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:13px}
.pf-prev img{width:100%;height:100%;object-fit:cover}
.notice{background:var(--blue-xl);border-radius:12px;padding:14px 16px;font-size:13.5px;border:1px solid #D3E0FA}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#FFFFFF;padding:12px 20px;border-radius:10px;font-weight:500;font-size:13.5px;z-index:60;max-width:calc(100% - 32px);box-shadow:0 10px 28px rgba(11,27,58,.25)}

/* footer */
.foot{background:var(--soft);margin-top:64px;padding-block:48px 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:32px}
.foot h4{margin:0 0 14px;font:700 14px var(--f-display)}
.foot p{margin:10px 0 0;color:var(--muted);font-size:13.5px;max-width:34ch}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li button{border:0;background:none;padding:0;color:var(--muted);font-size:13.5px;text-align:left}
.foot li button:hover{color:var(--blue)}
.foot li span{color:var(--muted);font-size:13.5px}
.foot-bottom{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;color:var(--muted);font-size:12.5px}

.side-ph{position:absolute;right:-16px;bottom:-34px;width:170px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:5px solid #FFFFFF;transform:rotate(7deg);box-shadow:0 16px 30px rgba(8,24,70,.35)}
.side-ph img{width:100%;height:100%;object-fit:cover;display:block}
.side-ph.s2{right:120px;bottom:-60px;width:130px;transform:rotate(-6deg)}

/* gallery */
.gal{display:grid;gap:10px;min-width:0}
.gal-main{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--soft)}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block;animation:fadein .3s ease}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 2px 10px rgba(11,27,58,.2);color:var(--ink)}
.gal-nav.prev{left:10px}.gal-nav.next{right:10px}
.gal-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.gal-thumbs button{flex:none;width:58px;height:72px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--soft);opacity:.75;transition:opacity .15s,border-color .15s}
.gal-thumbs button[aria-current="true"]{border-color:var(--blue);opacity:1}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* favorites + profile */
.pg-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.pg-head p{margin:8px 0 0}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--blue);color:#FFFFFF;display:grid;place-items:center;font:800 22px var(--f-display);flex:none}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--blue-xl)}
.stat b{display:block;font:800 24px var(--f-display)}
.stat span{font-size:12.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* responsive */
@media (max-width:1100px){.hphone{display:none}.hicons{margin-left:auto}}
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr}
  .hero-side{min-height:260px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .recent{display:none}
}
@media (max-width:760px){
  .hdr{flex-wrap:wrap;gap:12px;padding-block:12px}
  .brand-mark{width:36px;height:36px}
  .brand-text b{font-size:20px}
  .hicons{margin-left:auto}
  .hcart-t{display:none}
  .hsearch{order:3;flex:1 1 100%;max-width:none;height:44px}
  .hsearch select{max-width:116px;padding:0 10px}
  .nav{height:56px}
  .catbtn{padding:0 14px}
  .catbtn .lg{display:none}
  .catbtn .sm{display:inline}
  .hero-main{padding:30px 24px 64px;min-height:0;flex-direction:column;align-items:flex-start}
  .hero-copy{max-width:100%}
  .hero-copy p{max-width:34ch}
  .hero-art{position:relative;inset:auto;right:auto;width:100%;height:196px;margin-top:22px}
  .blob{display:none}
  .g1{width:104px;left:2%;right:auto;top:20px}
  .g2{width:116px;left:30%;right:auto;top:2px}
  .g3{width:100px;left:62%;right:auto;bottom:auto;top:26px}
  .side-ph{width:120px;right:-10px;bottom:-26px}
  .side-ph.s2{display:none}
  .dots{left:24px;bottom:30px}
  .hero-side{padding:30px 24px}
  .shead{padding-block:34px 16px}
  .shead h2{font-size:23px}
}
@media (max-width:700px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pbody{padding:12px 12px 14px}
  .pname{font-size:14px}
  .pprice b{font-size:17px}
  .padd{width:36px;height:36px}
}
@media (max-width:620px){
  .cats{display:flex;overflow-x:auto;scrollbar-width:none;gap:10px;padding-bottom:4px}
  .cat{flex:0 0 108px}
  .trust{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .toolbar select{margin-left:0}
}
/* motion + drawer */
.hmenu{display:none}
.flag.hot{background:#FF5A1F;color:#FFFFFF}
.more-row{display:flex;justify-content:center;padding:28px 0}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:none}}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.dr-scrim{position:fixed;inset:0;z-index:60;background:rgba(11,27,58,.45);animation:scrimin .22s ease both}
.drawer{position:absolute;left:0;top:0;bottom:0;width:min(330px,86vw);background:#FFFFFF;overflow-y:auto;padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:slidein .3s cubic-bezier(.2,.8,.2,1) both;box-shadow:12px 0 40px rgba(11,27,58,.2)}
.dr-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.dr-head>div{flex:1;min-width:0}.dr-head b{display:block;font:800 16px var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dr-head small{color:var(--muted);font-size:12.5px}
.dr-head .avatar{width:46px;height:46px;font-size:16px}
.dr-list{display:grid;gap:2px}
.dr-item{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;padding:13px 12px;border-radius:12px;font:600 15px var(--f-body);color:var(--ink);text-align:left;transition:background .15s,transform .15s}
.dr-item:hover{background:var(--soft)}.dr-item:active{transform:scale(.98)}
.dr-item em{margin-left:auto;font-style:normal;background:var(--blue);color:#FFFFFF;border-radius:999px;font-size:12px;padding:2px 8px}
.dr-item em.dr-by{background:transparent;color:var(--muted);font-weight:500;padding:0;font-size:12.5px}
.dr-item.sub{padding:10px 12px 10px 20px;font-weight:500;color:var(--muted)}
.dr-sub{font:700 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:18px 12px 8px}
/* switching sections swaps the page at once, like the tabs in a phone app: no fade, so nothing blinks */
main.vin{animation:viewslide .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes viewslide{from{transform:translateY(6px)}}
/* a page that is still loading fills the screen, so the footer never shows up under an empty page */
#app>main{min-height:calc(100svh - 150px)}
.toast{animation:toastin .28s ease both}
button,.btn,.chip,.preset,.size,.hicon,.padd,.heart,.link,.cat{transition:transform .16s ease,background-color .18s ease,border-color .18s ease,box-shadow .2s ease,color .18s ease,opacity .18s ease}
button:active:not(:disabled),.btn:active,a.btn:active{transform:scale(.96)}
.card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,27,58,.12)}
.card:active{transform:scale(.985)}
.cat:hover{transform:translateY(-3px)}
.hbadge{animation:pop .35s ease both}
.menu-pop{animation:viewin .22s ease both}
.scrim{animation:scrimin .22s ease both}
.sheet{animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.gal-main img{animation:fadein .35s ease}
@media (max-width:760px){
  .hmenu{display:grid;margin-left:-8px}
  .hdr{flex-wrap:wrap}
  .brand{margin-inline:auto}
  .hextra{display:none}
  .hicons{margin-left:0}
  .hs-sel{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- accounts, chat and dashboards ---------- */
.avatar.sm{width:40px;height:40px;font-size:14px}
.avatar.xs{width:30px;height:30px;font-size:12px}
.hme:hover .avatar{background:var(--blue-d)}
.hbadge.dot{min-width:11px;width:11px;height:11px;padding:0;top:8px;right:8px}
.notice.ok{background:#EAF7EF;border-color:#BFE5CC}
.notice.warn{background:#FFF6E5;border-color:#F3DDB0}
.pill.suspended,.pill.cancelled{color:var(--danger)} .pill.sent{color:var(--blue)} .pill.confirmed{color:var(--warn)} .pill.delivered{color:var(--ok)}
.arow .t span+span{display:block}
.auth-tabs{display:flex;gap:8px;margin-bottom:14px}
.auth-tabs .chip[aria-pressed="true"],.admin-tabs .chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.auth-role{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.auth-role button{text-align:left;border:1.5px solid var(--line);background:#FFFFFF;border-radius:14px;padding:14px;display:grid;gap:3px;transition:border-color .18s,background .18s,transform .12s}
.auth-role button small{color:var(--muted);font-size:12.5px}
.auth-role button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-xl)}
.auth-role button:active{transform:scale(.98)}
.auth-cta{justify-items:start;max-width:620px}
details.pw summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:14px}
.pf-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.pf-t{position:relative;width:76px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--soft)}
.pf-t img{width:100%;height:100%;object-fit:cover}
.pf-t button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(11,27,58,.7);color:#FFFFFF;display:grid;place-items:center;padding:0}
.chat-grid{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#FFFFFF;min-height:520px}
@media (min-width:860px){.chat-grid{grid-template-columns:320px minmax(0,1fr)}}
.chat-list{border-right:1px solid var(--line);overflow-y:auto;max-height:70vh}
.ci{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px solid var(--line);background:#FFFFFF;padding:14px 16px;text-align:left;transition:background .15s}
.ci:hover{background:var(--soft)} .ci.on{background:var(--blue-xl)}
.ci .t{flex:1;min-width:0;display:grid}
.ci .t small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-r{display:grid;justify-items:end;gap:4px;color:var(--muted);font-size:12px}
.ci-r em{font-style:normal;background:var(--blue);color:#FFFFFF;border-radius:999px;font-size:11.5px;padding:1px 7px;font-weight:700}
.thread{display:flex;flex-direction:column;min-height:520px;max-height:70vh;min-width:0}
.th-none{align-items:center;justify-content:center;text-align:center}
.th-none .ic{margin:0 auto}
.th-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.th-head .t{flex:1;min-width:0;display:grid}
.th-head .t small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px;background:var(--blue-xl)}
.th-empty{margin:auto;text-align:center}
.bub{max-width:78%;align-self:flex-start;background:#FFFFFF;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:9px 13px;display:grid;gap:2px;animation:rise .25s ease both}
.bub.me{align-self:flex-end;background:var(--blue);border-color:var(--blue);color:#FFFFFF;border-radius:16px 16px 4px 16px}
.bub span{white-space:pre-wrap;overflow-wrap:anywhere}
.bub small{font-size:11px;opacity:.65;justify-self:end}
.th-send{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.th-send input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.th-send input:focus{border-color:var(--blue);outline:none}
.th-send .btn{padding:11px 16px}
.th-back{display:none}
@media (max-width:859px){
  .chat-grid.open .chat-list{display:none}
  .chat-grid:not(.open) .thread{display:none}
  .th-back{display:grid;width:36px;height:36px}
  .thread{max-height:none;height:calc(100vh - 220px)}
}
.acts .pill{align-self:center}
.th-head .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){
  .arow{grid-template-columns:48px minmax(0,1fr)}
  .arow .acts{grid-column:1/-1;justify-content:flex-start}
  .th-head .btn{padding:7px 10px}
  .th-head [data-open]{display:none}
  .chat-grid{margin-inline:-4px}
}
/* boosts and admin */
.flag.sponsored{background:#FFC83D;color:#3A2A00}
.boosted{display:flex!important;align-items:center;gap:4px;color:#9A6B00!important;font-weight:600}
.online{color:#139A4B;font-weight:700}
.admin-stats{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
button.stat{text-align:left;font:inherit;color:inherit;cursor:pointer}
button.stat:hover{border-color:var(--blue)}
.ad-q{width:100%;max-width:420px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.pill.paid{color:var(--ok)} .pill.failed,.pill.mismatch{color:var(--danger)}
/* welcome */
.welcome{padding-top:48px;padding-bottom:64px;display:grid;gap:32px}
.wl-copy{max-width:680px}
.wl-copy h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.03em;margin-top:10px}
.wl-copy p{color:var(--muted);font-size:17px;line-height:1.6;margin:14px 0 0}
.wl-choices{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.wl-card{position:relative;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1.5px solid var(--line);border-radius:22px;background:var(--blue-xl);padding:0 28px 28px;display:grid;gap:12px;align-content:start;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.wl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(20,86,240,.45);border-color:var(--blue)}
.wl-card.sell{background:linear-gradient(140deg,#1456F0,#0A2E8A);color:#fff;border-color:transparent}
.wl-card.sell>span.wl-t{color:rgba(255,255,255,.85)}
.wl-card>b{font:800 26px var(--f-display);letter-spacing:-.02em}
.wl-card>span.wl-t{font-size:15px;line-height:1.55;color:var(--muted)}
.wl-card .btn{justify-self:start;margin-top:6px;pointer-events:none}
.wl-ph{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 -28px;height:190px;overflow:hidden}
.wl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.wl-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--blue);margin-top:-24px;position:relative;box-shadow:0 6px 18px -6px rgba(0,0,0,.25)}
.wl-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.link-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-role button b{display:flex;align-items:center;gap:8px}
.auth-shop{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:12px;background:var(--blue-xl)}
@media (max-width:640px){.welcome{padding-top:28px}.wl-card{padding:0 20px 22px}.wl-ph{margin:0 -20px;height:150px}.auth-role{grid-template-columns:1fr}}
/* orders, plans, contact */
.orders{display:grid;gap:12px}
.order{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:12px;background:#fff}
.order.new{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.order-top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.order-items{width:100%;border-collapse:collapse;font-size:14px}
.order-items td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.order-items td+td{text-align:right;padding-left:12px;white-space:nowrap}
.order-items tr.sub td{color:var(--muted);font-size:13px}
.order-items tr.tot td{font-weight:700;border-bottom:0}
.order-buyer{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--blue-xl);border-radius:10px;padding:10px 12px}
.order-buyer .label{display:block;margin-bottom:2px}
.order-buyer b{font-weight:600;word-break:break-word}
.order .acts{display:flex;gap:6px;flex-wrap:wrap}
.nbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:#E5484D;color:#fff;font-size:11px;font-weight:700}
.contact-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.plan-status{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.plan .btn{justify-self:start;margin-top:8px}
.notice .bank{margin:10px 0;background:#fff}
.pill.unpaid{color:var(--warn)}
/* reports */
.notice.bad{background:#FDECEC;border-color:#F3C1C1}
.reasons{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.reason{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:#fff}
.reason:has(input:checked){border-color:var(--danger);background:#FFF6F6}
.reason input{margin-top:3px;accent-color:var(--danger)}
.reason b{display:block;font-size:14px}
.reason small{color:var(--muted);font-size:12.5px;line-height:1.45}
.report-link{color:var(--muted);font-size:13px;font-weight:500}
.rep-count{color:var(--danger)!important;font-weight:600}
.pill.banned{color:var(--danger)} .pill.open{color:var(--warn)} .pill.dismissed{color:var(--muted)} .pill.resolved{color:var(--danger)}

/* get the app (PWA install) */
.wl-foot .link-btn .ic{vertical-align:-3px;margin-right:2px}
.install-steps{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:12px}
.install-steps li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.install-steps .num{flex:none;width:26px;height:26px;border-radius:999px;background:var(--blue-l);color:var(--blue);font-weight:700;display:grid;place-items:center;font-size:13px}.appbar{display:none}
@media (max-width:760px){
  .happ{display:none}
  .appbar{display:block;background:var(--blue-xl);border-bottom:1px solid var(--line)}
  .appbar-in{display:flex;align-items:center;gap:10px;padding-block:8px}
  .appbar-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--blue);color:#FFFFFF;display:grid;place-items:center}
  .appbar-t{flex:1;min-width:0;line-height:1.25}
  .appbar-t b{display:block;font-size:13.5px}
  .appbar-t small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .appbar-btn{flex:none;height:34px;padding:0 14px;font-size:13px}
  .appbar-x{flex:none;width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:var(--muted);margin-right:-6px}
}
/* seller ID checks */
.kyc-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 4px;flex-wrap:wrap}
.kyc-steps li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--blue-l);border-radius:999px;padding:6px 12px 6px 6px}
.kyc-steps li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--blue);font-size:12px}
.kyc-steps li.on{color:var(--ink,#0B1B3A)}
.kyc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kyc-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:170px;padding:14px;border:1.5px dashed #AFC1E6;border-radius:16px;background:#F6F9FF;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
.kyc-tile:hover{border-color:var(--blue);background:#EEF3FF}
.kyc-tile b{font-size:14.5px}
.kyc-tile small{color:var(--muted);font-size:12.5px;line-height:1.35}
.kyc-tile .kyc-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 4px 12px rgba(11,27,58,.1);margin-bottom:4px}
.kyc-tile.has{border-style:solid;border-color:var(--blue);padding:0;justify-content:flex-end}
.kyc-tile.has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kyc-tile.has b,.kyc-tile.has small{position:relative;z-index:1;width:100%;background:linear-gradient(transparent,rgba(8,18,40,.78));color:#fff;padding:2px 10px}
.kyc-tile.has b{padding-top:26px}.kyc-tile.has small{padding-bottom:10px;color:#DCE6FF}
.kyc-agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink,#0B1B3A);cursor:pointer}
.kyc-agree input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
.kyc-figs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.kyc-fig{margin:0}.kyc-fig img{width:100%;height:220px;object-fit:cover;border-radius:12px;display:block;background:#F1F5FF}
.kyc-fig figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
.kyc-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 12px;font-size:14px}
.kyc-dl dt{color:var(--muted)}.kyc-dl dd{margin:0;font-weight:600}
.panel-sub{border:1px solid var(--line,#E3E9F5);border-radius:14px;padding:16px;margin-bottom:18px;background:#FAFCFF}
.bad-t{color:#C62F45}
.pill.review{background:#FFF4D9;color:#8A5A00}
@media (max-width:560px){.kyc-tiles,.kyc-figs{grid-template-columns:1fr}.kyc-tile{min-height:150px}}

/* ---- round 2: product sheet ---- */
.kyc-why{display:flex;gap:10px;align-items:flex-start;background:var(--blue-l);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5}
.kyc-why .ic{flex:none;color:var(--blue);margin-top:1px}
.pd-bar{display:flex;gap:8px;align-items:stretch}
.pd-bar .pd-main{flex:1;justify-content:center}
.pd-save[aria-pressed="true"]{color:#D6336C;border-color:#F3C1D3;background:#FFF1F6}
.pd-save[aria-pressed="true"] .ic{fill:currentColor}
.seller-box{display:grid;gap:12px;padding:16px}
.sb-top{display:flex;gap:12px;align-items:center}
.sb-av{flex:none;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 17px var(--f-display)}
.sb-t{display:grid;gap:2px;min-width:0}
.sb-t b{font-size:15px}
.sb-badge{display:inline-flex;align-items:center;gap:5px;color:#0E7A4F;font-weight:600;font-size:12.5px}
.sb-t .muted{font-size:12.5px}
.seller-box .contact-row{margin:0}
.seller-box .report-link{justify-self:start;padding:0}
@media (max-width:699px){
  .scrim .sheet:has(.pd){padding-bottom:0}
  .gal-main{aspect-ratio:auto;height:min(52vh,440px)}
  .pd-img{aspect-ratio:auto;height:min(46vh,400px)}
  .pd-info h2{font-size:22px}
  .pd-bar{position:sticky;bottom:0;z-index:3;margin:0 -22px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);order:99}
  .pd-save span{display:none}
}

/* ---- round 2: bag ---- */
.btn-block{width:100%;justify-content:center}
.bag-items{display:grid;gap:12px;margin-bottom:18px}
.bag-items .cart-group{margin:0}
.cg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cg-head .muted{font-size:13px}
.ci-r{display:grid;justify-items:end;gap:2px;font-size:14px;font-weight:600}
.ci-r .link-btn{font-size:12.5px;font-weight:500;color:var(--muted)}
.bag-sec{margin-bottom:16px}
.bag-sec h3{font-size:16px;margin:0 0 10px}
.bag-sum{background:var(--soft);border-radius:16px;padding:16px;display:grid;gap:8px;margin-bottom:12px}
.bs-who{font-size:14px}
.bs-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.bs-tot{color:var(--ink);font-weight:800;font-size:17px;border-top:1px solid var(--line);padding-top:10px;margin-bottom:4px}
.bag-note{margin-top:4px}

/* toasts sit at the top so they never cover buttons or forms */
.toast{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto}
@keyframes toastin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- round 2: phone tab bar ---- */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right,0px))}
  .tab{border:0;background:none;display:grid;justify-items:center;gap:2px;padding:4px 0;font:600 11px var(--f-body);color:var(--muted);min-height:48px}
  .tab[aria-current="page"]{color:var(--blue)}
  .tab-ic{position:relative;display:grid}
  .tab .hbadge{position:absolute;top:-5px;right:-10px}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .hextra{display:none}
  .hdr{padding-block:10px;gap:10px}
  .hsearch{height:42px}
  .hdr-inner .hsearch{display:none}
  .appbar-t small{display:none}
}

/* ---- round 2: add item ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pf-t em{position:absolute;left:4px;bottom:4px;background:rgba(11,27,58,.75);color:#fff;font:600 10.5px var(--f-body);font-style:normal;padding:2px 6px;border-radius:6px}
.pf-drop{width:76px;aspect-ratio:4/5;border:1.5px dashed #AFC3EA;border-radius:10px;background:var(--blue-xl);color:var(--blue);display:grid;place-content:center;justify-items:center;gap:4px;font-size:12px;font-weight:600;cursor:pointer;text-align:center}
.pf-drop:hover{background:var(--blue-l)}
.pf-thumbs:has(.pf-t) .pf-drop{width:76px}
.pf-thumbs:not(:has(.pf-t)) .pf-drop{width:100%;aspect-ratio:auto;height:132px;font-size:14px}
.size-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.size-chips .size{padding:7px 11px;font-size:13px}
@media (max-width:699px){.sheet:has(#product-form){max-height:100dvh;height:100dvh;border-radius:0}}

/* ---- round 2: admin ---- */
.setup{border:1px solid #F5D9A8;background:#FFF9EE;border-radius:14px;padding:14px 16px;display:grid;gap:8px;margin-bottom:16px}
.setup-i{display:flex;gap:10px;align-items:flex-start;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit}
button.setup-i{cursor:pointer}
.setup-i b{display:block;font-size:14px}
.setup-i small{color:var(--muted);font-size:12.5px}
.setup-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#E59A1A;margin-top:6px}
.needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.need{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;text-align:left;font:inherit;color:var(--muted);cursor:pointer;display:grid;gap:2px}
.need b{font:800 26px var(--f-display);color:var(--ink)}
.need.on{border-color:var(--blue);background:var(--blue-xl);color:var(--blue)}
.need.on b{color:var(--blue)}
.sgroups{display:grid;gap:18px}
.sgroup h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
@media (min-width:1000px){.sgroups{grid-template-columns:repeat(3,minmax(0,1fr))}.sgroups .stats{grid-template-columns:1fr}}
@media (max-width:560px){.needs{gap:8px}.need{padding:12px}.need b{font-size:22px}.need span{font-size:12px}.sgroups .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stat{padding:12px}.stat b{font-size:19px}}
@media (max-width:1100px){
  .arow{grid-template-columns:48px minmax(0,1fr)}
  .arow .acts{grid-column:1/-1;justify-content:flex-start;padding-top:8px;border-top:1px dashed var(--line)}
}
.dstats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
@media (max-width:620px){.dstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.calc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.calc-row input{width:86px;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:600 16px var(--f-body)}
.calc-x{color:var(--muted);font-weight:600}
.calc-row b{font:800 26px var(--f-display);color:var(--blue)}
.wl-card .btn,.appbar-btn{white-space:nowrap}

/* ---- round 3 ---- */
body.lock{overflow:hidden}
.pg-acts{display:flex;gap:8px;flex-wrap:wrap}
.empty-cta{display:grid;justify-items:start;gap:8px;padding:8px 0}
.empty-cta b{font-size:17px}
.form-bar{position:sticky;bottom:calc(-26px - env(safe-area-inset-bottom,0px));z-index:3;background:rgba(255,255,255,.97);border-top:1px solid var(--line);margin:4px -22px calc(-26px - env(safe-area-inset-bottom,0px));padding:12px 22px calc(14px + env(safe-area-inset-bottom,0px))}
.form-bar .btn-primary{flex:1;justify-content:center}
.setup-line{margin-top:18px;width:100%;display:flex;align-items:center;gap:10px;border:1px solid #F5D9A8;background:#FFF9EE;border-radius:12px;padding:12px 14px;font:inherit;font-size:13.5px;text-align:left;color:var(--ink);cursor:pointer}
.setup-line span:nth-child(2){flex:1}
.setup-line b{display:inline-flex;align-items:center;gap:2px;color:#9A5B00;white-space:nowrap}
.setup-dot{margin-top:0}
.order-buyer .o-note{grid-column:1/-1}
@media (max-width:760px){
  .navbar{display:none}
  .foot.slim{display:none}
}
@media (max-width:620px){
  .trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:14px}
  .ti{padding:10px 12px;gap:10px;border-radius:12px;align-items:flex-start}
  .ti .tic{width:34px;height:34px}
  .ti .tic .ic{width:18px;height:18px}
  .ti b{font-size:13px}
  .ti small{font-size:11.5px}
}
.foot-safe{display:grid;gap:6px}
.foot-safe li{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.foot-safe .ic{flex:none;color:var(--blue);margin-top:2px}
@media (max-width:620px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:18px}
  .foot-grid>div:first-child,.foot-grid .foot-wide{grid-column:1/-1}
  .foot-shop{display:none}
}
.btn-lg{padding:14px 22px;font-size:15.5px}
.sell-hero{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--blue) 0%,#0B3BB0 100%);color:#fff;border-radius:22px;padding:30px 32px}
.sell-hero h1{color:#fff}
.sell-hero p{margin:8px 0 14px;max-width:52ch;color:rgba(255,255,255,.85)}
.sell-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sell-price b{font:800 34px var(--f-display)}
.sell-price span{color:rgba(255,255,255,.85);font-size:14px}
.sell-cta{display:grid;gap:10px;min-width:240px}
.sell-cta .btn-primary{background:#fff;color:var(--blue);justify-content:center}
.sell-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);justify-content:center}
.sell-steps{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.sell-steps li{border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:4px;align-content:start}
.ss-n{width:38px;height:38px;border-radius:10px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;margin-bottom:6px}
.sell-steps b{font-size:14.5px}
.sell-steps small{color:var(--muted);font-size:13px;line-height:1.4}
@media (max-width:620px){.sell-hero{padding:24px 20px;border-radius:18px}.sell-cta{width:100%}.sell-steps{grid-template-columns:1fr 1fr}.sell-steps li{padding:12px}}
.kyc-prog{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;counter-reset:none}
.kyc-prog li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);border-top:3px solid var(--line);padding-top:8px}
.kyc-prog li span{flex:none;width:22px;height:22px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:11.5px;color:var(--muted)}
.kyc-prog li.done{color:#0E7A4F;border-top-color:#1F9D63}
.kyc-prog li.done span{background:#1F9D63;color:#fff}
.kyc-bar{margin:0;border-top:0;background:transparent;padding:0;position:static}
@media (max-width:760px){.kyc-bar{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);padding:10px 0;border-top:1px solid var(--line)}}
.kyc-bar .btn{width:100%;justify-content:center}
@media (max-width:420px){.kyc-prog li{font-size:11.5px;gap:6px}}

/* ---- round 4 ---- */
.notice b .ic{display:inline-block;vertical-align:-3px;margin-right:4px}
.pd-facts{display:flex;flex-wrap:wrap;gap:6px}
.fact{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--ink)}
.fact.ok{background:#E8F7EF;color:#0E7A4F}
.stars-sm{color:#E59A1A;font-weight:700}
.sb-rev{justify-self:start;padding:0;font-size:13px;font-weight:600;color:var(--blue)}
.stars{color:#E59A1A;letter-spacing:1px}
.rev-sum{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.rev-sum>b{font:800 40px var(--f-display)}
.rev-sum>span{display:grid;gap:2px}.rev-sum small{color:var(--muted);font-size:13px}
.revs{display:grid;gap:10px}
.rev{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.rev-top{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.rev p{margin:0;font-size:14px}
.rate-stars{display:flex;justify-content:center;gap:6px}
.rs{border:0;background:none;font-size:40px;line-height:1;color:#D5DCE8;padding:4px;cursor:pointer}
.rs.on{color:#E59A1A}
.rated{align-self:center;font-size:12.5px;color:#9A5B00;font-weight:600}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-weight:600;font-size:13.5px;cursor:pointer}
.seg input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.pf-row{align-items:start}
.pf-row select,.pf-row input{height:46px}
.bs-wa{margin-top:-2px}
.cart-item .t b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kyc-fig img{object-fit:contain!important;background:#0B1B3A}
.filter-btn{display:none}
.admin-tabs .chip{white-space:nowrap}
@media (max-width:760px){
  .hero-side{display:none}
  .hero-main{padding:24px 20px 52px}
  .hero-copy h1{font-size:26px}
  .hero-copy p{font-size:14px;margin-bottom:14px}
  .hero-art{height:150px!important;margin-top:14px!important}
  .trust{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px;scroll-snap-type:x mandatory}
  .trust .ti{flex:0 0 auto;width:auto;max-width:72%;scroll-snap-align:start;align-items:center}
  .ti small{display:none}
  .filter-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;font:600 13.5px var(--f-body);color:var(--ink);margin-bottom:12px}
  .filter-btn em{font-style:normal;background:var(--blue);color:#fff;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11.5px}
  .toolbar{display:none}
  .toolbar.open{display:flex}
  .admin-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .admin-tabs .chip{flex:none}
  .page>.panel{padding:16px 14px}
  .pf-row{grid-template-columns:1fr}
  .toast{top:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  @keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
}
@media (min-width:761px){.toast{top:auto;bottom:24px}}
.wl-foot .link-btn{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
@media (max-width:620px){.wl-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wl-foot .dotsep{display:none}.wl-foot>span:first-child{grid-column:1/-1;text-align:center}.wl-foot .link-btn{justify-content:center;border:1px solid var(--line);border-radius:10px;padding:11px;text-decoration:none;color:var(--ink);font-weight:600}.wl-foot [data-install]{grid-column:1/-1;background:var(--blue-xl);color:var(--blue);border-color:#C9D8FB}}

/* ---- round 5 ---- */
.pd-bar-price{margin-left:auto;padding-left:10px;border-left:1px solid rgba(255,255,255,.35);font-weight:700}
.more-menu{position:relative}
.more-menu summary{list-style:none;min-width:38px;justify-content:center;font-weight:800;letter-spacing:1px}
.more-menu summary::-webkit-details-marker{display:none}
.mm-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(11,27,58,.14);padding:6px;display:grid;min-width:180px}
.mm-pop button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:8px;font:500 14px var(--f-body);color:var(--ink);cursor:pointer}
.mm-pop button:hover{background:var(--soft)}
.mm-pop .bad-t{color:#C0352B}
@media (max-width:1100px){.mm-pop{left:0;right:auto}}
.arow-btn{width:100%;text-align:left;background:#fff;font:inherit;color:inherit;cursor:pointer}
.arow-btn:hover{border-color:#C9D8FB}
.flabel{font-weight:600;font-size:13.5px}
.rq-star{font-style:normal;color:#C0352B}
.qty-sm{display:inline-flex;margin-top:6px}
.qty-sm button{width:30px;height:30px}
.qty-sm button:disabled{opacity:.35}
.cart-item .t>span{display:block}
.seg-wide{display:grid;grid-template-columns:1fr 1fr}
.seg-wide span{display:grid;gap:2px;padding:12px 14px}
.seg-wide small{font-weight:500;font-size:12px;opacity:.8}
.kyc-figs .kyc-fig img{height:340px}
.dstats .stat{background:#fff}
.happ-t{display:none}
@media (min-width:1101px){.happ{width:auto;padding:0 12px;gap:6px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:40px}.happ-t{display:inline;font:600 13px var(--f-body)}}
@media (max-width:760px){
  .hero-nav{display:none!important}
  .hero-main{padding:22px 20px 40px;min-height:0}
  .dots{bottom:16px!important}
  .gal-main{height:min(42vh,360px)}
  .pd-img{height:min(40vh,340px)}
  .admin-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .dstats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.hphone b{font-size:14px}.hphone small{font-size:12px}
.cart-item .t>.qty-sm{display:inline-flex}
/* the bag's − 1 + looks like NileFood's basket: a soft pill with round buttons */
.cart-item .qty-sm{border:0;background:var(--blue-l);border-radius:999px;padding:3px;gap:2px}
.cart-item .qty-sm button{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--blue);font-size:18px;font-weight:700;line-height:1;box-shadow:0 1px 2px rgba(11,27,58,.08)}
.cart-item .qty-sm span{min-width:24px}

/* ---- round 6 ---- */
.pd-bar .btn{white-space:nowrap}
.sb-links{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.sb-links .link-btn{padding:0;font-size:13px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:4px}
.sb-links .report-link{color:var(--muted);font-weight:500}
.seller-box>.report-link{display:none}
.deals .sizes{margin-top:8px}
.deal{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;display:grid;text-align:left;font:inherit;cursor:pointer}
.deal b{font-size:13.5px}.deal small{font-size:11.5px;color:#0E7A4F;font-weight:600}
.deal[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-xl)}
.deal-row{display:flex;align-items:center;gap:8px}
.deal-row input{flex:1;min-width:0}
.deal-row span{color:var(--muted);font-size:13px;white-space:nowrap}
.tb-grp{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.kyc-zoom{display:block;position:relative;width:100%;border:0;padding:0;background:#EEF1F6;border-radius:12px;overflow:hidden;cursor:zoom-in}
.kyc-zoom img{display:block;width:100%;height:340px;object-fit:contain!important;background:#EEF1F6!important}
.kyc-zoom span{position:absolute;right:8px;bottom:8px;display:inline-flex;gap:4px;align-items:center;background:rgba(11,27,58,.75);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px}
.zoom{position:fixed;inset:0;z-index:80;background:rgba(5,12,28,.92);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.zoom .close{position:absolute;top:16px;right:16px;background:#fff}
.admin-sel{display:none}
.dstats-h{margin-top:16px}
.dstats-h+.dstats{margin-top:6px}
.cat>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){
  .admin-tabs{display:none}
  .admin-sel{display:block;margin-bottom:14px}
  .admin-sel select{width:100%;height:46px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font:600 15px var(--f-body);background:#fff}
  .arow{position:relative}
  .arow .more-menu{position:absolute;top:10px;right:10px}
  .arow .acts:not(:has(> :not(.more-menu))){padding:0;border:0;min-height:0;gap:0}
  .arow:has(.more-menu) .t{padding-right:44px}
}
@media (max-width:420px){
  .pd-bar [data-chat-seller]:not(.pd-main){padding-inline:14px}
  .pd-bar [data-chat-seller]:not(.pd-main) span{display:none}
}

/* ---- round 7 ---- */
.setup-steps{margin-top:16px;border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px;background:#fff}
.setup-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.setup-steps li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.setup-steps li.done{color:var(--ink)}
.setup-steps .btn{justify-self:start}
.bundle-note{font-size:12px;color:#0E7A4F;font-weight:600}
.ci-r s{font-size:12px;font-weight:500}
.sw{display:inline-flex;align-items:center;gap:6px}
.swd{width:14px;height:14px;border-radius:50%;border:1px solid rgba(11,27,58,.2);display:inline-block}
.size.sw[aria-pressed="true"] .swd{border-color:#fff}
.kyc-foot{position:sticky;bottom:calc(-26px - env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);margin:12px -22px calc(-26px - env(safe-area-inset-bottom,0px));padding:12px 22px calc(14px + env(safe-area-inset-bottom,0px));z-index:3}
.kyc-zoom img{height:280px}
.need em{font-style:normal;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:2px;margin-top:4px}
.mrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.mrow .muted{margin-left:auto;font-size:12.5px}
.odot{width:8px;height:8px;border-radius:50%;background:#1F9D63;flex:none}
.deal-t{color:#0E7A4F;font-weight:600}

/* ---- round 8 ---- */
@media (max-width:760px){
  .hero-main{flex-direction:row!important;align-items:center!important;gap:14px;padding:18px 16px 34px!important}
  .hero-copy{min-width:0;flex:1}
  .hero-copy h1{font-size:21px!important;line-height:1.15}
  .hero-copy p{display:none}
  .hero-copy .btn{padding:10px 14px;font-size:13.5px}
  .hero-art{display:block!important;position:relative!important;width:108px!important;height:136px!important;flex:none;margin:0!important;inset:auto!important}
  .hero-art .g2,.hero-art .g3,.hero-art .blob{display:none!important}
  .hero-art .g1{position:absolute;left:0!important;top:0!important;right:auto!important;width:100%!important;transform:rotate(3deg);border-width:3px}
  .dots{left:16px!important;bottom:14px!important}
  .ti b{font-size:13px}
}
.ti small{font-size:13px;color:#4A5873}
.chips{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:24px}
.pname{min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pbody{display:flex;flex-direction:column}
.pfoot{margin-top:auto}
.cat>span:last-child{-webkit-line-clamp:3}
@media (max-width:620px){.kyc .row2{grid-template-columns:1fr}}
.prof-empty{padding:16px}
@media (max-width:760px){.trust{padding-left:16px;padding-right:16px;scroll-padding-left:16px}}

/* ---- round 9 ---- */
.setup-steps li{display:block}
.st-row{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:6px 4px;border:0;background:none;font:inherit;color:inherit;text-align:left;border-radius:10px}
button.st-row{cursor:pointer}
button.st-row:hover{background:var(--soft)}
.st-row .st-l{flex:1}
.st-row>.ic{color:var(--muted)}
.st-dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.setup-steps li.done .st-dot{background:#1F9D63;border-color:#1F9D63;color:#fff}
.setup-steps li.done .st-l{color:var(--muted)}
.setup-steps li:not(.done) .st-l{color:var(--ink);font-weight:600}
.st-next{font-style:normal;font-size:11px;font-weight:700;background:var(--blue);color:#fff;border-radius:999px;padding:2px 8px}
.cchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--blue);background:var(--blue-xl);border-radius:10px;padding:4px 4px 4px 10px;font-size:13.5px;font-weight:600}
.cchip button{width:28px;height:28px;border:0;border-radius:8px;background:#fff;font-size:16px;font-weight:700;color:var(--blue);cursor:pointer}
#pd-choices.flash{animation:flashc 1s ease 2}
@keyframes flashc{50%{background:#FFF4D6;box-shadow:0 0 0 8px #FFF4D6;border-radius:8px}}
span.deal{cursor:default}
span.deal.on{border-color:#1F9D63;background:#E8F7EF}
@media (max-width:760px){.kyc-bar{position:static!important;border-top:0!important;padding:4px 0 0!important;background:none!important}}
.kyc-priv{display:flex;gap:6px;align-items:center}
.kyc-priv .ic{color:#0E7A4F;flex:none}
@media (max-width:640px){.wl-ph{height:110px!important}.wl-t{font-size:13.5px}}
.vtick{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#1F9D63;color:#fff;margin-left:4px;vertical-align:-2px}
.btn-icon{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){
  .admin-tabs{display:flex!important}
  .admin-sel{display:none!important}
  .btn-icon span{display:none}
  .btn-icon{padding:10px}
  .pg-head{flex-wrap:nowrap;align-items:flex-start}
}
.need.on{border-color:#F0B44C;background:#FFF7E6;color:#8A5300}
.need.on b{color:#8A5300}
.fee-note{display:flex;gap:10px;align-items:flex-start;background:var(--blue-xl);border:1px solid #D6E2FC;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45}
.fee-note .ic{color:var(--blue);flex:none;margin-top:1px}
.prof-orders-empty{min-height:0!important}
@media (max-width:699px){.gal-main{height:min(36vh,300px)!important}.pd-img{height:min(34vh,290px)!important}}
.pd-desc{margin:0;color:#33415C;line-height:1.55}

/* ---- round 10 ---- */
.admin-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--blue);background:var(--blue-xl);border:1px solid #D6E2FC;border-radius:999px;padding:6px 12px}
.bundle-note{display:inline-block;background:#E8F7EF;border-radius:999px;padding:2px 8px;margin-top:4px;white-space:nowrap}
.deal-badge{pointer-events:none;position:absolute;right:10px;bottom:10px;z-index:2;background:#0E7A4F;color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px}
.sh-acts{display:flex;gap:8px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.icon-btn:hover{color:#C0352B;border-color:#F3C1C1}
.mm-pop a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none}
.mm-pop a:hover{background:var(--soft)}
.contact-row .more-menu .mm-pop{left:0;right:auto}
.ochips{display:flex;flex-wrap:wrap;gap:8px}
.ochip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600}
.ochip small{color:var(--muted);font-weight:500}
.panel.flat{background:none;border:0;box-shadow:none;padding:0}
.trust{-webkit-mask-image:none}
@media (max-width:760px){
  .trust{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .pg-head{flex-wrap:wrap!important}
  .pg-head>div:first-child{flex:1 1 100%}
  .pg-acts{width:100%}
  .pg-acts .btn{flex:1;justify-content:center}
  .admin-badge{display:none}
}
@media (max-width:760px){.pg-head:has(>.btn-icon){flex-wrap:nowrap!important}.pg-head:has(>.btn-icon)>div:first-child{flex:1 1 auto}}

/* round 11 */
.pd-bar{flex-wrap:wrap}
.pd-sum{flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;align-items:center;text-align:left;background:var(--blue-xl);border:1px solid var(--blue-l);border-radius:10px;padding:7px 12px;font:500 13px/1.35 var(--f-body);color:var(--ink);cursor:pointer}
.pd-sum b{color:var(--ok);font-weight:600}
.sb-links .danger-link{color:var(--muted);font-weight:500}
.sb-links .danger-link:hover{color:var(--danger)}
@media (max-width:760px){
  .trust{display:grid!important;grid-template-columns:1fr 1fr;overflow:visible;-webkit-mask-image:none;mask-image:none;gap:8px}
  .trust .ti{max-width:none;padding:9px 10px;gap:8px}
  .trust .ti b{font-size:12.5px;line-height:1.25}
}
.kyc-auto{display:flex;gap:8px;align-items:flex-start;background:#EAF7EF;color:var(--ok);border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:500;margin:0 0 10px}
.kyc-auto .ic{flex:none;margin-top:1px}
.stat{position:relative;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.stat:hover{border-color:var(--blue);background:#fff}
.stat-go{position:absolute;top:12px;right:12px;color:var(--muted);font-style:normal;display:flex}
.ad-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ad-tools .ad-q{flex:1;max-width:none;margin:0}
.ad-tools .btn{flex:none}
.chip-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:rgba(11,27,58,.08);font-size:11.5px;line-height:18px;text-align:center}
.chip[aria-pressed="true"] .chip-n{background:rgba(255,255,255,.25)}
@media (max-width:560px){.ad-tools{flex-wrap:wrap}.ad-tools .btn{order:-1;margin-left:auto}}
@media (max-width:560px){
  .admin-tabs.dash-tabs{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;overflow:visible;margin-inline:0;padding:4px;background:var(--soft);border-radius:12px;-webkit-mask-image:none;mask-image:none}
  .dash-tabs .chip{padding:8px 4px;font-size:12.5px;justify-content:center;border:0;background:none;white-space:nowrap}
  .dash-tabs .chip[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,27,58,.12)}
}
.boost-head{margin:36px 0 16px}
.boost-head h2{margin:0}
.boost-head h2 .opt{font:500 15px var(--f-body)}
.boost-head p{margin:6px 0 0;max-width:60ch}
.boost-cta{margin-top:16px;display:flex;justify-content:center}
#prof-form>button[type=submit]{justify-self:start;align-self:flex-start;width:auto}

.seg-fill{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.seg-fill span{text-align:center}
@media (max-width:560px){
  .stats.dstats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
  .dstats .stat{padding:10px 8px;text-align:center}
  .dstats .stat b{font-size:18px}
  .dstats .stat span{font-size:11px;line-height:1.2;display:block}
}
.st-wait{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--warn);background:#FFF6E0;border-radius:999px;padding:3px 9px}
.share-card{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--blue-xl)}
.share-card .sc-ic{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;flex:none}
.share-card div{flex:1;min-width:0}
.share-card b{display:block;font:700 14.5px var(--f-display)}
.share-card small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
@media (max-width:560px){.stat-go{display:none}}
@media (max-width:760px){
  .admin-tabs:not(.dash-tabs){flex-wrap:wrap!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;margin-inline:0!important;padding-inline:0!important;gap:6px}
  .admin-tabs:not(.dash-tabs) .chip{padding:7px 12px;font-size:13px}
}
.contact-3{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px}
.contact-3 .btn{justify-content:center}
.pd-sum em{flex-basis:100%;font-style:normal;font-size:12.5px;color:var(--blue)}
.wait-t{color:var(--warn)!important;font-weight:600}
.cats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.panel.flat>.setup-line:first-child{margin-top:0}
@media (max-width:760px){
  .admin-tabs:not(.dash-tabs){display:grid!important;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px!important;background:var(--soft);border-radius:12px}
  .admin-tabs:not(.dash-tabs) .chip{justify-content:center;text-align:center;border:0;background:none;padding:8px 4px;font-size:13px;white-space:nowrap}
  .admin-tabs:not(.dash-tabs) .chip[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,27,58,.12)}
}
/* round 12 */
.cart-item .t .bundle-note{color:#0E7A4F;width:max-content;max-width:100%;white-space:nowrap}
.ci-r .ci-price{color:var(--ink);font-weight:700;font-size:15px}
.btn-wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn-wa:hover{background:#178F47;border-color:#178F47;color:#fff}
.sb-t .sb-rev{padding:0;font:inherit;color:var(--blue);font-weight:600;text-decoration:underline}
.tab-n{font-style:normal;display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#F5A524;color:#fff;font-size:11.5px;font-weight:700;line-height:18px;text-align:center}
.pmeta{min-height:1.3em}
@media (max-width:760px){
  .welcome{padding-bottom:20px}
}
@media (max-width:560px){
  .share-card{flex-wrap:wrap}
  .share-card div{flex:1 1 calc(100% - 56px)}
  .share-card .btn{flex:1 0 100%;justify-content:center}
}
.hsearch.hs-admin{background:none!important;border:0!important;box-shadow:none!important;display:flex;align-items:center;padding:0}
@media (max-width:760px){.hsearch.hs-admin{display:none!important}}
/* round 13: tighter phone home */
@media (max-width:560px){
  .trust{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;padding-top:12px}
  .trust .ti{flex-direction:column;align-items:center;text-align:center;padding:8px 4px!important;gap:4px!important;border-radius:12px}
  .trust .ti .tic{width:28px;height:28px}
  .trust .ti .tic .ic{width:15px;height:15px}
  .trust .ti b{font-size:11px!important;line-height:1.2;font-weight:600}
  .cat{flex:0 0 76px!important;padding:8px 2px 6px!important;gap:6px!important;background:none!important;font-size:11.5px}
  .cat .cat-ph{width:58px;height:58px;box-shadow:0 3px 8px rgba(11,27,58,.12)}
  .cat small{display:none}
  .cat[aria-pressed="true"] .cat-ph{outline:2px solid var(--blue);outline-offset:2px}
  .sb-links .danger-link{flex-basis:100%;font-size:12px}
}
.bag-next{margin:14px 0 0;padding:12px 14px 12px 32px;background:var(--soft);border-radius:12px;font-size:13px;color:var(--ink);display:grid;gap:4px}
.bag-next li::marker{color:var(--blue);font-weight:700}
.view-shop{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;font-size:13.5px;font-weight:600;color:var(--blue)}
@media (max-width:560px){.bag-sec .row2{grid-template-columns:1fr}}
.pfoot{padding-top:6px}
/* round 14 */
@media (max-width:620px){.wl-foot{grid-template-columns:1fr}}
@media (min-width:761px){#products .chips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:0}}
.pname{min-height:0}
@media (min-width:561px){.pname{min-height:2.7em}}
@media (max-width:760px){
  .arow-btn{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center}
  .arow-btn .acts{border:0!important;padding:0!important;margin:0!important;grid-column:auto!important;width:auto!important}
}
/* departments */
.menu-pop.menu-depts{width:min(1080px,calc(100vw - 48px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 18px;padding:18px 18px 14px;max-height:min(78vh,720px);overflow:auto}
.md{display:flex;flex-direction:column;min-width:0;margin-bottom:8px}
.md-h{display:flex;align-items:center;gap:8px;font:700 13.5px var(--f-display);color:var(--ink);padding:4px 6px 6px}
.md-h .mi-ic,.dept h3 .mi-ic{width:30px;height:30px;border-radius:9px;background:var(--blue-l);display:grid;place-items:center;flex:none}
.md-h .mi-ic svg,.dept h3 .mi-ic svg{width:22px;height:22px}
.menu-depts .mi{padding:6px 8px;font-size:13.5px;gap:8px;border-radius:8px}
.menu-depts .mi:hover{background:var(--soft)}
.menu-depts .mi-0{color:var(--muted)}
.dept-list{display:grid;gap:18px}
.dept h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 15px var(--f-display)}
.dept-cats{display:flex;flex-wrap:wrap;gap:8px}
.dc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font:500 13.5px var(--f-body);color:var(--ink);cursor:pointer}
.dc .num{font-size:11.5px;color:var(--muted)}
.dc:hover{border-color:var(--blue)}
.dc-0{color:var(--muted)}
@media (max-width:1100px){.menu-pop.menu-depts{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* orders and transfers */
.form-h{font:700 15px var(--f-display);margin:10px 0 0}
.my-orders{display:grid;gap:12px}
.my-order{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:8px;background:#fff}
.my-order.cancelled{opacity:.65}
.mo-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mo-top b{display:block;font-size:14.5px}
.mo-top .muted{font-size:12.5px}
.mo-items{font-size:13px;color:var(--muted)}
.my-order .acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.paybox{display:grid;gap:8px;background:var(--blue-xl);border:1px solid var(--blue-l);border-radius:12px;padding:12px;font-size:13.5px}
.paybox.cash,.paybox.wait{display:flex;gap:8px;align-items:flex-start;background:var(--soft);border-color:var(--line);color:var(--ink)}
.paybox.cash .ic,.paybox.wait .ic{flex:none;margin-top:1px;color:var(--muted)}
.paybox.claim{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#FFF9EE;border-color:#F5D9A8;margin:8px 0}
.paybox.claim>.ic{color:var(--warn)}
.paybox.claim span{flex:1 1 220px}
.paybox.claim .acts{flex:1 0 100%}
.paybox.done{background:#EEF8F2;border-color:#CBEBD8}
.paybox .bank{display:grid;gap:2px}
.paybox .bank b{font:700 16px var(--f-display)}
.paybox .bank .copy-num{font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:4px}
.paybox .hint{margin:0}
.paybox .btn{justify-self:start}
.pay-ok{color:var(--ok);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.pay-wait{color:var(--warn);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.pay-bad{color:var(--danger);font-weight:600}
.pay-hint{display:flex;gap:6px;align-items:flex-start;margin:-4px 0 0}
.pay-hint .ic{flex:none;color:var(--ok);margin-top:2px}
.paybox .bank,.paybox .bank *{font-family:var(--f-body)}
.paybox .bank .label{letter-spacing:.04em;font-size:11.5px}
.paybox .bank b{font-family:var(--f-display)}
.paybox .bank .copy-num{text-decoration:none;border:0;background:none;padding:0;font-size:15px;letter-spacing:.02em}
.mo-top .pill{flex:none;white-space:nowrap}
.o-ph2{display:block;font-size:13px;margin-top:2px;color:var(--blue)}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:72px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--blue);font:inherit;font-weight:600;font-size:14px;padding:8px 10px;cursor:pointer;border-radius:8px}
.pw-eye:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.wallet{border:1px solid var(--line,#e3e8f2);border-radius:14px;padding:14px 16px;margin-bottom:16px;background:var(--blue-xl)}
.wallet .w-top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wallet .w-top>div{display:grid;gap:2px}
.wallet .w-top b{font-size:24px}
.wallet .w-list{margin-top:10px;display:grid;gap:6px;border-top:1px dashed var(--line,#d5dcea);padding-top:10px}
.wallet .w-row{display:flex;gap:10px;align-items:center;font-size:14px}
.wallet .w-row span:first-child{flex:1}
.pill.paidout{background:#e6f6ec;color:#17733a}
.arow.esc-row{grid-template-columns:minmax(0,1fr)}
.arow.esc-row .t{display:grid;gap:4px}
.arow.esc-row .acts{justify-content:flex-start}
.more-sentinel{height:1px}
/* People in search results */
.people{margin-bottom:16px}
.people .label{display:block;margin-bottom:8px}
.people-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.person{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:#FFFFFF;border-radius:var(--r);padding:12px 14px;color:var(--ink);min-width:0}
.person:hover{border-color:#C7D5F2}
.person.on{background:var(--blue-xl);border-color:#C7D5F2}
.p-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue-xl);color:var(--blue,#1D4ED8);font-weight:700}
.person.on .p-av{background:#FFFFFF}
.p-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-t b{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-t small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-x{flex:none;color:var(--muted)}

/* ---------- collectors ---------- */
.seg-wide.seg-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){.seg-wide.seg-3{grid-template-columns:1fr}}
.cjobs{display:grid;gap:12px;margin-bottom:16px}
.cjob{border:1px solid var(--blue-l);border-radius:14px;padding:14px;display:grid;gap:10px;background:#fff}
.cjob.delivered,.cjob.cancelled{border-color:var(--line)}
.cj-code{display:grid;justify-items:center;gap:2px;padding:12px;border-radius:12px;background:var(--blue-xl);border:1px dashed var(--blue);text-align:center}
.cj-code b{font-family:var(--f-display);font-size:32px;letter-spacing:.3em;color:var(--blue-d);padding-left:.3em}
.cj-code small{color:var(--muted);font-size:12px}
.cj-who{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px}
.cj-who>span{flex:1 1 180px}
.cj-who .ic{color:var(--blue)}
.cj-stops{display:grid;gap:6px}
.cj-stop{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13.5px}
.cj-h{margin:22px 0 10px;display:flex;gap:8px;align-items:baseline}
.cj-h .muted{font-size:14px;font-weight:600}
.cj-open{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cj-card{display:grid;gap:10px;margin-bottom:12px}
.cj-open .cj-card{margin-bottom:0}
.cj-earn{color:var(--ok);font-size:18px}
.cj-how{margin:0 0 14px}
.cj-steps{display:grid;gap:0}
.cj-step{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.cj-step .t{display:grid;gap:4px;justify-items:start}
.cj-step .t>b{font-size:14.5px}
.cj-step .pill{justify-self:start}
.cj-step.off{opacity:.55}
.cj-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:700;font-size:13px;color:var(--ink)}
.cj-step.done .cj-n{background:var(--ok);color:#fff}
.cj-deliver{display:flex;gap:8px;margin-top:4px}
.cj-deliver input{width:130px;font-size:18px;letter-spacing:.25em;text-align:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-family:var(--f-display)}
#cj-settings .row2{align-items:start}
.my-order .hint .ic,.cj-step .hint .ic{display:inline;vertical-align:-2px}
/* Terms and conditions */
.terms{max-width:760px;padding-block:32px 48px}
.terms h1{font-family:var(--f-display);font-size:clamp(28px,5vw,40px);margin:6px 0 8px}
.terms h2{font-size:18px;margin:26px 0 6px}
.terms p{line-height:1.65;margin:0}
.terms a{color:var(--blue)}
.foot-terms{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}
/* Student or outside seller choice on the shop form */
.kyc-who{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;background:var(--blue-xl);border:1px solid var(--blue-l)}
.kyc-who button{border:0;background:none;border-radius:9px;padding:10px 8px;font-weight:600;font-size:14px;color:var(--muted)}
.kyc-who button[aria-pressed="true"]{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}

/* ---- admin, redesigned 2026-10-25: side menu on desktop, section switcher on phones ---- */
.adm{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;padding:22px max(28px,env(safe-area-inset-right,0px)) 60px max(28px,env(safe-area-inset-left,0px));background:var(--soft);min-height:calc(100vh - 70px)}
.adm-side{position:sticky;top:88px;align-self:start;display:grid;gap:4px;max-height:calc(100vh - 110px);overflow:auto;padding-bottom:8px}
.adm-brand{display:flex;align-items:center;gap:8px;font:800 15px var(--f-display);color:var(--blue);padding:4px 12px 8px}
.adm-nav{display:grid;gap:14px}
.adm-grp{display:grid;gap:2px}
.adm-gt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 12px 4px}
.adm-link{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;border-radius:10px;padding:9px 12px;font:600 14px var(--f-body);color:var(--ink);cursor:pointer;text-align:left}
.adm-link .ic{color:var(--muted);flex:none}
.adm-link span{flex:1}
.adm-link:hover{background:#fff}
.adm-link[aria-current="page"]{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(11,27,58,.08)}
.adm-link[aria-current="page"] .ic{color:var(--blue)}
.adm-n{font-style:normal;font-size:11.5px;font-weight:800;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#FFE9C7;color:#8A5300;display:inline-grid;place-items:center}
.adm-shop{margin-top:10px;border-top:1px solid var(--line);border-radius:0;padding-top:14px}
.adm-main{min-width:0;display:grid;gap:16px;align-content:start}
.adm-top{display:flex;align-items:center;gap:14px}
.adm-tt{flex:1;min-width:0}
.adm-tt h1{font:800 26px var(--f-display);margin:0;letter-spacing:-.01em}
.adm-tt p{margin:2px 0 0;font-size:13.5px}
.adm-switch{display:none}
.adm-drop{display:none}
.adm-refresh{flex:none;background:#fff}
.adm-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.adm-body{padding:20px}
.adm-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14px;margin-bottom:10px}
.adm-ch b{font:800 17px var(--f-display)}
.adm-h{font:800 15px var(--f-display);margin:8px 0 -4px;display:flex;gap:8px;align-items:baseline}
.adm-hello{font:700 17px var(--f-display);margin:0;color:var(--ink)}
.adm-main>.setup-line{margin-top:0}
.adm-needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.adm-need{display:flex;align-items:center;gap:10px;border:1px solid #F0C98A;background:#FFF8EC;border-radius:14px;padding:12px 14px;font:inherit;color:#7A4A00;cursor:pointer;text-align:left}
.adm-need b{font:800 22px var(--f-display)}
.adm-need span:not(.adm-ni){flex:1;font-size:13.5px;font-weight:600;line-height:1.25}
.adm-need:hover{border-color:#E0A84A}
.adm-ni{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none}
.adm-ok{display:flex;align-items:center;gap:10px;background:#EAF7EF;border:1px solid #BFE5CD;color:#11613A;border-radius:14px;padding:12px 14px;font-weight:600;font-size:14px}
.adm-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.adm-qa{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 10px;font:600 14px var(--f-body);color:var(--ink);cursor:pointer}
.adm-qa .ic{color:var(--blue)}
.adm-qa:hover{border-color:var(--blue)}
.adm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.adm-kpi{display:grid;gap:2px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer}
div.adm-kpi{cursor:default}
button.adm-kpi:hover{border-color:var(--blue)}
.adm-kpi span{font-size:12.5px;font-weight:600;color:var(--muted)}
.adm-kpi b{font:800 24px var(--f-display);letter-spacing:-.01em}
.adm-kpi small{font-size:12px;color:var(--muted)}
.adm-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
.adm-kpis-3 .adm-kpi{background:var(--soft)}
.adm-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.adm-chart svg{width:100%;height:auto;display:block;overflow:visible}
.adm-chart .adm-base{stroke:var(--line);stroke-width:1}
.adm-chart path{fill:var(--blue)}
.adm-bar:hover path{fill:var(--blue-d)}
.adm-chart text{font-size:9px;fill:var(--muted);font-family:var(--f-body)}
.adm-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;align-items:start}
.adm-mini-list{display:grid}
.adm-li{display:flex;align-items:center;gap:10px;padding:9px 0;border:0;border-top:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;width:100%}
.adm-mini-list>.adm-li:first-child{border-top:0}
button.adm-li{cursor:pointer}
button.adm-li:hover .adm-li-t b{color:var(--blue)}
.adm-li-t{flex:1;min-width:0;display:grid}
.adm-li-t b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-li-t small{font-size:12px;color:var(--muted)}
.adm-rank{width:24px;height:24px;border-radius:8px;background:var(--blue-xl);color:var(--blue);font-weight:800;font-size:12px;display:grid;place-items:center;flex:none}
.adm-tools,.ad-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.adm-tools .ad-q,.ad-tools .ad-q{flex:1 1 260px;max-width:none;margin:0;height:42px;padding:0 14px 0 38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6E8A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50%;border-radius:12px}
.adm-sort{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.adm-sort select{height:42px;border:1px solid var(--line);border-radius:12px;padding:0 10px;font:600 14px var(--f-body);background:#fff;color:var(--ink)}
.adm-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.adm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 13px var(--f-body);color:var(--ink);cursor:pointer;white-space:nowrap}
.adm-chip span{font-size:11.5px;color:var(--muted);background:var(--soft);border-radius:999px;padding:0 7px;min-width:20px;text-align:center}
.adm-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.adm-chip[aria-pressed="true"] span{background:rgba(255,255,255,.18);color:#fff}
.adm-empty{padding:28px 12px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
.adm .arow{background:#fff}
.adm-av{border-radius:50%!important;background:var(--blue-xl);width:44px;height:44px;display:grid;place-items:center;position:relative;font-size:14px}
.adm-av.on::after{content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#1F9D63;border:2px solid #fff}
.adm-av.plus{background:#FFF3D6;color:#8A5B00}
.adm-row .t>b{display:flex!important;align-items:center;gap:6px;flex-wrap:wrap;white-space:normal!important}
.adm-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);background:var(--blue-xl);border-radius:6px;padding:2px 6px}
.plus-tag{display:inline-flex;align-items:center;gap:3px;margin-left:6px;vertical-align:1px;font:800 10px var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:#7A4E00;background:linear-gradient(135deg,#FFE7A3,#F6C453);border-radius:6px;padding:2px 6px;line-height:1.3}
.adm-row .plus-tag,.adm-li .plus-tag{margin-left:0}
.adm-plus-hero{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#FFF6DD,#FFFDF6);border:1px solid #F3D891;border-radius:16px;padding:16px 18px}
.adm-plus-hero ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:#5A4410}
.adm-plus-hero b{font:800 16px var(--f-display)}
.adm-plus-ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#FFE7A3,#F6C453);color:#7A4E00;display:grid;place-items:center;flex:none}
.adm-body>.panel-sub:first-child{margin-top:0}
@media (max-width:1180px){.adm-cols{grid-template-columns:1fr 1fr}.adm-cols>:first-child{grid-column:1/-1}}
@media (max-width:900px){
  .adm{grid-template-columns:1fr;padding:12px max(16px,env(safe-area-inset-right,0px)) 90px max(16px,env(safe-area-inset-left,0px));gap:12px}
  .adm-side{display:none}
  .adm-top{flex-wrap:wrap;gap:10px;position:sticky;top:64px;z-index:6;background:var(--soft);padding:6px 0;margin:-6px 0 0}
  .adm-switch{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 14px;font:700 15px var(--f-body);color:var(--ink);cursor:pointer;order:1}
  .adm-switch span{flex:1;text-align:left}
  .adm-switch .ic:first-child{color:var(--blue)}
  .adm-switch[aria-expanded="true"]>.ic:last-child{transform:rotate(180deg)}
  .adm-refresh{order:2;height:44px}
  .adm-refresh span{display:none}
  .adm-tt{order:3;flex-basis:100%}
  .adm-tt h1{display:none}
  .adm-tt p{font-size:13px}
  .adm-drop{display:block;order:4;flex-basis:100%;max-height:70vh;overflow:auto}
  .adm-charts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .adm-charts>*{scroll-snap-align:start}
  .adm-drop{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 16px 40px rgba(11,27,58,.14)}
  .adm-nav-m{grid-template-columns:1fr 1fr;gap:12px 10px}
  .adm-nav-m .adm-grp:first-child{grid-column:1/-1}
  .adm-nav-m .adm-link{padding:10px}
  .adm-nav-m .adm-link[aria-current="page"]{background:var(--blue-xl)}
  .adm-cols{grid-template-columns:1fr}
  .adm-quick{grid-template-columns:1fr 1fr}
  .adm-card,.adm-body{padding:14px}
  .adm-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;padding-inline:14px}
  .adm-chips::-webkit-scrollbar{display:none}
  .adm-kpis{grid-template-columns:1fr 1fr}
  .adm-kpi{padding:12px 14px}
  .adm-kpi b{font-size:21px}
  .adm-kpis-3{grid-template-columns:1fr 1fr}
  .adm-tools .ad-q,.ad-tools .ad-q{flex-basis:100%}
}
@media (max-width:420px){.adm-needs{grid-template-columns:1fr}}
@media (max-width:340px){.adm-nav-m{grid-template-columns:1fr}}
main:has(> .adm){background:var(--soft)}
.pf-one{display:block;margin-top:6px}
.pf-one .link-btn{display:inline;padding:0;margin-left:2px}
.split-row{display:flex;gap:12px;align-items:center}
.split-row img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--line,#eee)}
.split-row .field{flex:1;min-width:0}

/* shop pages (/s/<link>): banner, logo, tabs, sections, reviews, about */
.store{padding-bottom:56px}
.st-banner{height:clamp(130px,22vw,260px);background:var(--sunk);overflow:hidden;max-width:1240px;margin:16px auto 0;border-radius:20px}
@media (max-width:1272px){.st-banner{margin:12px 16px 0}}
.st-banner img{width:100%;height:100%;object-fit:cover;display:block}
.st-banner.none{background:linear-gradient(120deg,var(--blue) 0%,#3B78FF 55%,#8FB5FF 100%)}
.st-head{display:flex;align-items:flex-start;gap:8px 20px;margin-top:14px;position:relative;flex-wrap:wrap}
.st-head>.st-logo{margin-top:-62px}
.st-logo{width:112px;height:112px;border-radius:50%;border:5px solid #fff;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 34px var(--f-display);overflow:hidden;flex:none;box-shadow:0 6px 18px rgba(11,27,58,.12)}
.st-logo img{width:100%;height:100%;object-fit:cover}
.st-id{flex:1;min-width:220px}
.st-id h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-id .vtick{width:20px;height:20px}
.st-tag{margin:4px 0 0;font-size:15.5px;color:var(--ink)}
.st-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:6px;font-size:13.5px;color:var(--muted)}
.st-meta i{font-style:normal;opacity:.6}
.st-acts{display:flex;gap:8px;flex-wrap:wrap}
.st-tabs-wrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 78px);z-index:5;background:#fff;border-bottom:1px solid var(--line);margin-top:20px}
.st-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.st-tabs::-webkit-scrollbar{display:none}
.st-tabs button{border:0;background:none;padding:14px 14px 12px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.st-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.st-tabs button:hover{color:var(--ink)}
.st-body{padding-top:22px;display:grid;gap:26px}
.st-sec{display:grid;gap:4px}
.st-sec h2{display:flex;align-items:center;gap:8px}
.st-empty{padding:40px 0;text-align:center}
.st-tools{display:flex;gap:10px;flex-wrap:wrap}
.st-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;height:44px;border:1px solid var(--line);background:var(--soft);border-radius:11px;padding:0 12px;color:var(--muted)}
.st-search:focus-within{border-color:var(--blue);background:#fff}
.st-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink)}
.st-tools select{height:44px;border:1px solid var(--line);border-radius:11px;padding:0 12px;background:#fff}
.st-body .chips{margin-top:-18px}
.stars{display:inline-flex;gap:1px;color:#D5DCEA;vertical-align:middle}
.stars i.on{color:#F5A524}
.stars i.on svg{fill:currentColor}
.st-rev{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.st-score{display:grid;gap:6px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--blue-xl)}
.st-score>b{font:800 44px/1 var(--f-display)}
.st-bars{display:grid;gap:4px;margin-top:8px;font-size:12.5px}
.st-bars div{display:grid;grid-template-columns:12px 1fr 24px;gap:8px;align-items:center}
.st-bars i{height:7px;border-radius:9px;background:#fff;overflow:hidden}
.st-bars b{display:block;height:100%;background:#F5A524;border-radius:9px}
.st-rlist{display:grid;gap:0}
.st-r{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.st-r-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.st-r p{margin:0}
.st-about{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.st-about-t{white-space:pre-line;margin:0;font-size:15.5px;max-width:68ch}
.st-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.st-facts{list-style:none;margin:0;padding:18px;border:1px solid var(--line);border-radius:16px;display:grid;gap:12px}
.st-facts li{display:flex;gap:10px;align-items:center}
.st-facts .ic{color:var(--blue)}
.st-missing{text-align:center;justify-items:center;max-width:520px;margin:0 auto;color:var(--blue)}
.st-missing h1,.st-missing p{color:var(--ink)}
.p-av.p-img{overflow:hidden;padding:0}
.p-av.p-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .st-head{gap:10px 14px;margin-top:10px}
  .st-head>.st-logo{margin-top:-46px}
  .st-logo{width:84px;height:84px;font-size:26px;border-width:4px}
  .st-id{min-width:0;flex-basis:calc(100% - 100px)}
  .st-acts{width:100%;flex-wrap:nowrap}
  .st-acts .btn{flex:1;justify-content:center;padding-inline:10px}
  .st-acts [data-share-store]{flex:0 0 46px}
  .st-share-t{display:none}
  .st-tabs-wrap{top:calc(env(safe-area-inset-top,0px) + 64px)}
  .st-rev,.st-about{grid-template-columns:1fr}
}
/* the seller's shop page settings */
.st-form{max-width:640px}
.st-form-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.st-form-top p{margin:4px 0 0}
.st-prev{position:relative;margin-bottom:34px}
.st-prev-b{display:grid;place-items:center;aspect-ratio:3/1;border-radius:14px;background:linear-gradient(120deg,var(--blue),#8FB5FF);overflow:hidden;cursor:pointer;position:relative;color:#fff;font-weight:700}
.st-prev-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-prev-b span{position:relative;display:flex;gap:6px;align-items:center;background:rgba(11,27,58,.55);padding:8px 14px;border-radius:99px;font-size:13.5px}
.st-prev-l{position:absolute;left:18px;bottom:-30px;width:80px;height:80px;border-radius:50%;border:4px solid #fff;background:var(--blue);color:#fff;display:grid;place-items:center;overflow:hidden;cursor:pointer;font:800 24px var(--f-display);box-shadow:0 4px 12px rgba(11,27,58,.15)}
.st-prev-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-prev-l span{position:absolute;bottom:0;left:0;right:0;background:rgba(11,27,58,.6);font:600 10.5px var(--f-body);text-align:center;padding:2px 0 4px}
.st-slug{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.st-slug span{padding:0 0 0 12px;color:var(--muted);white-space:nowrap;font-size:14px}
.st-slug input{border:0!important;outline:none;flex:1;min-width:0;padding-left:2px!important}
.st-slug:focus-within{border-color:var(--blue)}
.st-pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.st-pin{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:13px;line-height:1.25}
.st-pin.on{border-color:var(--blue);background:var(--blue-xl)}
.st-pin .mini{width:38px;height:38px;flex:none}
.st-pin span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.st-sec .shead{padding-block:0 14px}
.st-sec .shead h2{font-size:24px}
.st-sec .more{margin-left:auto}
/* ---- admin side panel for laptops: full height, fixed on the left, can be made narrow ---- */
@media (min-width:901px){
  body:has(.adm) .hdr-wrap,body:has(.adm) .app-banner{display:none}
  .adm{display:block;max-width:none;margin:0;padding:0;min-height:100vh}
  .adm-side{position:fixed;top:0;left:0;bottom:auto;height:100vh;height:100dvh;width:256px;max-height:none;z-index:30;background:#fff;border-right:1px solid var(--line);padding:16px 12px 12px;display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:width .18s ease}
  .adm-side .adm-nav{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px;scrollbar-width:thin}
  .adm-main{margin-left:256px;padding:22px 36px 64px;max-width:1340px;transition:margin-left .18s ease}
  .adm.slim .adm-side{width:76px}
  .adm.slim .adm-main{margin-left:76px}
  .adm-top{position:sticky;top:0;z-index:5;background:var(--soft);padding:10px 0 12px;margin:-10px 0 0;border-bottom:1px solid transparent}
}
.adm-brand{display:flex;align-items:center;gap:8px;padding:2px 2px 12px;border-bottom:1px solid var(--line);color:inherit;font:inherit}
.adm-logo{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:none;padding:4px;border-radius:10px;cursor:pointer;text-align:left;color:var(--ink)}
.adm-logo .brand-mark{width:36px;height:36px;border-radius:10px;flex:none}
.adm-lt{display:grid;line-height:1.15;min-width:0}
.adm-lt b{font:800 16px var(--f-display);white-space:nowrap}
.adm-lt small{font-size:11.5px;color:var(--muted);font-weight:600}
.adm-collapse{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer;flex:none}
.adm-collapse:hover{color:var(--blue);border-color:var(--blue)}
.adm-side .adm-link{height:40px;padding:0 12px;white-space:nowrap}
.adm-side .adm-link[aria-current="page"]{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(20,86,240,.25)}
.adm-side .adm-link[aria-current="page"] .ic{color:#fff}
.adm-side .adm-link[aria-current="page"] .adm-n{background:#fff;color:var(--blue)}
.adm-side .adm-link:not([aria-current="page"]):hover{background:var(--soft)}
.adm-foot{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.adm-me{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:8px}
.adm-me .adm-av{width:36px;height:36px;font-size:12.5px;font-weight:800;color:var(--blue);flex:none}
.adm-me-t{display:grid;flex:1;min-width:0;line-height:1.2}
.adm-me-t b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-me-t small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-out{width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.adm-out:hover{background:#fff;color:var(--danger)}
/* narrow rail: icons only, names show on hover */
.adm.slim .adm-lt,.adm.slim .adm-gt,.adm.slim .adm-link span,.adm.slim .adm-me-t,.adm.slim .adm-out{display:none}
.adm.slim .adm-brand{flex-direction:column;gap:10px}
.adm.slim .adm-logo{flex:none}
.adm.slim .adm-link{justify-content:center;padding:0;position:relative}
.adm.slim .adm-n{position:absolute;top:2px;right:4px;min-width:17px;height:17px;padding:0 4px;font-size:10px}
.adm.slim .adm-grp{padding-top:8px;border-top:1px solid var(--line)}
.adm.slim .adm-grp:first-child{border-top:0;padding-top:0}
.adm.slim .adm-me{justify-content:center;background:none;padding:0}
@media (max-width:900px){.adm-side{display:none!important}}
.adm-row .t b.online{display:inline}
.adm-row .t>span+span{display:block}

/* names and avatars that open a seller's shop */
.pseller{position:relative;z-index:2;border:0;background:none;padding:6px 0;margin:-6px 0;font:inherit;color:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.pseller:hover,.pseller:active{color:var(--blue)}
button.sb-av{border:0;padding:0;cursor:pointer;overflow:hidden;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
button.sb-av img{width:100%;height:100%;object-fit:cover}
button.sb-av:active{transform:scale(.94)}
.sb-name{border:0;background:none;padding:0;font:700 15px var(--f-body);color:var(--ink);display:inline-flex;align-items:center;gap:4px;cursor:pointer;text-align:left}
.sb-name .ic{color:var(--muted);flex:none}
.sb-name:hover{color:var(--blue)}
.name-link{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(11,27,58,.25);text-underline-offset:3px}
.name-link:hover{color:var(--blue)}
.th-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:none;padding:4px;margin:-4px;border-radius:12px;font:inherit;color:inherit;text-align:left}
button.th-who{cursor:pointer}
button.th-who:active{background:var(--soft)}

/* help button steps aside while a sheet or the menu is open */
body.lock .hp-fab{opacity:0;pointer-events:none;transform:scale(.8)}
.hp-fab{transition:opacity .2s,transform .2s}
/* small icon buttons keep their look but get a 44px tap area */

.heart::after,.padd::after{content:"";position:absolute;inset:-5px}
.wl-food{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;padding:12px 16px 12px 12px;border:1.5px solid var(--line);border-radius:20px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.wl-food:hover{border-color:var(--blue);box-shadow:0 14px 34px -18px rgba(20,86,240,.45)}
.wl-food:active{transform:scale(.98)}
.wl-food-ph{flex:none;display:flex}
.wl-food-ph img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 12px rgba(11,27,58,.15)}
.wl-food-ph img+img{margin-left:-18px}
.wl-food-t{flex:1;display:grid;gap:2px;min-width:0}
.wl-food-t b{font:800 17px var(--f-display)}
.wl-food-t small{color:var(--muted);font-size:13.5px;line-height:1.4}

/* admin backend mode */
.db-health{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.db-health>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft);display:grid;gap:2px}
.db-health small{color:var(--muted);font-size:12.5px}.db-health b{font:800 18px var(--f-display)}
.db-h{margin:22px 0 10px;font-size:15px}
.db-env{display:flex;flex-wrap:wrap;gap:8px}
.db-on{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600}
.db-on.yes{background:#E7F6EE;color:var(--ok)}.db-on.no{background:#FDECEA;color:var(--danger)}
.db-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.db-t{display:grid;gap:2px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;cursor:pointer;color:var(--ink)}
.db-t small{color:var(--muted);font-size:12px}
.db-t.on{border-color:var(--blue);background:var(--blue-xl)}
.db-tools{display:flex;gap:8px;flex-wrap:wrap}
.db-tools input{flex:1;min-width:200px;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px}
.db-rows{display:grid;gap:6px}
.db-row{border:1px solid var(--line);border-radius:10px;background:#fff}
.db-row summary{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none;min-width:0}
.db-row summary code{font:600 12.5px ui-monospace,Consolas,monospace;color:var(--blue);flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.db-row summary span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.db-row pre{margin:0;padding:12px;border-top:1px solid var(--line);background:var(--soft);font-size:12px;overflow:auto;max-height:420px;white-space:pre-wrap;word-break:break-word}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(192,41,29,.12)}
.field-err{color:var(--danger);font-size:12.5px;font-weight:600}
/* in-app confirm dialog */
.ask-scrim{position:fixed;inset:0;z-index:100;background:rgba(11,27,58,.45);display:grid;align-items:end;justify-items:center;animation:askin .18s ease both}
.ask-scrim.out{opacity:0;transition:opacity .18s}
.ask{width:min(440px,100%);background:#fff;border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;animation:askup .26s cubic-bezier(.2,.8,.2,1) both}
.ask h2{margin:0;font:800 19px/1.3 var(--f-display)}
.ask p{margin:0;color:var(--muted);line-height:1.5}
.ask-in{height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit}
.ask-in:focus{border-color:var(--blue);outline:none}
.ask-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ask-acts .btn{min-height:48px;justify-content:center}
.ask .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
@media (min-width:761px){.ask-scrim{align-items:center}.ask{border-radius:20px}}
@keyframes askin{from{opacity:0}}
@keyframes askup{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ask,.ask-scrim{animation:none}}
/* nothing may push the page sideways on a phone */
html,body{overflow-x:clip}
.more-menu .mm-pop{right:0;left:auto;max-width:calc(100vw - 32px)}
.ask h2{font-size:17px}

/* ===== sign-up steps ===== */
.sheet:has(.su){min-height:min(92vh,760px);display:flex;flex-direction:column}
.su{display:flex;flex-direction:column;gap:14px;flex:1}
.su-in{animation:suin .34s cubic-bezier(.2,.8,.2,1) both}
.su-in-back{animation:suback .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes suin{from{opacity:0;transform:translateX(28px)}}
@keyframes suback{from{opacity:0;transform:translateX(-28px)}}
.su-top{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:10px}
.su-back{width:44px;height:44px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.su-back:active{transform:scale(.92)}
.su-bar{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.su-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1456F0,#7C3AED);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.su-n{font-size:12.5px;color:var(--muted);font-weight:700;text-align:right}
.su-q{margin:10px 0 4px;font:800 clamp(24px,7vw,30px)/1.15 var(--f-display);letter-spacing:-.02em}
.su-q span{display:block;margin-top:8px;font:500 15px/1.45 var(--f-body);color:var(--muted);letter-spacing:0}
.su-tiles{display:grid;gap:12px}
.su-tile{position:relative;display:flex;align-items:center;gap:16px;min-height:92px;padding:16px 18px;border:2px solid var(--line);border-radius:22px;background:#fff;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.5,.64,1),border-color .2s,box-shadow .2s,background .2s}
.su-tile:active{transform:scale(.97)}
.su-tile.on{border-color:var(--tone);background:color-mix(in srgb,var(--tone) 6%,#fff)}
.su-emoji{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--tone);background:color-mix(in srgb,var(--tone) 10%,#fff)}

@keyframes subounce{0%{transform:scale(1)}40%{transform:scale(1.22) rotate(-6deg)}100%{transform:scale(1)}}
.su-tt{display:grid;gap:3px;flex:1;min-width:0}
.su-tt b{font:800 17.5px var(--f-display)}
.su-tt small{font-size:13.5px;color:var(--muted);line-height:1.35}
.su-check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent;flex:none;transition:all .2s}
.su-tile.on .su-check{background:var(--tone);border-color:var(--tone);color:#fff;animation:subounce .45s}
.su-skip{align-self:center;color:var(--muted)}
.su-hostels{display:grid;gap:10px;animation:suin .3s both}
.su-sub{font-weight:800;font-size:15px}
.su-hg small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:6px}
.su-hg>div{display:flex;flex-wrap:wrap;gap:8px}
.su-h{min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:600 14px var(--f-body);cursor:pointer;color:var(--ink)}
.su-h.on{background:var(--blue);border-color:var(--blue);color:#fff}
.su-form .field input{min-height:52px;font-size:16px}
.su-pw{display:block;height:5px;border-radius:9px;background:var(--sunk);margin-top:8px;overflow:hidden}
.su-pw i{display:block;height:100%;width:0;border-radius:9px;transition:width .3s,background .3s}
.su-pw i.s1{width:25%;background:#E5484D}.su-pw i.s2{width:50%;background:#F59E0B}.su-pw i.s3{width:75%;background:#84CC16}.su-pw i.s4{width:100%;background:#12A150}
.su-go{min-height:54px;font-size:16.5px;border-radius:16px;margin-top:4px}
.su-foot{margin-top:auto;padding-top:10px;text-align:center;color:var(--muted);font-size:14px}
.su-trust{list-style:none;margin:auto 0 0;padding:16px;display:grid;gap:12px;border-radius:18px;background:var(--soft);border:1px solid var(--line)}
.su-trust li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.su-trust span{flex:none;width:34px;height:34px;border-radius:11px;background:#fff;display:grid;place-items:center;color:var(--blue);box-shadow:0 1px 2px rgba(11,27,58,.08)}
.su-trust+.su-foot{margin-top:0}
.su-mail{justify-self:center;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--blue-xl);color:var(--blue)}
.su-code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.su-d{height:62px;border:2px solid var(--line);border-radius:14px;text-align:center;font:800 26px var(--f-display);color:var(--ink);background:#fff;min-width:0}
.su-d:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(20,86,240,.12)}
.su-done{align-items:center;text-align:center;justify-content:center}
.su-burst{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#E4F5EC;color:var(--ok);animation:subounce .5s cubic-bezier(.34,1.6,.64,1) both}
.su-next{display:grid;gap:10px;width:100%;margin-top:8px}
.su-next .btn{min-height:52px;justify-content:center}
.su-confetti{position:fixed;inset:0;z-index:200;pointer-events:none}
@media (prefers-reduced-motion:reduce){.su-in,.su-in-back,.su-tile.on .su-emoji,.su-burst,.su-mail{animation:none}}

/* account details as grouped settings rows */
.pf{display:grid;gap:14px}
.pf-group{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.pf-gt{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pf-gt .ic{color:var(--blue)}
.pf-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 16px;border-top:1px solid var(--line);cursor:text}
.pf-gt+.pf-row{border-top:0}
.pf-l{flex:none;width:118px;display:grid;font-weight:600;font-size:14.5px}
.pf-l small{font-weight:500;font-size:11.5px;color:var(--muted);line-height:1.3}
.pf-row input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;padding:8px 0!important;font-size:15.5px;text-align:right;color:var(--ink)}
.pf-row input:focus{outline:none}
.pf-row:focus-within{background:var(--blue-xl)}
.pf-v{flex:1;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.pf-ok,.pf-okt{display:inline-flex;align-items:center;gap:3px;color:var(--ok);font-size:12px;font-weight:700}
.pf-ok{flex:none;background:#E7F6EE;padding:3px 8px;border-radius:999px}
.pf-act{flex:none;border:0;background:var(--blue);color:#fff;font:700 13px var(--f-body);padding:8px 12px;border-radius:999px;cursor:pointer}
.pf-chips{cursor:default}
.pf-seg{flex:1;display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.pf-seg button{min-height:38px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:600 13.5px var(--f-body);cursor:pointer;color:var(--ink)}
.pf-seg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pf-note{justify-content:space-between;background:#FFF7E6;color:#5A3D00;font-size:13.5px;cursor:default}
.pf-group details.pw{padding:14px 16px}
@media (max-width:420px){.pf-l{width:104px}}
.pf-chips .pf-l{width:auto}
.pf-seg{flex-wrap:nowrap}
.pf-seg button{padding:0 12px;white-space:nowrap}

/* banner: a native swipe track (follows the finger, snaps to each slide) */
.hero-main.hero-car{contain:layout paint;overflow-anchor:none;padding:0!important;display:block!important;cursor:auto;touch-action:auto;user-select:auto;-webkit-user-select:auto}
.hero-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y;overflow-anchor:none;-webkit-overflow-scrolling:touch}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;padding:48px 52px;min-height:360px}
.hero-car .hero-copy{animation:none}
.hero-car .dots,.hero-car .hero-nav{z-index:3}
.hero-car .dots button{transition:width .3s cubic-bezier(.2,.8,.2,1),background .3s}
@media (max-width:760px){
  .hero-slide{flex-direction:row;align-items:center;gap:14px;padding:18px 16px 34px;min-height:0}
}
.perm{display:grid;gap:12px;text-align:center;justify-items:center;padding:6px 4px}
.perm-ic{font-size:54px;animation:subounce .7s cubic-bezier(.34,1.8,.64,1) both}
.perm h2{margin:0;font:800 22px/1.2 var(--f-display)}
.perm p{margin:0;max-width:34ch;line-height:1.5}
.perm-list{display:grid;gap:8px;width:100%;text-align:left}
.perm-row{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.perm-row>span{width:38px;height:38px;border-radius:12px;background:var(--blue-xl);color:var(--blue);display:grid;place-items:center;flex:none}
.perm-row div{display:grid}.perm-row small{color:var(--muted);font-size:12.5px}
.perm-acts{display:grid;gap:8px;width:100%}
.perm-acts .btn{min-height:50px;justify-content:center}
/* The must-answer screens (notifications, male or female): they cover everything, tab bar included */
.gate{position:fixed;inset:0;z-index:88;background:rgba(11,27,58,.62);display:flex;align-items:flex-end;justify-content:center;animation:scrimin .22s ease both}
.gate-card{background:#fff;width:100%;max-width:520px;max-height:94vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:26px max(22px,env(safe-area-inset-right,0px)) calc(26px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));display:grid;gap:12px;justify-items:center;text-align:center}
.gate-card h2{margin:0;font:800 22px/1.2 var(--f-display)}
.gate-card p{margin:0;max-width:36ch;line-height:1.5}
.gate-card .btn{min-height:52px;justify-content:center}
.gate-card .al-card{width:100%;text-align:left}
/* The picture at the top of these screens: a line icon on a Nile Mart blue tile (no emoji, so it looks the same on every phone) */
.nm-ic{width:76px;height:76px;border-radius:24px;background:linear-gradient(150deg,#1456F0,#3D7BFF);color:#fff;display:grid;place-items:center;box-shadow:0 16px 30px -12px rgba(20,86,240,.6),inset 0 1px 0 rgba(255,255,255,.25);margin-bottom:4px;animation:subounce .6s cubic-bezier(.34,1.6,.64,1) both}
.nm-ic.ring svg{transform-origin:50% 12%;animation:nmring 1.1s .45s ease-in-out both}
@keyframes nmring{0%,100%{transform:rotate(0)}18%{transform:rotate(14deg)}36%{transform:rotate(-12deg)}54%{transform:rotate(8deg)}72%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.nm-ic,.nm-ic.ring svg{animation:none}}
/* inside the screen the small bell on the steps card would be a second bell: the label alone is enough */
.gate-card .al-head .al-ic{display:none}
/* a button's unread count sits on top of its icon instead of pushing the icon up */
.hicon>[data-unread]{position:absolute;inset:0;pointer-events:none}
.gate-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.gate-skip{color:var(--muted);min-height:44px}
@media (min-width:840px){.gate{align-items:center}.gate-card{border-radius:22px}}

/* taps: no blue flash, a springy press instead; the focus ring is for keyboards only */
*{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
button,.btn,[role="button"],summary{touch-action:manipulation;-webkit-user-select:none;user-select:none}
a{touch-action:manipulation}
.btn,.chip,.hicon,.tab,.tabbar button{transition:transform .16s cubic-bezier(.34,1.56,.64,1),background-color .2s,box-shadow .2s,border-color .2s,color .2s}
.btn:active:not(:disabled),.chip:active,.tabbar button:active,.hicon:active{transform:scale(.95)}
.btn-primary:active:not(:disabled){box-shadow:0 2px 8px rgba(20,86,240,.35)}
input,textarea,select{-webkit-user-select:text;user-select:text}

/* settings: grouped rows like a phone's settings */
.set{max-width:720px;display:grid;gap:18px;padding-bottom:40px}
.set-me{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:linear-gradient(120deg,#0B1B3A,#1456F0);color:#fff;box-shadow:0 14px 30px -18px rgba(20,86,240,.7)}
.set-me>div{flex:1;min-width:0;display:grid;gap:2px}
.set-me b{font:800 18px var(--f-display)}
.set-me small{color:rgba(255,255,255,.75);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-me .btn{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.set-av{width:56px;height:56px;font-size:20px;background:#fff;color:var(--blue)}
/* Account page: profile card, four one-tap shortcuts, log out at the bottom */
.acct-me{margin-bottom:12px}
.acct-me .acct-name{font:800 19px/1.2 var(--f-display);color:#fff;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.acct-q{display:grid;justify-items:center;align-content:start;gap:8px;min-height:86px;padding:14px 4px 12px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:600 12.5px/1.2 var(--f-body);text-align:center;transition:transform .12s ease,border-color .15s}
.acct-q:active{transform:scale(.96)}
@media (hover:hover){.acct-q:hover{border-color:var(--blue)}}
.acct-qi{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--t)}
.acct-qi em{position:absolute;top:-6px;right:-9px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;border:2px solid #fff;background:var(--ink);color:#fff;font:700 10.5px/15px var(--f-body);font-style:normal}
.acct-out{margin-top:24px}
.set-g h2{margin:0 0 8px 6px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.set-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.set-row{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:8px 14px;border:0;border-top:1px solid var(--line);background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none;transition:background .15s}
.set-card>.set-row:first-child,.set-card>.set-note:first-child{border-top:0}
.set-row:active{background:var(--soft)}
.set-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff;background:var(--t)}
.set-l{flex:1;min-width:0;display:grid;font-weight:600;font-size:15px}
.set-l small{font-weight:500;font-size:12.5px;color:var(--muted)}
.set-v{color:var(--muted);font-size:14px;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-row>.ic:last-child{color:#B6C1D6;flex:none}
.set-ok{font-style:normal;color:var(--ok);font-weight:700}
.set-warn{font-style:normal;color:#fff;background:var(--blue);padding:3px 10px;border-radius:999px;font-weight:700;font-size:12.5px}
.set-sw{width:50px;height:30px;border-radius:999px;background:#D5DCEA;position:relative;flex:none;transition:background .25s}
.set-sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.set-sw.on{background:#22C55E}.set-sw.on i{transform:translateX(20px)}
.set-note{display:flex;gap:8px;align-items:center;padding:14px;font-size:13.5px;color:var(--muted)}
.set-ver{text-align:center;font-size:12.5px}
.fly{position:fixed;z-index:300;width:44px;height:44px;border-radius:50%;background:var(--blue);box-shadow:0 8px 20px rgba(20,86,240,.4);overflow:hidden;pointer-events:none;border:2px solid #fff}
.fly img{width:100%;height:100%;object-fit:cover}

/* ===== marketplace feed like the big apps: photo-first, staggered, tight ===== */
.mgrid{display:flex!important;align-items:flex-start;gap:10px;grid-template-columns:none!important}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.card.mk{border:0;border-radius:12px;box-shadow:0 1px 2px rgba(11,27,58,.06);background:#fff;animation:none}
.card.mk:hover{transform:none;box-shadow:0 6px 18px rgba(11,27,58,.10)}
.card.mk .pimg{aspect-ratio:auto;height:0;padding-bottom:calc(var(--ar,1.25)*100%);border-radius:12px 12px 0 0}
.card.mk .pimg img,.card.mk .pimg .ph-art{position:absolute;inset:0;width:100%;height:100%}
.card.mk .flag{top:8px;left:8px;font-size:10.5px;padding:3px 7px;border-radius:6px}
.mk-n{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:#fff;background:rgba(11,27,58,.55);padding:3px 6px;border-radius:6px;backdrop-filter:blur(2px)}
.card.mk .heart{top:6px;right:6px;width:34px;height:34px}
.mk-b{padding:8px 9px 10px!important;display:grid!important;gap:3px!important}
.mk-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mk-price{font:800 16.5px/1.1 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.card.mk .pname{margin:0;font:500 13px/1.32 var(--f-body);color:#33415C;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.mk-add{position:relative;z-index:2;width:34px!important;height:30px!important;border-radius:999px!important;border:1.5px solid var(--ink)!important;background:#fff!important;color:var(--ink)!important;display:grid;place-items:center;flex:none;box-shadow:none!important}
.mk-add i{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font:800 12px/16px var(--f-body);font-style:normal;text-align:center}
.mk-add:active{transform:scale(.9)}
.mk-tags{display:flex;flex-wrap:wrap;gap:4px}
.mk-t{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--blue-xl);color:var(--blue)}
.mk-t.thrift{background:#FFF1E6;color:#C2410C}.mk-t.deal{background:#FDECEA;color:#C0291D}
.mk-s{display:flex!important;align-items:center;gap:4px;margin:2px 0 0!important;padding:4px 0!important;font-size:11.5px!important;font-weight:600;color:var(--muted)!important;max-width:100%;min-width:0}
.mk-s span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-s small{font-weight:500;white-space:nowrap}
.mk-s .vtick{width:13px;height:13px;flex:none}
@media (max-width:640px){
  body:has(.mgrid){background:#F2F3F6}
  #products.wrap,.page:has(.mgrid),.store:has(.mgrid) .wrap{padding-left:6px!important;padding-right:6px!important}
  .mgrid,.mcol{gap:6px}
  .card.mk{border-radius:10px}
  .card.mk .pimg{border-radius:10px 10px 0 0}
}

/* sign-in and sign-up are their own full page, not a pop-up */
.scrim:has(.su){background:#fff;padding:0;align-items:stretch;justify-items:stretch}
.sheet:has(.su){position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;margin:0;padding:calc(14px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:none;overflow-y:auto;animation:suin .3s cubic-bezier(.2,.8,.2,1) both}
.sheet:has(.su) .su{max-width:520px;width:100%;margin:0 auto;min-height:100%}
@media (min-width:761px){.sheet:has(.su){padding-top:40px}}
.su-login .sheet-head{margin-bottom:6px}
.su-login .sheet-head h2{font:800 clamp(26px,7vw,32px)/1.15 var(--f-display)}
.su-login .form input{min-height:52px;font-size:16px}
.su-login .btn-primary{min-height:54px;font-size:16.5px;border-radius:16px}

/* settings never wider than the phone: long emails shrink with an ellipsis instead of pushing the page out */
.set{grid-template-columns:minmax(0,1fr)}
.set-me>div{min-width:0;flex:1}
.set-me small,.set-me b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-row .set-l{min-width:0}
.set-row .set-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.su-d[disabled],.link-btn[disabled]{opacity:.55;cursor:default}
.set-row:has(.set-v) .set-l{flex:none;white-space:nowrap}
.set-row:has(.set-v) .set-v{flex:1;max-width:none;text-align:right}

/* rewards: a ring and a spray of dots or hearts from the button that was tapped */
.burst-ring{position:fixed;z-index:310;width:44px;height:44px;border-radius:50%;border:3px solid;pointer-events:none}
.burst-dot{position:fixed;z-index:310;width:7px;height:7px;border-radius:50%;pointer-events:none}
.burst-dot.h{width:auto;height:auto;font-size:13px;line-height:1}
/* tab bar: the open tab's icon sits in a soft pill that springs in */
@media (max-width:760px){
  .tab .tab-ic{place-items:center;width:54px;height:30px;border-radius:999px;transition:background-color .25s}
  .tab .hbadge{right:4px}
  .tab[aria-current="page"] .tab-ic{background:var(--blue-xl);animation:tabpop .5s cubic-bezier(.34,1.56,.64,1)}
  .tab[aria-current="page"] .tab-ic svg{stroke-width:2.3}
}
@keyframes tabpop{0%{transform:scale(.72)}55%{transform:scale(1.12)}100%{transform:none}}
/* picked sizes and chips give a small spring */
.size[aria-pressed="true"],.chip[aria-pressed="true"],.preset[aria-pressed="true"]{animation:pickpop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes pickpop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.tab[aria-current="page"] .tab-ic,.size[aria-pressed="true"],.chip[aria-pressed="true"],.preset[aria-pressed="true"]{animation:none}}
/* trust tiles are buttons now: each opens what it promises */
button.ti{background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s}
button.ti:hover{border-color:#C9D7F5;box-shadow:0 8px 20px -12px rgba(20,86,240,.35)}
button.ti:active{transform:scale(.97)}
/* active filters, each removable */
.fpills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px}
.fpill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:600 13px var(--f-body);cursor:pointer;animation:pickpop .38s cubic-bezier(.34,1.56,.64,1)}
.fpill .ic,.fpill svg{opacity:.85}
/* a settings row that opens one field of the profile lights it up */
.pf-flash{animation:pfflash 1.6s ease}
@keyframes pfflash{0%,40%{background:var(--blue-xl);box-shadow:0 0 0 2px var(--blue) inset;border-radius:12px}100%{background:transparent;box-shadow:none}}
/* friendly empty pages */
.nudge{display:grid;justify-items:center;text-align:center;gap:8px;padding:34px 18px;border:1px dashed #C9D7F5;border-radius:20px;background:linear-gradient(180deg,var(--blue-xl),#fff);margin-top:6px}
.nudge-ic{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(20,86,240,.5);animation:subounce .7s cubic-bezier(.34,1.8,.64,1) both}
.nudge b{font:800 19px var(--f-display)}
.nudge p{margin:0 0 6px;max-width:36ch;line-height:1.5}
.chat-grid:has(.chat-list .muted:only-child):not(.open){display:none}

/* any open sheet holds the page still, so swiping only ever scrolls the sheet */
html:has(.scrim),html:has(.scrim) body,html:has(.dr-scrim),html:has(.dr-scrim) body{overflow:hidden;overscroll-behavior:none}
.drawer{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.sheet{overscroll-behavior:contain}
/* phones: the photo is the listing; text is one price row and one name line (under a fifth of the card) */
@media (max-width:640px){
  .mk-b{padding:6px 8px 7px!important;gap:1px!important}
  .card.mk .pname{-webkit-line-clamp:1;font-size:12.5px;line-height:1.3}
  .card.mk .mk-tags{display:none!important}
  .card.mk .mk-s{padding:1px 0!important;margin:0!important;font-size:11px!important}
  .card.mk .mk-s small{display:none}
  .card.mk .mk-s .vtick{width:12px;height:12px;margin-left:0}
  .mk-price{font-size:15px}
  .mk-add{width:30px!important;height:26px!important}
}

.foot-seo{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:70ch}

/* ---------- items open as full pages (clothes and dishes) ---------- */
.scrim:has(.pd-page),.scrim:has(.nf-dpage){background:#fff;padding:0;align-items:stretch;justify-content:stretch;animation:none}
.sheet:has(.pd-page),.sheet:has(.nf-dpage){position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border-radius:0;box-shadow:none;overflow:hidden;display:flex;flex-direction:column;animation:pdpush .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes pdpush{from{transform:translateX(40%)}}
.pd-page,.nf-dpage{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.pd-top{flex:none;display:flex;align-items:center;gap:6px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;border-bottom:1px solid var(--line);background:#fff}
.pd-top .pcat{flex:1;text-align:center;margin:0}
.pd-back,.pd-tbtn{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.pd-back:active,.pd-tbtn:active{background:var(--soft)}
.pd-scroll,.nf-dscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pd-scroll{padding:16px max(16px,env(safe-area-inset-left,0px)) 28px}
.pd-scroll>.pd,.pd-scroll>.pd-more{max-width:1040px;margin-inline:auto}
.pd-page>.pd-bar,.nf-dpage>.nf-dbar{flex:none;position:static;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);order:0}
.pd-page>.pd-bar{max-width:none}
@media (min-width:761px){.pd-page>.pd-bar{justify-content:center}.pd-page>.pd-bar>*{max-width:360px}}
.nf-dback{left:12px;right:auto}
.nf-dscroll .nf-dphoto{max-height:44vh}
.nf-dmore{padding:0 20px 24px}
/* reviews, more from the shop, similar items */
.pd-more{display:grid;gap:26px;margin-top:28px;padding-top:22px;border-top:8px solid var(--soft)}
.pd-sec{display:grid;gap:12px;min-width:0}
.pd-sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pd-sh h3{margin:0;font:800 18px var(--f-display)}
.pd-rsum{display:flex;align-items:center;gap:14px}
.pd-rsum>b{font:800 34px var(--f-display);line-height:1}
.pd-rsum>span{display:grid;gap:2px}
.pd-rsum .stars{color:#F5A623;letter-spacing:1px}
.pd-revs{display:grid;gap:10px}
.pd-rev{padding:12px 14px;border:1px solid var(--line);border-radius:14px;display:grid;gap:4px}
.pd-rev-h{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.pd-rev-h .stars{color:#F5A623}
.pd-rev p{margin:0;font-size:14px;line-height:1.45}
.pd-norev{margin:0;font-size:14px}
.pd-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 2px}
.pd-row::-webkit-scrollbar{display:none}
.pd-row .pd-mini{flex:0 0 140px;scroll-snap-align:start}
.pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pd-mini{display:grid;gap:4px;text-align:left;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
/* relative: a dish drawing (.nf-art is absolute) stays inside its tile instead of covering the whole dish page */
.pd-mini-ph{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--soft)}
.nf-dmore .pd-mini-ph{aspect-ratio:1}
.pd-mini-ph img,.pd-mini-ph .ph-art{width:100%;height:100%;object-fit:cover;display:block}
.pd-mini-ph .nf-art{width:100%;height:100%}
.pd-mini-t{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pd-mini b{font-size:14px}
.pd-mini small{font-size:12px}
.pd-mini:active .pd-mini-ph{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.sheet:has(.pd-page),.sheet:has(.nf-dpage){animation:none}}

/* ---------- refer and earn ---------- */
.rf-card{display:grid;gap:6px;padding:20px;border-radius:20px;background:var(--ink);color:#fff}
.rf-card p{margin:4px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.rf-lab{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rf-big{font:800 40px/1.05 var(--f-display);letter-spacing:-.02em}
.rf-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:8px}
.rf-bar i{display:block;height:100%;border-radius:99px;background:#22C55E}
.rf-card small{font-size:13px;color:rgba(255,255,255,.75)}
.rf-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.rf-url{flex:1;min-width:0;display:grid;gap:2px}
.rf-url small{font-size:12px;color:var(--muted);font-weight:600}
.rf-url b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-link .btn{flex:none}
.rf-share{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rf-share .btn{min-height:50px;justify-content:center}
.rf-runner{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.rf-runner>div{display:grid;gap:3px}
.rf-runner small{font-size:13px;line-height:1.45}
.rf-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* the three referral rewards side by side: runner, marketer, friend */
.rf-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rf-tier{display:grid;justify-items:start;align-content:start;gap:2px;padding:12px 10px 12px 12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.rf-ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--t);margin-bottom:6px}
.rf-tier b{font:800 18px/1.1 var(--f-display);letter-spacing:-.01em}
.rf-tier>span{font-size:12.5px;font-weight:600}
.rf-tier small{font-size:11.5px;line-height:1.35;color:var(--muted)}
@media (max-width:359px){.rf-tiers{grid-template-columns:1fr}}
/* a friend still running: their deliveries so far, as a bar inside the pill */
.pill.rf-runs{position:relative;overflow:hidden;background:var(--blue-xl);color:var(--blue)}
.pill.rf-runs i{position:absolute;inset:0 auto 0 0;background:var(--blue-l)}
.pill.rf-runs span{position:relative}
.rf-how{list-style:none;counter-reset:rf;margin:0;padding:0;display:grid;gap:14px}
.rf-how li{counter-increment:rf;display:grid;grid-template-columns:32px 1fr;gap:2px 12px}
.rf-how li::before{content:counter(rf);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--blue-xl);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:14px}
.rf-how b{font-size:15px}
.rf-how span{font-size:13.5px;color:var(--muted);line-height:1.45}
.rf-fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:380px){.rf-share{grid-template-columns:1fr}}

/* ===== Messages: a real chat screen ===== */
.cl-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:#fff;padding:10px 16px;min-height:72px;text-align:left;position:relative;transition:background .15s;cursor:pointer}
.cl-row::after{content:"";position:absolute;left:80px;right:0;bottom:0;height:1px;background:var(--line)}
.cl-row:last-child::after{display:none}
.cl-row:hover{background:var(--soft)} .cl-row.on{background:var(--blue-xl)}
.cl-av{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font:800 17px var(--f-display);overflow:hidden;background:var(--blue)}
.cl-av img{width:100%;height:100%;object-fit:cover}
.cl-av.lg{width:72px;height:72px;font-size:24px}
.chat-top .cl-av{width:40px;height:40px;font-size:14px}
.cl-row .t{flex:1;min-width:0;display:grid;gap:3px}
.cl-top,.cl-bot{display:flex;align-items:center;gap:8px;min-width:0}
.cl-top b{flex:1;min-width:0;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-top small{font-size:12px;color:var(--muted);flex:none}
.cl-bot small{flex:1;min-width:0;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-bot small .ic{display:inline;vertical-align:-2px;color:var(--blue)}
.cl-bot em{font-style:normal;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.cl-row.unread .cl-top b{font-weight:800}
.cl-row.unread .cl-bot small{color:var(--ink);font-weight:600}
.cl-row.unread .cl-top small{color:var(--blue);font-weight:700}

.chatwin{display:flex;flex-direction:column;min-width:0;min-height:520px;height:min(72vh,720px);background:#fff}
.chat-none{align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.chat-top{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:#fff}
.chat-back{display:none}
.chat-who{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;padding:4px;border-radius:12px;text-align:left;color:inherit}
button.chat-who{cursor:pointer} button.chat-who:active{background:var(--soft)}
.chat-who .t{min-width:0;display:grid}
.chat-who b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item{flex:none;display:flex;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--line);background:var(--soft);padding:8px 14px;text-align:left;cursor:pointer}
.chat-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:#fff}
.chat-item .t{flex:1;min-width:0;display:grid}
.chat-item b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item small{font-size:13px;color:var(--ink);font-weight:700}
.chat-item-go{display:flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--blue);flex:none}
.chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px 12px;display:flex;flex-direction:column;background:var(--soft)}
.chat-day{align-self:center;position:sticky;top:4px;z-index:1;margin:12px 0 6px}
.chat-day span{display:block;background:#fff;color:var(--muted);font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;box-shadow:0 1px 3px rgba(11,27,58,.08)}
.chat-ref{align-self:center;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px 12px 6px 6px;margin:8px 0 4px;font-size:13px;color:var(--muted);cursor:pointer;max-width:90%}
.chat-ref img{width:32px;height:32px;border-radius:8px;object-fit:cover}
.chat-ref b{color:var(--ink)}
.msg{max-width:min(80%,520px);padding:7px 10px 6px 12px;border-radius:18px;font-size:15px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere;position:relative}
.msg.first{margin-top:10px}
.msg-t{white-space:pre-wrap}
.msg-t a{color:inherit;text-decoration:underline}
.msg time{float:right;margin:6px 0 -3px 10px;font-size:11px;line-height:1.6;opacity:.7;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.msg time .ic{width:12px;height:12px}
.msg.in{align-self:flex-start;background:#fff;color:var(--ink);box-shadow:0 1px 1px rgba(11,27,58,.06)}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff}
.msg.in:not(.last){border-bottom-left-radius:6px} .msg.in:not(.first){border-top-left-radius:6px}
.msg.me:not(.last){border-bottom-right-radius:6px} .msg.me:not(.first){border-top-right-radius:6px}
.msg.failed{background:#FDECEA;color:var(--danger)}
.msg-retry{align-self:flex-end;border:0;background:none;color:var(--danger);font-size:12.5px;font-weight:600;padding:4px 2px;display:flex;align-items:center;gap:4px;cursor:pointer}
.msg-seen{align-self:flex-end;font-size:11.5px;color:var(--muted);margin:3px 4px 0}
.chat-hello{margin:auto;text-align:center;display:grid;justify-items:center;gap:6px;max-width:300px;padding:20px 0}
.chat-hello b{font-size:16px}
.chat-hello p{margin:0;font-size:14px}
.chat-chips{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 12px 0;background:var(--soft)}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chips .chip{flex:none;background:#fff;white-space:nowrap}
.chat-bar{flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.chat-bar textarea{flex:1;min-width:0;resize:none;border:0;border-radius:22px;background:var(--soft);padding:11px 16px;font-size:16px;line-height:1.35;max-height:120px;outline:none}
.chat-bar textarea:focus{box-shadow:0 0 0 2px var(--blue-l)}
.chat-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--line);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .1s}
.chat-send.on{background:var(--blue)}
.chat-send:active{transform:scale(.92)}
.chat-list{max-height:72vh;overflow-y:auto}
@media (max-width:859px){
  .chat-back{display:grid;width:40px;height:40px}
  .msg-page.chat-open .chatwin{position:fixed;inset:0;z-index:70;height:100dvh;min-height:0;padding-top:env(safe-area-inset-top,0px)}
  body:has(.msg-page.chat-open) .tabbar,body:has(.msg-page.chat-open) .hp-fab{display:none}
  .msg-page .chat-grid{border:0;border-radius:0;margin-inline:-16px}
  .msg-page .chat-list{max-height:none}
}

/* ===== Orders: where it is, the steps, and what to do next ===== */
.my-orders{display:grid;gap:12px}
.my-order{border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:12px;background:#fff;box-shadow:0 1px 2px rgba(11,27,58,.04)}
.my-order.live{border-color:#CFDCFB;box-shadow:0 6px 20px rgba(20,86,240,.07)}
.my-order .mo-top{display:flex;align-items:center;gap:10px}
.my-order .mo-top .st-logo{width:36px;height:36px;border-width:0;font-size:13px;box-shadow:none}
.mo-who{flex:1;min-width:0;display:grid}
.mo-who .name-link{font-weight:700;font-size:14.5px;text-align:left;justify-self:start}
.mo-who .muted{font-size:12px}
.mo-head{display:grid;gap:2px}
.mo-head b{font:800 18px/1.25 var(--f-display);letter-spacing:-.01em}
.mo-head span{font-size:14px;color:var(--muted)}
.my-order.cancelled .mo-head b{color:var(--muted)}
.spill{flex:none;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;background:var(--soft);color:var(--muted)}
.spill.sent,.spill.unpaid,.spill.delivered{background:#FFF4D9;color:#8A5A00}
.spill.confirmed{background:var(--blue-l);color:var(--blue-d)}
.spill.out{background:var(--blue);color:#fff}
.spill.received{background:#E6F6EC;color:var(--ok)}
.spill.cancelled{background:#F1F3F7;color:var(--muted)}
.o-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.o-steps li{display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;position:relative;font-size:12px;color:var(--muted)}
.o-steps li::before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:var(--line)}
.o-steps li:first-child::before{display:none}
.o-steps li.done::before,.o-steps li.now::before{background:var(--blue)}
.o-steps i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line);position:relative;z-index:1}
.o-steps li.done i{background:var(--blue);border-color:var(--blue)}
.o-steps li.now i{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-l);background:var(--blue)}
.o-steps li.now span{color:var(--ink);font-weight:700}
.o-steps small{font-size:11px}
.o-code{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--blue-xl);border:1px dashed #B9CCF8}
.o-code div{flex:1;display:grid;gap:2px}
.o-code span{font-weight:700;font-size:14px}
.o-code small{font-size:12.5px;color:var(--muted)}
.o-code>b{font:800 26px var(--f-display);letter-spacing:.18em;color:var(--blue-d)}
.my-order .mo-items{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink)}
.my-order .mo-items img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.my-order .mo-items span{flex:1;min-width:0}
.my-order .mo-items b{flex:none;font-size:14.5px}
.mo-where{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.my-order .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.my-order .acts .btn{min-height:44px}
.my-order .acts .btn-primary{flex:1 1 160px}

@media (max-width:859px){.chat-grid:not(.open) .chatwin{display:none}.chat-grid.open .chat-list{display:none}}

/* ===== One look for status pills: filled, sentence case, easy to read ===== */
.pill{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;padding:4px 10px;border:0;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.pending,.pill.unpaid,.pill.open,.pill.review,.pill.sent{background:#FFF4D9;color:#8A5A00}
.pill.confirmed{background:var(--blue-l);color:var(--blue-d)}
.pill.out{background:var(--blue);color:#fff}
.pill.accepted,.pill.active,.pill.delivered,.pill.paid,.pill.paidout{background:#E6F6EC;color:var(--ok)}
.pill.rejected,.pill.expired,.pill.suspended,.pill.cancelled,.pill.failed,.pill.mismatch,.pill.banned,.pill.resolved{background:#FDECEA;color:var(--danger)}
.pill.dismissed{background:#F1F3F7;color:var(--muted)}

/* ===== Comfortable tap targets on phones ===== */
.btn-sm{min-height:40px;padding:9px 14px;font-size:13.5px}
.link-btn{padding:8px 0}
.more-menu .mm-pop a,.more-menu .mm-pop button{min-height:44px}
.order .acts{display:flex;flex-wrap:wrap;gap:8px}
.order .acts .btn-primary{flex:1 1 150px}

/* ===== Empty bag ===== */
.bag-empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:28px 12px 8px}
.bag-empty .be-ic{width:72px;height:72px;border-radius:50%;background:var(--blue-xl);color:var(--blue);display:grid;place-items:center;margin-bottom:4px}
.bag-empty b{font:800 18px var(--f-display)}
.bag-empty p{margin:0 0 8px;color:var(--muted);font-size:14px}
.bag-empty .btn{min-width:200px}
@media (max-width:859px){.msg-page .chat-list{border-right:0}}

/* A page never grows wider than the phone: long rows (tabs, chips) scroll inside themselves instead. */
.wrap.page{grid-template-columns:minmax(0,1fr)}
.wrap.page>*{min-width:0}
.dash-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dash-tabs::-webkit-scrollbar{display:none}

/* ===== Seller dashboard: recent views ===== */
.rv{margin-top:12px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff}
.rv-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.rv-h b{display:flex;align-items:center;gap:6px;font-size:14.5px}
.rv-h span{font-size:13px}
.rv ul{list-style:none;margin:0;padding:0}
.rv li+li{border-top:1px solid var(--line)}
.rv li button{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.rv li img,.rv-ph{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;background:var(--soft);display:grid;place-items:center;color:var(--muted)}
.rv-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px}
.rv time{font-size:12.5px;white-space:nowrap}
.rv .link-btn{margin-top:4px;font-size:13.5px}
/* Admin: one person's details */
.aud{display:grid;gap:12px}
.aud-top{display:flex;gap:12px;align-items:center}
.aud-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}.aud-tags .adm-tag{margin-left:0}
.aud-acts{display:flex;gap:8px;flex-wrap:wrap}
.aud-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.aud-card h3{font-size:15px;margin:0 0 6px}
.aud-card h4{font-size:13px;margin:12px 0 2px;color:var(--muted)}
.aud-r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.aud-r:first-of-type{border-top:0}
.aud-r>span{color:var(--muted);flex:none}
.aud-r>b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.aud-ok{color:#16a34a;display:inline-flex;vertical-align:-1px}
.aud-list{display:grid}
.aud-li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line);font-size:14px}
.aud-li>span:first-child{display:grid;min-width:0}
.aud-li small{color:var(--muted);font-size:12px}
.aud-rr{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.aud-in{color:#16a34a}
.policy-links{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.rf-adm summary{display:flex;cursor:pointer;list-style:none}
.rf-adm summary::-webkit-details-marker{display:none}
.rf-adm[open]{display:grid;gap:8px}
.rf-arow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0 0;border-top:1px dashed var(--line)}
.rf-arow .t{display:grid;gap:2px;min-width:0}

/* bigger fingertip areas for small controls, without changing how they look */
.mk-add::after,.link-btn::after,.copy-num::after{content:"";position:absolute;inset:-9px -6px}
.link-btn,.copy-num{position:relative}
input[type=range]{min-height:28px}
/* automatic withdrawals (Admin → Money → Withdrawals) */
.ok-t{color:#1E7F46}
.auto-panel{display:block}
.auto-panel>div:first-child{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.auto-panel .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.auto-rules{margin:0 0 10px;font-size:12.5px;color:var(--muted,#5F6E8A);line-height:1.45}
.auto-log{margin-top:12px;font-size:13px}
.auto-log summary{cursor:pointer;font-weight:700;padding:6px 0}
.auto-log-r{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid rgba(0,0,0,.07)}
.auto-log-r small{color:var(--muted,#5F6E8A);font-size:12px;overflow-wrap:anywhere}
.auto-line.on{border-color:#BFE6CF;background:#F1FBF5}
.auto-line.on .setup-dot{background:#1F9D63}
.auto-line.on>b{color:#1E7F46}
.auto-line span b{display:inline;color:var(--ink)}
.auto-line.on span b{color:#1E7F46}
.esc-row+.auto-line,.form-h+.auto-line{margin:0 0 12px}
.wd-card{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);display:grid;gap:14px}

.wd-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.wd-ht{min-width:0}
.wd-ht h2{margin:4px 0 4px;font-size:18px}
.wd-ht p{margin:0;font-size:13.5px;line-height:1.45}
.wd-state{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:#EEF1F6;color:#5F6E8A}
.wd-card.on .wd-state{background:#DDF5E7;color:#1E7F46}
.wd-sw{flex:none}
.wd-bal{margin:0;font-size:13.5px}
.wd-bal b{margin-left:4px}
.wd-prov label input:disabled+span{opacity:.5;cursor:not-allowed}
.wd-card .field,.wd-card .row2,.wd-card .acts,.wd-card .auto-rules{margin:0}
.wd-sub{margin:-4px 0 10px;font-size:13px}
.wd-otp{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.wd-otp input{flex:1 1 150px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
@media (max-width:520px){.wd-head{flex-direction:column}.wd-sw{width:100%}}
.seller-group{margin:4px 0 14px}
/* Admin: how people found Nile Mart */
.src-card{margin-bottom:16px}
.src-r{display:grid;grid-template-columns:minmax(96px,32%) 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:13.5px}
.src-r i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--t) var(--w),#E5E7EB var(--w))}
.src-r small{color:var(--muted,#64748B);font-weight:500}
/* phones: inputs at 16px so iOS does not zoom on focus; bag +/- get a 40px tap area */
@media (max-width:760px){
  .field input,.field select,.field textarea,.hsearch input,.hsearch select,.toolbar select,.th-send input,.th-send textarea,.hp-guest input,.st-search input,.st-tools select,.db-tools input,.ad-q,.pf-row input,.adm-sort select,.admin-sel select{font-size:16px}
  .hsearch select{letter-spacing:0}
  .qty-sm button{position:relative}
  .qty-sm button::before{content:'';position:absolute;inset:-5px}
}
.rv-del{font-size:12.5px;margin-top:6px;display:inline-block}
/* Order alerts: the "Turn on order alerts" card (seller dashboard, runner, collector, restaurant, admin) and the banner a new
   order brings up while the page is open */
.al-card{margin-top:14px;padding:16px;border:1px solid #F5D9A8;background:#FFF9EE;border-radius:16px;font-size:14px;color:var(--ink)}
.al-card>b,.al-card .al-t>b{display:block;font-family:var(--f-display);font-size:16px;font-weight:800;line-height:1.3}
.al-card p{margin:6px 0 12px;color:var(--muted);line-height:1.5}
.al-card.blocked{border-color:#F3C1C1;background:#FDF2F2}
.al-card.ios,.al-card.none{border-color:#D3E0FA;background:var(--blue-xl)}
.al-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.al-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;color:var(--warn);flex:none;box-shadow:var(--shadow)}
.al-card.blocked .al-ic{color:var(--danger)} .al-card.ios .al-ic,.al-card.none .al-ic{color:var(--blue)}
.al-pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:#FFFFFF;color:var(--warn);border:1px solid currentColor}
.al-card.blocked .al-pill{color:var(--danger)} .al-card.ios .al-pill,.al-card.none .al-pill{color:var(--blue)}
.al-steps{margin:0 0 14px;padding-left:22px;line-height:1.55}
.al-steps li{margin:4px 0}
.al-card .btn-block{min-height:46px}
.al-card.on{display:flex;align-items:center;gap:12px;padding:12px 14px;border-color:#BFE5CC;background:#EAF7EF}
.al-card.on .al-ic{color:var(--ok)}
.al-card.on .al-t{flex:1;min-width:0}
.al-card.on .al-t>b{font-size:14.5px}
.al-card.on small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.al-card.on .btn{flex:none}
.nf .al-card,.cj-page .al-card{margin:12px 0}
.set-g .al-card{margin-top:0}
.al-roles{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.al-role{font-size:13px;padding:6px 10px;border-radius:999px;background:#EAF7EF;color:var(--ok)}
.al-role.miss{background:#FDECEC;color:var(--danger)}
.al-role b{font-weight:800}
.al-adm .adm-li-t small{display:block}
.oa-banner{position:fixed;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top,0px));z-index:70;display:none;align-items:stretch;background:var(--ink);color:#FFFFFF;border-radius:14px;box-shadow:0 14px 34px rgba(11,27,58,.32);max-width:560px;margin:0 auto}
.oa-banner.show{display:flex;animation:oain .3s cubic-bezier(.2,.8,.2,1) both}
.oa-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:14px 8px 14px 14px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:56px}
.oa-ic{width:38px;height:38px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none;animation:oaring 1s ease-in-out 3}
.oa-t{min-width:0}
.oa-t b{display:block;font-size:15px;font-weight:700}
.oa-t small{display:block;font-size:13px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oa-x{flex:none;width:48px;background:none;border:0;color:inherit;opacity:.75;cursor:pointer;display:grid;place-items:center}
@keyframes oain{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}
@keyframes oaring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@media (prefers-reduced-motion: reduce){.oa-banner.show,.oa-ic{animation:none}}

/* ---- Delete my account (Settings) ---- */
.del-list{margin:0 0 14px;padding-left:20px;display:grid;gap:6px;line-height:1.45}
#delacct-form .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---- inside the iPhone app (ios/): the app draws its own tab bar under the page, so the web one hides and nothing waits above it ---- */
html.nm-ios .tabbar{display:none}
@media (max-width:760px){
  html.nm-ios body{padding-bottom:0}
  html.nm-ios .kyc-bar{bottom:0}
  html.nm-ios .toast{bottom:22px}
  html.nm-ios .nf-float{bottom:12px}
  html.nm-ios .hp-fab{bottom:16px}
  html.nm-ios #hp-ask{bottom:0}
}

/* report or block (App Store rule 1.2) */
.chat-blocked{justify-content:center;align-items:center;min-height:52px;color:var(--muted,#64748b);font-size:14px;text-align:center}
.sf-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sf-block h3{margin:0 0 6px}
.sf-block p{margin:0 0 12px}
.st-blocked{margin-top:12px}
.rv-del.muted{color:var(--muted,#64748b)}
/* on phones an open chat covers the page (z-index 70): sheets opened from it go on top */
body:has(.msg-page.chat-open) .scrim{z-index:80}
.sf-l{display:block;margin:0 0 8px}
/* Download on the App Store / Get it on Google Play badges (black, white text, like the stores' own badges) */
.store-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store-badge{display:inline-flex;align-items:center;gap:8px;height:48px;min-width:150px;padding:0 16px 0 11px;border:1px solid #A6A6A6;border-radius:9px;background:#000;color:#fff;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1;transition:transform .15s}
.store-badge:hover{color:#fff;background:#111}
.store-badge:active{transform:scale(.97)}
.store-badge svg{flex:none;width:26px;height:26px}
.store-badge span{display:grid;gap:2px;white-space:nowrap;text-align:left}
.store-badge small{font-size:10.5px;font-weight:500;letter-spacing:.1px}
.store-badge b{font-size:19px;font-weight:600;letter-spacing:-.4px}
.app-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:16px;padding:16px;border:1.5px solid var(--line);border-radius:20px;background:var(--soft)}
.app-card-t{display:grid;gap:3px;min-width:0}
.app-card-t b{font:800 17px var(--f-display)}
.app-card-t small{color:var(--muted);font-size:13.5px}
.prof-app{margin-top:24px}
.set-apps{display:grid;gap:12px;padding:14px;border-top:1px solid var(--line)}
.set-card>.set-apps:first-child{border-top:0}
.foot-badges{margin-top:16px}
.sheet .store-badges{margin:4px 0 0}
@media (max-width:620px){.app-card{display:grid}.app-card .store-badge{flex:1;justify-content:center;min-width:140px;padding:0 12px 0 10px}}
/* Admin → Wallets */
.wa-row{display:block;padding:0}
.wa-h{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:14px 16px;cursor:pointer;color:inherit}
.wa-h .t{flex:1;min-width:0;display:grid;gap:2px}.wa-h .t span{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-amt{display:grid;justify-items:end;gap:2px;white-space:nowrap}.wa-amt small{font-size:12px}
.wa-d{border-top:1px solid var(--line);padding:12px 16px 16px;display:grid;gap:6px}
.wa-d h4{margin:10px 0 2px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.wa-kv{display:flex;justify-content:space-between;gap:12px;font-size:14px}.wa-kv span{color:var(--muted)}
.wa-tx{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.wa-tx>div{display:grid;gap:2px;min-width:0}.wa-tx small{font-size:12px}
/* Admin → People: the restaurant an account runs, and what people use (Details sheet, Dashboard) */
.adm-row .t>.adm-rest{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:13px;color:var(--ink,#0F172A)}
.adm-rest>svg{color:var(--blue);flex:none;margin-right:-6px}.arow .t .adm-rest b{display:inline;white-space:normal}.adm-rest small{font-size:12px}.adm-row .adm-rest .link-btn{padding:0;font-size:13px}
.act-adm h4{font-size:13px;margin:10px 0 2px;color:var(--muted)}
.act-cols{display:grid;gap:4px 24px}
@media (min-width:760px){.act-cols{grid-template-columns:1fr 1fr}}
/* Phone layout fixes from the UI check */
.card.mk .mk-b{align-content:start}
.seg-fill label{display:flex}
.seg-fill label>span{flex:1;display:grid;place-content:center;gap:2px;text-align:center}
.toast{z-index:90}
.st-safety{justify-content:center}
.shead h2{display:flex;align-items:center;gap:8px}
.pf-row input{text-overflow:ellipsis}
.qty button,.more,.name-link{position:relative}
.qty button::after,.gal-nav::after,.more::after,.name-link::after{content:"";position:absolute;inset:-6px}
.close{width:44px;height:44px}
.auth-tabs .chip{min-height:44px}
@media (max-width:760px){
  .st-tabs-wrap{top:var(--hdr-h,117px)}
  .more-menu[open]>summary::before{content:"";position:fixed;inset:0;z-index:89;background:rgba(11,27,58,.45);cursor:default}
  .more-menu[open] .mm-pop{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:90;max-width:none;min-width:0;border-radius:20px 20px 0 0;padding:8px 8px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px rgba(11,27,58,.2)}
  .more-menu[open] .mm-pop button,.more-menu[open] .mm-pop a{min-height:52px;padding:14px 16px;font-size:16px}
  .toolbar.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .toolbar.open>.price-box,.toolbar.open>select,.toolbar.open>.tb-grp{grid-column:1/-1}
  .price-box input{flex:1;width:auto;min-width:0;font-size:16px}
  .preset{color:var(--ink);font-size:14px}
  .toolbar select{width:100%;height:44px}
}
@media (max-width:640px){
  #products.wrap,.page:has(.mgrid),.store:has(.mgrid) .wrap{padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
  .mgrid{margin-inline:-10px}
}
@media (max-width:560px){.shead{flex-wrap:wrap;row-gap:2px}.shead-sub{flex-basis:100%}}
.st-safety{display:flex;flex-wrap:wrap;gap:8px 18px}
/* One pinned pay bar: the bag, the NileFood basket, the product page and the dish page share its height, padding and button. */
.paybar{display:flex;align-items:center;gap:14px}
.pb-tot{flex:none;display:grid;line-height:1.25}
.pb-tot b{font:800 17px var(--f-display);color:var(--ink)}
.pb-tot small{font-size:12px;color:var(--muted)}
.form-bar.paybar{background:#fff;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.paybar .btn-primary{flex:1;width:auto;min-width:0}
.form-bar.paybar .btn{font-size:16px;padding-inline:14px}
.form-bar.paybar .btn,.pd-page>.pd-bar .btn,.nf-dpage>.nf-dbar .nf-dgo{min-height:52px}
.pd-page>.pd-bar,.nf-dpage>.nf-dbar{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
/* App controls, not web links: only the legal links inside a sentence stay underlined. */
.link-btn{text-decoration:none}
.link-btn[data-go]{text-decoration:underline;text-underline-offset:3px}
.name-link{text-decoration:none;font-weight:600;color:var(--blue)}
.ci-r .link-btn{font-weight:600;color:var(--blue)}
/* One way of adding and changing a quantity, in the Shop and in NileFood; one button corner. */
.btn{border-radius:12px}
.su-login .btn-primary{border-radius:12px}
.mk-add{width:36px!important;height:36px!important;border-radius:50%!important;border:0!important;background:var(--blue)!important;color:#fff!important}
.qty:not(.qty-sm){border:0;background:var(--blue-l);border-radius:999px;padding:3px;gap:2px}
.qty:not(.qty-sm) button{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--blue);font-size:18px;font-weight:700;line-height:1}
.qty:not(.qty-sm) span{min-width:24px}
@media (max-width:760px){
  /* One section header on phones: 20px title, its note underneath, "See all" on the right with a full-size tap area. */
  .shead h2,.st-sec .shead h2{font:800 20px var(--f-display);letter-spacing:-.01em}
  .shead{flex-wrap:wrap;row-gap:2px;align-items:center}
  .shead>span.muted{flex-basis:100%}
  .shead>.more{margin-left:auto}
  .more::after{inset:-14px -8px}
  /* Tap targets: every button a thumb can hit is at least 44px tall. */
  .btn{min-height:44px}
  .admin-bar .btn,.th-head .btn{min-height:0}
}
/* Tap targets on phones: small controls keep their look but get an invisible 44px touch area. */
.copy-num{text-decoration:none}
@media (max-width:760px){
  .brand,.hs-btn,.filter-btn,.nf-hdeliver,.hp-chip,.chip,.appbar-x{position:relative}
  .brand::after,.hs-btn::after,.filter-btn::after,.pw-eye::after,.chip::after{content:"";position:absolute;inset:-4px 0}
  .appbar-x::after{content:"";position:absolute;inset:-7px}
  .hp-chip::after{content:"";position:absolute;inset:-6px 0}
  .name-link::after,.copy-num::after{inset:-13px -6px}
  .nf-fopts .chip-s,.nf-sort select,.pf-seg button{min-height:44px}.nf-sort select{height:44px}
}

/* Admin → Money overview: what needs the owner in red at the top, then every naira in (green) and out (red). */
.mn-lead{margin:0 0 12px}
.mn-needs{display:grid;gap:10px;margin-bottom:14px}
.mn-need{display:grid;gap:2px;text-align:left;border-radius:14px;padding:14px 16px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink)}
button.mn-need{cursor:pointer}
.mn-need span{font-weight:700;font-size:13.5px}
.mn-need b{font:800 24px var(--f-display);letter-spacing:-.01em}
.mn-need small{color:var(--muted);font-size:12.5px;line-height:1.4}
.mn-need small b{font:inherit;font-weight:700}
.mn-bad{background:#FEF2F2;border-color:#FECACA}.mn-bad>b{color:#B91C1C}
.mn-warn{background:#FFFBEB;border-color:#FDE68A}
.mn-ok{background:#F0FDF4;border-color:#BBF7D0;color:#166534;font-weight:600}
.mn-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--soft);color:var(--muted)}
.mn-ic svg{width:20px;height:20px}
.mn-in .mn-ic{background:#DCFCE7;color:#15803D}
.mn-refund .mn-ic,.mn-out .mn-ic{background:#FEE2E2;color:#B91C1C}
.mn-held .mn-ic{background:#FEF3C7;color:#B45309}
.mn-todo{border-color:#FECACA;box-shadow:inset 4px 0 0 #DC2626}
.mn-r{display:grid;justify-items:end;gap:4px;text-align:right}
.mn-amt{font-weight:800;font-size:15.5px}
.mn-in .mn-amt{color:#15803D}
.mn-refund .mn-amt,.mn-out .mn-amt{color:#B91C1C}
.mn-st{font-size:12px;color:var(--muted);max-width:160px}
.mn-todo .mn-st{color:#B91C1C;font-weight:700}
.arow .t .mn-paid{font-size:13px}
.arow .t .mn-paid b{display:inline;font-size:inherit;color:var(--ink)}
.ro-input{background:var(--soft)!important;color:var(--muted)!important}
@media (max-width:620px){.mn-row .mn-r{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;text-align:left}.mn-st{max-width:none}.mn-r .btn{margin-left:auto}}