:root { --orange:#f29a24; --yellow:#ffd560; --ink:#3e2b1c; --cream:#fffaf0; --paper:#fffdf8; --line:#f0dfc2; --muted:#806e5b; }
* { box-sizing:border-box; }
html,body { width:100%; max-width:100%; overflow-x:hidden; }
body { margin:0; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); color:var(--ink); background:var(--cream); font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; }
.page-shell { width:min(100%,720px); max-width:100vw; min-height:100vh; margin:auto; background:var(--paper); overflow:hidden; }
.hero { position:relative; width:100%; max-width:100%; min-width:0; padding:25px 24px 36px; color:#fff; background:linear-gradient(145deg,#f7b42c,#ed8320); overflow:hidden; }
.hero:after { content:""; position:absolute; left:-20%; right:-20%; bottom:-30px; height:64px; background:var(--paper); border-radius:50% 50% 0 0; }
.brand { position:relative; z-index:1; display:inline-flex; gap:10px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:2px solid #fff; border-radius:50%; font-family:Georgia,serif; font-weight:700; font-size:22px; }
.brand strong,.brand small { display:block; letter-spacing:.05em; }.brand small { margin-top:1px; font-size:8px; opacity:.88; letter-spacing:.12em; }
.eyebrow { position:relative; z-index:1; max-width:100%; margin:44px 0 7px; font-weight:700; font-size:14px; color:#fff5d8; overflow-wrap:anywhere; }.hero h1 { position:relative; z-index:1; max-width:100%; margin:0; font-size:clamp(27px,7.5vw,39px); line-height:1.32; letter-spacing:.025em; overflow-wrap:anywhere; }.hero-copy { position:relative; z-index:1; max-width:100%; margin:10px 0 10px; font-size:15px; color:#fff5d8; overflow-wrap:anywhere; }.sun { position:absolute; right:-35px; top:16px; width:150px; height:150px; border:13px solid rgba(255,255,255,.22); border-radius:50%; }
.finder { display:grid; width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); gap:10px; padding:5px 20px 8px; }.location-button { width:100%; max-width:100%; min-width:0; min-height:48px; overflow:hidden; border:0; border-radius:13px; background:#fff1ca; color:#9b570f; font:inherit; font-weight:800; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }.location-button:disabled { opacity:.7; }.search-field { display:flex; width:100%; max-width:100%; min-width:0; align-items:center; gap:9px; padding:0 14px; height:49px; overflow:hidden; border:1px solid var(--line); border-radius:13px; color:#aa9781; background:white; }.search-field span { flex:none; font-size:24px; line-height:1; }.search-field input { width:100%; min-width:0; flex:1 1 0%; border:0; outline:0; font:inherit; color:var(--ink); background:transparent; }
.store-section { width:100%; max-width:100%; min-width:0; padding:24px 20px 8px; }.section-title-row { display:flex; width:100%; max-width:100%; min-width:0; align-items:flex-end; justify-content:space-between; gap:12px; }.section-title-row > div { min-width:0; }.section-kicker { margin:0 0 3px; font-size:12px; color:var(--orange); font-weight:800; letter-spacing:.08em; }.section-title-row h2 { margin:0; font-size:21px; letter-spacing:.02em; overflow-wrap:anywhere; }.status,.count { flex:0 1 auto; min-width:0; margin-bottom:2px; color:var(--muted); font-size:12px; text-align:right; }.store-list { display:grid; width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:14px; }.featured-list { overflow:visible; }.store-card { display:flex; width:100%; max-width:100%; min-width:0; align-items:center; gap:12px; padding:14px 13px; min-height:88px; overflow:hidden; color:inherit; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 4px 12px rgba(101,67,26,.04); transition:transform .15s,box-shadow .15s; }.store-card:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(101,67,26,.12); }.store-icon { display:grid; place-items:center; flex:0 0 43px; width:43px; height:43px; border-radius:13px; background:#fff0c6; color:#ed8c20; font-size:22px; }.store-details { min-width:0; max-width:100%; flex:1 1 0%; overflow:hidden; }.store-name-row { display:flex; min-width:0; justify-content:space-between; align-items:center; gap:6px; }.store-card h3 { min-width:0; margin:0; font-size:16px; line-height:1.35; overflow-wrap:anywhere; }.store-card p { max-width:100%; margin:4px 0 0; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.store-card .store-meta { color:#a38e76; }.distance { flex:none; padding:3px 6px; border-radius:7px; background:#fff1cd; color:#a45e11; font-size:11px; font-weight:800; white-space:nowrap; }.go { flex:0 0 18px; width:18px; color:var(--orange); font-size:22px; text-align:center; }.all-stores { padding-bottom:32px; }.empty-state { margin-top:14px; padding:22px; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:16px; }
@media (max-width:420px) { .finder,.store-section { padding-left:16px; padding-right:16px; }.section-title-row { gap:7px 10px; }.section-title-row > div { flex:1 1 175px; }.status,.count { max-width:46%; line-height:1.35; white-space:normal; }.store-card { gap:9px; padding:13px 10px; }.store-icon { flex-basis:40px; width:40px; height:40px; }.store-card h3 { font-size:15px; }.go { flex-basis:16px; width:16px; } }
@media (max-width:340px) { .section-title-row { align-items:flex-start; flex-wrap:wrap; }.status,.count { width:100%; max-width:100%; text-align:left; }.finder,.store-section { padding-left:12px; padding-right:12px; } }
@media (min-width:721px) { body { padding:26px; }.page-shell { border-radius:24px; box-shadow:0 18px 55px rgba(89,57,18,.15); } }