/* Storefront — same brand tokens as the staff app (app.css), lighter and more open */
body.shop{background:#fff}
.s-top{background:var(--pine);color:#fff;position:sticky;top:0;z-index:20}
.s-top a{color:#e7f2ee;text-decoration:none;font-weight:500}.s-top a:hover{color:#fff}
.s-brand{display:flex;align-items:center;gap:.55rem;font-weight:800!important;font-size:1.05rem;color:#fff!important;white-space:nowrap}
.s-search{flex:1;max-width:460px;position:relative}.s-search input{border-radius:999px;padding-left:1rem;padding-right:2.6rem;border:0}
.s-search button{position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:var(--pine)}
.s-cart{position:relative;background:#fff;color:var(--pine)!important;padding:.35rem .8rem;border-radius:999px;font-weight:700!important}
.s-cart b{background:var(--amber);color:#2a1d00;border-radius:999px;font-size:.72rem;padding:0 .45rem;margin-left:.3rem}
/* hero: the prescription pad — search is the main action */
.s-hero{background:var(--mint);border-bottom:1px solid var(--line)}
.s-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;max-width:17ch;color:var(--pine)}
.s-hero p.lead{font-size:1.08rem;color:#35504b;max-width:46ch}
.hero-search{display:flex;gap:.5rem;max-width:560px}.hero-search input{font-size:1.1rem;padding:.8rem 1rem;border:2px solid var(--pine);border-radius:10px}
.hero-search button{border-radius:10px;padding:0 1.3rem;font-weight:700}
.rx-pad{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem;position:relative;box-shadow:0 1px 0 var(--line)}
.rx-pad .rx-mark{font-family:Georgia,serif;font-size:2.6rem;font-weight:700;color:var(--leaf);line-height:1}
.rx-pad ol{padding-left:1.1rem;margin:.6rem 0 1rem}.rx-pad li{margin-bottom:.3rem}
.facts{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.2rem;color:#35504b;font-weight:600;font-size:.92rem}.facts i{color:var(--leaf);margin-right:.3rem}
.cats{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}
.cats a{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;background:#fff}
.cats a.on,.cats a:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.cats small{opacity:.6;margin-left:.2rem}
/* product grid */
.meds{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.med{border:1px solid var(--line);border-radius:12px;padding:.9rem;display:flex;flex-direction:column;background:#fff}
.med-link{color:inherit;text-decoration:none}.med-link:hover h3{color:var(--leaf)}
.med-ph{aspect-ratio:5/3;background:var(--paper);border-radius:8px;display:grid;place-items:center;color:var(--leaf);font-size:2rem;margin-bottom:.7rem;overflow:hidden}
.med-ph img{width:100%;height:100%;object-fit:cover}
.med h3{font-size:1rem;font-weight:700;margin:0}.med h3 span{font-weight:500;color:var(--mute)}
.med .gen{font-size:.82rem;color:var(--mute);margin:.15rem 0 0}
.med .rx{font-size:.78rem;color:#7a5200;margin:.4rem 0 0;font-weight:600}
.med-foot{margin-top:auto;padding-top:.7rem;display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem}
.stock{display:block;font-size:.75rem;font-weight:600}.stock.in{color:var(--leaf)}.stock.low{color:#8a5a00}.stock.out{color:var(--rust)}
/* product page */
.p-ph{aspect-ratio:1;background:var(--paper);border-radius:14px;display:grid;place-items:center;font-size:5rem;color:var(--leaf);overflow:hidden}.p-ph img{width:100%;height:100%;object-fit:cover}
.p-facts{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;font-size:.95rem}.p-facts dt{color:var(--mute);font-weight:600}.p-facts dd{margin:0}
.notice{border-left:4px solid var(--amber);background:#fdf6e6;padding:.8rem 1rem;border-radius:0 8px 8px 0}
.notice.cd{border-left-color:var(--rust);background:#fbeeeb}
.s-foot{background:var(--paper);border-top:1px solid var(--line);margin-top:3rem;font-size:.92rem}.s-foot a{color:var(--pine)}
.steps-bar{display:flex;justify-content:space-between;position:relative}
.otp{font-size:1.6rem;letter-spacing:.5em;text-align:center;font-weight:700}