/* =====================================================================
   MedsPK - the soft, calm "trust" theme.
   Teal for care, apricot for warmth, white cards with soft tinted shadows.
   English is always shown; Urdu or Chinese sits under it (.ur / .zh).
   Fonts are Figtree and Fraunces (SIL Open Font License), Noto Nastaliq Urdu.
   ===================================================================== */

@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-var.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces Soft";src:url(/assets/fonts/fraunces-soft.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Urdu Nastaliq";src:url(/assets/fonts/urdu-nastaliq.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --bg:#f3f9fa; --surface:#fff; --soft:#eaf5f6;
  --ink:#15303a; --ink2:#4d6770; --mute:#7a929a;
  --line:#d9e8eb; --line2:#c3dade;
  --teal:#0a7f8c; --teal-d:#066570; --teal-l:#dff1f3; --teal-xl:#f0f9fa;
  --apr:#f29c44; --apr-d:#b96a14; --apr-l:#fff2e1;
  --navy:#12304d; --navy2:#1c4568;
  --ok:#14804f; --ok-l:#e2f4eb; --warn:#8a5200; --warn-l:#fff3d9; --bad:#c0392f; --bad-l:#fdecea;
  --r:18px; --r2:12px; --pill:999px;
  --sh:0 1px 2px rgba(12,70,80,.05),0 10px 26px -14px rgba(12,90,100,.28);
  --sh2:0 2px 6px rgba(12,70,80,.08),0 20px 44px -18px rgba(12,90,100,.38);
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-head:"Fraunces Soft","Fraunces",Georgia,"Times New Roman",serif;
  --f-zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",sans-serif;
  --f-ur:"Urdu Nastaliq","Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Alvi Nastaleeq",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;min-height:100vh}
body.l-zh{line-height:1.65}
img,svg{max-width:100%}
a{color:var(--teal-d);text-underline-offset:3px}
a:hover{color:var(--teal)}
h1,h2,h3{font-family:var(--f-head);font-weight:700;line-height:1.18;margin:0 0 .5em;color:var(--ink);letter-spacing:-.005em}
h1{font-size:clamp(1.7rem,5.8vw,2.55rem)}
h2{font-size:clamp(1.3rem,4.2vw,1.7rem)}
h3,.h3{font-size:1.15rem}
.h2{font-size:clamp(1.3rem,4.2vw,1.7rem);font-family:var(--f-head);font-weight:700;line-height:1.2;margin:1.4em 0 .6em}
.h3{font-family:var(--f-head);font-weight:700;margin:1.2em 0 .5em}
p{margin:0 0 .9em}
ul,ol{margin:0 0 1em}
b,strong{font-weight:700}
small{font-size:.82em}
:focus-visible{outline:3px solid var(--apr);outline-offset:2px;border-radius:6px}
::selection{background:var(--teal-l)}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.narrow{max-width:720px}
.pad{padding-top:22px;padding-bottom:30px}
.center{text-align:center}
.muted{color:var(--mute);font-weight:500}
.quiet{color:var(--ink2)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 12px 12px;z-index:100;text-decoration:none}
.skip:focus{top:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- second language lines */
.ur,.zh{display:block;color:var(--ink2);font-weight:400}
.ur{font-family:var(--f-ur);font-size:max(1.04em,13.5px);line-height:2.1;direction:rtl;text-align:left}
.zh{font-family:var(--f-zh);font-size:max(.95em,12.5px);line-height:1.6;letter-spacing:.01em}
.zh.in{display:inline;margin-inline-start:.5em;font-size:max(.95em,12px)}
.ur.in{display:inline;margin-inline-start:0;margin-left:.5em;line-height:inherit;font-size:max(1em,13px)}
h1 .ur{font-size:max(.55em,14px)}
h1 .zh{font-size:max(.5em,13px)}
h1 .ur,h1 .zh{line-height:1.7;margin-top:.35em;font-weight:500;letter-spacing:0}
h2 .ur,.h2 .ur{font-size:max(.66em,14px)}
h2 .zh,.h2 .zh{font-size:max(.62em,13px)}
h2 .ur,h2 .zh,.h2 .ur,.h2 .zh{line-height:1.8;margin-top:.2em;font-weight:500}
h3 .ur,.h3 .ur{font-size:max(.8em,13.5px)}
h3 .zh,.h3 .zh{font-size:max(.78em,12.5px)}
h3 .ur,h3 .zh,.h3 .ur,.h3 .zh{line-height:1.8;font-weight:500}
.lead .ur,.lead .zh{font-size:.95em}
label .ur,label .zh{font-weight:400;font-size:.88em}
label .ur.in,label .zh.in{font-size:.88em}
.btn .ur,.btn .zh,.cartbar .ur,.cartbar .zh,.tile .ur,.tile .zh{color:inherit;opacity:.9;text-align:center}
.tile .ur,.tile .zh{text-align:left}
.btn .ur{line-height:1.8}

/* ---------------------------------------------------------------- icons and buttons */
.ic{flex:none;vertical-align:-.2em}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border:0;border-radius:var(--pill);background:var(--teal);color:#fff;font:600 1rem/1.25 var(--f-body);text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 8px 18px -10px rgba(10,127,140,.9);transition:background .15s,transform .1s,box-shadow .15s}
.btn:hover{background:var(--teal-d);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#fff;color:var(--teal-d);box-shadow:inset 0 0 0 1.5px var(--line2),var(--sh)}
.btn.sec:hover{background:var(--teal-xl);color:var(--teal-d)}
.btn.danger{background:var(--bad);box-shadow:0 8px 18px -10px rgba(192,57,47,.9)}
.btn.danger:hover{background:#a52f27}
.btn.sm{min-height:38px;padding:6px 16px;font-size:.92rem;white-space:nowrap}
.btn.block{display:flex;width:100%}
.btn.wide{flex:1 1 100%}
.btn.off,.btn:disabled{background:#d3e0e3;color:#6a838b;box-shadow:none;cursor:not-allowed}
.btn .bi{display:inline-flex;align-items:center;gap:8px}
.linkbtn{background:none;border:0;padding:9px 4px;font:600 .92rem var(--f-body);color:var(--teal-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--teal)}
.linkbtn.light{color:#cfe6ec}
.linkbtn.light:hover{color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.acts .btn{flex:1 1 150px}
.acts form.inl{flex:1 1 150px;display:flex}
.acts form.inl .btn{width:100%}
.acts .mapbtn{flex:1 1 100%}
.acts .copybtn{flex:1 1 150px;justify-content:center}
.inl{display:inline}
.cartlinks{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:18px 0 0}
.cartlinks a{font-weight:600}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:8px;min-height:62px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy);font:700 1.3rem/1 var(--f-head);flex:none}
.brand .bn b{color:var(--teal)}
.brand .mark{flex:none}
.logoimg{display:block;height:34px;width:auto;max-width:160px}
.areachip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:210px;margin-inline-start:auto;padding:8px 12px;border-radius:var(--pill);background:var(--teal-xl);box-shadow:inset 0 0 0 1px var(--line);color:var(--teal-d);font-weight:600;font-size:.9rem;text-decoration:none}
.areachip:hover{background:var(--teal-l)}
.areachip .an{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.areachip .an .ur,.areachip .an .zh{display:inline;margin-inline-start:.4em;line-height:1.4}
.areachip .an .ur{margin-inline-start:0;margin-left:.4em}
.langmenu{position:relative;flex:none}
.langmenu summary{list-style:none;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--pill);cursor:pointer;color:var(--ink2);font-weight:600;font-size:.88rem;box-shadow:inset 0 0 0 1px var(--line);background:#fff;user-select:none}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary:hover{background:var(--teal-xl)}
.langmenu ul{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:150px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:16px;box-shadow:var(--sh2);border:1px solid var(--line)}
.langmenu li a{display:block;padding:10px 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.langmenu li a:hover{background:var(--teal-xl)}
.langmenu li a.on{background:var(--teal-l);color:var(--teal-d)}
.cartlink{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--teal-d);text-decoration:none}
.cartlink:hover{background:var(--teal-xl)}
.count{display:inline-block;min-width:20px;height:20px;padding:0 6px;margin-inline-start:6px;border-radius:10px;background:var(--apr);color:#3b2100;font:800 .75rem/20px var(--f-body);text-align:center}
.cartlink .count{position:absolute;top:1px;right:-2px;margin:0}

/* ---------------------------------------------------------------- messages */
.flash{padding:12px 0;font-weight:600;border-bottom:1px solid transparent}
.flash.ok{background:var(--ok-l);color:#0d5a37;border-color:#bfe5d1}
.flash.bad{background:var(--bad-l);color:#8a241c;border-color:#f3c7c2}
.flash.warn{background:var(--warn-l);color:#6b4000;border-color:#f3d9a2}
.flash .ur,.flash .zh{color:inherit;opacity:.9}
.flash.inline{border:1px solid;border-radius:var(--r2);padding:10px 14px;margin:0 0 12px}
.problems{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.problems li{display:flex;gap:10px;align-items:flex-start;background:var(--bad-l);color:#7d2119;border-radius:var(--r2);padding:10px 14px;font-weight:600}
.problems li .ic{margin-top:3px}
.problems .ur,.problems .zh{color:inherit;font-weight:400}
.warnbox{background:var(--warn-l);color:#6b4000;border:1px solid #f1d79a;border-radius:var(--r2);padding:12px 14px;margin:12px 0}
.warnbox .ur,.warnbox .zh{color:#7a5410}
.warnbox p{margin:.4em 0 0}
.infobox,.paynote2{display:flex;gap:12px;align-items:flex-start;background:var(--teal-xl);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;margin:12px 0}
.infobox .ic,.paynote2 .ic{color:var(--teal);margin-top:2px}
.infobox p,.paynote2 p{margin:0}
.okbox{display:flex;gap:10px;align-items:flex-start;background:var(--ok-l);color:#0d5a37;border-radius:var(--r2);padding:10px 14px;margin:10px 0}
.empty{text-align:center;background:#fff;border-radius:var(--r);padding:28px 18px;margin:14px 0;box-shadow:var(--sh)}
.empty h1,.empty h2,.empty h3{font-size:1.35rem}
.empty .ur,.empty .zh{text-align:center}
.hint{color:var(--ink2);font-size:.9rem;margin:.4em 0 0}
.hint.center{text-align:center}
.lead{color:var(--ink2);font-size:1.06rem;max-width:62ch}
.crumbs{font-size:.88rem;color:var(--ink2);margin:0 0 14px}
.crumbs a{color:var(--ink2)}
.crumbs .ur.in,.crumbs .zh.in{font-size:.9em}

/* ---------------------------------------------------------------- hero, search, trust */
.hero{padding:26px 0 12px;background:radial-gradient(900px 340px at 92% -10%,rgba(242,156,68,.16),transparent 62%),radial-gradient(700px 300px at 0% 0%,rgba(10,127,140,.10),transparent 60%),linear-gradient(180deg,#e2f2f4,var(--bg))}
.hero.slim{padding:22px 0 10px}
.herogrid{display:grid;grid-template-columns:1fr;gap:18px}
.heroart{order:2}
.heroart svg,.heroart img{display:block;width:100%;height:150px;object-fit:cover;border-radius:26px;box-shadow:var(--sh2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 14px;border-radius:var(--pill);background:#fff;color:var(--teal-d);font-weight:600;font-size:.84rem;box-shadow:var(--sh)}
.eyebrow .ur.in,.eyebrow .zh.in{color:var(--ink2)}
.eyebrow .ur.in{display:block;margin-left:0}
.hero h1{margin-bottom:.35em}
.where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:14px 0 0;color:var(--ink2);font-size:.95rem}
.where .ic{color:var(--teal)}
.where a{font-weight:600}
.where b{color:var(--ink)}
.searchbar{background:linear-gradient(180deg,#e2f2f4,var(--bg));padding:14px 0 6px}
.sbox{position:relative;display:flex;align-items:center;gap:6px;background:#fff;border-radius:var(--pill);padding:5px;border:1px solid var(--line);box-shadow:var(--sh);margin:0 0 12px}
.sbox:focus-within{box-shadow:0 0 0 3px rgba(10,127,140,.25),var(--sh);border-color:var(--teal)}
.sbox input{flex:1;min-width:0;border:0;background:transparent;font:500 1rem var(--f-body);padding:10px 8px 10px 16px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.sbox input::placeholder{color:var(--mute)}
.sbox input::-webkit-search-cancel-button{display:none}
.sbox button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 18px;border:0;border-radius:var(--pill);background:var(--teal);color:#fff;font:600 .95rem var(--f-body);cursor:pointer}
.sbox button:hover{background:var(--teal-d)}
.sbox button .bt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.sbox button .bt .ur,.sbox button .bt .zh{color:#fff;opacity:.9;font-size:max(.82em,12.5px);line-height:1.5;text-align:left}
.sbox.big{padding:7px;margin-top:6px}
.sbox.big input{font-size:1.1rem;padding:14px 8px 14px 18px}
.sug{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:45;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh2);border:1px solid var(--line);text-align:left}
.sug a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 18px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.sug a:last-child{border-bottom:0}
.sug a.on,.sug a:hover{background:var(--teal-xl)}
.sgn{font-weight:700}
.sgn .sgr{margin-inline-start:6px;font-size:.7rem;font-weight:800;background:var(--apr-l);color:#8a4b00;border-radius:6px;padding:1px 6px}
.sgp{font-weight:800;color:var(--teal-d)}
.sgg{grid-column:1/-1;color:var(--ink2);font-size:.85rem}
.sgd{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:8px;background:var(--ok)}
.sgd.low{background:var(--apr)}
.sgd.out{background:#aab9be}
.trust{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.trust li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh)}
.trust .tx{display:flex;flex-direction:column;min-width:0}
.trust .tx>.ur,.trust .tx>.zh{line-height:1.7;font-size:.9em}
.tic{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--teal-l);color:var(--teal-d);flex:none}
.trust li:nth-child(2) .tic,.promises li:nth-child(2) .tic{background:var(--apr-l);color:var(--apr-d)}
.trust li:nth-child(3) .tic,.promises li:nth-child(3) .tic{background:#e5eefb;color:#2b5aa0}
.promises li:nth-child(4) .tic{background:var(--ok-l);color:var(--ok)}

/* ---------------------------------------------------------------- area tiles and shop cards */
.tiles{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;min-height:86px;padding:12px 14px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--sh);transition:transform .12s,border-color .12s,box-shadow .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:var(--sh2)}
.tile.on{border-color:var(--teal);background:var(--teal-xl)}
.tile.dim{opacity:.62}
.tile .tn{font:700 1.18rem/1.2 var(--f-head)}
.tile .tnu{font-size:.95em;line-height:1.8}
.tile .tf{color:var(--teal-d);font-weight:600;font-size:.84rem}
.tile .ur,.tile .zh{font-size:.82em;line-height:1.7}
.shops{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.shopcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;position:relative;overflow:hidden;background:#fff;border:1.5px solid transparent;border-radius:var(--r);padding:16px;box-shadow:var(--sh);text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.shopcard:hover{border-color:var(--teal);box-shadow:var(--sh2);transform:translateY(-1px);color:inherit}
.shopcard .cover{grid-column:1/-1;display:block;margin:-16px -16px 0;height:120px;overflow:hidden}
.shopcard .cover img{width:100%;height:100%;object-fit:cover;display:block}
.slogo{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;overflow:hidden;background:var(--teal-l);color:var(--teal-d);flex:none}
.slogo img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.slogo.big{width:80px;height:80px;border-radius:22px;box-shadow:var(--sh);background:#fff}
.sbody{display:block;min-width:0}
.sn{display:block;font:700 1.2rem/1.2 var(--f-head)}
.sline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0}
.sst{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--pill);font-weight:700;font-size:.8rem}
.sst::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.sst.open{background:var(--ok-l);color:var(--ok)}
.sst.closed{background:#edf1f2;color:#5f767e}
.sst .ur.in,.sst .zh.in{color:inherit}
.vbadge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 8px;border-radius:var(--pill);background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:.78rem}
.vbadge .ur.in,.vbadge .zh.in{color:inherit}
.sa{display:flex;gap:6px;align-items:flex-start;color:var(--ink2);font-size:.9rem}
.sa .ic{margin-top:3px;color:var(--teal)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.chip{display:inline-block;background:var(--apr-l);color:#6a3d06;border-radius:10px;padding:4px 10px;font-size:.82rem;font-weight:600}
.chip .ur,.chip .zh{display:inline;margin-inline-start:.4em;color:inherit;opacity:.85;line-height:1.5;font-size:.95em}
.chip .ur{margin-inline-start:0;margin-left:.4em}
.shophead{display:flex;gap:16px;align-items:center;margin:0 0 14px}
.shophead.overlap{margin-top:-52px;position:relative}
.shophead h1{margin:0 0 .15em;font-size:clamp(1.5rem,5vw,2.1rem)}
.shophead .sline{margin:4px 0 0}
.shopcover{margin:0 0 6px;border-radius:26px;overflow:hidden;box-shadow:var(--sh2);max-height:240px}
.shopcover img{display:block;width:100%;height:100%;max-height:240px;object-fit:cover}
.arealist{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px}
.al{background:#fff;border-radius:var(--r2);padding:12px 14px;box-shadow:var(--sh);border:1.5px solid transparent}
.al.mine{border-color:var(--teal);background:var(--teal-xl)}
.aln{display:flex;align-items:center;gap:10px;font:700 1.05rem var(--f-head)}
.you{font:700 .75rem var(--f-body);background:var(--teal);color:#fff;border-radius:var(--pill);padding:2px 10px}
.you .ur.in,.you .zh.in{color:#fff}
.platnote{display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;padding:12px 14px;border-radius:var(--r2);background:#fff;color:var(--ink2);font-size:.9rem;box-shadow:var(--sh)}
.platnote .ic{color:var(--teal);margin-top:2px}

/* ---------------------------------------------------------------- medicine rows and page */
.rows{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;background:#fff;border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.addf .btn{min-width:92px}
.thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--teal-l);color:var(--teal-d);text-decoration:none}
.rb{min-width:0;display:flex;flex-direction:column;gap:3px}
.rname{font-weight:700;font-size:1.05rem;color:var(--ink);text-decoration:none;line-height:1.3}
.rname:hover{color:var(--teal)}
.rmeta{display:flex;flex-wrap:wrap;gap:0 12px;color:var(--ink2);font-size:.86rem}
.rph{display:flex;align-items:center;gap:6px;color:var(--teal-d);font-size:.86rem;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.badge{display:inline-block;padding:2px 10px;border-radius:var(--pill);font-weight:700;font-size:.76rem}
.b-in{background:var(--ok-l);color:var(--ok)}
.b-low{background:var(--warn-l);color:var(--warn)}
.b-out{background:#edf1f2;color:#5f767e}
.badge .ur.in,.badge .zh.in{color:inherit}
.rxtag{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--pill);background:var(--apr-l);color:#8a4b00;font-weight:700;font-size:.76rem}
.rxtag .ur.in,.rxtag .zh.in{color:inherit}
.rr{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.price{font:800 1.2rem var(--f-body);color:var(--ink)}
.price.ask{font-size:.92rem;font-weight:600;color:var(--ink2)}
.psub{display:block;font-size:.78rem;font-weight:500;color:var(--ink2)}
.note{font-size:.84rem;color:var(--ink2);text-align:right}
.note .ur,.note .zh{text-align:right}
.addf{margin:0}
.med{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:#fff;border-radius:26px;padding:20px;box-shadow:var(--sh)}
.medpic{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:linear-gradient(135deg,var(--teal-l),#fff1df);color:var(--teal-d)}
.medinfo{min-width:0}
.medinfo h1{font-size:clamp(1.5rem,5vw,2.1rem);margin-bottom:.3em}
.facts{display:grid;gap:10px;margin:14px 0}
.facts>div{display:grid;gap:2px}
.facts dt{color:var(--ink2);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.facts dt .ur.in,.facts dt .zh.in{text-transform:none;letter-spacing:0;display:inline-block;white-space:nowrap}
.facts dd{margin:0;font-weight:500}
.pbox{display:flex;flex-wrap:wrap;gap:12px 36px;margin:14px 0;padding:14px 16px;border-radius:var(--r2);background:var(--teal-xl);border:1px dashed var(--line2)}
.pbox .lab{color:var(--ink2);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.pbox .lab .ur.in,.pbox .lab .zh.in{text-transform:none;letter-spacing:0}
.pbox .price{font-size:1.6rem}
.buyf{margin:14px 0}
.modes{border:0;margin:0 0 12px;padding:0;display:grid;gap:8px}
.mode{display:block;cursor:pointer}
.mode input{position:absolute;opacity:0;pointer-events:none}
.mode .mt{display:block;padding:12px 16px;border-radius:var(--r2);border:1.5px solid var(--line2);background:#fff}
.mode .mt1{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.mode input:checked+.mt{border-color:var(--teal);background:var(--teal-xl);box-shadow:0 0 0 3px rgba(10,127,140,.15)}
.mode input:focus-visible+.mt{outline:3px solid var(--apr);outline-offset:2px}
.qtyrow{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.qtyrow label{font-weight:600;margin:0;white-space:nowrap;flex:none}
.qtyin{width:84px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line2);background:#fff;font:600 1.05rem var(--f-body);text-align:center}
.deliv{margin:16px 0}
.deliv .h3{margin-top:0}
.safenote{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;color:var(--ink2);font-size:.88rem}
.safenote .ic{margin-top:3px;color:var(--teal)}
.safenote .ur,.safenote .zh{margin-top:2px}

/* ---------------------------------------------------------------- cart, checkout, slip */
.from{margin:0 0 12px;color:var(--ink2)}
.from .ur.in,.from .zh.in{color:var(--ink2)}
.lines{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;background:#fff;border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.line.bad{background:var(--bad-l)}
.line .lb{grid-column:1/-1;display:flex;flex-direction:column;gap:2px}
.lname{font-weight:700;color:var(--ink);text-decoration:none}
.lmeta{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center;color:var(--ink2);font-size:.88rem}
.lbad{color:var(--bad);font-weight:700}
.qtyf{display:flex;gap:8px;align-items:center;margin:0}
.qtyf .qtyin{flex:none;width:84px}
.line .lt{justify-self:end;font-weight:800;font-size:1.05rem}
.line .rmf{grid-column:1/-1;margin:0}
.slip{background:#fff;border-radius:var(--r);padding:6px 16px 14px;margin:14px 0;box-shadow:var(--sh);border-top:6px solid var(--teal)}
.slip.compact{padding-top:10px}
.slip .from{margin:6px 0}
.mini{list-style:none;margin:0;padding:0}
.mini li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.mini li>span:last-child{white-space:nowrap;flex:none}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.tot>span:first-child{color:var(--ink2)}
.tot.grand{border-bottom:0;padding-top:12px;font-size:1.25rem}
.tot.grand>span:first-child{color:var(--ink);font-weight:700}
.tot.grand b{font:800 1.45rem var(--f-body);color:var(--teal-d)}
.paynote{margin:8px 0 0;color:var(--ink2);font-weight:600}
.cartbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:35;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:640px;margin:0 auto;padding:12px 22px;border-radius:var(--pill);background:var(--teal);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 14px 34px -10px rgba(6,101,112,.75)}
.cartbar:hover{background:var(--teal-d);color:#fff}
.cartbar .cb1{display:flex;align-items:center;gap:10px}
.cartbar .cb1>span{display:flex;flex-direction:column;line-height:1.2}
.cartbar .ur,.cartbar .zh{color:#fff;font-size:.8em;line-height:1.6}
.cartbar b{font-size:1.1rem}

/* ---------------------------------------------------------------- forms */
.form .field,.field{margin:0 0 16px}
.form label,.field>label,.field>.lbl{display:block;font-weight:600;margin:0 0 6px}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],textarea,select{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);font:500 1rem var(--f-body);-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234d6770' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
textarea{resize:vertical;min-height:96px;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,127,140,.18)}
input[type=file]{width:100%;padding:10px;border:1.5px dashed var(--line2);border-radius:14px;background:var(--teal-xl);font:500 .95rem var(--f-body);color:var(--ink2)}
input[type=file]::file-selector-button{margin-inline-end:12px;padding:8px 16px;border:0;border-radius:var(--pill);background:var(--teal);color:#fff;font:600 .9rem var(--f-body);cursor:pointer}
.static{margin:0;padding:12px 14px;border-radius:14px;background:var(--teal-xl);border:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
.check{display:flex;gap:12px;align-items:flex-start;margin:14px 0;padding:12px 14px;border-radius:14px;background:var(--teal-xl);border:1px solid var(--line);cursor:pointer;font-weight:400}
.check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--teal)}
.check.small{background:none;border:0;padding:4px 0;margin:6px 0}
.form .check,.form label.check{display:flex;font-weight:400;margin:14px 0}
.form .check.small,.form label.check.small{margin:6px 0}
.check .ur,.check .zh{margin-top:4px;font-size:.92em}
.needrx input[type=file]{border-color:var(--apr);background:var(--apr-l)}
.form.narrow{max-width:460px}
.card{background:#fff;border-radius:var(--r);padding:16px 18px;margin:0 0 16px;box-shadow:var(--sh)}
.card>.h3:first-child,.card>h2:first-child{margin-top:0}

/* ---------------------------------------------------------------- order page */
.statebox{margin:14px 0;padding:16px 18px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);border-left:6px solid var(--teal)}
.statebox>b{font:700 1.2rem/1.3 var(--f-head);display:block}
.statebox>b .ur,.statebox>b .zh{font-size:.74em;font-weight:500;line-height:1.8;margin-top:.1em}
.statebox p{margin:.5em 0 0}
.statebox p:first-of-type{margin-top:.4em}
.statebox.s-pay{background:var(--apr-l);border-left-color:var(--apr)}
.statebox.s-ok{background:var(--ok-l);border-left-color:var(--ok)}
.statebox.s-cancel{background:var(--bad-l);border-left-color:var(--bad)}
.refundline{padding:10px 12px;border-radius:12px;background:#fff;margin-top:12px!important}
.timerline{display:flex;align-items:center;gap:8px;font-weight:600}
.timer{font:800 1.3rem var(--f-body);font-variant-numeric:tabular-nums;color:var(--apr-d);letter-spacing:.03em}
.paycard{margin:16px 0;padding:18px;background:#fff;border-radius:26px;box-shadow:var(--sh2);border:2px solid var(--teal-l)}
.paycard h2{margin-top:0}
.step{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-start;margin:16px 0 8px}
.step>span:nth-child(2){flex:1 1 200px}
.sn1{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font:800 .95rem var(--f-body)}
.accts{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:10px}
.acct{display:grid;gap:3px;padding:14px 16px;border-radius:16px;background:var(--teal-xl);border:1px solid var(--line)}
.acct .am{font-weight:700;color:var(--teal-d)}
.acct .anum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:700 1.35rem/1.25 var(--f-body);letter-spacing:.02em}
.acct .at{color:var(--ink2);font-size:.9rem}
.copybtn{display:inline-flex;align-items:center;padding:9px 14px;border-radius:var(--pill);border:1.5px solid var(--line2);background:#fff;color:var(--teal-d);font:600 .84rem/1.3 var(--f-body);cursor:pointer;letter-spacing:0}
.copybtn:hover{background:var(--teal-l)}
.copybtn .cl,.copybtn .cd{display:inline-flex;align-items:center;gap:6px}
.copybtn .cd{display:none}
.copybtn.done{border-color:var(--ok);background:var(--ok-l);color:var(--ok)}
.copybtn.done .cl{display:none}
.copybtn.done .cd{display:inline-flex}
.copybtn .ur.in,.copybtn .zh.in{color:inherit}
.payform{margin:12px 0 4px}
.or{position:relative;margin:18px 0;text-align:center;color:var(--ink2)}
.or::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.or span{position:relative;padding:0 14px;background:#fff}
.cancelbox{margin:14px 0;padding:12px 16px;border-radius:var(--r2);background:#fff;box-shadow:var(--sh)}
.cancelbox>summary{cursor:pointer;font-weight:600;color:var(--bad);list-style:revert}
.cancelbox.again>summary{color:var(--teal-d)}
.cancelbox[open]>summary{margin-bottom:10px}
.cancelled{margin:14px 0;padding:14px 18px;border-radius:var(--r);background:var(--bad-l);border-left:6px solid var(--bad);color:#7d2119}
.donebox{margin:14px 0;padding:14px 18px;border-radius:var(--r);background:var(--ok-l);border-left:6px solid var(--ok);color:#0d5a37}
.blister{position:relative;list-style:none;margin:18px 0;padding:18px 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-radius:24px;background:linear-gradient(180deg,#fafdfd,#e3eef0);border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff,var(--sh)}
.blister li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.82rem;font-weight:600;color:var(--mute)}
.blister li::before{content:"";position:absolute;top:22px;left:-50%;width:100%;height:4px;border-radius:2px;background:#d3e2e5;z-index:0}
.blister li:first-child::before{display:none}
.blister li.done::before,.blister li.now::before{background:var(--teal)}
.bl{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#d5e4e7);box-shadow:inset 0 3px 5px rgba(0,0,0,.14),0 1px 0 #fff;color:#fff}
.blister li.done .bl{background:radial-gradient(circle at 32% 26%,#3cc0cd,var(--teal));box-shadow:inset 0 -3px 5px rgba(0,0,0,.18),0 4px 10px -4px rgba(10,127,140,.7)}
.blister li.now .bl{background:radial-gradient(circle at 32% 26%,#ffd29c,var(--apr));box-shadow:0 0 0 6px rgba(242,156,68,.25);animation:pulse 1.8s ease-in-out infinite}
.blister li.done,.blister li.now{color:var(--ink)}
.bt{display:block;line-height:1.3}
.bt .ur{font-size:max(.95em,12.5px);line-height:1.6;text-align:center}
.bt .zh{font-size:max(.9em,12px);line-height:1.6;text-align:center}
.btime{font-weight:500;font-size:.78rem;color:var(--ink2)}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(242,156,68,.08)}}

/* ---------------------------------------------------------------- home page sections */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.steps li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.steps li>div{flex:1;min-width:0}
.promises{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.promises li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.promises .tic{grid-row:1/span 3}
.promises li>*:not(.tic){grid-column:2}
.promises li>b{font:700 1.08rem var(--f-head)}
.promises li>b .ur,.promises li>b .zh{font:inherit;font-size:.82em;font-weight:500}
.promises li>span:not(.tic){color:var(--ink2);font-size:.95rem}
.promises li>span:not(.tic) .ur,.promises li>span:not(.tic) .zh{font-size:.95em}
.morelinks{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0}
.morelinks a{font-weight:600}
.joinstrip{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;padding:18px;border-radius:24px;background:linear-gradient(120deg,var(--teal-l),#fff1df);box-shadow:var(--sh)}
.joinstrip>div{flex:1 1 260px;min-width:0}
.joinstrip>div>b{display:block;font:700 1.15rem var(--f-head)}
.joinstrip>div>span{color:var(--ink2)}

/* ---------------------------------------------------------------- footer */
.foot{margin-top:40px;padding:30px 0 28px;background:var(--navy);color:#d6e5ee}
.foot.hasbar{padding-bottom:96px}
.foot a{color:#fff}
.foot .ur,.foot .zh{color:#a9c5d8}
.disc{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.disc .dic{color:var(--apr);flex:none;margin-top:2px}
.disc p{margin:0 0 .6em}
.disc .dlink{margin:0;font-size:.9rem}
.disc .dlink a{margin-inline-end:16px;text-decoration:underline;text-underline-offset:3px}
.footnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;margin:26px 0 8px}
.fh{margin:0 0 10px;font:700 .98rem var(--f-head);color:var(--apr)}
.fh .ur,.fh .zh{color:#a9c5d8;font-weight:400}
.footnav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footnav a{color:#d6e5ee;text-decoration:none;font-size:.94rem}
.footnav a:hover{color:#fff;text-decoration:underline}
.footnav a .ur,.footnav a .zh{font-size:.88em;line-height:1.7}
.emerg{display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;padding:12px 16px;border-radius:var(--r2);background:rgba(242,156,68,.14);color:#ffe2bd;font-size:.92rem}
.emerg .ic{margin-top:3px;flex:none}
.emerg .ur,.emerg .zh{color:#ffe2bd;opacity:.9}
.footline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:.9rem}
.footline .fl a{margin-inline-end:16px;color:#bcd3e2;text-decoration:none}
.footline .fl a.on{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.footline .copy{color:#9bb7c8}

/* ---------------------------------------------------------------- information and policy pages */
.legal{max-width:820px}
.langsw{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;color:var(--ink2);font-size:.9rem}
.langsw a{padding:6px 14px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.langsw a.on{background:var(--teal);color:#fff;box-shadow:none}
.ldoc{background:#fff;border-radius:26px;padding:22px 20px;box-shadow:var(--sh)}
.ldoc>h1{margin-bottom:.4em}
.ldoc .lead{font-size:1.1rem;color:var(--ink2)}
.ldoc .updated{display:inline-block;margin:0 0 14px;padding:3px 12px;border-radius:var(--pill);background:var(--teal-xl);color:var(--ink2);font-size:.85rem;font-weight:600}
.inshort{margin:16px 0;padding:16px 18px;border-radius:var(--r);background:var(--teal-xl);border:1px solid var(--line)}
.inshort h2{font-size:1.1rem;margin:0 0 .5em;color:var(--teal-d)}
.inshort ul{margin:0;padding-inline-start:1.2em}
.inshort li{margin:.3em 0}
.toc{margin:16px 0;padding:14px 18px;border-radius:var(--r);background:#fafcfc;border:1px solid var(--line)}
.toc h2{font-size:1.05rem;margin:0 0 .4em}
.toc ol{margin:0;padding-inline-start:1.4em;columns:1}
.toc li{margin:.25em 0;break-inside:avoid}
.lsec{margin:26px 0 0;scroll-margin-top:84px}
.lsec h2{font-size:1.4rem;padding-bottom:.3em;border-bottom:2px solid var(--teal-l)}
.lsec ul,.lsec ol{padding-inline-start:1.4em}
.lsec li{margin:.35em 0}
.callout{margin:14px 0;padding:14px 16px;border-radius:var(--r2);background:var(--apr-l);border-left:5px solid var(--apr);color:#59380a}
.faq{margin:10px 0;border-radius:var(--r2);border:1px solid var(--line);background:#fff}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:600}
.faq[open] summary{border-bottom:1px solid var(--line);background:var(--teal-xl)}
.faq>div{padding:12px 16px}
.fine{margin:26px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--ink2);font-size:.85rem}
.relpages{margin:22px 0 0}
.relpages h2{font-size:1.1rem}
.relpages ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.relpages a{display:inline-block;padding:8px 16px;border-radius:var(--pill);background:#fff;box-shadow:var(--sh);text-decoration:none;font-weight:600}
.contactcard{display:grid;gap:10px;margin:14px 0;padding:16px 18px;border-radius:var(--r);background:var(--teal-xl);border:1px solid var(--line)}
.contactcard dt{color:var(--ink2);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.contactcard dd{margin:0;font-weight:500}
.compactfacts{display:grid;gap:8px;margin:12px 0}
.ldoc.rtl{font-family:var(--f-ur);font-size:1.08rem;line-height:2.25;text-align:right}
.ldoc.rtl h1,.ldoc.rtl h2,.ldoc.rtl h3{font-family:var(--f-ur);line-height:1.9}
.ldoc.rtl .lsec h2{line-height:2}
.ldoc[lang="zh-CN"]{font-family:var(--f-zh);line-height:1.9}
.ldoc[lang="zh-CN"] h1,.ldoc[lang="zh-CN"] h2,.ldoc[lang="zh-CN"] h3{font-family:var(--f-zh);font-weight:700}

/* ---------------------------------------------------------------- staff */
body.staff{background:#eef5f6}
.stafftop{background:var(--navy);border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.stafftop .brand{color:#fff}
.stafftop .brand .bn b{color:#6fd0da}
.stag{font:600 .75rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:#9fc3d6;margin-inline-start:6px}
.stafftop .topin{min-height:56px}
.who{margin-inline-start:auto;color:#cfe6ec;font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.logout{margin:0}
.snav{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.snav a{flex:none;display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--pill);color:#cfe6ec;text-decoration:none;font-weight:600}
.snav a:hover{background:rgba(255,255,255,.1);color:#fff}
.snav a.on{background:#fff;color:var(--navy)}
.switcher{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.switcher label{font-weight:600;margin:0}
.switcher select{width:auto;max-width:260px}
.statusrow{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:12px 0 18px}
.openbox,.feedbox{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);color:inherit;text-decoration:none;margin:0}
.openbox.is-open{border-left:6px solid var(--ok)}
.openbox.is-closed{border-left:6px solid var(--bad)}
.otxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.otxt>span{color:var(--ink2);font-size:.9rem}
.feedbox{border-left:6px solid var(--line2)}
.feedbox.f-ok{border-left-color:var(--ok)}
.feedbox.f-bad{border-left-color:var(--bad)}
.feedbox.f-none,.feedbox.f-warn{border-left-color:var(--apr)}
.feedline{padding:10px 14px;border-radius:var(--r2);background:var(--teal-xl);margin:0 0 14px}
.feedline.f-bad{background:var(--bad-l);color:#7d2119}
.feedline.f-none,.feedline.f-warn{background:var(--apr-l);color:#6a3d06}
.numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 8px}
.num{display:block;padding:12px 14px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);color:inherit;text-decoration:none}
.num b{display:block;font:800 1.6rem/1.2 var(--f-head)}
.num span{color:var(--ink2);font-size:.84rem}
.num.hot{background:var(--apr-l);box-shadow:inset 0 0 0 2px var(--apr)}
a.num:hover{transform:translateY(-1px)}
.numbers .num:last-child:nth-child(odd){grid-column:1/-1}
.ocards{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.ocard{position:relative;display:grid;gap:5px;padding:12px 14px 12px 20px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);color:inherit;text-decoration:none;overflow:hidden}
.ocard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--line2)}
.ocard:hover{box-shadow:var(--sh2);color:inherit}
.ocard.st-check::before{background:var(--apr)}
.ocard.st-pack::before{background:var(--teal)}
.ocard.st-out::before{background:#3b6fb5}
.ocard.st-done::before{background:var(--ok)}
.ocard.st-unpaid::before{background:#a9bdc3}
.ocard.st-cancel::before{background:#c9d2d5}
.ocard.st-refund::before{background:var(--bad)}
.oc1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.oid{font:800 1.1rem var(--f-head)}
.oage{margin-inline-start:auto;color:var(--ink2);font-size:.82rem}
.oc2{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.oc2 span{color:var(--ink2);font-size:.9rem}
.oc3{color:var(--ink2);font-size:.9rem}
.oc4{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.oc4 b{font-size:1.05rem}
.oc4 span{color:var(--ink2);font-size:.82rem}
.stchip{display:inline-block;padding:2px 10px;border-radius:var(--pill);background:#eaf0f1;color:#44606a;font-weight:700;font-size:.78rem;line-height:1.5}
.stchip.st-check{background:var(--apr-l);color:#8a4b00}
.stchip.st-pack{background:var(--teal-l);color:var(--teal-d)}
.stchip.st-out{background:#e3ecf8;color:#1e4a86}
.stchip.st-done{background:var(--ok-l);color:var(--ok)}
.stchip.st-refund{background:var(--bad-l);color:var(--bad)}
.stchip.rx{background:var(--apr-l);color:#8a4b00}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:4px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.tabs a.on{background:var(--teal);color:#fff;box-shadow:none}
.tabs a .count{background:var(--apr)}
.actbar{margin:14px 0}
.paycheck{border-left:6px solid var(--line2)}
.paycheck.is-check{border-left-color:var(--apr);background:linear-gradient(180deg,var(--apr-l),#fff 60%)}
.paycheck.is-wait{border-left-color:#a9bdc3}
.paycheck.is-ok{border-left-color:var(--ok)}
.proofpic{display:inline-block;margin:6px 0 14px}
.proofpic img{display:block;max-width:100%;max-height:520px;border-radius:14px;border:1px solid var(--line);background:#fff}
.refundbox{border-left:6px solid var(--bad);background:linear-gradient(180deg,var(--bad-l),#fff 70%)}
.oitems{list-style:none;margin:0;padding:0}
.oitems li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-bottom:1px dashed var(--line)}
.oq{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:var(--teal-l);color:var(--teal-d);font-weight:800}
.oiname{display:flex;flex-direction:column;gap:1px}
.oiname span{color:var(--ink2);font-size:.86rem}
.oishelf{color:var(--teal-d)!important;font-weight:600}
.oitot{display:flex;flex-direction:column;align-items:flex-end;font-weight:800}
.oitot small{color:var(--ink2);font-weight:500}
.history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.history li{display:flex;gap:12px}
.hw{flex:none;min-width:84px;color:var(--ink2);font-size:.86rem}
.history small{color:var(--ink2);font-weight:500}
.areaform .arows{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.arow{padding:12px 14px;border-radius:var(--r);background:#fff;box-shadow:var(--sh);border:1.5px solid transparent}
.arow.on{border-color:var(--teal-l);background:var(--teal-xl)}
.atoggle{display:flex;align-items:center;gap:12px;font-weight:600;margin:0 0 6px;cursor:pointer}
.atoggle input{width:22px;height:22px;accent-color:var(--teal)}
.afields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.afields label{font-size:.82rem;font-weight:600;color:var(--ink2);margin:0}
.afields input{margin-top:4px;padding:9px 12px}
.checkform{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0}
.photorow{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px}
.thumbpic{display:block;max-width:100%;height:auto;margin:0 0 8px;border-radius:14px;border:1px solid var(--line);background:#fff}
.logothumb{max-height:48px;width:auto}
.acctrow{margin:0 0 14px;padding:12px 14px 0;border:1.5px dashed var(--line2);border-radius:var(--r2)}
.acctrow legend{padding:0 8px;font-weight:700;color:var(--teal-d)}
.phtable{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.phtable li{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.phtable li a{margin-inline-start:auto;font-weight:600}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk{display:flex;gap:10px;align-items:flex-start}
.chk .ck{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px}
.chk.is-ok .ck{background:var(--ok-l);color:var(--ok)}
.chk.is-bad .ck{background:var(--bad-l);color:var(--bad)}
.loginpage{display:grid;place-items:center;padding:16px;background:radial-gradient(900px 400px at 90% -10%,rgba(242,156,68,.18),transparent 60%),linear-gradient(180deg,#dff0f2,#f3f9fa)}
.loginbox{width:100%;max-width:420px;margin:0 auto;padding:28px 24px;background:#fff;border-radius:28px;box-shadow:var(--sh2)}
.loginbox .brand{justify-content:center;margin:0 0 14px}
.loginbox h1{text-align:center;font-size:1.6rem}
.loginerr{display:flex;gap:10px;margin:10px 0;padding:10px 14px;border-radius:var(--r2);background:var(--bad-l);color:#7d2119;font-weight:600}

/* ---------------------------------------------------------------- set-up page */
body.installpage{background:linear-gradient(180deg,#dff0f2,#f3f9fa 380px)}
.installpage .wrap{max-width:760px}
.installpage .card{margin-top:0}
.installpage .checks .chk b{font-weight:700}
.installpage h1{margin-top:6px}

/* ---------------------------------------------------------------- wider screens */
@media (min-width:480px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .afields{grid-template-columns:repeat(4,minmax(0,1fr))}
  .toc ol{columns:2}
}
@media (min-width:640px){
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promises{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footnav{grid-template-columns:repeat(4,minmax(0,1fr))}
  .two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photorow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers{grid-template-columns:repeat(5,minmax(0,1fr))}
  .numbers .num:last-child:nth-child(odd){grid-column:auto}
  .statusrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{grid-template-columns:auto minmax(0,1fr) auto}
  .row .rr{grid-column:auto;flex-direction:column;align-items:flex-end;border-top:0;padding-top:0}
  .facts>div{grid-template-columns:210px minmax(0,1fr);gap:12px}
  .ldoc{padding:32px 36px}
  .line{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"lb qty lt rm"}
  .line .lb{grid-column:auto}
  .line .rmf{grid-column:auto}
}
@media (min-width:760px){
  .shops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .med{grid-template-columns:130px minmax(0,1fr);padding:28px}
  .medpic{width:112px;height:112px}
  .hero{padding:44px 0 20px}
}
@media (min-width:820px){
  .herogrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:40px}
  .heroart{order:0}
  .heroart svg,.heroart img{height:auto;aspect-ratio:6/5}
}
@media (min-width:1000px){
  .shops{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- small screens */
@media (max-width:519px){
  .blister{grid-template-columns:minmax(0,1fr);gap:0;padding:14px 18px}
  .blister li{flex-direction:row;align-items:center;text-align:left;gap:14px;padding:8px 0;font-size:.95rem}
  .blister li::before{top:auto;bottom:calc(50% + 24px);left:23px;width:4px;height:calc(100% - 20px)}
  .blister li:first-child::before{display:none}
  .bt{flex:1}
  .bt .ur,.bt .zh{text-align:left}
  .btime{margin-inline-start:auto}
}
@media (max-width:420px){
  .snav{gap:2px}
  .snav a{padding:8px 10px;font-size:.95rem}
  .topin{gap:6px}
  .brand{font-size:1.15rem;gap:6px}
  .brand.haslogo .bn{display:none}
  .areachip{max-width:none;flex:1;margin-inline-start:0}
  .langmenu .lcur{display:none}
  .langmenu summary{padding:9px 10px}
  .logoimg{max-width:110px}
  .cartlink{width:40px;height:40px}
  .ldoc{padding:20px 16px}
  .sbox button .bt .ur,.sbox button .bt .zh{display:none}
  .sbox button{padding:6px 14px}
}
@media (max-width:359px){
  .snav a{padding:8px 8px;font-size:.9rem}
  .brand .bn{display:none}
  .wrap{padding:0 12px}
  .tiles{gap:8px}
  .tile{padding:10px 12px}
  .acct .anum{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .top,.foot,.cartbar,.snav,.acts,.btn,.cancelbox,.langsw,.skip,.relpages,.copybtn,.searchbar{display:none!important}
  body{background:#fff}
  .slip,.card,.ldoc,.statebox{box-shadow:none;border:1px solid #ccc}
}

/* ---------------------------------------------------------------- set-up page extras */
.chk.is-warn .ck{background:var(--warn-l);color:var(--warn)}
.checks.card{padding:16px 18px;margin:0 0 16px}
.installpage .brand{font-size:1.7rem;margin:4px 0 14px}
.installpage .acts{margin:18px 0}
.installpage ol{padding-inline-start:1.3em}
.installpage ol li{margin:.4em 0}
.installpage .okbox .ic{margin-top:3px}

/* location pin: the "Share my location" block and the small Pin tag on staff order cards */
.geo{padding:14px 16px;border-radius:var(--r);background:var(--teal-xl);border:1px solid var(--line)}
.geo>label{margin-top:12px}
.geo .hint{margin:.3em 0 .6em}
.geoact{margin:10px 0 4px}
.geobtn[hidden],.geostate[hidden]{display:none}
.geostate{margin:8px 0 6px;padding:10px 12px;border-radius:12px;background:#fff;border:1.5px solid var(--line2);font-weight:500}
.geostate.ok{border-color:var(--ok);background:var(--ok-l)}
.geostate.warn{border-color:var(--apr);background:var(--apr-l)}
.geostate.bad{border-color:var(--bad);background:var(--bad-l)}
.geoacts{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:6px}
.geoacts a{font-weight:600;padding:9px 0;display:inline-block}
.geoacts a,.geoacts .linkbtn{font-size:.95rem;line-height:1.35}
.geoacts .linkbtn{padding:9px 0;text-align:start}
.stchip.pin{display:inline-flex;align-items:center;gap:4px;background:var(--teal-l);color:var(--teal-d)}
.stchip.pin .ic{width:13px;height:13px}
.namerows{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.namerows .arow{padding:10px 14px;background:var(--teal-xl);box-shadow:none;border-color:var(--line)}
.namerows .afields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.namerows .afields input{width:100%}