/* MDY Household Shop — shared styles */
:root{
  --bg:#f4f6f3; --surface:#ffffff; --ink:#132a2a; --muted:#5d716f; --line:#d9e3e1;
  --brand:#036c29; --brand-ink:#ffffff; --brand-soft:#e3f1e6; --bark:#562f28;
  --price:#c2410c; --warn:#a16207; --ok:#15803d; --bad:#b91c1c;
  --f-body:"Noto Sans Myanmar","Myanmar Text","Padauk",system-ui,sans-serif;
  --f-num:"Archivo","Noto Sans Myanmar",system-ui,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0e1716; --surface:#16211f; --ink:#e4efed; --muted:#93a8a5; --line:#2a3a38;
  --brand:#4cc26e; --brand-ink:#04210c; --brand-soft:#173a22; --bark:#b9877c; --price:#fb923c; --warn:#facc15; --ok:#4ade80; --bad:#f87171; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.7}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

header.bar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;text-decoration:none;color:inherit}
.logo img{width:44px;height:44px;border-radius:10px;background:#fff;flex:none}
.logo .lt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.logo b{font-family:var(--f-num);font-weight:800;font-size:18px;letter-spacing:.01em;color:var(--brand)}
.logo span{font-size:12px;color:var(--muted)}
.search{flex:1 1 260px;display:flex;min-width:0;order:3}
.search input{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
@media (min-width:760px){.search{order:0;max-width:420px}}
.cartbtn{display:flex;align-items:center;gap:8px;border:0;background:var(--brand);color:var(--brand-ink);padding:8px 16px;border-radius:999px;font-weight:700}
.cartbtn .n{font-family:var(--f-num);background:var(--brand-ink);color:var(--brand);border-radius:999px;padding:0 8px;font-size:13px}

.terms{background:var(--brand-soft);border-bottom:1px solid var(--line)}
.terms .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:8px;font-size:13px}
.terms b{font-family:var(--f-num)}
.notice{background:var(--warn);color:#fff;font-size:13px}
.notice .wrap{padding-block:6px}

.intro{display:grid;gap:18px;padding-block:22px 6px}
@media (min-width:860px){.intro{grid-template-columns:1.4fr 1fr;align-items:end}}
.intro h1{margin:0;font-size:clamp(22px,3.4vw,32px);line-height:1.4;text-wrap:balance}
.intro p{margin:6px 0 0;color:var(--muted);max-width:60ch}
.howto{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:13px}
.howto li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.howto li b{font-family:var(--f-num);color:var(--brand);margin-right:4px}

.cats{display:flex;gap:8px;overflow-x:auto;padding-block:14px 4px;scrollbar-width:none}
.cat{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 14px;font-size:14px;white-space:nowrap}
.cat[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cat small{font-family:var(--f-num);opacity:.7;margin-left:4px}
.tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-block:6px 14px;font-size:13px;color:var(--muted)}
.tools select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;padding-bottom:40px}
@media (min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ph{position:relative;aspect-ratio:1;background:#fff;max-width:100%}
.ph img{width:100%;height:100%;object-fit:contain;display:block}
.code{position:absolute;left:8px;top:8px;font-family:var(--f-num);font-weight:700;font-size:12px;background:rgba(86,47,40,.88);color:#fff;padding:1px 8px;border-radius:6px}
.body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.name{font-size:14px;line-height:1.6;margin:0;min-height:3.2em;font-weight:600}
.price{font-family:var(--f-num);font-weight:800;font-size:20px;color:var(--price);line-height:1.2}
.price small{font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--muted);margin-left:3px}
.meta{font-size:12px;color:var(--muted);line-height:1.5}
.meta .pk{display:block}
.add{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.step{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.add .step{flex:1 1 auto;justify-content:space-between}
.step button{border:0;background:var(--bg);width:30px;height:34px;font-size:18px;line-height:1}
.step input{width:38px;height:34px;border:0;text-align:center;font-family:var(--f-num);font-weight:700;background:var(--surface)}
.addbtn{flex:1 1 120px;height:36px;border:0;border-radius:8px;background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:13px;white-space:nowrap}
.addbtn.in{background:var(--brand-soft);color:var(--brand)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}

footer{border-top:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--muted)}
footer .wrap{padding-block:20px;display:grid;gap:6px}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:41;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.dh{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.dh h2{margin:0;font-size:18px}
.x{border:0;background:none;font-size:24px;line-height:1;color:var(--muted)}
.lines{flex:1;overflow-y:auto;padding:8px 16px}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.line img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:8px}
.line .t{font-size:13px;line-height:1.5;min-width:0}
.line .t .s{color:var(--muted);font-family:var(--f-num);font-size:12px}
.line .r{text-align:right;font-family:var(--f-num);font-weight:700;font-size:14px}
.line .rm{border:0;background:none;color:var(--muted);font-size:12px;padding:0}
.df{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:10px}
.tot{display:flex;justify-content:space-between;align-items:baseline}
.tot b{font-family:var(--f-num);font-size:22px}
.minbar{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.minbar i{display:block;height:100%;background:var(--warn);transition:width .3s}
.minbar.ok i{background:var(--ok)}
.mintext{font-size:12px;color:var(--muted)}
.primary{border:0;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-weight:700;padding:12px;font-size:15px}
.primary[disabled]{opacity:.45;cursor:not-allowed}
.form{display:grid;gap:8px}
.form label{font-size:12px;color:var(--muted);display:grid;gap:2px}
.form input,.form select,.form textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:15px}
.msg{white-space:pre-wrap;font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;max-height:220px;overflow:auto}
.ghost{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px;font-weight:600;text-align:center;text-decoration:none;color:var(--ink)}
.note{font-size:12px;color:var(--muted)}
.okbox{background:var(--brand-soft);border-radius:10px;padding:12px;font-size:14px}
.okbox b{font-family:var(--f-num)}
.err{color:var(--bad);font-size:13px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:13px;z-index:60}
.loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:480px){.logo .lt>span{display:none}.logo img{width:40px;height:40px}}

/* contact */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact .wrap{padding-block:24px}
.contact h2{margin:0;font-size:20px}
.contact .note{margin:2px 0 14px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cbtn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;text-decoration:none;color:#fff;min-width:0}
.cbtn i{font-size:28px;width:32px;text-align:center;flex:none}
.cbtn span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.cbtn b{font-family:var(--f-num);font-size:16px}
.cbtn small{font-size:12px;opacity:.9}
.cbtn:hover{filter:brightness(1.08)}
.cbtn.messenger{background:#0866ff}
.cbtn.viber{background:#7360f2}
.cbtn.tiktok{background:#111;border:1px solid #333}
.cbtn.phone{background:var(--brand);color:var(--brand-ink)}
footer a{color:inherit}
.fab{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:30}
.fab a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;box-shadow:0 4px 14px rgba(0,0,0,.25);text-decoration:none}
.fab .messenger{background:#0866ff}.fab .viber{background:#7360f2}
footer .wrap{padding-bottom:140px}
@media (min-width:760px){footer .wrap{padding-bottom:24px;padding-left:88px}}