/* NAV_TIGHT_V56 + LIGHT_FIX_V84 */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111111;
  --surface: #1a1a1a;
  --surface2: #3a3a3a;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.45);
  --accent: #55ff55;
  --accent2: #55ff55;
  /* Map / listing type pin colors (documented; keep in sync with map.php PIN_COLORS):
     parts=#ff5faf pink, service=#22d3ee cyan, gtp=#967dff purple */
  --pin-parts: #ff5faf;
  --pin-service: #22d3ee;
  --pin-both: #967dff;
  --pin-gtp: #967dff;
  --wa: #25d366;
  --border: rgba(255, 255, 255, 0.12);
  --radius: 0;
  --shadow: none;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --header-h: 88px;
  --tap: 31px;
  --control-h: 31px;
  /* Card row: 1rem type, line-height 1.45, .65rem padding, 1px border. Not the taller size. */
  --card-btn-h: calc(1.45rem + 1.3rem + 2px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  padding-bottom: var(--safe-bottom);
}
img, svg, video { max-width: 100%; height: auto; }
a { color: #7ec8ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1100px, 100% - 1.25rem); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* —— Header: 2 solid stacked rows, no side-scroll —— */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 0;
  padding-top: var(--safe-top);
}
.header-stack {
  display: block;
  /* keep .wrap width — do not force 100% (that outruns the search card) */
  padding: .35rem 0 .25rem;
  box-sizing: border-box;
}
.header-row {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.header-row-brand {
  margin-bottom: .1rem;
}
.header-brand {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: var(--text);
  text-decoration: none;
  line-height: 1.25;
}
.header-brand:hover { text-decoration: none; color: var(--text); }
.logo {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--text);
}
.header-tagline {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.015em;
}
.header-row-nav {
  width: 100%;
}
.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: clamp(.62rem, 2.6vw, .78rem);
}
.nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-h);
  min-height: var(--control-h);
}
.nav-links a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0 6px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  box-sizing: border-box;
  min-width: 0;
  box-shadow: none;
}
.nav-links a + a { border-inline-start: 0; }
.nav-links a:first-child { margin-inline-start: 0; }
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border-color: var(--border);
  box-shadow: inset 0 0 0 1px var(--border);
  z-index: 1;
  position: relative;
}
.nav-links a:active {
  filter: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.nav-links a.is-active,
.nav-links a[aria-current="page"] {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--text) !important;
  filter: none;
  /* same fill as .search-panel + outline, no underline */
  box-shadow: inset 0 0 0 1px var(--border);
  z-index: 2;
  position: relative;
}
.nav-tools {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  height: var(--control-h);
  margin: 0;
  padding: 0;
}
/* share one border with last nav link */
.nav-tools { border-inline-start: 0; }
.nav-links + .nav-tools .lang-switch { border-inline-start: 0; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--control-h);
  height: var(--control-h);
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0;
  font-weight: 700;
  font-size: inherit;
  color: var(--text) !important;
  text-decoration: none !important;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 var(--control-h);
}

.lang-switch:hover, .lang-switch:focus-visible {
  color: var(--text) !important;
  border-color: var(--border);
  box-shadow: inset 0 0 0 1px var(--border);
}
.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 var(--control-h);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: var(--control-h);
  height: var(--control-h);
  min-width: var(--control-h);
  min-height: var(--control-h);
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
}
.theme-toggle:hover,
.theme-toggle:focus,
.theme-toggle:focus-visible,
.theme-toggle:active {
  border: 1px solid var(--border) !important;
  border-inline-start: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.lang-switch + .theme-toggle {
  border-inline-start: 0 !important;
}
.theme-toggle {
  align-self: stretch;
}
.theme-toggle-img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert(1);
}
html[data-theme="light"] .theme-toggle-img {
  transform: scaleX(-1);
  filter: none;
}
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .lang-switch,
html[data-theme="light"] .theme-toggle {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a:focus-visible,
html[data-theme="light"] .lang-switch:hover,
html[data-theme="light"] .lang-switch:focus-visible,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
  background: transparent;
  border-color: var(--border);
  box-shadow: inset 0 0 0 1px var(--border);
}

@media (min-width: 700px) {
  .logo { font-size: 1.12rem; }
  .nav { font-size: .88rem; }
  .nav-links, .nav-tools { height: var(--control-h); min-height: var(--control-h); }
  .nav-links a, .lang-switch, .theme-toggle {
    min-height: var(--control-h); height: var(--control-h);
  }
  .lang-switch, .theme-toggle { width: var(--control-h); min-width: var(--control-h); flex: 0 0 var(--control-h); }
}


html[data-theme="light"] .search-filters select,
html[data-theme="light"] .city-combo-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23111111' stroke-width='1.6' d='M1 1.2 L6 6.2 L11 1.2'/%3E%3C/svg%3E");
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface2: #f0f0f0;
  --text: #111111;
  --muted: rgba(0, 0, 0, 0.55);
  --border: rgba(0, 0, 0, 0.14);
  --shadow: none;
}
html[data-theme="light"] .site-header {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
/* Light mode: body/links/headings near-black (not blue) */
html[data-theme="light"] a { color: #111111; }
html[data-theme="light"] .section h2,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 { color: #111111; }
html[data-theme="light"] .prose { color: #111111; }
html[data-theme="light"] .link-more { color: #111111; }
/* Sponsored ad cards: light surface, not dark teal+blue */
html[data-theme="light"] .homepage-ad {
  background: #ffffff;
  border: 1px solid var(--border);
  color: #111111;
}
html[data-theme="light"] .homepage-ad strong,
html[data-theme="light"] .homepage-ad span { color: #111111; }
html[data-theme="light"] .homepage-ad em { color: rgba(0,0,0,.55); }
/* Part-type chips: solid bright (map pin colors), white text — not dark purple */
html[data-theme="light"] .chip {
  background: #ff5faf;
  color: #ffffff;
  border-color: transparent;
}
html[data-theme="light"] .chip-part {
  background: #ff5faf;
  color: #ffffff;
}
html[data-theme="light"] .badge-both,
html[data-theme="light"] .badge-gtp {
  background: #967dff;
  color: #ffffff;
}
/* Locked solid badges: keep white text on solid colors in light too */
html[data-theme="light"] .badge-parts,
html[data-theme="light"] .badge-sponsored,
html[data-theme="light"] .badge-service,
html[data-theme="light"] .badge-online,
html[data-theme="light"] .badge-247,
html[data-theme="light"] .badge-gtp {
  color: #ffffff !important;
}

.main { padding: .55rem 0 calc(2.5rem + var(--safe-bottom)); }

.hero { margin-bottom: 1.25rem; }
.main:has(.hero-search-only) { padding-top: .2rem; }
.hero-search-only { margin-top: 0; margin-bottom: 0; }
.hero-search-only h1, .hero-search-only .lead { display: none; }
.hero h1 { margin: 0 0 .35rem; font-size: clamp(1.45rem, 5vw, 2.2rem); }
.lead { color: var(--muted); margin: 0 0 1rem; font-size: 1.02rem; }
.hero-compact h1 { font-size: 1.35rem; }
.hero-compact h1 small { color: var(--muted); font-weight: 500; }

/* —— Search / filters —— */
.search-panel {
  background: var(--surface);
  border-radius: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: .85rem;
  box-shadow: var(--shadow);
}
.search-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.search-main { margin-bottom: .75rem; }
.search-main input[type=search] {
  flex: 1 1 100%;
  width: 100%;
  height: var(--control-h);
  min-height: var(--control-h);
  max-height: var(--control-h);
  font-size: 1rem;
  padding: 0 .65rem;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.search-main .btn { flex: 1 1 100%; width: 100%; height: var(--control-h); min-height: var(--control-h); max-height: var(--control-h); padding: 0 1rem; font-size: 1rem; }
.search-main .btn-lg { min-height: var(--control-h); }
.search-filters label {
  display: flex; flex-direction: column; gap: .25rem;
  flex: 1 1 100%; font-size: .8rem; color: var(--muted);
}
.search-filters select,
.city-combo-input {
  height: var(--control-h); min-height: var(--control-h); max-height: var(--control-h);
  border-radius: 0; border: 1px solid var(--border);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1.2 L6 6.2 L11 1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 12px 8px;
  color: var(--text); padding: 0 1.5rem 0 .65rem; font-size: 1rem;
  width: 100%; box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.city-combo { position: relative; flex: 1 1 100%; width: 100%; min-width: 0; }
.city-combo-input {
  font-family: inherit;
  margin: 0;
}
.city-combo-input::placeholder { color: var(--text); opacity: 1; }
.city-combo.is-ready > select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  max-height: none;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
.city-combo-list {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(75dvh, 42rem);
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.city-combo-option {
  min-height: var(--control-h);
  padding: 0 .65rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  cursor: pointer;
}
.city-combo-option.is-active { background: var(--surface2); }
.hero-search-only:has(.city-combo.is-open),
.search-panel:has(.city-combo.is-open) { position: relative; z-index: 45; }
.city-combo.is-open { z-index: 46; }
.city-combo.is-open .city-combo-list { z-index: 46; }
.chk {
  flex-direction: row !important; align-items: center; gap: .55rem !important;
  margin-top: .35rem; color: var(--text) !important; font-size: .95rem !important;
  min-height: var(--control-h);
}
.chk input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* —— Buttons —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; min-height: var(--control-h); padding: .65rem 1rem;
  border-radius: 0; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none !important;
  touch-action: manipulation;
}
.btn-lg { min-height: 52px; padding-inline: 1.25rem; font-size: 1.05rem; }
.btn-primary { background: #55ff55; color: #000000; border-color: #55ff55; }
.btn-call { background: var(--accent2); color: #000000; flex: 1 1 auto; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-call:hover { filter: brightness(1.06); }
}
.btn-wa { background: var(--wa); color: #06210f; flex: 0 1 auto; min-width: var(--control-h); }
.btn-ghost { background: var(--surface2); color: var(--text); border-color: var(--border); }
.btn-huge {
  min-height: 56px; font-size: 1.15rem; width: 100%;
  box-shadow: 0 6px 20px rgba(0,200,83,.35);
}
.btn-phone-num {
  font-weight: 600; font-size: .92em; opacity: .92;
  white-space: nowrap;
}

.section { margin: 1.75rem 0; }
.section h2 { margin: 0 0 .85rem; font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.home-results-share {
  margin-left: auto;
  width: 2.4rem;
  height: 2.4rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  flex: 0 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
}
.home-results-share svg { width: calc(1.05rem * 1.2 / .95); height: calc(1.05rem * 1.2 / .95); flex: 0 0 auto; }
.city-picks { display: flex; flex-wrap: wrap; gap: .45rem; }
.city-pill {
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  min-height: var(--control-h); display: inline-flex; align-items: center;
  padding: .55rem .95rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
}
.city-pill:hover { border-color: var(--accent); text-decoration: none; }

/* —— Shop cards —— */
.shop-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; min-width: 0; }
.shop-grid > .guide-more-services {
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.shop-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  padding: 1.05rem 1rem; display: flex; flex-direction: column; gap: .65rem;
  min-width: 0; max-width: 100%;
}
/* Author display:flex overrides UA [hidden]{display:none} — force hide when filtered */
.shop-card[hidden] { display: none !important; }
.shop-card.is-featured { border-color: #e6c200; box-shadow: none; }
.shop-card-top,
.shop-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: .75rem;
  row-gap: .35rem;
  min-width: 0;
}
.shop-card-title,
.shop-detail-title { grid-column: 1; grid-row: 1; min-width: 0; }
.shop-card-top .badges,
.shop-detail-head .badges { grid-column: 1; grid-row: 2; }
.shop-detail-head .shop-detail-title { margin-bottom: 0; }
.shop-detail-head .shop-claim { grid-column: 1; grid-row: 2; margin: 0 0 .35rem; }
.shop-detail-head .badges { grid-column: 1 / -1; grid-row: 3; }
.shop-card-top .shop-rating { grid-row: 1; }
.shop-card-top .badges { grid-column: 1 / -1; }
.shop-card-top .shop-meta { grid-column: 1; grid-row: 2; }
.shop-card-top:has(> .shop-meta) .shop-rating {
  height: 0;
  min-height: 0;
  overflow: visible;
}
.shop-card-top:has(> .shop-meta) .badges { grid-row: 3; margin-top: .8rem; }
.shop-rating {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  text-align: right;
  font-size: clamp(.62rem, 2.6vw, .78rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--muted);
}
.shop-rating span { display: block; white-space: nowrap; }
.shop-g {
  display: inline-block;
  width: 1.08cap;
  height: 1.08cap;
  overflow: visible;
  vertical-align: -0.02cap;
  margin: 0 .22em 0 0;
}
.shop-card-title { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.shop-card-title a {
  color: var(--text);
  display: inline-block; min-height: 1.4em; max-width: 100%;
}
.shop-meta { margin: 0; color: var(--muted); font-size: .92rem; }
.shop-card-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: auto; padding-top: .45rem;
  align-items: stretch;
}
.shop-card {
  height: 100%;
}
.shop-card-actions .btn-call {
  flex: 1 1 100%;
  height: var(--card-btn-h);
  min-height: var(--card-btn-h);
  max-height: var(--card-btn-h);
  white-space: nowrap;
}
.shop-card-actions .call-with-site {
  display: flex;
  flex: 1 1 100%;
  gap: .35rem;
  align-items: stretch;
  min-width: 0;
}
.shop-card-actions .call-with-site > .btn-call:not(.btn-site) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-card-actions .call-with-site > .btn-site {
  flex: 0 0 var(--card-btn-h);
  width: var(--card-btn-h);
  height: var(--card-btn-h);
  min-height: var(--card-btn-h);
  max-height: var(--card-btn-h);
  padding: 0;
  justify-content: center;
}
.shop-card-actions .btn-site-sq {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-card-actions .btn-site svg {
  width: 1.15rem;
  height: 1.15rem;
  max-width: none;
  display: block;
}
.shop-card-actions .btn-wa { flex: 1 1 calc(50% - .25rem); }
.shop-card-actions .btn-ghost { flex: 1 1 calc(50% - .25rem); }
.shop-card-actions > .btn-details {
  flex: 1 1 100%;
  width: 100%;
}
.badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: .25rem .5rem; border-radius: 6px;
  background: var(--surface2); color: var(--muted);
}
.badge-sponsored { background: #e6c200; color: #ffffff; }
.badge-online { background: #23a554; color: #ffffff; }
.badge-247 { background: #ff9533; color: #ffffff; }
.badge-gtp { background: #967dff; color: #ffffff; }
.badge-parts { background: #ff5faf; color: #ffffff; }
.badge-service { background: #22d3ee; color: #ffffff; }
.badge-both { background: #967dff; color: #ffffff; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  font-size: .78rem; padding: .25rem .55rem; border-radius: 999px;
  background: #1e2a38; color: #c9d7e6; border: 1px solid var(--border);
}
.chip-part { background: #ff5faf; color: #ffffff; }

.call-bar {
  position: sticky; bottom: var(--safe-bottom); z-index: 40;
  display: flex; flex-wrap: wrap; gap: .55rem;
  padding: .45rem 0 0;
  /* Same size as the space above the buttons. Must stay positive so the card border is not covered. */
  margin: .65rem 0 calc(.65rem + .45rem);
  background: linear-gradient(180deg, transparent, var(--bg) 28%);
}
.call-bar .btn-wa { flex: 1 1 auto; min-height: 52px; }
.shop-claim { margin: .2rem 0 0; font-size: .82rem; line-height: 1.35; }
.shop-claim a { font-weight: 400; }
.shop-detail-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
.shop-detail { min-width: 0; }
.shop-aside {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 1rem;
}
.shop-aside dl { margin: 0; }
.shop-aside dt { color: var(--muted); font-size: .8rem; margin-top: .65rem; }
.shop-aside dd { margin: .15rem 0 0; }
.shop-aside dd a[href^="tel:"] {
  display: inline-flex; align-items: center; min-height: var(--control-h);
  font-weight: 700; color: #ffffff; font-size: 1.05rem;
}
html[data-theme="light"] .shop-aside dd a[href^="tel:"] {
  color: #000000;
}
.prose { color: #d7e0ea; }
.crumb { color: var(--muted); font-size: .9rem; }
.shop-detail-title { margin: 0 0 .35rem; font-size: 1.6em; line-height: 1.25; }
.shop-address-link,
.shop-address-link:hover,
.shop-address-link:focus-visible { text-decoration: none; }
.shop-ico {
  display: inline-block; position: relative; vertical-align: baseline;
  height: .7em; height: 1cap;
  margin: 0 .35rem 0 0;
}
.shop-ico svg {
  position: absolute; display: block; overflow: visible;
  max-width: none; height: auto;
}
/* Pin ink y 1.5–34.2 inside 0 0 24 34.2. Tip stays on the line; drawing is a bit over one capital so the top meets the letters. */
.shop-ico-pin { --s: 1.239; width: calc(.7em * 21 / 32.7 * var(--s)); width: calc(1cap * 21 / 32.7 * var(--s)); }
.shop-ico-pin svg {
  width: calc(.7em * 24 / 32.7 * var(--s)); width: calc(1cap * 24 / 32.7 * var(--s));
  height: calc(.7em * 34.2 / 32.7 * var(--s)); height: calc(1cap * 34.2 / 32.7 * var(--s));
  left: calc(-1.5 * .7em / 32.7 * var(--s)); left: calc(-1.5 * 1cap / 32.7 * var(--s));
  bottom: 0;
}
/* Globe keeps its size. Its bottom sits on the text line. */
.shop-ico-globe { --s: 1.1; width: calc(.7em * var(--s)); width: calc(1cap * var(--s)); }
.shop-ico-globe svg {
  width: calc(.7em * 24 / 18.2 * var(--s)); width: calc(1cap * 24 / 18.2 * var(--s));
  height: calc(.7em * 24 / 18.2 * var(--s)); height: calc(1cap * 24 / 18.2 * var(--s));
  left: calc(-2.9 * .7em / 18.2 * var(--s) - .7em * (var(--s) - 1) / 2);
  left: calc(-2.9 * 1cap / 18.2 * var(--s) - 1cap * (var(--s) - 1) / 2);
  bottom: calc(-2.9 * .7em / 18.2 * var(--s));
  bottom: calc(-2.9 * 1cap / 18.2 * var(--s));
}
.shop-site-link { overflow-wrap: anywhere; }
.call-bar { flex-wrap: nowrap; gap: .4rem; }
.call-bar .btn-huge {
  flex: 1 1 0; width: auto; min-width: 0;
  padding-inline: .35rem;
  font-size: clamp(.72rem, 3.2vw, 1rem);
  box-shadow: none;
  /* Homepage Call: 1rem type, line-height 1.45, .65rem padding, 1px border. */
  height: calc(1.45rem + 1.3rem + 2px);
  min-height: calc(1.45rem + 1.3rem + 2px);
  max-height: calc(1.45rem + 1.3rem + 2px);
}
.call-bar .btn svg { width: 18px; height: 18px; flex: 0 0 auto; max-width: none; }
.call-bar .btn .btn-pin { width: 11.34px; height: 16.2px; }
.call-bar .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-bar .btn:disabled { opacity: .38; cursor: default; filter: none; }
.ad-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.homepage-ad {
  display: flex; flex-direction: column; gap: .35rem;
  background: linear-gradient(145deg, #0a3a3a, #1a222c);
  border: 1px solid #ffe566; border-radius: 0; padding: 1.05rem; color: var(--text);
  min-height: var(--control-h);
}
.homepage-ad:hover { text-decoration: none; filter: brightness(1.05); }
.homepage-ad em { color: var(--muted); font-style: normal; font-size: .9rem; }

.topics-ad { margin: 1rem 0; max-width: 640px; }
.topics-ad a { display: block; text-decoration: none; color: inherit; }
.topics-ad a:hover { text-decoration: none; }
.topics-ad-crop {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1200 / 504;
}
.topics-ad-crop img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.topics-ad-kicker {
  display: block; margin-bottom: .35rem;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.flash { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.flash-ok { background: #123a28; color: #7dffb3; }
.flash-err { background: #3a1212; color: #ffb0b0; }
.prose-page { max-width: 640px; margin-inline: auto; }
.prose-page h1 { text-align: center; }
.guide-faq-title {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.guide-faq-q {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.45;
}
.prose-page .about-cta,
.form-submit { text-align: center; }
.btn-place { width: 152px; max-width: 100%; }
.contact-form { display: grid; gap: .75rem; margin-top: 1rem; }
.contact-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .9rem; }
.contact-form input, .contact-form textarea {
  min-height: var(--control-h); border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); padding: .65rem .75rem; font: inherit;
  width: 100%;
}
.empty { color: var(--muted); padding: 2rem 0; }
.link-more {
  font-weight: 600;
  display: inline-flex; align-items: center; min-height: var(--control-h);
}

/* Admin */
.admin-body { background: #12161c; }
.admin-wrap { width: min(1000px, 100% - 1.5rem); margin: 1.5rem auto; }
.admin-nav { display:flex; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.table { width:100%; border-collapse: collapse; font-size:.9rem; }
.table th, .table td { border-bottom:1px solid var(--border); padding:.55rem .4rem; text-align:left; vertical-align:top; }
.table th { color: var(--muted); font-weight:600; }
.form-grid { display:grid; gap:.75rem; grid-template-columns:1fr; }
.form-grid .full { grid-column: 1 / -1; }


/* —— Near me (geolocation) —— */
.search-near { margin-top: .65rem; }
.near-me {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem;
  width: 100%;
}
.near-me-btn,
.near-me-clear {
  min-height: var(--control-h);
  flex: 0 1 auto;
}
.near-me-btn[aria-pressed="true"] {
  border-color: var(--accent2);
  color: #7dffb3;
  background: #123a28;
}
.near-me-btn[aria-busy="true"] {
  opacity: .85;
  cursor: wait;
}
.near-me-hint {
  font-size: .88rem;
  color: var(--muted);
  flex: 1 1 8rem;
}
.near-me-hint.is-error { color: #ffb0b0; }
.shop-distance {
  color: var(--accent2);
  font-weight: 600;
  white-space: nowrap;
}
a.shop-distance,
a.shop-distance:hover,
a.shop-distance:focus,
a.shop-distance:focus-visible,
a.shop-distance:active,
a.shop-distance:visited {
  color: var(--accent2);
  font-weight: 600;
  text-decoration: none;
  outline: none;
}
html[data-theme="light"] a.shop-distance,
html[data-theme="light"] a.shop-distance:hover,
html[data-theme="light"] a.shop-distance:focus,
html[data-theme="light"] a.shop-distance:focus-visible,
html[data-theme="light"] a.shop-distance:active,
html[data-theme="light"] a.shop-distance:visited {
  color: var(--accent2);
}
.user-loc-icon {
  background: transparent; border: 0;
}
.user-loc-dot {
  display: block; width: 16px; height: 16px;
  border-radius: 50%;
  background: #1a73e8;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(26,115,232,.45), 0 2px 6px rgba(0,0,0,.35);
}


/* —— Shop type map pins (colors: see --pin-* / map.php comments) —— */
.map-pin-icon { background: transparent; border: 0; }
.map-pin-dot {
  display: block; width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35);
}
.map-pin-mark {
  position: absolute;
  left: 16px;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pin-gtp);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.map-pin-parts .map-pin-dot, .map-legend-dot.map-pin-parts { background: var(--pin-parts); }
.map-pin-service .map-pin-dot, .map-legend-dot.map-pin-service { background: var(--pin-service); }
.map-pin-both .map-pin-dot,
.map-legend-dot.map-pin-gtp { background: #967dff; }
.map-legend {
  list-style: none; margin: 0 0 .55rem; padding: 0;
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: 0;
  width: 100%;
  height: var(--control-h);
  min-height: var(--control-h);
  font-size: clamp(.62rem, 2.6vw, .78rem);
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  overflow: visible;
}
.map-legend li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}
button.map-legend-item {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  letter-spacing: .04em;
  background: transparent;
  color: var(--text);
}
.map-legend-item {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0 .65rem;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-inline-start: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: none;
}
.map-legend li:first-child .map-legend-item { border-inline-start: 0; }
.map-legend-item:hover, .map-legend-item:focus-visible {
  outline: none;
  box-shadow: none;
}
.map-legend-item.is-active {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
.map-legend-item:not(.is-active) {
  opacity: .55;
}
.map-legend-dot {
  display: inline-block; width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.map-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin: 0 0 .75rem;
}
.map-popup-type { font-size: .85em; color: #555; font-weight: 600; }

/* —— Map page (mobile-first full usable width) —— */
.map-page { margin-bottom: 1rem; }
.map-page h1 { margin: 0 0 .35rem; font-size: clamp(1.3rem, 4vw, 1.8rem); }
.map-lead { color: var(--muted); margin: 0 0 .85rem; }
.map-frame {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  border-radius: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 0;
}
.map-frame .leaflet-container { width: 100%; height: 100%; background: #1a222c; }
.map-frame .leaflet-control-container .leaflet-top,
.map-frame .leaflet-control-container .leaflet-bottom { z-index: 800; }
.map-frame .leaflet-control-zoom a {
  width: 36px !important; height: 36px !important; line-height: 36px !important;
  font-size: 18px !important;
}
.map-meta { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; }
.leaflet-popup-content { color: #1a1a1a; margin: .6rem .75rem; }
.leaflet-popup-content a { color: #0b5cab; font-weight: 600; }
.leaflet-popup-content .map-popup-phone { color: #000000; }

/* Full-bleed map on very narrow screens (controls not clipped by wrap) */
@media (max-width: 480px) {
  .map-page .map-frame {
    width: calc(100% + 1.25rem);
    margin-left: -.625rem;
    margin-right: -.625rem;
    border-radius: 0;
    border-left: 0; border-right: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/* SEO landing / hub (minimal) */
.landing-intro { max-width: 46rem; }
.related-block { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.related-title { margin: 0 0 .5rem; font-size: 1rem; color: var(--muted); font-weight: 600; }
.related-links { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .85rem; }
.related-links a {
  color: var(--muted); font-size: .9rem;
  display: inline-flex; align-items: center; min-height: 40px;
}
.related-links a:hover { color: var(--text); }
.sofia-guide-links {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.sofia-guide-links li {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  max-width: 100%;
}
.sofia-guide-links a {
  display: inline;
  min-height: 0;
  line-height: 1.45;
}
.site-colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin: 1.25rem 0 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}
.site-colophon-brand { white-space: nowrap; }
.site-colophon-text {
  width: 100%;
  max-width: 36rem;
  min-width: 0;
  text-align: center;
}
.site-colophon-phrase {
  display: inline-block;
  white-space: nowrap;
}
.site-colophon a,
html[data-theme="light"] .site-colophon a {
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}
.site-colophon a:hover,
html[data-theme="light"] .site-colophon a:hover { color: var(--text); }
.directory-line {
  margin: .15rem 0 .2rem;
  padding: 0 .4rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
}
.directory-index {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem .65rem;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.directory-index li { max-width: 100%; }
.directory-index a,
html[data-theme="light"] .directory-index a {
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.directory-index a:hover,
html[data-theme="light"] .directory-index a:hover { color: var(--text); }
.directory-count { margin-left: .2rem; }
.hub-index {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem;
  grid-template-columns: 1fr;
}
.hub-index li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .75rem .9rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
  min-height: var(--control-h);
}
.hub-index a { color: var(--text); font-weight: 600; }
.hub-meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }

.search-filters > select,
.search-filters > .city-combo {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
.search-filters label.chk { flex: 0 0 auto; width: 100%; }
.search-filters [data-near-me] { flex: 1 1 100%; width: 100%; }
.search-check-line {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .35rem;
  width: 100%;
  align-items: stretch;
}
.search-filters .search-check-line label.chk {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.search-check-line .badge-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.search-check-line .badge-toggle span {
  flex: 1 1 auto;
  width: 100%;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .25rem .35rem;
  border-radius: 6px;
  background: var(--surface2);
  white-space: nowrap;
}
.search-check-line .badge-toggle-247 span {
  color: #ff9533;
}
.search-check-line .badge-toggle-online span {
  color: #23a554;
}
.search-check-line .badge-toggle-near span {
  color: #5b87e8;
}
.search-check-line .badge-toggle-247 input:checked + span {
  background: #ff9533;
  color: #ffffff;
}
.search-check-line .badge-toggle-online input:checked + span {
  background: #23a554;
  color: #ffffff;
}
.search-check-line .badge-toggle-near input:checked + span {
  background: #5b87e8;
  color: #ffffff;
}
.search-check-line .badge-toggle input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.search-filters [data-near-me] .near-me-hint { flex: none; width: 100%; margin: 0; }

/* —— Progressive enhancement: tablets+ —— */
@media (min-width: 480px) {
  .wrap { width: min(1100px, 100% - 1.5rem); }
  .search-main input[type=search] { flex: 1 1 220px; width: auto; }
  .search-main .btn { flex: 0 0 auto; width: auto; }
  .search-filters label { flex: 1 1 140px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
  .shop-card-actions > .btn-call,
  .shop-card-actions > .call-with-site {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .shop-card-actions > .btn-details {
    flex: 1 1 100%;
    width: 100%;
  }
  .shop-card-actions .btn-call,
  .shop-card-actions .btn-details {
    height: var(--card-btn-h);
    min-height: var(--card-btn-h);
    max-height: var(--card-btn-h);
    padding-top: 0;
    padding-bottom: 0;
  }
  .shop-card-actions .btn-phone-num {
    font-size: clamp(.68rem, 1.6vw, .92em);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ad-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .hub-index { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .search-filters > select,
  .search-filters > .city-combo { flex: 1 1 140px; width: auto; }

}

@media (min-width: 700px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .search-panel { padding: 1rem; }
}

@media (min-width: 800px) {
  .shop-detail-grid { grid-template-columns: 1.4fr .8fr; }
  .call-bar { position: static; bottom: auto; background: none; padding-bottom: 0; margin-bottom: calc(.65rem + .45rem); }
  .main { padding: 1.25rem 0 3rem; }
  .btn-huge { min-height: 64px; font-size: 1.25rem; }
}


.search-main .btn-primary, .search-panel .btn-primary {
  background: #55ff55 !important; color: #000000 !important; border-color: #55ff55 !important; border-radius: 0 !important;
}
.btn-primary, .btn-call, .btn-details, .call-bar .btn, a.shop-distance, .home-results-share { transition: transform .08s ease; }
@keyframes btn-press-flash {
  0% { filter: brightness(1.225); }
  100% { filter: brightness(1); }
}
.btn-primary.is-pressed,
.btn-call.is-pressed,
.btn-details.is-pressed,
.call-bar .btn.is-pressed:not(:disabled),
a.shop-distance.is-pressed,
.home-results-share.is-pressed {
  transform: translateY(2px);
  animation: btn-press-flash .22s ease-out;
}
.btn-primary:disabled.is-pressed,
.btn-call:disabled.is-pressed,
.btn-details:disabled.is-pressed,
.call-bar .btn:disabled.is-pressed {
  transform: none;
  animation: none;
}


/* Home: square map under search */
.home-map-wrap { margin-top: .45rem; margin-bottom: 1rem; }
.home-map-wrap .map-frame {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  max-height: none;
}
@media (min-width: 900px) {
  .home-map-wrap .map-frame {
    aspect-ratio: auto;
    height: 340px;
    max-height: 340px;
  }
}



/* Legend: same outline paint as .search-panel */
.home-map-wrap .map-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 0 .55rem;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  overflow: visible;
}
.home-map-wrap .map-legend li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}
.home-map-wrap .map-legend-item {
  width: 100%;
  border: 0;
  border-inline-start: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 4px;
  letter-spacing: 0;
  line-height: 1.15;
  font-size: clamp(.75rem, 3.33vw, 1.125rem);
}
.home-map-wrap .map-legend li:first-child .map-legend-item { border-inline-start: 0; }
.home-map-wrap .map-legend-item {
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 480px) {
  .home-map-wrap .map-legend-item {
    font-size: .62rem;
    padding: 0 1px;
    white-space: nowrap;
  }
}
.is-home .home-map-wrap .map-legend-item {
  font-size: clamp(calc(.75rem * 1.2), calc(3.33vw * 1.2), calc(1.125rem * 1.2));
}
@media (max-width: 480px) {
  .is-home .home-map-wrap .map-legend-item {
    font-size: calc(.62rem * 1.2);
  }
}

/* Търси + Обади се: black in both themes */
.search-main .btn-primary,
.search-panel .btn-primary,
.btn-call,
.btn-call .btn-phone-num {
  color: #000000 !important;
}
html:not([data-theme="light"]) .search-main .btn-primary,
html:not([data-theme="light"]) .search-panel .btn-primary {
  color: #000000 !important;
}