:root { --green:#174e40; --green-light:#e7efe5; --ink:#263a32; --muted:#798078; --line:#e0e5dc; --page:#f6f7f3; --lime:#e9f1cf; --white:#fff; color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-padding-top:180px; }
body { margin:0; background:var(--page); color:var(--ink); -webkit-text-size-adjust:100%; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
button { color:inherit; }
a { color:var(--green); text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #87b394; outline-offset:4px; }
[hidden] { display:none!important; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.content-width,.header-inner { max-width:1160px; margin:0 auto; }
.catalog-toggle { display:flex; align-items:center; gap:7px; margin-top:12px; }
.catalog-toggle[aria-pressed="true"] { display:none; }
.catalog { margin-bottom:48px; }
.catalog-heading { margin-bottom:22px; }
.catalog-heading h2 { margin:8px 0 0; font-size:30px; letter-spacing:-.8px; overflow-wrap:anywhere; }
.catalog-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:23px; font-size:12px; line-height:1.7; }
.catalog-breadcrumbs>span { color:var(--muted); }
.catalog-breadcrumbs a:hover { text-decoration:underline; }
.catalog-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.catalog-group { display:flex; align-items:center; gap:12px; min-height:105px; padding:20px 17px; border:1px solid var(--line); border-radius:14px; background:var(--white); font-size:13px; line-height:1.5; font-weight:600; }
.catalog-group>span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.catalog-group>svg { width:15px; height:15px; color:var(--muted); }
.catalog-group-icon,.catalog-product-icon { display:grid; place-items:center; width:36px; height:40px; border-radius:10px; background:var(--green-light); flex-shrink:0; }
.catalog-group:hover,.catalog-product:hover { border-color:#a9bfad; background:#fafcf7; }
.catalog-products-heading { font-size:17px; margin:26px 0 15px; }
.catalog-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.catalog-product { display:flex; align-items:center; gap:15px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--white); }
.catalog-product-copy { flex:1; min-width:0; }
.catalog-product-name { display:block; font-size:13px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
.catalog-product-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:11px; color:var(--muted); }
.catalog-product-meta b { font-size:13px; color:var(--green); }
.catalog-product>svg { width:15px; height:15px; color:var(--muted); }
.catalog-sentinel { min-height:55px; padding-top:16px; color:var(--muted); font-size:12px; }
.catalog-sentinel p { margin:8px 0 16px; }
@media(max-width:900px) { .catalog-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:599px) {
  .catalog-heading h2 { font-size:24px; line-height:1.3; }
  .catalog-heading { margin-bottom:16px; }
  .catalog-breadcrumbs { font-size:11px; gap:5px 7px; margin-bottom:17px; }
  .catalog-groups { gap:9px; }
  .catalog-group { flex-direction:column; align-items:flex-start; gap:9px; padding:15px 13px; min-height:120px; font-size:12px; border-radius:11px; position:relative; }
  .catalog-group>svg { position:absolute; top:22px; right:12px; }
  .catalog-group-icon { width:31px; height:31px; border-radius:8px; }
  .catalog-group-icon svg { width:17px; height:17px; }
  .catalog-products { grid-template-columns:minmax(0,1fr); gap:10px; }
  .catalog-product { padding:17px 14px; gap:11px; border-radius:11px; }
  .catalog-product-icon { width:30px; height:37px; }
  .catalog-product-icon svg { width:17px; height:22px; }
  .catalog-product-name { font-size:12px; }
  .catalog-product-meta { font-size:10px; margin-top:10px; }
  .catalog-product-meta b { font-size:12px; }
}
.site-header { background:var(--white); border-bottom:1px solid var(--line); padding:0 32px; }
.header-inner { display:flex; align-items:center; gap:32px; height:84px; }
.brand { display:flex; gap:12px; align-items:center; color:var(--green); font-size:22px; font-weight:750; letter-spacing:-.8px; line-height:1; }
.brand-second { margin-left:5px; font-weight:400; }
.brand-mark { display:grid; place-items:center; background:var(--green); color:#eff7dd; width:40px; height:40px; border-radius:12px; font-size:28px; letter-spacing:0; }
.city { margin-left:auto; display:flex; align-items:center; gap:7px; font-size:14px; }
.city svg { width:17px; }
.saved-toggle { display:flex; align-items:center; gap:9px; border:0; background:transparent; padding:12px 0 12px 20px; font-size:14px; }
.saved-toggle b { font-weight:500; background:#eff2eb; border-radius:6px; padding:3px 7px; font-size:12px; }
.saved-toggle[aria-pressed="true"] { color:var(--green); }
.saved-toggle[aria-pressed="true"] svg { fill:var(--green-light); }
.hero { display:flex; justify-content:space-between; align-items:center; padding-top:46px; padding-bottom:38px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:#68816c; font-size:10px; font-weight:650; letter-spacing:1.9px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#729b63; display:inline-block; flex-shrink:0; }
h1 { font-size:56px; font-weight:550; line-height:1.08; letter-spacing:-2.8px; margin:22px 0 17px; }
h1 span { color:#67846a; }
.hero p { color:#7b817a; font-size:15px; line-height:1.6; margin:0; }
.hero-art { position:relative; width:310px; height:220px; display:flex; align-items:center; justify-content:center; margin-right:40px; }
.art-ring { position:absolute; border:1px solid #dfe6d6; border-radius:50%; width:205px; height:205px; }
.ring-one { transform:scale(1.08); }
.ring-two { transform:scale(1.4); opacity:.5; }
.art-cross { color:#a5b888; font-size:180px; line-height:1; transform:rotate(-12deg); filter:drop-shadow(8px 10px 0 #dbe3c9); font-family:Arial,sans-serif; }
.art-label { position:absolute; bottom:0; right:-12px; background:var(--white); padding:13px 16px; border-radius:9px; box-shadow:0 8px 30px #233c3010; font-size:10px; display:flex; align-items:center; gap:8px; }
.search-section { position:relative; margin-bottom:34px; z-index:5; }
.search-box { display:flex; align-items:center; gap:15px; background:white; border:1px solid #dce4d7; padding:8px 8px 8px 23px; border-radius:14px; box-shadow:0 3px 5px #233c3003; }
.search-box>svg { color:#7e917b; width:22px; height:22px; }
.search-box input { flex:1; min-width:0; border:0; outline:none; background:transparent; font-size:15px; height:44px; color:var(--ink); }
input::placeholder { color:#939b91; }
.search-submit { background:var(--green); color:white; border:0; border-radius:10px; height:46px; padding:0 26px; display:flex; align-items:center; gap:24px; font-size:14px; }
.search-submit:hover { background:#22644f; }
.icon-button { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:10px; }
.icon-button:hover { background:#edf2e8; }
.search-results { position:absolute; left:0; right:0; top:66px; padding:6px; background:white; border:1px solid var(--line); box-shadow:0 16px 30px #20372d15; border-radius:12px; max-height:390px; overflow:auto; }
.search-option { display:flex; width:100%; padding:14px 16px; border:0; border-bottom:1px solid #eff2eb; background:transparent; text-align:left; font-size:14px; line-height:1.6; gap:12px; align-items:flex-start; }
.search-option svg { margin-top:2px; color:#769379; }
.search-option:hover,.search-option[aria-selected="true"] { background:#f2f6ed; border-radius:7px; }
.search-message { font-size:13px; margin:8px 0 0; color:var(--muted); }
.search-message:empty { display:none; }
.recent-searches { display:flex; gap:8px; margin-top:12px; align-items:center; min-height:24px; flex-wrap:wrap; }
.recent-searches:empty { display:none; }
.recent-label { font-size:11px; color:#92988d; margin-right:4px; }
.recent-searches button { border:1px solid #e0e5d9; background:transparent; font-size:11px; padding:5px 10px; border-radius:7px; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-searches button:hover { background:#e9efdf; }
.workspace { display:grid; grid-template-columns:246px minmax(0,1fr); gap:30px; align-items:start; }
.side-panel { position:sticky; top:24px; border:1px solid var(--line); border-radius:14px; background:#edf1e6; overflow:hidden; }
.side-panel-top { padding:26px 23px; border-bottom:1px solid #dfe6d5; }
.small-label { font-size:9px; letter-spacing:1.6px; font-weight:600; color:#859281; }
.side-panel h2 { font-size:21px; font-weight:550; letter-spacing:-.7px; margin:11px 0; }
.side-panel p { font-size:12px; color:#819077; line-height:1.7; margin:0; }
.location-section { padding:24px 23px; }
.location-symbol { color:#5e8056; width:30px; height:30px; margin-bottom:9px; }
.location-section h3 { font-size:15px; font-weight:550; margin:5px 0 10px; }
.secondary-button { border:1px solid #cbd8c2; background:transparent; border-radius:9px; padding:11px 14px; color:var(--green); font-size:12px; font-weight:550; }
.secondary-button:hover { background:#e2ead8; }
.location-section .secondary-button { margin-top:18px; width:100%; }
.text-button { border:0; padding:9px 0; background:transparent; font-size:11px; color:#738968; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.location-section .text-button { display:flex; width:100%; }
.side-note { margin:0 23px; padding:22px 0; border-top:1px solid #dce4d0; display:flex; gap:10px; align-items:flex-start; }
.side-note svg { width:17px; color:#708965; margin-top:2px; }
.source-link { display:flex; justify-content:space-between; padding:18px 23px; background:#e5ebdc; font-size:11px; color:#728568; }
.source-link svg { width:14px; height:14px; }
.results-panel { min-width:0; }
.product-summary { display:flex; gap:17px; align-items:center; padding:24px; background:#fff; border-radius:14px; border:1px solid var(--line); margin-bottom:20px; }
.product-symbol { display:grid; place-items:center; width:64px; height:76px; flex-shrink:0; border-radius:10px; background:#f0f3e9; color:#8d9f7b; }
.product-symbol svg { width:33px; height:40px; }
.product-copy { flex:1; min-width:0; }
.product-copy h2 { font-size:19px; font-weight:600; line-height:1.5; letter-spacing:-.5px; margin:7px 0 3px; }
.product-copy p { color:#8a9085; font-size:12px; line-height:1.6; margin:0; }
.product-source { align-self:flex-start; color:#96a08f; width:30px; height:30px; }
.product-source svg { width:15px; }
.filters { position:sticky; top:0; z-index:3; background:var(--page); padding:12px 0 16px; border-bottom:1px solid var(--line); }
.filter-top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }
.open-filter { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:550; cursor:pointer; position:relative; }
.open-filter input { position:absolute; opacity:0; width:40px; height:24px; margin:0; }
.switch { width:37px; height:22px; border-radius:12px; background:#d6ddd0; position:relative; transition:background .15s; flex-shrink:0; }
.switch:after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:white; left:3px; top:3px; transition:transform .15s; box-shadow:0 1px 3px #263a3220; }
.open-filter input:checked+.switch { background:var(--green); }
.open-filter input:checked+.switch:after { transform:translateX(15px); }
.open-filter input:focus-visible+.switch { outline:3px solid #87b394; outline-offset:3px; }
.city-time { font-size:10px; color:#92998c; }
.filter-bottom { display:flex; gap:15px; align-items:center; justify-content:space-between; }
.sort-controls { display:flex; gap:6px; }
.sort-button { display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; border:1px solid #dce3d5; background:transparent; padding:10px 13px; border-radius:8px; }
.sort-button svg { width:15px; height:15px; }
.sort-button.selected { background:var(--green); color:white; border-color:var(--green); }
.address-search { display:flex; align-items:center; gap:8px; background:white; border:1px solid var(--line); border-radius:8px; padding:10px 12px; width:230px; }
.address-search svg { width:15px; height:15px; color:#97a38c; }
.address-search input { min-width:0; width:100%; border:0; background:transparent; outline:none; font-size:12px; color:var(--ink); }
.mobile-location { display:none; }
.results-heading { display:flex; align-items:center; justify-content:space-between; margin:25px 0 17px; }
.results-heading h3 { font-size:16px; font-weight:550; letter-spacing:-.3px; margin:0; }
#result-count { color:#8b9584; font-size:11px; }
.loading-status { font-size:11px; color:#829279; padding:0 0 14px; }
.loading-status:empty { display:none; }
.loading-status.loading:before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border:1px solid #92a28a; border-right-color:transparent; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.pharmacy-list { overflow-anchor:none; display:flex; flex-direction:column; gap:11px; }
.pharmacy-card { padding:22px; border:1px solid var(--line); border-radius:12px; background:white; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:15px; position:relative; }
.pharmacy-monogram { width:43px; height:43px; border:1px solid #e4eadb; background:#f2f5ec; color:#799668; border-radius:10px; display:grid; place-items:center; font-weight:600; font-size:17px; }
.pharmacy-info { min-width:0; }
.pharmacy-title { display:flex; align-items:center; gap:7px; margin:0 0 7px; }
.pharmacy-title button { border:0; background:transparent; padding:0; text-align:left; font-size:15px; font-weight:600; line-height:1.4; }
.pharmacy-title button:hover { color:#648958; }
.pharmacy-address { color:#828a7b; font-size:12px; line-height:1.5; margin:0 0 11px; }
.pharmacy-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:10px; }
.open-status { color:#65844d; display:inline-flex; align-items:center; gap:5px; }
.open-status:before { content:""; width:5px; height:5px; background:currentColor; border-radius:50%; }
.open-status.closed { color:#9b9d94; }
.open-status.soon { color:#b28a49; }
.distance { color:#96a08d; display:flex; gap:4px; align-items:center; }
.distance svg { width:11px; height:11px; }
.pharmacy-price { font-size:22px; font-weight:600; letter-spacing:-.7px; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; padding-right:30px; }
.pharmacy-price small { font-size:9px; color:#a1a69a; letter-spacing:0; font-weight:400; margin-top:4px; }
.save-pharmacy { position:absolute; right:13px; top:16px; color:#b0b8a8; width:30px; height:30px; }
.save-pharmacy svg { width:16px; height:16px; }
.save-pharmacy[aria-pressed="true"] { color:#6b8560; }
.save-pharmacy[aria-pressed="true"] svg { fill:#dfead4; }
.card-actions { grid-column:2/4; display:flex; gap:18px; align-items:center; padding-top:12px; border-top:1px solid #f0f3eb; margin-top:2px; }
.card-actions a,.card-actions button { font-size:10px; color:#86967b; display:inline-flex; align-items:center; gap:5px; border:0; padding:0; background:none; }
.card-actions svg { width:12px; height:12px; }
.card-actions .card-details { margin-left:auto; color:#7b8e72; }
.card-actions a:hover,.card-actions button:hover { color:var(--green); }
.card-actions { flex-wrap:wrap; }
.card-actions .card-map,.dialog-actions .card-map { display:inline-flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; width:36px; height:36px; padding:0; border:1px solid #d9e2d0; border-radius:8px; background:#f2f5ec; color:var(--green); }
.card-map:after { content:""; position:absolute; inset:-4px; }
.card-actions .card-map svg,.dialog-actions .card-map svg { width:18px; height:18px; }
.card-actions .card-map:hover,.dialog-actions .card-map:hover { background:#e2ead8; }
.dialog-actions .card-map { width:44px; height:44px; }
.error-message { background:#faf0e9; border:1px solid #ead5c5; border-radius:12px; padding:20px; font-size:13px; color:#97734c; margin-bottom:15px; }
.error-message p { margin:0 0 12px; line-height:1.6; }
.empty-state { text-align:center; padding:50px 25px; border:1px dashed #d9e2d1; border-radius:12px; background:#f0f3e9; }
.empty-state>svg { width:35px; height:35px; color:#9bab8b; }
.empty-state h3 { font-size:18px; font-weight:500; margin:20px 0 12px; }
.empty-state p { font-size:13px; line-height:1.6; color:#8a9681; }
.empty-state button { margin-top:10px; }
.list-end { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:30px; font-size:11px; color:#96a28b; }
.list-end span { font-size:18px; color:#c3cfb3; }
.price-note { font-size:10px; color:#a0a696; line-height:1.7; max-width:610px; margin:25px 0; }
.site-footer { border-top:1px solid var(--line); padding:24px 0; display:flex; gap:30px; align-items:center; font-size:12px; color:#909b86; margin-top:30px; }
.site-footer p { font-size:10px; color:#a0a795; }
.footer-plus { color:#a5b58a; padding-left:8px; }
.site-footer button { margin-left:auto; }
.site-footer svg { width:14px; height:14px; }
dialog { border:1px solid var(--line); border-radius:20px; padding:0; width:min(480px,calc(100% - 32px)); max-height:85dvh; background:#fff; color:var(--ink); box-shadow:0 20px 100px #17362720; }
dialog::backdrop { background:#172c2470; backdrop-filter:blur(3px); }
body:has(dialog[open]) { overflow:hidden; }
.dialog-inner { padding:32px; position:relative; }
.dialog-close { position:absolute; right:12px; top:12px; color:#84927a; }
.dialog-kicker { font-size:10px; letter-spacing:1.8px; color:#8fa281; margin:14px 0; }
.dialog-inner h2 { font-weight:550; font-size:25px; letter-spacing:-.7px; padding-right:24px; line-height:1.4; margin:12px 0; }
.dialog-address { font-size:14px; line-height:1.7; color:#829078; }
.dialog-price { font-size:34px; font-weight:550; letter-spacing:-1px; margin:24px 0 8px; }
.dialog-status { margin:12px 0 24px; font-size:13px; }
.hours-table { width:100%; font-size:12px; border-collapse:collapse; margin:18px 0; }
.hours-table td { border-bottom:1px solid #edf1e7; padding:12px 0; }
.hours-table td:last-child { text-align:right; color:#819275; }
.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:25px; }
.dialog-actions a { display:flex; align-items:center; justify-content:center; gap:8px; border-radius:9px; border:1px solid #d9e2d0; font-size:12px; padding:13px 18px; }
.dialog-actions .primary-action { background:var(--green); color:white; border-color:var(--green); }
.dialog-help { font-size:14px; line-height:1.8; color:#6f7f66; }
.toast { position:fixed; bottom:max(25px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:20; background:var(--green); color:white; border-radius:12px; padding:14px 20px; font-size:12px; box-shadow:0 8px 24px #174e4030; max-width:calc(100% - 32px); text-align:center; line-height:1.5; width:max-content; }
.noscript { padding:20px; text-align:center; }
@media(min-width:600px) and (max-width:1220px) { .content-width { margin-left:32px; margin-right:32px; } }
@media(max-width:900px) { .workspace { grid-template-columns:210px minmax(0,1fr); gap:20px; } .hero-art { margin-right:0; width:245px; } h1 { font-size:48px; } .address-search { width:185px; } .product-summary { padding:20px; } .pharmacy-card { padding:19px 16px; gap:11px; } .pharmacy-price { font-size:20px; padding-right:26px; } .pharmacy-title button { font-size:14px; } }
@media(max-width:720px) { .workspace { display:block; } .side-panel { display:none; } .mobile-location { display:block; margin-top:10px; } .mobile-location .text-button { font-size:11px; padding:2px 0; } .mobile-location svg { width:14px; height:14px; } .site-footer p { display:none; } .hero-art { display:none; } .hero { padding-top:34px; padding-bottom:28px; } .product-copy h2 { font-size:18px; } }
@media(max-width:599px) { .content-width { margin-left:18px; margin-right:18px; } .site-header { padding:0 18px; padding-top:env(safe-area-inset-top); } .header-inner { height:67px; gap:10px; } .brand { font-size:19px; gap:9px; letter-spacing:-.7px; } .brand-mark { width:33px; height:33px; font-size:24px; border-radius:10px; } .city { margin-left:auto; font-size:11px; gap:4px; } .city svg { width:13px; height:13px; } .saved-toggle { padding:9px 0 9px 5px; gap:5px; } .saved-toggle>span { display:none; } .saved-toggle svg { width:19px; height:19px; } .saved-toggle b { padding:2px 5px; font-size:10px; } .eyebrow { font-size:8px; letter-spacing:1.2px; gap:6px; } h1 { font-size:40px; line-height:1.12; letter-spacing:-1.8px; margin:18px 0 14px; } .hero p { font-size:13px; line-height:1.7; } .desktop-break { display:none; } .search-section { margin-bottom:25px; } .search-box { gap:9px; padding:6px 6px 6px 14px; border-radius:12px; } .search-box>svg { width:18px; height:18px; } .search-box input { font-size:16px; height:42px; } .search-box input::placeholder { font-size:12px; } .search-submit { width:44px; height:42px; padding:0; font-size:0; gap:0; justify-content:center; border-radius:8px; } .search-submit svg { width:18px; height:18px; } #search-clear { width:24px; height:32px; } #search-clear svg { width:16px; } .search-results { top:58px; max-height:45dvh; } .search-option { font-size:13px; padding:12px 10px; } .recent-searches { flex-wrap:nowrap; overflow:auto; scrollbar-width:none; gap:6px; } .recent-label { flex-shrink:0; font-size:10px; } .recent-searches button { flex-shrink:0; font-size:10px; max-width:155px; } .product-summary { padding:18px 15px; gap:13px; margin-bottom:11px; border-radius:12px; } .product-symbol { width:45px; height:63px; } .product-symbol svg { width:25px; height:34px; } .product-copy h2 { font-size:16px; margin:6px 0 4px; line-height:1.45; } .product-copy p { font-size:11px; } .small-label { font-size:8px; } .product-source { width:20px; height:25px; } .product-source svg { width:13px; height:13px; } .filters { padding:15px 0 13px; } .filter-top { margin-bottom:14px; } .open-filter { font-size:12px; } .city-time { font-size:9px; } .filter-bottom { gap:10px; } .sort-controls { gap:5px; } .sort-button { padding:10px 10px; font-size:11px; gap:5px; } .sort-button svg { width:13px; height:13px; } .address-search { flex:1; min-width:0; padding:11px 9px; width:auto; gap:5px; } .address-search input { font-size:16px; } .address-search input::placeholder { font-size:10px; } .address-search svg { width:12px; height:12px; } .results-heading { margin:21px 0 14px; } .results-heading h3 { font-size:15px; } #result-count { font-size:10px; } .pharmacy-card { padding:18px 14px 15px; grid-template-columns:33px minmax(0,1fr) auto; gap:10px; border-radius:11px; } .pharmacy-monogram { width:33px; height:33px; font-size:14px; border-radius:8px; } .pharmacy-title button { font-size:13px; } .pharmacy-address { font-size:11px; line-height:1.6; margin-bottom:9px; } .pharmacy-price { font-size:19px; padding-right:20px; } .pharmacy-price small { font-size:8px; margin-top:5px; } .save-pharmacy { right:6px; top:13px; width:27px; height:27px; } .save-pharmacy svg { width:14px; height:14px; } .pharmacy-meta { font-size:9px; gap:8px; } .card-actions { grid-column:1/4; gap:15px; padding-top:11px; margin-top:3px; } .card-actions a,.card-actions button { font-size:10px; } .price-note { font-size:9px; } .site-footer { padding-bottom:calc(24px + env(safe-area-inset-bottom)); gap:10px; font-size:10px; } .site-footer button { font-size:9px; } .dialog-inner { padding:26px 24px; } .dialog-inner h2 { font-size:23px; } }
@media(max-width:360px) { .city { display:none; } .saved-toggle { margin-left:auto; } .pharmacy-price { font-size:17px; } .pharmacy-card { grid-template-columns:28px minmax(0,1fr) auto; gap:8px; } .pharmacy-monogram { width:28px; height:28px; } .sort-button { padding:10px 7px; } .city-time { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }
.district-row { display:flex; align-items:center; gap:10px; margin-top:13px; }
.district-row>label { font-size:11px; color:#8c9983; }
.district-row select { max-width:240px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); font:inherit; font-size:12px; }
.district-row .text-button { margin-left:auto; font-size:10px; }
@media(max-width:599px) { .district-row { gap:8px; } .district-row select { font-size:16px; max-width:200px; flex:1; min-width:0; } .district-row>label { font-size:10px; } .district-row .text-button { font-size:9px; white-space:nowrap; } }
.view-controls { display:flex; gap:4px; margin-top:13px; padding:4px; border:1px solid var(--line); border-radius:10px; width:max-content; background:#edf1e6; }
.view-button { display:flex; gap:7px; align-items:center; justify-content:center; min-height:36px; padding:8px 20px; border:0; border-radius:7px; font-size:12px; color:#73816a; background:transparent; }
.view-button svg { width:16px; height:16px; }
.view-button.selected { background:white; color:var(--green); box-shadow:0 1px 4px #233c3012; font-weight:600; }
.map-panel { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:white; }
.map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px; }
.map-toolbar p { margin:0; font-size:11px; color:#718467; line-height:1.5; }
.map-toolbar button { white-space:nowrap; min-height:36px; }
.pharmacy-map { height:540px; height:clamp(360px,62dvh,650px); width:100%; position:relative; z-index:0; background:#e7eddf; font-family:inherit; }
.map-help { font-size:11px; color:#849078; padding:13px 16px; margin:0; line-height:1.6; }
.map-error { display:flex; gap:12px; align-items:center; justify-content:space-between; background:#faf0e9; color:#97734c; padding:12px 16px; font-size:11px; line-height:1.6; }
.map-error button { flex-shrink:0; }
.map-price { display:flex; align-items:center; justify-content:center; background:var(--green); color:white; border:2px solid white; border-radius:18px; box-shadow:0 2px 6px #20372d40; font-size:12px; font-weight:650; white-space:nowrap; }
.map-price:after { content:""; position:absolute; bottom:-7px; left:36px; border:5px solid transparent; border-top-color:var(--green); border-bottom:0; }
.map-price.closed { background:#757c72; }
.map-price.closed:after { border-top-color:#757c72; }
.map-price.soon,.map-price.unknown { background:#9e7c3f; }
.map-price.soon:after,.map-price.unknown:after { border-top-color:#9e7c3f; }
.map-cluster { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--green); color:white; border:3px solid #fff; border-radius:14px; box-shadow:0 2px 8px #20372d35; }
.map-cluster span { font-size:11px; line-height:1.2; color:#dceace; }
.map-cluster b { font-size:12px; line-height:1.4; white-space:nowrap; }
.map-origin { background:#488dcc; border:3px solid white; border-radius:50%; box-shadow:0 0 0 5px #488dcc30; }
.map-price:focus-visible,.map-cluster:focus-visible { outline:3px solid #87b394; outline-offset:4px; }
.pharmacy-map .leaflet-popup-content { margin:30px 10px 12px; width:auto!important; }
.pharmacy-map .leaflet-popup-content-wrapper { border-radius:12px; }
.pharmacy-map .map-card { border:0; padding:10px 4px; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; min-width:250px; }
.map-card .pharmacy-monogram { width:28px; height:28px; font-size:13px; }
.map-card .pharmacy-title button { font-size:13px; }
.map-card .pharmacy-price { font-size:18px; padding-right:22px; }
.pharmacy-map .map-card p { margin:0 0 9px; font-size:11px; }
.map-card .save-pharmacy { top:5px; right:0; }
.map-card .card-actions { grid-column:1/4; gap:12px; }
.pharmacy-map .leaflet-popup-close-button { width:36px; height:32px; font-size:24px; line-height:32px; }
.pharmacy-map .leaflet-control-attribution { font-size:10px; max-width:100%; }
.pharmacy-map .leaflet-control-zoom a { color:var(--green); width:36px; height:36px; line-height:36px; }
@media(max-width:599px) { .view-controls { width:100%; } .view-button { flex:1; min-height:40px; } .pharmacy-map { height:clamp(330px,56dvh,540px); } .map-panel { border-radius:11px; } .map-toolbar { padding:7px 12px; } .map-help { font-size:10px; padding:11px 12px; } .map-toolbar p { font-size:10px; } }