/* Public storefront / product / profile pages — uses the tokens from app.css */
body.store{min-height:100vh;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#0c6f83 8%),var(--bg) 42%)}
.sbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,#39c7d8 30%);position:sticky;top:0;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(14px);z-index:5}
.sbar .brand{color:var(--text);text-decoration:none;font-size:18px}
.sbar .logo{width:34px;height:34px}.sbar .logo svg{width:20px;height:20px}
.sbar .theme-btn{width:34px;height:34px;border-radius:10px;font-size:16px}
.langs{display:flex;gap:2px;flex-wrap:wrap}
.langs a{color:var(--muted);text-decoration:none;font-size:12.5px;padding:5px 8px;border-radius:8px;font-weight:600}
.langs a[aria-current]{background:var(--panel2);color:var(--text)}
.swrap{max-width:1200px;margin:0 auto;padding:20px 18px 40px}
.swrap.narrow{max-width:760px}

/* shop sign: cover photo under a scalloped striped awning (mái hiên) in the shop's colour */
.shero{position:relative;border-radius:24px;min-height:250px;background-size:cover;background-position:center;display:flex;align-items:flex-end;gap:20px;padding:44px 26px 24px;color:#fff;overflow:hidden;box-shadow:0 18px 45px -30px #00a7b8aa}
.shero::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:repeating-linear-gradient(90deg,var(--awn) 0 34px,#fffffff0 34px 68px);
  -webkit-mask:radial-gradient(17px 11px at 17px 100%,#0000 98%,#000) 0 0/34px 100%;mask:radial-gradient(17px 11px at 17px 100%,#0000 98%,#000) 0 0/34px 100%;filter:drop-shadow(0 3px 2px #0003)}
.slogo{width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:42px;font-weight:800;color:#0B1E2C;overflow:hidden;border:4px solid #fff;font-family:var(--display);box-shadow:0 8px 24px -8px #0008}
.slogo img{width:100%;height:100%;object-fit:cover}
.stitle h1{margin:0;font-size:clamp(28px,4vw,44px);line-height:1.05;font-weight:800;text-shadow:0 2px 16px #0009}
.vbadge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#1F5FD6;font-size:16px;vertical-align:middle}
.smeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:14.5px;color:#EAF2F7}
.shero .open{color:#7CF5C4}.shero .closed{color:#FFB1A6}
.sactions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.sactions.center{justify-content:center}
.sgrid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.scard{background:color-mix(in srgb,var(--panel) 94%,#35bfd0 6%);border:1px solid color-mix(in srgb,var(--line) 78%,#35bfd0 22%);border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:0 12px 28px -24px #003b4d99}
.scard h2{margin:0 0 14px;font-size:22px}.scard h3{font-size:16px;margin:18px 0 8px}
.pre{white-space:pre-wrap;color:var(--text);margin:0;line-height:1.65;max-width:70ch}

/* products: paper price tags on strings */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;padding-top:10px}
.pitem{position:relative;background:var(--tag);border:1px solid var(--tag-line);border-radius:16px;padding:10px;color:var(--text);text-decoration:none;box-shadow:0 10px 25px -22px #003b4d;transform:none;transition:transform .2s,box-shadow .2s}
.pitem:nth-child(3n+2){--tilt:.8deg}.pitem:nth-child(3n){--tilt:-.2deg}
.pitem:hover{transform:rotate(0) translateY(-3px)}
.pitem::before,.pitem::after{display:none}
.pimg{height:154px;border-radius:12px;background:var(--panel2) center/cover;display:grid;place-items:center;position:relative}
.noimg{width:44px;height:44px;border:2px dashed var(--line2);border-radius:12px}
.sale{position:absolute;top:8px;left:8px;background:var(--danger);color:#fff;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px}
.pbody{padding:10px 4px 0;display:grid;gap:2px}
.pbody b{font-weight:600;line-height:1.3}
.price{font-family:var(--display);font-weight:800;color:var(--price);font-size:21px}
.info{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0}
.info dt{color:var(--muted);font-size:13.5px}.info dd{margin:0}
.hours{width:100%;border-collapse:collapse;font-size:14px}
.hours td{padding:6px 0;border-bottom:1px dashed var(--line)}.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.map{padding:0;overflow:hidden}.map iframe{width:100%;height:260px;border:0;display:block}
:root[data-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .map iframe{filter:invert(.9) hue-rotate(180deg)}}
.qr{display:flex;gap:16px;align-items:center}.qr>div:first-child{width:124px;flex:none;background:#fff;border-radius:12px;padding:6px}
.qr svg{display:block;width:100%;height:auto}.break{word-break:break-all}
.share{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.crumb{margin-bottom:14px}.crumb a{color:var(--muted);text-decoration:none;font-weight:500}
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.gmain{aspect-ratio:1;border-radius:22px;background:var(--panel2) center/cover;display:grid;place-items:center;border:1px solid var(--line)}
.gthumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.gthumbs button{width:70px;height:70px;border-radius:12px;border:1px solid var(--line);background:center/cover;cursor:pointer}
.pinfo h1{margin:0 0 6px;font-size:clamp(26px,3vw,36px);line-height:1.1}
.bigprice{font-family:var(--display);font-size:34px;font-weight:800;color:var(--price);margin:14px 0 6px}
.bigprice s{font-size:17px;font-weight:500}
.profile{text-align:center}.profile h1{margin:14px 0 2px;font-size:30px}
.profile .pre{margin:14px auto 0}
.pav{width:116px;height:116px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:48px;font-weight:800;color:#0B1E2C;overflow:hidden;font-family:var(--display);border:4px solid var(--panel);box-shadow:var(--shadow)}
.pav img{width:100%;height:100%;object-fit:cover}
.sfoot{text-align:center;color:var(--muted);font-size:13px;padding:26px 16px 40px}
.sfoot a{color:var(--accent2)}
@media (max-width:860px){
  .sgrid,.pdetail{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.pimg{height:118px}.price{font-size:18px}
  .shero{min-height:210px;padding:40px 16px 18px;gap:14px;border-radius:18px}.slogo{width:72px;height:72px;font-size:32px}
  .sbar{padding:10px 14px}.sbar .brand{font-size:15px}.langs a{padding:4px 5px}
}
@media (max-width:520px){
  .swrap{padding:12px 10px 28px}.shero{min-height:190px;padding:36px 14px 14px}.stitle h1{font-size:26px}.smeta{font-size:12px;gap:8px}.sactions{gap:7px;margin:12px 0}.sactions .btn{flex:1;text-align:center;padding:9px 10px}.scard{padding:14px;border-radius:15px}.scard h2{font-size:19px}.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pitem{padding:8px;border-radius:13px}.pimg{height:104px}.pbody{padding:8px 2px 2px}.pbody b{font-size:13px}.price{font-size:16px}.sbar{gap:6px}.langs a{display:none}.langs a[aria-current]{display:block}
}
.mapload{width:100%;height:260px;border:0;background:var(--panel2);color:var(--text);display:grid;place-content:center;gap:6px;cursor:pointer;font:inherit;border-radius:20px}
.mapload b{font-size:16px}