/* ============================================================
   Clearlii — Where to Buy (locator) + Stores A–Z + Our Story + Contact
   ============================================================ */

/* ---- locator ---- */
.loc-hero { padding: 30px 0 40px; position: relative; }
.loc-hero .wm-big {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center; z-index: 0; pointer-events: none; user-select: none;
  font-size: clamp(80px, 13vw, 190px); font-weight: 600; letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(180deg, #ece6f2, rgba(236,230,242,0)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loc-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 40px auto 0; }
.loc-hero-inner h1 { margin: 16px 0 16px; }
.loc-hero-inner p { color: var(--muted); font-size: 17px; margin: 0; }

.loc-wrap { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: stretch; }
.loc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-soft); }
.loc-search { position: relative; margin-bottom: 16px; }
.loc-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.loc-search input {
  width: 100%; height: 52px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  padding: 0 18px 0 46px; font-family: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, background .2s;
}
.loc-search input:focus { border-color: var(--purple); background: #fff; }
.loc-filters { display: flex; gap: 8px; margin-bottom: 18px; }
.loc-chip { flex: 1; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; transition: .2s; }
.loc-chip.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.loc-count { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.loc-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 6px; }
.loc-list::-webkit-scrollbar { width: 6px; }
.loc-list::-webkit-scrollbar-thumb { background: #e2e2ea; border-radius: 6px; }
.store {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 14px;
  border: 1px solid transparent; cursor: pointer; transition: .18s;
}
.store:hover, .store.active { background: var(--surface); border-color: var(--line); }
.store.active { border-color: rgba(120,33,129,.3); background: #faf7fb; }
.store .pin { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.store .pin.pharmacy { background: var(--purple); }
.store .pin.optician { background: var(--blue); }
.store .pin svg { width: 18px; height: 18px; }
.store .info h4 { margin: 0 0 3px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.store .info p { margin: 0; font-size: 13px; color: var(--muted); }
.store .dist { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.loc-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 14px; }

.loc-map { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 600px; height: 100%; box-shadow: var(--sh-soft); border: 1px solid var(--line); }
.loc-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#leafletMap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: #eef1f5; }
.leaflet-container { font-family: inherit; }
/* brand teardrop markers */
.clr-marker span { display: block; width: 30px; height: 38px; color: var(--mc); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transition: transform .15s; transform-origin: 50% 100%; }
.clr-marker svg { width: 30px; height: 38px; fill: var(--mc); stroke: #fff; stroke-width: 1.6; }
.clr-marker.active { z-index: 1000 !important; }
.clr-marker.active span { filter: drop-shadow(0 5px 8px rgba(121,33,129,.5)); }
/* popup */
.clr-pop { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 2px; }
.clr-pop strong { font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.clr-pop span { font-size: 12.5px; color: var(--muted); }
.clr-pop a { font-size: 13px; font-weight: 600; color: var(--purple); margin-top: 6px; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 30px rgba(20,20,40,.18); }
.leaflet-popup-content { margin: 12px 14px; }
.map-pin {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; transform: translate(-50%,-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; transition: transform .2s;
}
.map-pin.pharmacy { background: var(--purple); }
.map-pin.optician { background: var(--blue); }
.map-pin:hover, .map-pin.active { transform: translate(-50%,-50%) scale(1.5); z-index: 3; }
.map-pin.active { box-shadow: 0 0 0 6px rgba(120,33,129,.25); }
.map-legend { position: absolute; z-index: 1000; left: 18px; bottom: 18px; background: rgba(255,255,255,.95); border-radius: 14px; padding: 12px 16px; display: flex; gap: 18px; box-shadow: var(--sh-soft); font-size: 13px; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; }
.map-legend i.pharmacy { background: var(--purple); } .map-legend i.optician { background: var(--blue); }

/* impact stats (Where to buy) */
.impact { background: var(--surface); }
.impact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.impact-card { background: #fff; border-radius: var(--r-lg); padding: 44px 40px; box-shadow: var(--sh-soft); }
.impact-card .n { font-size: 64px; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.impact-card .n span { color: var(--purple); }
.impact-card h3 { font-size: 20px; font-weight: 500; margin: 14px 0 8px; color: var(--ink); }
.impact-card p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---- Stores A–Z ---- */
.az-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 40px; }
.az-letter { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--surface); cursor: pointer; transition: .15s; }
.az-letter:hover { background: var(--purple); color: #fff; }
.az-letter.disabled { color: #cbced6; cursor: default; background: #fafafb; }
.az-group { margin-bottom: 40px; scroll-margin-top: 140px; }
.az-group h2 { font-size: 32px; font-weight: 600; color: var(--purple); letter-spacing: -0.03em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.az-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; }
.az-store { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid var(--line); transition: .18s; }
.az-store:hover { border-color: rgba(120,33,129,.3); box-shadow: var(--sh-soft); }
.az-store .pin { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.az-store .pin.pharmacy { background: var(--purple); } .az-store .pin.optician { background: var(--blue); }
.az-store .pin svg { width: 17px; height: 17px; }
.az-store h4 { margin: 0 0 2px; font-size: 15px; font-weight: 500; color: var(--ink); }
.az-store p { margin: 0; font-size: 13px; color: var(--muted); }
.az-store .go { margin-left: auto; color: var(--purple); }

/* ---- Our Story timeline ---- */
.story-hero { text-align: center; padding: 40px 0 30px; position: relative; }
.story-hero .eyebrow { margin-bottom: 22px; }
.story-hero h1 { max-width: 16ch; margin: 0 auto; }
.story-hero p { color: var(--muted); font-size: 18px; max-width: 56ch; margin: 22px auto 0; }
.timeline { position: relative; max-width: 880px; margin: 0 auto; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--purple), var(--blue)); transform: translateX(-50%); }
.tl-item { position: relative; width: 50%; padding: 22px 50px; box-sizing: border-box; }
.tl-item:nth-child(odd) { left: 0; text-align: right; }
.tl-item:nth-child(even) { left: 50%; text-align: left; }
.tl-item .dot { position: absolute; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--purple); }
.tl-item:nth-child(odd) .dot { right: -8px; }
.tl-item:nth-child(even) .dot { left: -8px; }
.tl-year { font-size: 26px; font-weight: 600; color: var(--purple); letter-spacing: -0.02em; }
.tl-item h3 { font-size: 18px; font-weight: 500; color: var(--ink); margin: 6px 0 6px; letter-spacing: -0.01em; }
.tl-item p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.value-card { background: #fff; border-radius: var(--r-lg); padding: 40px; box-shadow: var(--sh-soft); }
.value-card .vico { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(150deg, rgba(121,33,129,.08), rgba(40,53,131,.06)); box-shadow: inset 0 0 0 1px rgba(121,33,129,.12); display: grid; place-items: center; color: var(--purple); margin-bottom: 22px; }
.value-card .vico svg { width: 26px; height: 26px; }
.value-card .vk { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.value-card h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; }
.value-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contact-info .eyebrow { margin-bottom: 20px; }
.contact-info h1 { margin: 0 0 18px; }
.contact-info > p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 36px; max-width: 40ch; }
.contact-detail { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.contact-detail:last-child { border-bottom: 1px solid var(--line); }
.contact-detail .ci { width: 46px; height: 46px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--purple); flex: none; }
.ci svg { width: 20px; height: 20px; }
.contact-detail h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.contact-detail p { margin: 0; font-size: 16px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; box-shadow: var(--sh-card); }
.contact-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.field label .req { color: var(--purple); }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--purple); background: #fff; }
.field textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.form-success { display: none; align-items: center; gap: 10px; color: var(--blue); font-weight: 500; font-size: 15px; margin-top: 16px; }
.form-success.show { display: flex; }

@media (max-width: 1000px) {
  .loc-wrap { grid-template-columns: 1fr; }
  .loc-map { min-height: 420px; } .loc-map img { min-height: 420px; } #leafletMap { min-height: 420px; }
  .impact-grid, .values-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .timeline::before { left: 18px; }
  .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding: 18px 0 18px 50px; }
  .tl-item .dot { left: 10px !important; right: auto !important; }
}
@media (max-width: 640px) {
  .contact-form { padding: 26px 20px; }
  .contact-form .frow { grid-template-columns: 1fr; gap: 0; }
  .impact-card .n { font-size: 48px; }
}