/* ============================================================
   Example.com — main.css
   Vanilla CSS companion to the Express/EJS migration.
   Designed to mirror the Next.js Tailwind theme.
   ============================================================ */

/* ---- SVG Icon System -------------------------------------- */
/* Replaces Tabler webfont + Font Awesome. All icons served from /public/icons/sprite.svg.
   Usage: <svg class="icon" aria-hidden="true"><use href="/icons/sprite.svg#ti-NAME"></use></svg>
   To add icons see the header comment in /public/icons/sprite.svg.                        */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  overflow: visible;
}
/* Filled icon variants (Tabler filled set) — use fill, no stroke */
.icon--filled {
  fill: currentColor;
  stroke: none;
}

/* ---- CSS Custom Properties --------------------------------- */

:root {
  --background: #F5F3F0;
  --surface: #ECEAE6;
  --foreground: #171717;
  --accent: #007bf5;
  --accent-muted: #AAAAAA;
  --accent-prominent: #007bf5;
  --text-muted: #595959;
  --border: rgba(0,0,0,0.12);
  --radius: 8px;
  --shadow: 0 1px 4px rgba(0,0,0,0.08);
  --map-tiles: none;
  --checkbox-mark: #fff;
}

html[data-theme="dark"] {
  --background: #101828;
  --surface: #1a2438;
  --foreground: #ededed;
  --accent: #90B4FD;
  --accent-muted: #5C677E;
  --accent-prominent: #90B4FD;
  --text-muted: #9BAABB;
  --border: rgba(255,255,255,0.12);
  --map-tiles: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  --checkbox-mark: #1a1a1a;
}

/* ---- Reset & Base ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: var(--foreground);
  background: var(--background);
}

[data-theme="light"] body {
  background: radial-gradient(circle, #F5F3F0, #EDE9E6);
}
[data-theme='dark'] body {
  background: radial-gradient(circle, #002244, #000000);
}

h1, h2, h3, h4 {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Public Sans', Arial, Helvetica, sans-serif; }
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.875rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; line-height: 1.5; }

a { color: var(--accent-prominent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ---- Page content wrapper --------------------------------- */

.page-content {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

/* ---- Typography ------------------------------------------- */

.muted, .text-muted { color: var(--text-muted); }

/* ---- Buttons ---------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 2rem;
  background: #2563eb;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  line-height: 1.4;
}
.btn-primary:hover { background: #1d4ed8; text-decoration: none; color: #fff; }
.btn-primary:disabled { background: var(--accent-muted); cursor: not-allowed; opacity: 0.7; }
[data-theme="dark"]   .btn-primary { background: color-mix(in srgb, var(--accent-prominent) 65%, #000); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  background: transparent;
  color: var(--accent-prominent);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--accent-prominent);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  line-height: 1.4;
}
.btn-secondary:hover { background: var(--accent-prominent); color: #fff; text-decoration: none; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  background: #dc2626;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-danger:hover { opacity: 0.85; color: #fff; text-decoration: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  background: transparent;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.btn-ghost:hover { background: var(--surface-2, rgba(0,0,0,0.05)); text-decoration: none; }

/* ---- Form elements ---------------------------------------- */

.form-label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--foreground);
}

.input-text {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1.125rem;
  color: var(--foreground);
  background-color: var(--background);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
  line-height: 1.5;
}
[data-theme="light"] .input-text { background-color: #FCFAF7; }
.input-text:focus {
  border-color: var(--accent-prominent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-prominent) 20%, transparent);
}

/* Chrome autofill override — prevents the yellow/blue tinted background */
.input-text:-webkit-autofill,
.input-text:-webkit-autofill:hover,
.input-text:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--background) inset;
  -webkit-text-fill-color: var(--foreground);
  caret-color: var(--foreground);
}
[data-theme="light"] .input-text:-webkit-autofill,
[data-theme="light"] .input-text:-webkit-autofill:hover,
[data-theme="light"] .input-text:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FCFAF7 inset;
}

textarea.input-text { font-family: inherit; }

select.input-text {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.1rem;
  padding-right: 2rem;
}

/* Number input spinner buttons (up/down arrows) - hide for consistent cross-browser styling */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.checkbox,
input[type="checkbox"][x-model],
.checkbox-grid input[type="checkbox"],
.admin-checkbox-grid input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--background);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  transition: background-color 0.15s, border-color 0.15s;
}

.checkbox:checked,
input[type="checkbox"][x-model]:checked,
.checkbox-grid input[type="checkbox"]:checked,
.admin-checkbox-grid input[type="checkbox"]:checked {
  background-color: var(--accent-prominent);
  border-color: var(--accent-prominent);
}

.checkbox:checked::after,
input[type="checkbox"][x-model]:checked::after,
.checkbox-grid input[type="checkbox"]:checked::after,
.admin-checkbox-grid input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--checkbox-mark);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) scale(1.6);
}

/* Amount button (tip form) */
.amount-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--foreground);
  font-family: inherit;
}
[data-theme="light"] .amount-btn { background: #FCFAF7; }
.amount-btn:hover { border-color: var(--accent-prominent); }
.amount-btn-active { border-color: var(--accent-prominent); background: color-mix(in srgb, var(--accent-prominent) 10%, transparent); }

/* ---- Cards ------------------------------------------------ */

.card {
  padding: 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--foreground);
  display: block;
  transition: box-shadow 0.15s;
}
[data-theme="light"] .card { background: #FCFAF7; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); text-decoration: none; }

.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* Species / product cards */
.species-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: var(--foreground);
  transition: box-shadow 0.15s, border-color 0.15s;
}
[data-theme="light"] .species-card { background: #FCFAF7; }
.species-card:hover { border-color: var(--accent-prominent); box-shadow: 0 4px 12px rgba(0,0,0,0.12); text-decoration: none; }
/* Wide horizontal card (Next.js style) */
.species-card--wide {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  padding: 1.25rem;
  gap: 1rem;
  border-width: 2px;
  border-color: var(--accent-muted);
}
.species-card--wide:hover { border-color: var(--accent-prominent); }
.species-card--full { grid-column: 1 / -1; }
.species-card__icon { font-size: 2.25rem; flex-shrink: 0; }
.species-card__body { flex: 1; }
.species-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.species-card--wide:hover .species-card__title { color: var(--accent-prominent); }
.species-card__desc { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.species-card__arrow {
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.species-card--wide:hover .species-card__arrow { transform: translateX(3px); }

/* ---- Tags ------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.tag:hover { border-color: var(--accent-prominent); text-decoration: none; }
.tag-active { border-color: var(--accent-prominent); background: color-mix(in srgb, var(--accent-prominent) 12%, transparent); color: var(--accent-prominent); }
.tag-btn {
  padding: 0.35rem 1rem;
  border: 1px solid var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 12%, transparent);
  color: var(--accent-prominent);
  font-weight: 500;
  cursor: pointer;
}
.tag-btn:hover { background: color-mix(in srgb, var(--accent-prominent) 20%, transparent); }
.tag-btn:active { transform: scale(0.98); }

/* ---- Links ------------------------------------------------ */

.link-primary { color: var(--accent-prominent); text-decoration: none; }
.link-primary:hover { text-decoration: underline; }

/* ---- Navigation ------------------------------------------- */

.site-header {
  /* no height — the spacer div below handles offset */
}

.nav-spacer {
  height: 3.25rem; /* matches nav-bar height */
}

.nav-image {
  height: 18vh;
  background-image: url('/img/mount-spokane-summit-summer.jpg');
  background-size: cover;
  background-position: center 35%;
}

[data-theme="dark"] .nav-image {
  background-image: url('/img/spokane-pavilion-e-bike.jpg');
}

@media (min-width: 640px) {
  .nav-image { height: 35vh; }
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  background: var(--background);
  color: var(--foreground);
  height: 3.25rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Logo — image peeks above the bar like the original */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--foreground);
  position: relative;
  margin-left: -0.5rem;
  flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }

.nav-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Default logo (black PNG) inverts in dark mode */
.nav-logo-img--default {
  background: #fff;
  border-color: var(--border);
}
[data-theme="dark"] .nav-logo-img--default {
  filter: invert(1);
  background: transparent;
  border-color: transparent;
}

.nav-aurochs {
  position: absolute;
  top: -8px;
  left: 0;
  width: 30px;
  height: auto;
  display: block;
}

[data-theme="dark"] .nav-aurochs { filter: invert(1); }

.bucking {
  transition: transform 0.3s ease-in-out;
}
.bucking:hover {
  transform: rotateZ(8deg);
}

.nav-brand {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: clamp(1.5rem, 2.75vw, 1.75rem);
  font-weight: 700;
  margin-left: 0.6rem;
  white-space: nowrap;
}

@media screen and (min-width: 640px) {
  .nav-logo { margin-top: -0.25rem; }
  .nav-aurochs { top: 0; }
}

/* Desktop nav links — hidden below xl */
.nav-links {
  display: none;
  align-items: center;
  gap: 1rem;
  flex: 1;
  margin: 0 1.5rem;
}
@media (min-width: 1280px) {
  .nav-links { display: flex; }
}

.nav-link {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.nav-link:hover { opacity: 1; text-decoration: none; transform: scale(1.04); }

/* Right icons cluster */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 1.1rem;
  color: var(--foreground);
  transition: background 0.15s, transform 0.15s;
}
.nav-icon-btn:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); transform: scale(1.1); text-decoration: none; }
.nav-icon-btn--tip .icon { color: var(--accent-prominent); }

/* Auth-state nav \u2014 toggled by data-admin on <html>, set by inline script reading grm_admin cookie */
.nav-icons { display: contents; }
.nav-icons--admin { display: none; }
[data-admin="1"] .nav-icons--admin { display: contents; }
[data-admin="1"] .nav-icons--guest { display: none; }
.nav-drawer-admin { display: none; }
[data-admin="1"] .nav-drawer-admin { display: block; }

/* Auth-state listing actions — same pattern as nav icons */
.listing-action--admin { display: none; }
[data-admin="1"] .listing-action--admin { display: inline-flex; }
[data-admin="1"] .listing-action--guest { display: none; }

.theme-switcher {
  display: none;
  flex-direction: row;
}
@media (min-width: 640px) {
  .theme-switcher { display: flex; }
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.4;
  transition: background 0.1s, color 0.1s, opacity 0.1s, transform 0.1s;
}
.theme-btn .icon { color: inherit; }
.theme-btn:hover { opacity: 0.75; background: color-mix(in srgb, var(--foreground) 6%, transparent); transform: translateY(-1px); }
.theme-btn:active { transform: translateY(1px) scale(0.92); background: color-mix(in srgb, var(--foreground) 12%, transparent); }
.theme-btn--left  { border-radius: var(--radius) 0 0 var(--radius); }
.theme-btn--right { border-radius: 0 var(--radius) var(--radius) 0; }
.theme-btn--active {
  opacity: 1;
}
.theme-btn--active:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); transform: translateY(-1px); }

.nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--foreground);
  font-size: 1.4rem;
  transition: background 0.15s, transform 0.15s;
  padding: 0;
}
.nav-hamburger:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); transform: scale(1.05); }

/* ---- Slide-in drawer ------------------------------------- */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
.nav-drawer.is-open { pointer-events: all; }

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(100, 116, 139, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }

.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 90vw);
  background: var(--background);
  box-shadow: -4px 0 24px rgba(0,0,0,0.2);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 1.5rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.nav-drawer-logo-img {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}
.nav-drawer-logo-img .nav-aurochs {
  position: static;
  width: 36px;
  height: auto;
  display: block;
}
.nav-drawer-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1;
  min-width: 0;
}
.nav-drawer-brand {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
}
.nav-drawer-brand:hover { text-decoration: none; }

.nav-drawer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--foreground);
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  position: relative;
}
.nav-drawer-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.nav-drawer-logo .nav-aurochs {
  position: static;
  width: 36px;
  height: auto;
}
.nav-drawer-logo:hover { text-decoration: none; }

.nav-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  border-radius: var(--radius);
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-drawer-close .icon { font-size: 1.25rem; }
.nav-drawer-close:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); }

.nav-drawer-email {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  text-decoration: none;
}
.nav-drawer-email:hover { color: var(--foreground); }

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 1rem;
}

.drawer-link {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.drawer-link:hover { background: color-mix(in srgb, var(--accent-prominent) 8%, transparent); text-decoration: none; }
.drawer-link--highlight { color: var(--accent-prominent); }
/* Secondary (lighter) drawer links */
.drawer-link--sm {
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  color: var(--foreground);
  opacity: 0.9;
}

/* SVG icon sizing inside drawer links */
.drawer-link .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  color: var(--accent-prominent);
  flex-shrink: 0;
}
.drawer-link--highlight .icon { color: inherit; }
.drawer-link--sm .icon { width: 1rem; height: 1rem; }

/* Section labels */
.drawer-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem 0.2rem;
  margin-top: 0;
}

/* RSS icon orange */
.nav-rss-icon { color: #ee802f; }

/* Theme switcher row at bottom of drawer */
.drawer-theme-row {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.theme-switcher--drawer  { display: flex !important; }
.theme-switcher--footer  { display: flex !important; }

/* ---- Footer ----------------------------------------------- */

.site-footer {
  padding: 3rem 1.5rem 2rem;
  margin-top: 4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.site-footer a { color: var(--foreground); text-decoration: none; transition: color 0.15s, transform 0.12s; transform-origin: left center; }
.site-footer a:not(.tag-link) { display: inline-block; }
.site-footer a:hover { color: var(--accent-prominent); transform: scale(1.04); }
.site-footer .icon { color: var(--accent-prominent); }

.footer-inner {
  max-width: 56rem;
  margin: 0 auto;
}

/* Newsletter */
.footer-newsletter {
  max-width: 22rem;
  margin: 4rem auto 5rem;
}
.subscribe-hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
.footer-newsletter h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}
.footer-newsletter p {
  font-size: 0.875rem;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.subscribe-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.subscribe-slide {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0;
}
.subscribe-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.subscribe-add-name {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 2px dashed color-mix(in srgb, var(--accent-muted) 40%, transparent);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-prominent);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.subscribe-add-name:hover {
  background: color-mix(in srgb, var(--accent-muted) 8%, transparent);
}

/* Two-column layout */
.footer-columns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
@media (min-width: 768px) {
  .footer-columns {
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
  }
}
.footer-col {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}
.footer-col--find {
  max-width: 28rem;
}
@media (min-width: 768px) {
  .footer-col--find {
    margin-top: 4rem;
  }
}
.footer-col h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--foreground);
}

/* Link lists */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.footer-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.footer-list li a,
.footer-list li button {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* Footer "Buy me a milk" button */
.footer-tip-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--accent-prominent);
  border-radius: var(--radius);
  background: rgba(230, 126, 34, 0.08);
  text-decoration: none;
  color: var(--foreground);
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.15s;
}
.footer-tip-link:hover {
  background: rgba(230, 126, 34, 0.12);
  text-decoration: none;
}
[data-theme="dark"]   .footer-tip-link { background: rgba(230, 126, 34, 0.1); }
[data-theme="dark"]   .footer-tip-link:hover { background: rgba(230, 126, 34, 0.15); }

.footer-tip-label {
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.footer-tip-payment-icons {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
}

.footer-tip-payment-icons svg {
  width: 16px;
  height: 16px;
  stroke: #16a34a;
}

.footer-tip-payment-icons svg.text-btn-icon__payment-apple   { color: var(--accent-prominent); stroke: var(--accent-prominent); }
.footer-tip-payment-icons svg.text-btn-icon__payment-paypal  { color: #003087; stroke: #003087; }
.footer-tip-payment-icons svg.text-btn-icon__payment-cash    { color: #16a34a; stroke: #16a34a; }
.footer-tip-payment-icons svg.text-btn-icon__payment-bitcoin { color: #f7931a; stroke: #f7931a; }
[data-theme="dark"]   .footer-tip-payment-icons svg { stroke: #86efac; color: #86efac; }

/* Clipboard / share buttons */
.footer-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-prominent);
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0rem;transition: color 0.15s, transform 0.12s;
  transform-origin: left center;
}
.footer-copy-btn:hover { color: var(--accent-prominent); transform: scale(1.04); }


/* Footer species/product tags */
.footer-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem 0 0.4rem;
}
.footer-tags-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 0.1rem;
}
.footer-tags-label--section {
  margin-left: 0.4rem;
}
.footer-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.825rem;
  color: var(--foreground) !important;
  text-decoration: none;
  transition: border-color 0.15s;
}
.footer-tag { transform-origin: center; }
.footer-tag:hover { border-color: var(--accent-prominent); transform: scale(1.04); }

.footer-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.25rem;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.15s, transform 0.12s;
  transform-origin: center;
}
.footer-more-link:hover { color: var(--accent-prominent) !important; transform: scale(1.04); }
.footer-more-link .icon { color: var(--accent-prominent); }

/* Legal / bottom section */
.footer-legal {
  max-width: 40rem;
  margin: 2rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--foreground);
}
.footer-legal p { margin: 0; font-size: 0.825rem; }
.footer-legal a { color: var(--accent-prominent) !important; }
.footer-legal a:hover { opacity: 0.8; transform: none; }
.footer-legal-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  margin: 0.5rem 0;
}
.footer-made {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  margin-top: 0.5rem;
}
.footer-copy {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.1rem;
  font-size: 0.9rem;
}
.footer-copy-link {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  color: var(--text-muted) !important;
}
.footer-copy-link:hover { color: var(--foreground) !important; }

/* ---- Map containers --------------------------------------- */

.map-fullwidth,
.map-container,
#map-container,
#map,
.map-full,
.map-results,
#map-single,
#map-states {
  width: 100%;
  height: 70vh;
  min-height: 300px;
  background: var(--background);
}

/* Ensure Leaflet can correctly measure and contain the states choropleth map */
#map-states {
  position: relative;
  overflow: hidden;
}

/* Full-page map layout */
.map-page {
  position: relative;
}

/* Species/category page header above map */
.map-page-header {
  padding: 1rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.map-page-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

/* Single listing map */
#map-single {
  height: 50vh;
  min-height: 260px;
  border-radius: var(--radius);
}

/* Search results map */
.map-results {
  height: 70vh;
  min-height: 300px;
}

/* Results page layout */
.results-header {
  padding: 1rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.results-header h1 { font-size: 1.4rem; margin: 0; }
.results-note { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.distance-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.results-list { list-style: none; padding: 0; margin: 0; }
/* Globe wrapper — sized to 70vh, controls positioned within it */
.globe-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 400px;
}

#globe-container {
  width: 100%;
  height: 100%;
  background: var(--background);
  display: block;
}

/* Globe controls overlay (bottom-right, inside #globe-container) */
.globe-controls {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}
.globe-controls-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  pointer-events: auto;
  pointer-events: auto;
}
.globe-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: #d1d5db;
  pointer-events: none;
}
.globe-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

/* Globe crosshairs overlay — centered positioning, pointer-events control */
.globe-crosshairs-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}

.globe-crosshairs-overlay.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-crosshairs-overlay__crosshairs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.globe-crosshairs {
  opacity: 0.8;
}

.globe-crosshairs-overlay__popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 110px), calc(-50% - 58px));
  pointer-events: auto;
}

.globe-crosshairs-overlay__popup.visible {
  display: block;
}

.globe-crosshairs-popup {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  text-align: left;
  min-width: 110px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.globe-crosshairs-popup__coords {
  font-size: 12px;
  margin: 0 0 8px 0;
  font-family: monospace;
  color: var(--accent-prominent);
  word-break: break-all;
}

.globe-crosshairs-popup__link {
  color: var(--accent-prominent);
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.15s;
}

.globe-crosshairs-popup__link:hover {
  opacity: 0.85;
  text-decoration: none !important;
}

.globe-crosshairs-popup__connector {
  position: absolute;
  bottom: -14px;
  left: calc(50% - 14px);
  pointer-events: none;
}

/* Map single wrapper (position:relative for overlay) */
/* ---- Listing detail page (map/single) --------------------- */

/* Full-width collapsible map panel */
.listing-map-section {
  width: 100%;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
/* Transparent overlay to capture tap on the hint (closed) map */
.listing-map-open-overlay {
  position: absolute;
  inset: 0;
  z-index: 900;
  cursor: pointer;
  background: transparent;
}
/* "Tap to expand" label shown at bottom of hint */
.listing-map-hint-label {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.4);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}
/* Subtle ghost close button overlaid at bottom when map is open */
.listing-map-close-btn {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.9);
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  backdrop-filter: blur(4px);
  transition: background 0.15s;
  white-space: nowrap;
}
@media screen and (min-width: 640px) {
  .listing-map-hint-label { bottom: 0.25rem; }
  .listing-map-close-btn { bottom: 0.25rem; }
}
.listing-map-close-btn:hover { background: rgba(0,0,0,0.55); }
.listing-map-container {
  position: relative;
  height: 25vh;
  overflow: hidden;
  transition: height 0.35s ease;
}
/* Override the global #map-single height so it fills the collapsible container */
.listing-map-container #map-single {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}
.listing-map-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Main content area */
.listing-detail-main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.5rem 1rem 5rem;
}

/* Name / subtitle */
.listing-name {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}
@media (min-width: 640px) {
  .listing-name { font-size: 2rem; }
}
.listing-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* Recall banner */
.listing-recall-banner {
  background: color-mix(in srgb, #f97316 12%, transparent);
  color: #c2410c;
  border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
[data-theme="dark"] .listing-recall-banner {
  color: #fdba74;
}

/* Species/product tag row (now a <ul>) */
.listing-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}

/* Feature tag (blue) — Farm / Buyers Club / Delivery Location / RAWMI / payment */
.tag--feature {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #1d4ed8;
  outline: 1px solid color-mix(in srgb, #3b82f6 28%, transparent);
  text-decoration: none;
}
[data-theme="dark"] .tag--feature {
  background: color-mix(in srgb, #3b82f6 28%, transparent);
  color: #93c5fd;
}

/* Species tag (green) — products */
.tag--species {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, #16a34a 18%, transparent);
  color: #166534;
  outline: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
  text-decoration: none;
}
[data-theme="dark"] .tag--species {
  background: color-mix(in srgb, #16a34a 28%, transparent);
  color: #86efac;
}

/* Recall tag (orange) */
.tag--recall {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #c2410c;
  outline: 1px solid color-mix(in srgb, #f97316 28%, transparent);
}
[data-theme="dark"] .tag--recall {
  background: color-mix(in srgb, #f97316 28%, transparent);
  color: #fdba74;
}

/* Header block — wraps name, subtitle, tags + action icons row */
.listing-header-block {
  margin-bottom: 1.75rem;
}

/* Icon-only action buttons, right-aligned row above title */
.listing-actions-float {
  display: flex;
  justify-content: flex-end;
  gap: 0.2rem;
  margin-bottom: 0.25rem;
}
.listing-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  opacity: 0.55;
  border-radius: var(--radius);
  transition: opacity 0.15s, background 0.15s;
  text-decoration: none;
}
.listing-action-icon:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  text-decoration: none;
}
.listing-action-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Info list: website / social / contact / location */
.listing-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.listing-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.listing-info-heading {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0;
}
.listing-info-link {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--foreground);
  font-size: 1rem;
}
.listing-info-link:hover {
  text-decoration: none;
  color: var(--accent-prominent);
}
.listing-info-icon {
  width: 18px;
  height: 18px;
  fill: var(--accent-prominent);
  flex-shrink: 0;
}
.listing-info-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.listing-info-address { align-items: flex-start; }
.listing-info-address-text { line-height: 1.55; font-size: 0.95rem; }

/* Related section with recall note */
.listing-related-section {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.listing-recall-note {
  font-size: 0.875rem;
  color: #c2410c;
  margin: 0;
}
[data-theme="dark"] .listing-recall-note {
  color: #fdba74;
}

/* Description / Learn more sections */
.listing-long-text {
  margin-bottom: 1.75rem;
  padding-top: 1rem;
}
.listing-long-text h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Bottom block: last updated + actions + breadcrumb */
.listing-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

/* Action row — copy / share / edit buttons (used in _listing-actions partial) */
.listing-action-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.listing-action-row--centered {
  justify-content: center;
  margin-bottom: 1rem;
}
.listing-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  font-size: 0.875rem;
  color: var(--foreground);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.listing-action-btn:hover {
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 5%, transparent);
  text-decoration: none;
}
.listing-action-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}
@media (max-width: 639px) { .listing-action-btn__ctx { display: none; } }

/* Traffic camera link on listing pages (WA/OR/CA/AK) */
.listing-traffic-cameras { margin: 1rem 0 0; }
.listing-traffic-cameras a {
  color: var(--accent-prominent);
  text-decoration: none;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.listing-traffic-cameras a:hover { text-decoration: underline; }
.listing-traffic-cameras svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

/* Embedded tip form on listing pages */
.listing-tip-section {
  padding: 1.5rem 0 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
.listing-tip-section .tip-form-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.listing-tip-section .tip-form-header-sub {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.listing-tip-section .tip-form-header-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Add note toggle button in tip form */
.add-note-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.add-note-btn:hover {
  border-color: color-mix(in srgb, var(--foreground) 50%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

/* Map overlay info label (top-right of listing map) */
.map-overlay-label {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background: var(--background);
  color: var(--foreground);
  opacity: 0.9;
  pointer-events: none;
  white-space: nowrap;
  margin: 0;
}

/* Related listings section */
.listing-related-section {
  margin: 1.5rem 0 2rem;
}
.listing-related-map {
  width: 100%;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0.75rem 0 1rem;
  z-index: 0;
}
.listing-related-map--fixed-height {
  height: 350px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.listing-links-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.listing-links-item {}
.listing-links-link {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--foreground);
}
.listing-links-link:hover .listing-links-name { text-decoration: underline; }
.listing-links-num {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.listing-links-name {
  font-size: 1.1rem;
  font-weight: 700;
}
.listing-links-location {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.listing-recall-tag {
  font-size: 0.8rem;
  color: var(--color-orange, #d97706);
  font-weight: 400;
}
/* Section divider */
.listing-section {
  border-top: 1px solid var(--border);
  padding: 1.1rem 0;
}
.listing-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

/* Contact/info rows */
.listing-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.listing-info-row:last-child { margin-bottom: 0; }
.listing-info-icon {
  width: 15px;
  height: 15px;
  fill: var(--text-muted);
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.listing-info-icon--phone { width: 14px; height: 14px; }

/* Navigation links row */
.listing-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.listing-nav-link {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.listing-nav-link:hover {
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 6%, transparent);
  text-decoration: none;
}

/* Social links row */
.listing-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.listing-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}
.listing-social-link:hover {
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 6%, transparent);
  text-decoration: none;
}
.listing-social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Related listings link */
.listing-related-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.3rem;
  font-size: 0.95rem;
  color: var(--accent-prominent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-prominent);
  margin-bottom: 0.75rem;
}
.listing-related-link:hover { opacity: 0.8; text-decoration: none; }

/* Description content */
.listing-description { line-height: 1.65; font-size: 1rem; }
.listing-description a, .quill-output a {
  color: var(--accent-prominent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-prominent);
}
.listing-description a:hover, .quill-output a:hover { text-decoration: none; opacity: 0.8; }

/* lastModified */
.listing-last-modified {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem 0;
}

/* Breadcrumb at bottom of listing */
.listing-breadcrumb {
  padding: 1rem 0 0;
}
.listing-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.15rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.listing-breadcrumb-list a {
  color: var(--foreground);
  text-decoration: none;
}
.listing-breadcrumb-list a:hover { text-decoration: underline; }
.listing-breadcrumb-list li[aria-hidden] { opacity: 0.5; }

/* RAWMI badge */
.badge--rawmi {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 15%, transparent);
  color: #15803d;
  border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
}
[data-theme="dark"] .badge--rawmi {
  color: #86efac;
}

/* Map single wrap (legacy, kept for overlay controls) */
.map-single-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Leaflet-hosted control panel — uses leaflet-top leaflet-right positioning */
.map-lcontrol { pointer-events: none; }
.map-lcontrol-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  pointer-events: auto;
  padding: 0.1rem 0.25rem 0 0;
}
.map-lcontrol-message {
  font-size: 0.75rem;
  background: var(--background);
  padding: 0.1rem 0.4rem;
  color: var(--foreground);
  pointer-events: none;
}
.map-lcontrol-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  background: var(--background);
  padding: 0.1rem 0.4rem;
  pointer-events: none;
}
.map-lcontrol-links {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.15rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.map-lcontrol-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

/* Shared map overlay */
.map-overlay {
  position: absolute;
  z-index: 450;
  pointer-events: none;
}
.map-overlay--tr {
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.map-overlay-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  background: var(--background);
  padding: 0.1rem 0.4rem;
  pointer-events: none;
}
.map-overlay-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  pointer-events: auto;
}

/* Shared overlay button (matches reference: bg=background, thin border) */
.map-overlay-btn {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--background);
  color: var(--foreground);
  border: 0.5px solid var(--background);
  padding: 0.125rem 0.5rem;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s;
}
.map-overlay-btn:hover { text-decoration: none; color: var(--foreground); border-color: var(--text-muted); }
/* Active = visible border (satellite on, or scroll zoom off) */
.map-overlay-btn--active { border-color: var(--text-muted); }
/* Hide scroll-zoom on mobile */
.map-overlay-btn--mobile-hidden { display: none; }
@media (min-width: 640px) {
  .map-overlay-btn--mobile-hidden { display: inline-block; }
}

/* Legend color dots */
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.2);
}

/* Map listing legend dots */
.legend-dot--farm   { background: #84cc16; border-color: #84cc16; } /* lime-500 */
.legend-dot--retail--map { background: #93c5fd; border-color: #93c5fd; } /* blue-300 */

/* Laws page legend dots */
.legend-dot--retail { background: lime; border-color: lime; }
.legend-dot--legal  { background: green; border-color: green; }
.legend-dot--banned { background: red; border-color: red; }

/* Search radius circle — stroke via CSS so --accent-prominent updates with theme */
.search-radius-circle { stroke: var(--accent-prominent); }

/* Leaflet overrides */
.leaflet-tile-pane { filter: var(--map-tiles, none); }
/* Satellite mode: never filter tiles */
.satellite-mode .leaflet-tile-pane { filter: none !important; }

.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-zoom {
  background-color: var(--background) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

.leaflet-control-attribution {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-size: 11px;
}
.leaflet-control-attribution a { color: var(--foreground) !important; }
/* Override Leaflet's .leaflet-container a { color: #0078A8 } for our buttons */
.leaflet-container .map-overlay-btn { color: var(--foreground) !important; }
.leaflet-container .map-popup-link { color: var(--accent-prominent) !important; }
.leaflet-container .map-popup-title { color: var(--foreground) !important; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
  --popup-bg: var(--background);
}

.leaflet-popup-content {
  margin: 0 !important;
  padding: 0.5rem !important;
  min-width: 256px;
}

.map-popup { padding: 0.25rem; }
.map-popup-title { display: block; font-weight: 700; font-size: 1rem; color: var(--foreground); margin-bottom: 0.5rem; text-decoration: none; }
.map-popup-location { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.map-popup-type { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.map-popup-link { display: inline-block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--accent-prominent); text-decoration: none; }
.map-popup-link:hover { text-decoration: underline; }

/* Species / product tags in map popup */
.popup-tags { position: relative; width: 100%; margin-top: 0.4rem; }
.popup-tags-inner { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.popup-tags--collapsible .popup-tags-inner { max-height: 60px; overflow: hidden; transition: max-height 0.25s ease; }
.popup-tags--collapsible[data-expanded="true"] .popup-tags-inner { max-height: 500px; }
.popup-tags-fade {
  position: absolute; bottom: 0.75rem; left: 0; right: 0; height: 2rem;
  background: linear-gradient(to bottom, transparent, var(--popup-bg, white));
  pointer-events: none;
}
.popup-tags--collapsible[data-expanded="true"] .popup-tags-fade { display: none; }
.popup-tags-toggle {
  display: block; width: 100%; text-align: right;
  font-size: 0.75rem; font-weight: 700; padding: 0 0.15rem;
  background: none; border: none; cursor: pointer; color: var(--foreground);
}
.popup-tag {
  display: inline-flex; align-items: center; border-radius: 0.25rem;
  padding: 0.1rem 0.35rem; font-size: 0.7rem; font-weight: 500;
  line-height: 1.4;
}
.popup-tag--species {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #15803d;
  outline: 1px solid color-mix(in srgb, #16a34a 25%, transparent);
}
[data-theme="dark"] .popup-tag--species {
  background: color-mix(in srgb, #16a34a 25%, transparent);
  color: #86efac;
}
.popup-tag--feature {
  background: color-mix(in srgb, #3b82f6 12%, transparent);
  color: #1d4ed8;
  outline: 1px solid color-mix(in srgb, #3b82f6 25%, transparent);
}
[data-theme="dark"] .popup-tag--feature {
  background: color-mix(in srgb, #3b82f6 25%, transparent);
  color: #93c5fd;
}
.popup-tag--recall {
  background: color-mix(in srgb, #f97316 12%, transparent);
  color: #c2410c;
  outline: 1px solid color-mix(in srgb, #f97316 25%, transparent);
}
[data-theme="dark"] .popup-tag--recall {
  background: color-mix(in srgb, #f97316 25%, transparent);
  color: #fdba74;
}

.marker-cluster > div > span { font-weight: bold; font-size: 1.1em; }

/* Map search bar float */
.map-search-overlay {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(420px, calc(100% - 2rem));
}

/* ---- Wordpress wp-block-styles overrides ------------------ */

body .wp-content a,
body .wp-content a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--accent-prominent);
}


/* ---- Alternative payment buttons (tip page) --------------- */

.alt-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.alt-pay-btn:hover { border-color: var(--accent-prominent); background: color-mix(in srgb, var(--accent-prominent) 5%, transparent); text-decoration: none; }

/* ---- Quick checkout section (tip form) -------------------- */

.quick-pay-heading {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.625rem;
  margin-top: 0.25rem;
}
.quick-pay-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
/* Force Square-injected Apple/Google Pay wrappers to full width */
.quick-pay-row #tip-apple-pay-btn,
.quick-pay-row #tip-google-pay-btn { width: 100%; display: flex; }
.quick-pay-row #tip-apple-pay-btn *,
.quick-pay-row #tip-google-pay-btn * { width: 100% !important; min-width: 0 !important; flex: 1 !important; }

/* Link-style quick pay button (Cash App, Bitcoin, etc.) */
.quick-pay-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: #ffffff;
  color: #374151;
  font-size: 0.9375rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(0 69 124 / 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
  line-height: 1.75;
}
.quick-pay-link-btn:hover { background: #f3f4f6; text-decoration: none; color: #374151; }

/* Dark mode theme */
html[data-theme="dark"] .quick-pay-link-btn {
  background: var(--background);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
html[data-theme="dark"] .quick-pay-link-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
}

/* PayPal yellow button */
.quick-pay-paypal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #FFC439;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(0 69 124 / 0.2);
  text-decoration: none;
  transition: background 0.12s;
}
.quick-pay-paypal:hover { background: #f0b829; text-decoration: none; }

/* ---- Alternative tips page (tip/index) -------------------- */

.tip-intro-box {
  background: color-mix(in srgb, var(--accent-prominent) 6%, var(--background));
  border-left: 4px solid var(--accent-prominent);
  padding: 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.25rem;
}
.tip-intro-box p { margin-bottom: 0.25rem; }

.tip-alt-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  margin-bottom: 3rem;
  width: 100%;
}
.tip-alt-h3 { font-size: 2rem; font-weight: 700; margin: 0; }
.tip-alt-h3__icon { vertical-align: middle; margin-bottom: 0.15em; margin-right: 0.3rem; font-size: 1.625rem; }
.tip-alt-h3__icon--paypal { color: #003087; }
[data-theme="dark"]   .tip-alt-h3__icon--paypal { color: #69a8e8; }
.tip-alt-h3__icon--cashapp { color: #15803d; }
[data-theme="dark"]   .tip-alt-h3__icon--cashapp { color: #86efac; }
.tip-alt-h3__icon--bitcoin { color: #ea580c; }
[data-theme="dark"]   .tip-alt-h3__icon--bitcoin { color: #fdba74; }
.tip-alt-h3__icon--eth { color: #6c6c6d; }

.tip-qr-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--foreground);
  transition: opacity 0.15s;
}
.tip-qr-link:hover { opacity: 0.8; text-decoration: none; }

.tip-address-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  word-break: break-all;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-prominent) 8%, transparent);
  max-width: 260px;
  line-height: 1.6;
}
.tip-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tip-copy-btn:hover { opacity: 0.85; }
.tip-copy-btn-btc { background: #ea580c; color: #fff; }
.tip-copy-btn-eth { background: var(--accent-prominent); color: #fff; }

/* ---- Listing detail page ---------------------------------- */

.listing-detail-name { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 0.25rem; }
.listing-meta { color: var(--text-muted); font-size: 0.95rem; }
.listing-contact-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 1rem; }

/* ---- Pagination ------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 0;
}
.pagination-page-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--foreground);
  font-size: 0.95rem;
}
.pagination-page-link:hover { color: var(--accent-prominent); }
.pagination-current {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ---- Blog category scroll --------------------------------- */
.blog-category-scroll {
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  scrollbar-width: none;
}
.blog-category-scroll::-webkit-scrollbar { display: none; }
.blog-category-scroll a {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--foreground);
  font-size: 0.95rem;
}
.blog-category-scroll a:hover { color: var(--accent-prominent); }

/* ---- Blog search ------------------------------------------ */
.blog-search-form {
  width: 100%;
  max-width: 28rem;
  margin-bottom: 1rem;
}
.blog-search-wrap {
  position: relative;
  display: flex;
}
.blog-search-icon-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  z-index: 1;
}
.blog-search-icon-btn svg { width: 14px; height: 14px; fill: currentColor; }
.blog-search-icon-btn:hover { color: var(--accent-prominent); }
.blog-search-input {
  width: 100%;
  padding-right: 2.5rem !important;
}

/* ---- Blog post grid (list page) ----------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Laws page -------------------------------------------- */

.law-banner {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.law-legal   { background: rgba(34,197,94,.15); color: #16a34a; }
.law-illegal { background: rgba(220,38,38,.12); color: #dc2626; }
.law-partial { background: rgba(234,179,8,.12);  color: #b45309; }

/* ---- Breadcrumb ------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--foreground); }
.breadcrumb-sep { opacity: 0.5; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: '/'; opacity: 0.4; margin-left: 0.5rem; }
.breadcrumb li.active { color: var(--foreground); }

/* ---- Article (single post) -------------------------------- */
.article-hero-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.article-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-breadcrumb-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted);
}
.article-share-bar {
  border-top: 1px solid var(--accent-muted);
  border-bottom: 1px solid var(--accent-muted);
  padding: 1rem 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.article-share-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  font-size: 1rem;
  font-family: inherit;
  padding: 0;
}
.article-share-btn svg { width: 18px; height: 18px; fill: currentColor; color: var(--accent-prominent); flex-shrink: 0; }
.article-share-btn:hover { color: var(--accent-prominent); }
.article-social-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 0.75rem 0;
}
.article-social-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.95rem;
}
.article-social-link svg { width: 18px; height: 18px; fill: currentColor; color: var(--accent-prominent); flex-shrink: 0; }
.article-social-link:hover { color: var(--accent-prominent); }

/* ---- Article Single Page (content/single.ejs) ------------- */

.article-single {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2rem;
}

.article-single__main {
  width: 100%;
  margin-bottom: 5rem;
}

.article-single__content-wrap {
  padding-left: 1rem;
  padding-right: 1rem;
}

.article-single__header {
  margin-bottom: 1.5rem;
}

.article-single__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.article-single__date {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.article-single__breadcrumb {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.article-single__breadcrumb-current {
  color: var(--accent-prominent);
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.article-single__actions {
  width: 100%;
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.article-single__contact-link {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.article-single__contact-link a {
  color: var(--foreground);
  text-decoration: none;
}

.article-single__contact-link a:hover {
  color: var(--accent-prominent);
  text-decoration: underline;
}

.article-single__contribute {
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.article-single__tip-form {
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  margin-bottom: 5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.article-single__support {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}

.article-single__support-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.article-single__support-desc {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.article-single__preview {
  width: 100%;
  padding: 2.5rem 1rem;
}

/* ---- Content Index Page (content/index) ---------------------- */

.content-index { margin-top: 48px; }
.content-index__wrapper { max-width: 36rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.content-index__header { margin-bottom: 1rem; }
.content-index__title { font-size: clamp(1.875rem, 5vw, 2.25rem); font-weight: 700; line-height: 1.15; margin: 0 0 0.25rem; }
.content-index__date-range { font-size: 0.875rem; color: var(--text-muted); margin: 0.25rem 0 0.75rem; }
.content-index__intro { font-size: 1rem; color: var(--text-muted); margin: 0 0 1rem; }
.content-index__search-result { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 1rem; }
.content-index__search { width: 100%; max-width: 28rem; margin: 0 auto 1.5rem; }
.content-index__grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; width: 100%; }
@media (min-width: 640px) { .content-index__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .content-index__grid { grid-template-columns: repeat(3, 1fr); } }
.content-index__item { width: 100%; }
.content-index__support { max-width: 32rem; margin-left: auto; margin-right: auto; text-align: center; margin-top: 5rem; margin-bottom: 2.5rem; }
.content-index__support-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; }
.content-index__support-text { font-size: 1rem; color: var(--text-muted); margin: 0 0 0.25rem; }
.content-index__support-desc { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.content-index__support-cta { display: inline-block; margin-top: 1.5rem; color: var(--accent-prominent); font-weight: 600; font-size: 0.875rem; }
.content-index__pagination { margin-top: 2rem; text-align: center; }
.content-index__pagination-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.content-index__page-link { display: inline-block; padding: 0.5rem 0.75rem; border: 1px solid var(--accent-muted); border-radius: var(--radius); background: var(--background); color: var(--foreground); text-decoration: none; transition: border-color 0.15s; }
.content-index__page-link:hover { border-color: var(--accent-prominent); }
.content-index__page-link--active { border-color: var(--accent-prominent); background: color-mix(in srgb, var(--accent-prominent) 12%, transparent); color: var(--accent-prominent); }
.content-index__page-link--disabled { opacity: 0.5; cursor: default; }
.content-index__tip-form-wrapper { width: 100%; max-width: 24rem; margin: 4rem auto 3rem; padding: 0 1rem; }

/* ---- Hub Pages (static/species, static/products) ----------- */

.hub-page { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1rem 5rem; }
.hub-page__title { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 700; text-align: center; margin: 0 0 1rem; }
.hub-page__intro { text-align: center; color: var(--text-muted); font-size: 1.0625rem; margin: 0 0 0.75rem; }

.categories-page { max-width: 48rem; margin-left: auto; margin-right: auto; }
.categories-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin: 0 0 1.5rem; }
.categories-page__tip-form-wrapper { width: 100%; max-width: 24rem; margin: 4rem auto 3rem; padding: 0 1rem; }

/* ---- Static Pages (privacy-policy, why, etc.) --------------- */

.static-page { max-width: 48rem; margin-left: auto; margin-right: auto; padding: 2.5rem 1rem; }
.static-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin: 0 0 2rem; }
/* Prose variant — compact title, generous vertical breathing room (privacy-policy, etc.) */
.static-page--prose { padding-top: 2.5rem; padding-bottom: 5rem; }
.static-page__prose-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .static-page__prose-title { font-size: 1.875rem; } }

.subscribe-success-page { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1rem 10rem; }
.subscribe-success-page__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
@media (min-width: 768px) { .subscribe-success-page__title { font-size: 1.875rem; } }
.subscribe-success-page__intro { color: var(--text-muted); margin: 0 0 0.5rem; }
.subscribe-success-page__tip { max-width: 24rem; margin: 5rem auto 0; }
.subscribe-success-page__tip-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .subscribe-success-page__tip-title { font-size: 1.5rem; } }

/* ---- Subscribe Page (static/subscribe) -------------------- */

.subscribe-page { max-width: 48rem; margin-left: auto; margin-right: auto; padding: 2.5rem 1rem; }
.subscribe-page__hero { display: flex; flex-direction: column; align-items: center; }
.subscribe-page__header { text-align: center; margin-bottom: 2rem; }
.subscribe-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin: 0 0 0.5rem; }
.subscribe-page__intro { text-align: center; font-size: 1.0625rem; line-height: 1.6; max-width: 36rem; margin: 0 auto; }
.subscribe-page__form { width: 100%; max-width: 24rem; margin: 2.5rem auto 0; }
.subscribe-page__socials { margin-top: 5rem; margin-bottom: 5rem; text-align: center; }
.subscribe-page__social-intro { font-size: 0.95rem; margin-bottom: 1rem; }
.subscribe-page__social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ---- Shared subscribe form utilities ---------------------- */
.subscribe-error { color: #dc2626; font-size: 0.875rem; }
.subscribe-submit-wrap { display: flex; justify-content: center; padding-top: 0.25rem; }
.subscribe-loading { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Map Pages (map/*) --------------------------------- */

.map-page { max-width: 48rem; margin-left: auto; margin-right: auto; }
.map-page--content { padding: 0 1rem 5rem; }
.map-page__header { width: 100%; max-width: 42rem; margin: 1.5rem auto 0; padding: 0 1rem; text-align: center; }
.map-page__title { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; margin-bottom: 0.4rem; }
.map-page__count { color: var(--text-muted); margin-bottom: 1rem; }
.map-page__actions { display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.map-page__rotator { width: 100%; max-width: 32rem; margin: 0 auto 2rem; }
.map-page__info { width: 100%; max-width: 36rem; margin: 0 auto; padding: 0 1rem; }
.map-page__info-title { font-size: 1.25rem; font-weight: 600; text-align: center; margin-bottom: 1rem; }
.map-page__prose { line-height: 1.7; }
.map-page__prose-heading { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; margin-top: 1.5rem; }
.map-page__prose-subheading { margin-bottom: 0.5rem; }
.map-page__prose-list { list-style: disc; padding-left: 1.5rem; line-height: 1.8; margin-bottom: 1rem; }
.map-page__prose-footer { text-align: center; font-style: italic; font-size: 0.875rem; }
.map-page__search { width: fit-content; margin: 1.5rem auto 3rem; }
.map-page__finder { width: fit-content; margin: 3rem auto 2rem; }
.map-page__contribute { width: fit-content; margin: 0 auto 2rem; }
.map-page__tip-form { max-width: 32rem; margin-left: auto; margin-right: auto; margin-bottom: 2rem; padding: 0 1rem; }
.map-page__ads { width: fit-content; margin: 0 auto 2.5rem; }

/* ---- Recall Page (map/recall) ----------------------- */

.sponsors-page { max-width: 48rem; margin-left: auto; margin-right: auto; padding: 2.5rem 1rem 5rem; }
.sponsors-page__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .sponsors-page__title { font-size: 1.875rem; } }
.sponsors-page__ad-examples { margin-bottom: 2.5rem; }
.sponsors-page__ad-heading { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.sponsors-page__content { margin-bottom: 3rem; }
.sponsors-page__form-box { max-width: 32rem; margin: 5rem auto 0; }
.sponsors-page__form { display: flex; flex-direction: column; gap: 1rem; }
.sponsors-page__form-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.sponsors-page__error { color: #dc2626; font-size: 0.875rem; }

/* ---- Sponsors Success (sponsors/success) --------- */

.sponsors-success-page { max-width: 48rem; margin: 0 auto; padding: 5rem 1rem 10rem; }
.sponsors-success-page__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .sponsors-success-page__title { font-size: 1.875rem; } }
.sponsors-success-page__intro { margin-bottom: 2.5rem; }

/* ---- About Page (static/about) ---------------------- */

.about-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}
.about-page__title {
  font-size: clamp(1.875rem, 5vw, 3.75rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.about-page__intro {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 0;
}
/* Stats */
.about-page__stats  { margin: 2rem 0 3rem; }
.about-page__section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.about-page__stat-line {
  font-size: 1.125rem;
  line-height: 1.6;
}
.about-page__stat-line--first { margin-top: 1.5rem; }
.about-page__stat-line--last  { margin-bottom: 1rem; }
.about-page__stat-num {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
}
.about-page__time-accumulated {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  line-height: 1.2;
}
@media (min-width: 768px) { .about-page__time-accumulated { font-size: 2.25rem; } }
.about-page__time-num  { font-size: inherit; font-weight: 900; }
.about-page__time-unit { font-size: 1rem; font-weight: 400; }
@media (min-width: 768px) { .about-page__time-unit { font-size: 1.125rem; } }
.about-page__time-label { font-size: 1rem; font-weight: 400; }
@media (min-width: 768px) { .about-page__time-label { font-size: 1.125rem; } }
/* Content sections */
.about-page__loading  { color: var(--text-muted); margin: 2rem 0; }
.about-page__content  { margin: 3rem 0; }
.about-page__get-involved {
  margin: 3rem 0;
  background: color-mix(in srgb, var(--accent-prominent) 8%, transparent);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.about-page__get-involved-intro { margin-bottom: 1rem; }
.about-page__involved-list {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.about-page__rotator {
  width: 100%;
  max-width: 32rem;
  margin: 4rem auto;
}
.about-page__rotator-heading {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .about-page__rotator-heading { font-size: 2rem; } }
/* Bottom outside max-width container */
.about-page__bottom { width: 100%; }
.about-page__contribute { width: 100%; margin: 4rem 0; }
.about-page__tip {
  width: 100%;
  max-width: 24rem;
  margin: 4rem auto;
  padding: 0 1rem;
}
.about-page__blog { width: 100%; margin: 4rem 0 8rem; }

/* ---- Shared listing form utilities (suggest / submit / edit / waiting) ---- */

/* Shared stack wrapper */
.listing-form { display: flex; flex-direction: column; gap: 1.5rem; }

/* Section headings inside any listing form */
.listing-form__section-title { font-size: 1.25rem; font-weight: 600; }
.listing-form__section-title--spaced { margin-top: 0.5rem; }

/* Muted hint below a section title */
.listing-form__section-hint { font-size: 0.875rem; color: var(--text-muted); margin-top: -1rem; }

/* Small per-field hint */
.listing-form__field-hint { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }

/* Responsive two-column grid (1 col mobile → 2 col ≥640px) */
.listing-form__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .listing-form__grid { grid-template-columns: 1fr 1fr; } }

/* Span full grid width */
.listing-form__field--full { grid-column: 1 / -1; }

/* Checkbox label */
.listing-form__checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; }
.listing-form__checkbox-label--primary { font-weight: 600; }
.listing-form__checkbox-label--capitalize { text-transform: capitalize; }

/* Inline checkbox group (payment, flags, etc.) */
.listing-form__checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.listing-form__checkbox-group-label { width: 100%; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Validation error */
.listing-form__error { color: #dc2626; font-size: 0.875rem; }

/* Submit button spinner */
.listing-form__loading { display: flex; align-items: center; gap: 0.5rem; }
.listing-form__spinner { width: 1.25rem; height: 1.25rem; animation: spin 0.6s linear infinite; }

/* Per-species sub-groups inside the products section */
.listing-form__species-groups { display: flex; flex-direction: column; margin-bottom: 1rem; }
.listing-form__species-group { display: flex; flex-wrap: wrap; gap: 0.75rem; border-top: 1px solid var(--border); padding: 0.75rem 0; }
.listing-form__species-group:first-child { border-top: none; padding-top: 0; }
.listing-form__checkbox-label input[type="checkbox"] { cursor: pointer; }

/* ---- Suggest/Update Form (map/suggest) ------------- */

.suggest-form-page { max-width: 38rem; margin-left: auto; margin-right: auto; padding: 2.5rem 1rem 10rem; }
.suggest-form-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: 1rem; }
.suggest-form-page__text { margin-bottom: 1rem; }
.suggest-form-page__text--last { margin-bottom: 2rem; }
.suggest-form-page__warning { font-weight: 600; border-bottom: 2px solid #dc2626; }
/* Suggest-form removed duplicate section-title / section-hint / grid / checkbox-label / error / loading/spinner rules (now listing-form__) */
.suggest-form-page__submit { padding: 0.75rem 2.5rem; font-size: 1.125rem; }
.suggest-form__submit-center { display: flex; justify-content: center; }


/* ---- Submit Form Page (submit/index) ------------- */
/* Submit page */
.submit-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}
.submit-page__title {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.submit-page__intro-paragraph {
  color: var(--foreground);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.submit-page__intro-paragraph--last {
  margin-bottom: 2.5rem;
}
.submit-page__link {
  border-bottom: 2px solid var(--accent-prominent);
  color: var(--accent-prominent);
  text-decoration: none;
}
.submit-page__link:hover {
  opacity: 0.8;
}
.form-status-message {
  margin: 0.5rem 0;
  color: var(--text-muted);
}
.form-actions {
  width: 70%;
  margin: 1rem 0;
}
.form-actions .btn-primary { width: 100%; }
.submit-page__button-wrapper {
  display: flex;
  justify-content: center;
}
.submit-page__submit-button {
  padding: 0.75rem 3rem;
  font-size: 1.125rem;
}
/* Submit success page */
.submit-success-page { max-width: 48rem; margin: 0 auto; padding: 5rem 1rem 10rem; }
.submit-success-page__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .submit-success-page__title { font-size: 1.875rem; } }
.submit-success-page__intro { margin-bottom: 1rem; }
.submit-success-page__share { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.submit-success-page__tip { max-width: 24rem; margin: 5rem auto 0; }
.submit-success-page__tip-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .submit-success-page__tip-title { font-size: 1.5rem; } }

/* ---- Social Index Page (social/index) ------------- */

.social-index-page { max-width: 64rem; margin-left: auto; margin-right: auto; padding: 1rem; }
.social-index-page__header { text-align: center; margin-bottom: 2rem; }
.social-index-page__title { font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700; margin-bottom: 0.75rem; }
.social-index-page__intro { font-size: 1.125rem; color: var(--text-muted); margin: 0 auto; max-width: 38rem; }
.social-index-page__help { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.75rem; margin-left: auto; margin-right: auto; max-width: 32rem; }

/* ---- Social Map Page (social/map) --------------- */

.social-map-page { max-width: 48rem; margin-left: auto; margin-right: auto; }
.social-map-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.social-map-page__intro { text-align: center; color: var(--text-muted); margin-bottom: 1rem; }
.social-map-page__count { text-align: center; color: var(--text-muted); margin-bottom: 1.5rem; }
.social-map-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.social-map-page__distance-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 48rem; margin: 0 auto 1.5rem; padding: 0 1rem; }
.social-map-page__listings { max-width: 48rem; margin: 0 auto 3rem; padding: 0 1rem; }
.social-map-page__listings-title { text-align:center; font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 700; margin-bottom: 0.25rem; }
.social-map-page__listings-count { text-align:center; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.25rem; }
.social-map-page__listings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.social-map-page__expand-radius { text-align: center; margin-top: 2.5rem; padding: 1.5rem 0; }
.social-map-page__expand-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
.social-map-page__analysis { max-width: 48rem; margin: 0 auto 1.5rem; padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.social-map-page__analysis-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.social-map-page__analysis-text { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 0.75rem 0; }
.social-map-page__analysis-description { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.75rem 0; }
.social-map-page__analysis-cta { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.social-map-page__intro-section { max-width: 48rem; margin: 0 auto 1.5rem; padding: 1.25rem 1rem; }
.social-map-page__intro-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.social-map-page__intro-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1rem 0; }
.social-map-page__benefits-list { list-style: disc; padding-left: 1.5rem; margin: 0; }
.social-map-page__benefits-list li { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.5rem; }
.social-map-page__benefits-list li strong { color: var(--foreground); }

/* ---- Species Map Page (species/map) ------------- */

.species-map-page__note { text-align: center; margin-top: 0.5rem; }
.species-map-page__query-wrap { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.species-map-page__about { max-width: 48rem; margin: 0 auto 2rem; padding: 1.5rem 1rem; }
.species-map-page__about-title { font-size: clamp(1.125rem, 2.5vw, 1.375rem); font-weight: 700; margin-bottom: 0.75rem; text-align: center; }
.species-map-page__about-intro { color: var(--text-muted); margin-bottom: 1rem; text-align: center; }
.species-map-page__about-list { list-style: disc; padding-left: 1.5rem; line-height: 1.8; margin-bottom: 1rem; }
.species-map-page__about-footer { font-size: 0.875rem; color: var(--text-muted); text-align: center; }
.species-map-page__distance-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 48rem; margin: 0 auto 1.5rem; padding: 0 1rem; }
.species-map-page__empty { max-width: 48rem; margin: 2rem auto; text-align: center; padding: 0 1rem; }
.species-map-page__empty-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.species-map-page__empty-text { width: 100%; max-width: 36rem; margin: 1rem auto; color: var(--text-muted); }
.species-map-page__analysis { max-width: 48rem; margin: 0 auto 1.5rem; padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.species-map-page__analysis-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; text-align: center; }
.species-map-page__analysis-text { color: var(--text-muted); font-size: 0.9rem; margin: 0; text-align: center; }
.species-map-page__listings { max-width: 48rem; margin: 0 auto 3rem; padding: 0 1rem; }
.species-map-page__listings-title { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 700; margin-bottom: 0.25rem; }
.species-map-page__listings-count { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.25rem; }
.species-map-page__listings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.species-map-page__expand-radius { text-align: center; margin-top: 2.5rem; padding: 1.5rem 0; }
.species-map-page__expand-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }

/* ---- QR code page ----------------------------------------- */

.qr-wrapper { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.qr-img { border-radius: var(--radius); border: 4px solid white; }

/* ---- Jodit RTE -------------------------------------------- */
/* --jd-* variables override Jodit's defaults per theme and cascade into
   both .jodit-container (in DOM) and .jodit-popup (appended to <body>),
   since all inherit from <html>. */

:root {
  --jd-color-background-default:  #FCFAF7;
  --jd-color-text:                var(--foreground);
  --jd-color-panel:               #EEEAE5;
  --jd-color-border:              rgba(0,0,0,0.15);
  --jd-color-gray:                rgba(0,0,0,0.15);
  --jd-color-gray-dark:           rgba(0,0,0,0.35);
  --jd-color-label:               #595959;          /* = --text-muted light */
  --jd-color-placeholder:         rgba(0,0,0,0.3);
  --jd-color-background-button-hover:           rgba(0,0,0,0.06);
  --jd-color-button-background-hover:           rgba(0,0,0,0.08);
  --jd-color-button-background-hover-opacity40: rgba(0,0,0,0.06);
  --jd-color-text-icons:          rgba(0,0,0,0.75);
  --jd-color-icon:                rgba(0,0,0,0.65);
  --jd-color-dark:                rgba(0,0,0,0.75);
  --jd-color-separator:           rgba(0,0,0,0.12);
  --jd-color-background-active:   #007bf5;
  --jd-color-background-selection:           rgba(0,123,245,0.18);
  --jd-color-background-selection-opacity50:  rgba(0,123,245,0.12);
}
html[data-theme="dark"] {
  --jd-color-background-default:  #101828;
  --jd-color-text:                #ededed;
  --jd-color-panel:               #192334;
  --jd-color-border:              rgba(255,255,255,0.12);
  --jd-color-gray:                rgba(255,255,255,0.12);
  --jd-color-gray-dark:           rgba(255,255,255,0.45);
  --jd-color-label:               #9BAABB;          /* = --text-muted dark */
  --jd-color-placeholder:         rgba(155,170,187,0.55);
  --jd-color-background-button-hover:           rgba(255,255,255,0.08);
  --jd-color-button-background-hover:           rgba(255,255,255,0.1);
  --jd-color-button-background-hover-opacity40: rgba(255,255,255,0.08);
  --jd-color-text-icons:          rgba(255,255,255,0.85);
  --jd-color-icon:                rgba(255,255,255,0.75);
  --jd-color-dark:                rgba(255,255,255,0.85);
  --jd-color-separator:           rgba(255,255,255,0.12);
  --jd-color-background-active:   #90B4FD;
  --jd-color-background-selection:           rgba(144,180,253,0.25);
  --jd-color-background-selection-opacity50:  rgba(144,180,253,0.15);
  --jd-dark-background-color:     #192334;
  --jd-dark-background-darknes:   #101828;
  --jd-dark-background-ligher:    #253347;
  --jd-dark-border-color:         rgba(255,255,255,0.12);
  --jd-dark-text-color:           #ededed;
  --jd-dark-text-color-opacity80: rgba(237,237,237,0.8);
  --jd-dark-text-color-opacity50: rgba(237,237,237,0.5);
  --jd-dark-icon-color:           rgba(255,255,255,0.75);
  --jd-dark-toolbar-color:        #192334;
  --jd-dark-toolbar-seperator-color1:  rgba(255,255,255,0.08);
  --jd-dark-toolbar-seperator-color2:  rgba(255,255,255,0.15);
}

/* ── Editor container: matches .input-text border exactly ─── */
.jodit-container:not(.jodit_inline) {
  background: var(--background) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
[data-theme="light"] .jodit-container:not(.jodit_inline) { background: #FCFAF7 !important; }

/* ── Content-editable area ───────────────────────────────── */
.jodit-container .jodit-wysiwyg {
  background: var(--background) !important;
  color: var(--foreground) !important;
  caret-color: var(--accent-prominent);
  min-height: 100px;
}
[data-theme="light"] .jodit-container .jodit-wysiwyg { background: #FCFAF7 !important; }

/* ── Floating selection popup shell ─────────────────────── */
.jodit-popup {
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
}
.jodit-popup__content {
  background: var(--background) !important;
  border-radius: var(--radius) !important;
}

/* ── Paragraph context-menu (separate element at body level) */
.jodit-context-menu__content {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
.jodit-context-menu__content .jodit-button {
  color: var(--foreground) !important;
  background: transparent !important;
}
.jodit-context-menu__content .jodit-button:hover:not([disabled]) {
  background: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
}

/* ── Toolbar buttons in popup ────────────────────────────── */
.jodit-popup .jodit-toolbar-button__button,
.jodit-popup .jodit-button {
  color: var(--foreground) !important;
  background: transparent !important;
}
.jodit-popup .jodit-toolbar-button__button:hover:not([disabled]),
.jodit-popup .jodit-button:hover:not([disabled]) {
  background: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
}
/* Active/applied format */
.jodit-popup .jodit-toolbar-button_variant_initial.jodit-toolbar-button_state_activated .jodit-toolbar-button__button {
  background: color-mix(in srgb, var(--accent-prominent) 15%, transparent) !important;
  color: var(--accent-prominent) !important;
}
/* SVG icons */
.jodit-popup .jodit-toolbar-button__icon svg,
.jodit-popup .jodit-icon svg {
  fill: var(--foreground) !important;
}
.jodit-popup .jodit-toolbar-button_variant_initial.jodit-toolbar-button_state_activated .jodit-toolbar-button__icon svg {
  fill: var(--accent-prominent) !important;
}
/* Dropdown trigger arrow (paragraph Normal/Heading switcher) */
.jodit-popup .jodit-toolbar-button__trigger svg {
  fill: var(--text-muted) !important;
  opacity: 1;
}
/* Hide separators, "show all" button, align, strikethrough, lineHeight, add-new-line */
.jodit-popup .jodit-toolbar__separator,
.jodit-popup .jodit-ui-separator,
.jodit-popup [data-ref="dots"],
.jodit-popup [data-ref="strikethrough"],
.jodit-popup [data-ref="align"],
.jodit-popup [data-ref="lineHeight"] {
  display: none !important;
}
/* Belt-and-suspenders: hide add-new-line even if not disabled by plugin config */
.jodit-add-new-line { display: none !important; }

/* ── Link form inputs ────────────────────────────────────── */
/* Wrapper (the bordered box around the input) */
.jodit-popup .jodit-ui-input__wrapper {
  background: var(--background) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .jodit-popup .jodit-ui-input__wrapper { background: #FCFAF7 !important; }
/* Inner input element (transparent so wrapper bg shows) */
.jodit-popup .jodit-ui-input__input {
  background: transparent !important;
  color: var(--foreground) !important;
}
/* Focus ring */
.jodit-popup .jodit-ui-input_focused_true .jodit-ui-input__wrapper {
  border-color: var(--accent-prominent) !important;
}
/* "URL", "Text" labels — use --text-muted (readable, not overly faded) */
.jodit-popup .jodit-ui-input__label {
  color: var(--text-muted) !important;
}
/* "Open in new tab" / "No follow" checkbox labels */
.jodit-popup .jodit-ui-checkbox,
.jodit-popup label {
  color: var(--foreground) !important;
  opacity: 1 !important;
}

/* ── Link "Insert" primary button ────────────────────────── */
.jodit-popup .jodit-ui-button-variants_variant_primary {
  background: var(--accent-prominent) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
}
.jodit-popup .jodit-ui-button-variants_variant_primary:hover:not([disabled]) {
  background: color-mix(in srgb, var(--accent-prominent) 85%, #000) !important;
}

/* ── Hide "Class name" field (unused) ────────────────────── */
.jodit-popup .jodit-ui-input:has([name="className"]),
.jodit-popup .jodit-ui-input:has([data-ref="className"]) {
  display: none !important;
}

/* ── Modal dialog panel (appended to <body>, no theme class) */
.jodit-dialog__panel {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
}
.jodit-dialog__header {
  border-bottom-color: var(--border) !important;
}
.jodit-dialog__header-title {
  color: var(--foreground) !important;
}
/* Close (×) button inside dialog header */
.jodit-dialog__panel .jodit-toolbar-button__button {
  background: transparent !important;
  color: var(--foreground) !important;
}
.jodit-dialog__panel .jodit-toolbar-button__icon svg,
.jodit-dialog__panel .jodit-icon svg {
  fill: var(--foreground) !important;
}
/* Dialog content / prompt label */
.jodit-dialog__content,
.jodit-dialog_prompt label,
.jodit-dialog_prompt div {
  color: var(--foreground) !important;
}
/* Footer area */
.jodit-dialog__footer {
  background-color: var(--background) !important;
  border-top: 1px solid var(--border) !important;
}
/* Footer buttons — secondary (initial variant) */
.jodit-dialog__footer .jodit-ui-button_variant_initial {
  background: transparent !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}
.jodit-dialog__footer .jodit-ui-button_variant_initial:hover:not([disabled]) {
  background: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
}
/* Footer buttons — primary (Keep) */
.jodit-dialog__footer .jodit-ui-button_variant_primary {
  background: var(--accent-prominent) !important;
  color: #fff !important;
}
.jodit-dialog__footer .jodit-ui-button_variant_primary:hover:not([disabled]) {
  background: color-mix(in srgb, var(--accent-prominent) 85%, #000) !important;
}
/* Resize handle SVG */
.jodit-dialog__resizer svg {
  fill: var(--text-muted) !important;
}

/* ---- Square Web Payments SDK ------------------------------ */

.sq-card-iframe-container { margin-bottom: 4px; }
#card-container { min-height: 80px; }
#apple-pay-button, #google-pay-button { min-height: 44px; }

/* Collapse Square's error message container when no error is shown */
.sq-card-message {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}

.sq-card-message.sq-visible {
  max-height: 100px;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.5rem 0 !important;
}

.sq-card-message-no-error::before {
  background-color: var(--foreground) !important;
}

.sq-card-message-no-error {
  color: var(--foreground) !important;
}

/* ---- Misc utilities --------------------------------------- */

details summary { cursor: pointer; }
details summary::-webkit-details-marker { display: none; }

.aspect-square { aspect-ratio: 1 / 1; }

.relative { position: relative; }
.absolute { position: absolute; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

.rounded-lg { border-radius: var(--radius); }
.rounded-full { border-radius: 999px; }

.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.7s linear infinite; }
.select-maps__spin { animation: spin 0.8s linear infinite; display: inline-block; }

/* ---- Floating / pulse animations -------------------------- */

@keyframes floating {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}
.floating { animation: floating 3s ease-in-out infinite; }

@keyframes pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.95; } }
.pulse-opacity { animation: pulse-opacity 2s ease-in-out 2; }

/* ---- Print ------------------------------------------------- */
@media print {
  .site-nav, .site-footer, #map-container, #globe-container { display: none; }
}

/* =========================================================
   New partials: shirt-swiper, contribute, rundown, rotator,
   ad-cards, blog-preview
   ========================================================= */

/* ===========================================================================
   HOMEPAGE HERO
   =========================================================================== */

/* Full-viewport hero — content centered both axes */
.hero {
  min-height: calc(100svh - 3.25rem); /* subtract nav-spacer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 5rem;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 42rem;
  text-align: center;
}

/* Headline */
.hero-headline {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.25rem;
}

/* Search bar constrained width */
.hero-search {
  width: 100%;
  max-width: 28rem;
}

/* ---- Search input partial ---- */
.input-search {
  font-size: 1.125rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius);
  background-color: var(--background);
  color: var(--foreground);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.input-search:focus {
  outline: none;
  border-color: var(--accent-prominent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-prominent) 20%, transparent);
}
.input-search--error {
  border-color: #ef4444 !important;
}
.search-input-wrap {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}
.search-input-label {
  width: 100%;
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.35rem;
}
.search-input-row {
  position: relative;
  display: flex;
}
.search-input-row-wrap {
  position: relative;
}
.search-input-row .input-search {
  flex: 1;
  min-width: 0;
  padding-right: 2.25rem;
}
.search-input-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  opacity: 0.55;
  transition: opacity 0.15s;
  z-index: 1;
}
.search-input-btn:hover {
  opacity: 1;
  transform: scale(1.05);
}
.search-input-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.search-input-btn svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}
.search-input-select {
  width: 100%;
  font-size: 1.125rem;
  padding: 0.55rem 0.75rem;
  padding-right: 2rem;
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius);
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.1rem;
  color: var(--foreground);
  margin-top: 0.5rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.search-input-select:focus {
  outline: none;
  border-color: var(--accent-prominent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-prominent) 20%, transparent);
}
.search-input-error {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0.35rem 0.6rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: #b91c1c;
}
[data-theme="dark"] .search-input-error {
  background: var(--background);
  border-color: #ef4444;
  color: #fca5a5;
}

/* Stat line */
.hero-counts {
  font-size: 0.875rem;
  color: var(--foreground);
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
  max-width: 21rem;
}
.hero-counts a { color: var(--foreground); }
.hero-counts-link { 
  cursor: pointer;
  transition: opacity 0.15s;
  border-bottom: 1px solid;
}
.hero-counts-link:hover { opacity: 0.85; text-decoration: none; }
.hero-counts strong { color: var(--foreground); opacity: 1; font-weight: 700; }

/* Globe text link */
.text-link {
  color: var(--accent-prominent);
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.15s;
}
.text-link:hover { opacity: 0.85; text-decoration: none !important; }

/* Map + Near Me buttons row */
.hero-btns {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Browse label */
.hero-sub {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 0;
  font-family: var(--font-header, inherit);
}

/* Species tag cloud — centered variant */
.species-tags--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  max-width: 36rem;
}

/* Contribute text-buttons row (Add listing / Buy me milk) */
.hero-action-row {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
}
.text-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--foreground);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.text-btn:hover { background: rgba(0,0,0,0.05); text-decoration: none !important; }
[data-theme="dark"]   .text-btn:hover { background: rgba(255,255,255,0.07); }
.text-btn-label {
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 2px solid var(--accent-prominent);
  line-height: 1.3;
}
@media (min-width: 1024px) { .text-btn-label { font-size: 1rem; } }
.text-btn-icon {
  color: var(--accent-prominent);
  font-size: 1.3rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.text-btn-icon svg { 
  stroke: var(--accent-prominent);
  width: 28px;
  height: 28px;
}
.text-btn--primary .text-btn-icon svg { stroke: #16a34a; }
[data-theme="dark"]   .text-btn--primary .text-btn-icon svg { stroke: #86efac; }

.text-btn--support .text-btn-icon svg { stroke: #16a34a; }
[data-theme="dark"]   .text-btn--support .text-btn-icon svg { stroke: #86efac; }

.text-btn-icon--add svg { stroke-width: 2.5; }

.text-btn-icon--payments { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  margin-top: 0.25rem;
}
.text-btn-icon--payments svg { width: 18px; height: 18px; }
/* Payment brand icons: same specificity (0,2,1) as .text-btn--support rule above,
   positioned later so cascade wins and preserves brand colours on light theme.    */
.text-btn-icon--payments svg.text-btn-icon__payment-paypal  { stroke: #003087; }
.text-btn-icon--payments svg.text-btn-icon__payment-apple   { stroke: var(--accent-prominent); }
.text-btn-icon--payments svg.text-btn-icon__payment-bitcoin { stroke: #f7931a; }
/* Universal payment icon colours (also covers footer and tip page contexts) */
.text-btn-icon__payment-apple   { color: var(--accent-prominent); stroke: var(--accent-prominent); }
.text-btn-icon__payment-paypal  { color: #003087; stroke: #003087; margin-left: 2px; }
.text-btn-icon__payment-cash    { color: #16a34a; stroke: #16a34a; }
.text-btn-icon__payment-bitcoin { color: #f7931a; stroke: #f7931a; }
[data-theme="dark"]   .text-btn-icon--payments svg { stroke: #86efac; }
[data-theme="dark"]   .text-btn-icon__payment-apple  { color: #86efac; stroke: #86efac; }
[data-theme="dark"]   .text-btn-icon__payment-paypal { color: #86efac; stroke: #86efac; }

.text-link--newsletter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.text-link-newsletter__icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}
.text-link--newsletter:hover { opacity: 0.85; text-decoration: none !important; }
.text-link--newsletter:hover {
  opacity: 0.85;
}
.text-link--newsletter svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent-prominent);
  stroke-width: 2.5;
}

/* Secondary link rows */
.hero-links-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Generic section wrapper */
.section-wrap {
  width: 100%;
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.section-wrap--centered {
  /* No text-align override — content remains left-aligned by default */
}

/* ---- Shirt Swiper ---------------------------------------- */
.shirt-swiper-section {
  text-align: center;
}
.shirt-swiper-heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.shirt-swiper-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .shirt-swiper-layout { flex-direction: row; }
}
.shirt-swiper-main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.shirtsSwiper {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.shirtsSwiper .swiper-slide {
  background: transparent;
}
.shirtsSwiper .swiper-slide-shadow {
  display: none;
}
.swiper-slide-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  width: 100%;
}
.swiper-slide-link img {
  max-width: 280px;
  height: auto;
}
.shirt-swiper-footer {
  text-align: center;
  margin-top: 0.75rem;
}
.shirt-swiper-sticker {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.shirt-swiper-sticker img {
  max-width: 280px;
  height: auto;
}

/* ---- Contribute ------------------------------------------ */
.contribute-section {
  display: flex;
  justify-content: center;
}
.contribute-inner {
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.contribute-heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.contribute-sub {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.contribute-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contribute-card {
  border: 1px solid color-mix(in srgb, var(--accent-prominent) 20%, transparent);
  border-radius: var(--radius);
  background: var(--background);
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
[data-theme="light"] .contribute-card { background: #FCFAF7; }
.contribute-card:hover {
  border-color: color-mix(in srgb, var(--accent-prominent) 60%, transparent);
  background: color-mix(in srgb, var(--accent-prominent) 5%, transparent);
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
[data-theme="dark"]   .contribute-card { background: color-mix(in srgb, var(--accent-prominent) 10%, transparent); }
.contribute-card-link {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
}
.contribute-card-link:hover { text-decoration: none; }
.contribute-card-label {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.contribute-card-cta {
  color: var(--accent-prominent);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.rundown-section {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* ---- Rotator --------------------------------------------- */
.rotator-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rotator-toggle {
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-size: 1rem;
  color: inherit;
  width: 100%;
}
.rotator-toggle:hover .rotator-display { opacity: 0.8; }
.rotator-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  will-change: opacity;
  transition: opacity 0.15s;
}
.rotator-current-phrase {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.25rem;
  color: var(--foreground);
  transition: opacity 0.3s;
}
.rotator-current-lang {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  transition: opacity 0.3s;
}
.rotator-list {
  width: 100%;
  max-width: 33rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  max-height: 0;
  /* transition controlled entirely in JS */
}
.rotator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius);
  transition: background 0.15s;
}
.rotator-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .rotator-item:hover { background: rgba(255,255,255,0.07); }
.rotator-item:last-child { margin-bottom: 3rem; }
.rotator-phrase { font-weight: 500; }
.rotator-lang {
  font-size: 0.875rem;
  color: var(--accent-prominent);
  font-weight: 500;
}
.rotator-lang a { color: inherit; }
.rotator-lang a:hover { text-decoration: underline; }

/* ---- Blog Preview ---------------------------------------- */
.blog-preview-section {
  width: 100%;
  padding: 2.5rem 0.75rem 0;
}
.blog-preview-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.blog-preview-header h2 {
  font-size: 2rem;
  font-weight: 700;
}
.blog-preview-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
}
@media (min-width: 640px) { .blog-preview-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-preview-grid { grid-template-columns: 1fr 1fr 1fr; } }
.blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--background);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
[data-theme="light"] .blog-card-link { background: #FCFAF7; }
.blog-card-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: var(--accent-prominent);
  transform: scale(1.01);
  text-decoration: none;
}
.blog-card-inner { position: relative; width: 100%; height: 100%; }
.blog-card-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; background-size: cover; background-position: center; }
.blog-card-body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0.5rem 3rem; }
.blog-card-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.blog-card-excerpt { font-size: 1rem; line-height: 1.4; color: var(--foreground); }
.blog-card-excerpt p { margin: 0; }
.blog-card-date { position: absolute; bottom: 0.5rem; left: 0.5rem; font-size: 0.75rem; color: var(--foreground); }
.blog-preview-footer {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

/* ---- Support section ------------------------------------- */
.support-section {
  text-align: center;
}
.support-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.support-section p { color: var(--muted, #6b7280); margin-bottom: 0.25rem; }

/* ---- Opacity utilities (used in SVG spinners) ---- */
.opacity-25     { opacity: 0.25; }
.opacity-75     { opacity: 0.75; }
.tag--feature  { background: #eff6ff; color: #1d4ed8; box-shadow: 0 0 0 1px rgba(29,78,216,0.15); }
.tag--recall   { background: #fff7ed; color: #c2410c; box-shadow: 0 0 0 1px rgba(194,65,12,0.2); }
.tag--species  { background: #f0fdf4; color: #15803d; box-shadow: 0 0 0 1px rgba(22,163,74,0.2); }
[data-theme="dark"]   .tag--feature { background: #1e3a5f; color: #bfdbfe; }
[data-theme="dark"]   .tag--recall  { background: #7c2d12; color: #fed7aa; }
[data-theme="dark"]   .tag--species { background: #14532d; color: #bbf7d0; }


/* ---- Error page styles ----------------------------------- */
.error-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 5rem 1rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.error-page__code {
  font-size: 6rem;
  font-weight: 900;
  color: var(--border);
  margin-bottom: 1rem;
}
.error-page__title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600;
  margin-bottom: 1rem;
}
.error-page__text {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.0625rem;
}
.error-page__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 640px) {
  .error-page__actions { flex-direction: row; }
}

.contact-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 10rem;
}
.contact-page__header {
  margin-bottom: 1rem;
}
.contact-page__title {
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.contact-page__intro {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.contact-page__info {
  margin-bottom: 2rem;
}
.contact-page__preamble {
  margin-bottom: 2rem;
}
.contact-page__infobox {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
}
.contact-page__infobox-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.contact-page__infobox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-page__section {
  margin-bottom: 2.5rem;
}
.contact-page__section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.contact-page__section-intro {
  margin-bottom: 0.75rem;
}
.contact-page__section-list {
  list-style: disc;
  list-inside: inside;
  padding-left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-page__form-section {
  margin-bottom: 2.5rem;
}
.contact-page__form-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.contact-page__form-intro {
  margin-bottom: 1.5rem;
}
.contact-page__form-wrapper {
  max-width: 32rem;
  margin: 0 auto 5rem;
}
.contact-page__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-page__error {
  color: #dc2626;
  font-size: 0.875rem;
}
.contact-page__form-actions {
  display: flex;
  justify-content: center;
}
.contact-page__submit {
  padding: 0.75rem 2.5rem;
  font-size: 1.125rem;
}
.contact-page__loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-page__spinner {
  width: 1.25rem;
  height: 1.25rem;
  animation: spin 0.6s linear infinite;
}
.contact-page__tip { max-width: 24rem; margin: 5rem auto 0; }
.contact-page__tip-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .contact-page__tip-title { font-size: 1.5rem; } }

.not-found-page {
  max-width: 28rem;
  margin: 0 auto;
  padding: 5rem 1rem;
  text-align: center;
}

.not-found-page__code {
  font-size: 6rem;
  font-weight: 900;
  color: var(--border);
  margin-bottom: 1rem;
}

.not-found-page__title {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.not-found-page__text {
  margin-bottom: 2rem;
  color: var(--text-muted);
}

.not-found-page__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
@media (min-width: 640px) {
  .not-found-page__actions {
    flex-direction: row;
    gap: 0.75rem;
  }
}

/* ---- Tip form --------------------------------------------- */
.tip-form-header {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

.tip-form-header-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.tip-form-header-sub {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.tip-form-header-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.tip-form {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

.tip-form__heading {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.tip-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tip-form__amount {
  font-size: 1.5rem;
  font-weight: 600;
}

.tip-form__custom-btn {
  width: 100%;
  margin-bottom: 1rem;
}

.tip-form__custom-label {
  font-size: 1.125rem;
  font-weight: 600;
}

.tip-form__custom-input-wrap {
  margin-bottom: 1rem;
}

.tip-form__input-icon-wrap {
  position: relative;
}

.tip-form__input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 700;
}

.tip-form__input-large {
  padding-left: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.tip-form__email-wrap {
  margin-bottom: 1rem;
}

.tip-form__pre-email {
  margin: 1rem 0;
  text-align: center;
}
.tip-form__pre-email-text {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.tip-form__pre-email-icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  margin: 0.5rem 0;
}
.tip-form__pre-email-alt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
}
.tip-form__pre-icon--lg { font-size: 1.875rem; line-height: 1; }
.tip-form__pre-icon--sm { font-size: 1.375rem; line-height: 1; }
.tip-form__pre-icon--green { color: #15803d; }
.tip-form__pre-icon--green-sm { color: #15803d; font-size: 1.375rem; line-height: 1; }
.tip-form__pre-icon--accent { color: var(--accent-prominent); font-size: 1.5rem; line-height: 1; }
.tip-form__pre-icon--orange { color: #ea580c; }
[data-theme="dark"]   .tip-form__pre-icon--green,
[data-theme="dark"]   .tip-form__pre-icon--green-sm { color: #86efac; }
[data-theme="dark"]   .tip-form__pre-icon--orange { color: #fdba74; }

.tip-form__note-toggle-wrap {
  margin-bottom: 0.75rem;
}

.tip-form__details {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tip-form__detail-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tip-form__confirmation {
  text-align: center;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  color: var(--accent-prominent);
}

.tip-form__card-container {
  margin-bottom: 0;
}

.tip-form__pay-btn {
  width: 100%;
  font-size: 1.125rem;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
}

.tip-form__view-other-ways {
  margin-top: 2rem;
  margin-bottom: 0;
  text-align: center;
  font-size: 0.95rem;
}

.tip-form__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tip-form__spinner {
  width: 1.25rem;
  height: 1.25rem;
  animation: spin 0.7s linear infinite;
}

/* Brand styling for payment buttons */
.tip-form__brand {
  font-weight: 700;
  font-size: 1.05em;
}

.tip-form__brand-text {
  font-weight: 700;
  font-style: italic;
}

.tip-form__brand--cashapp {
  color: #00d632;
}

.tip-form__brand--zelle {
  color: #6d1ed4;
}

.tip-form__brand--btc {
  color: #ea580c;
}

.tip-form__brand--eth {
  color: #8c8c8d;
  font-style: italic;
}

.tip-form__brand-text--cashapp {
  color: #00d632;
}

.tip-form__brand-text--zelle {
  color: #6d1ed4;
}

.tip-form__brand-text--btc {
  color: #ea580c;
}

.tip-form__brand-text--eth {
  color: #8c8c8d;
}

/* Dark mode brand colors */
html[data-theme="dark"] .tip-form__brand--cashapp,
html[data-theme="dark"] .tip-form__brand-text--cashapp {
  color: #4ade80;
}

html[data-theme="dark"] .tip-form__brand--zelle,
html[data-theme="dark"] .tip-form__brand-text--zelle {
  color: #c084fc;
}

html[data-theme="dark"] .tip-form__brand--btc,
html[data-theme="dark"] .tip-form__brand-text--btc {
  color: #fb923c;
}

html[data-theme="dark"] .tip-form__brand--eth,
html[data-theme="dark"] .tip-form__brand-text--eth {
  color: #a3a3a3;
}

.quick-pay__brand {
  display: inline-block;
}

.quick-pay__text {
  display: inline-block;
}

.quick-pay__sep {
  margin: 0 0.3rem;
  opacity: 0.4;
}

/* ---- Social cards ------------------------------------------- */
.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  margin-bottom: 3rem;
}
@media (min-width: 640px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
.social-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--foreground);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.social-card:hover { border-color: var(--accent-prominent); box-shadow: 0 4px 14px rgba(0,0,0,0.14); text-decoration: none; }
.social-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.social-card-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.social-card-icon { flex-shrink: 0; width: 2rem; height: 2rem; fill: currentColor; }
.social-card-desc { font-size: 0.875rem; opacity: 0.75; flex: 1 1 auto; margin-bottom: 0.75rem; line-height: 1.5; }
.social-card-arrow {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-prominent);
  transition: transform 0.15s;
}
.social-card:hover .social-card-arrow { transform: translateX(4px); }

/* ---- Search landing page ------------------------------------ */
.search-landing {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  padding: 0 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.search-landing h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.15; }
@media (min-width: 640px) { .search-landing h1 { font-size: 2.75rem; } }
.search-landing > p { font-size: 1.1rem; max-width: 30rem; margin-bottom: 1.25rem; opacity: 0.8; }
.near-me-wrap { margin: 0.75rem 0 1rem; }

/* ---- Prose / legal content ---------------------------------- */
.prose { font-size: 1rem; line-height: 1.7; color: var(--foreground); }
.prose p  { margin-bottom: 1rem; }
.prose h2 { font-size: 1.35rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; }
.prose a  { color: var(--accent-prominent); text-decoration: none; border-bottom: 1px solid var(--accent-prominent); }
.prose a:hover { opacity: 0.8; }


/* ---- Page-content centering --------------------------------- */
.page-content { padding-top: 2.5rem; padding-bottom: 5rem; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; }

.tip-page {
  max-width: 48rem;
  margin: 80px auto;
  padding: 0 1rem 5rem;
}
.tip-page__intro-wrapper {
  max-width: 28rem;
  margin: 0 auto;
}
.tip-page__title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}
.tip-page__intro-cta {
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 1rem;
}
.tip-page__form-wrapper {
  max-width: 32rem;
  margin: 0 auto 5rem;
}
.tip-page__alt-header {
  max-width: 28rem;
  margin: 0 auto 2.5rem;
  text-align: center;
  padding-top: 4rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 4rem;
}
.tip-page__alt-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.tip-page__alt-subtitle {
  margin-bottom: 2rem;
  color: var(--text-muted);
}
.tip-page__alt-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.tip-page__alt-warning {
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 18rem;
  margin: 0 auto 1rem;
}
.tip-page__qr-label {
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Tip button copy styles */
.tip-copy-btn {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.tip-copy-btn:hover {
  background-color: var(--accent-prominent);
  color: white;
  border-color: var(--accent-prominent);
}

/* Contact success page */
.contact-success-page { max-width: 48rem; margin: 0 auto; padding: 5rem 1rem 10rem; }
.contact-success-page__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .contact-success-page__title { font-size: 1.875rem; } }
.contact-success-page__intro { margin-bottom: 2.5rem; }
.contact-success-page__tip { max-width: 24rem; margin: 5rem auto 0; }
.contact-success-page__tip-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .contact-success-page__tip-title { font-size: 1.5rem; } }

/* Tip success page */
.tip-success-page {
  max-width: 40rem;
  margin: 2.5rem auto;
  padding: 0 1rem 5rem;
}
.tip-success-page__title {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.tip-success-page__body {
  max-width: 38rem;
  margin: 0 auto;
}
.tip-success-page__lead {
  font-weight: 600;
  margin-bottom: 1rem;
}
.tip-success-page__img-wrap {
  width: 100%;
  max-width: 10rem;
  margin: 1.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.tip-success-page__img {
  width: 100%;
  height: auto;
  display: block;
}
.tip-success-page__p {
  margin-bottom: 1rem;
}
.tip-success-page__bank-note {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--accent-muted) 30%, transparent);
  border-left: 4px solid var(--accent-prominent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tip-success-page__link {
  font-weight: 600;
  text-decoration: underline;
}
.tip-success-page__link:hover { text-decoration: none; }
.tip-success-page__footnote {
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.tip-success-page__email-link {
  border-bottom: 1px solid var(--accent-prominent);
  padding-bottom: 0.1rem;
  color: inherit;
  text-decoration: none;
}
.tip-success-page__email-link:hover { text-decoration: underline; }

/* Static page (about, why, etc) */
.static-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}
.static-page__title {
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 700;
  margin-bottom: 2rem;
}
.static-page__loading {
  color: var(--text-muted);
}
.static-page__footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.static-page__section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}
.static-page__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .static-page__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  text-align: center;
}
.card__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.card__title {
  font-weight: 600;
}
.card__text {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ============================================================================
   MIGRATED INLINE STYLES → CSS CLASSES
   Utility classes created to replace Tailwind utilities in converted EJS files
   ========================================================================== */

/* ---- Listing List Container (browse pages) -------- */
.listing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---- Related Listings Section - Semantic BEM ---- */
.related-section-wrapper {
  width: 100%;
  margin: 2.5rem 0;
  padding: 0 1rem;
}

/* ---- Inline Style Conversions (Phase 4 cleanup) ---- */

/* Map layout containers */
.map-single-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Primary map element */
#map-single {
  width: 100%;
  height: 100%;
}

/* Collapsible map — 25vh default, 70vh expanded */
.listing-map-collapsible {
  height: 25vh;
}
.listing-map-collapsible[data-expanded="true"] {
  height: 70vh;
}

/* Icon styling (for map close button SVG) */
.icon--close-map {
  width: 11px;
  height: 11px;
  fill: currentColor;
  transform: rotate(180deg);
  flex-shrink: 0;
}

/* Alt phone label styling */
.listing__alt-phone-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Address field — non-clickable appearance */
.listing-info-address {
  cursor: pointer;
}

/* Spacing adjustments */
.listing-info-sub--spaced {
  margin-top: 0.5rem;
}

.listing-related-section--spaced {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.listing-info-heading--spaced {
  margin-bottom: 1rem;
}

/* Inline recall notice styling */
.listing__recall-inline {
  color: #d97706;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  display: block;
}

/* Current breadcrumb item styling */
.listing-breadcrumb--current {
  color: var(--accent-prominent);
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

/* Map overlay labels and attribution */
.map-overlay__attribution {
  font-size: 0.9em;
}

/* Recall notice in map popup */
.map-popup__recall {
  color: #d97706;
}

/* Map legend dot spacing */
.legend-dot--spacing {
  margin-left: 0.3rem;
}

/* Map overlay pointer events */
.map-overlay--nopointer {
  pointer-events: none;
}

/* ---- Form & Layout Components (Phase 4 cleanup - bulk) ---- */

/* Form field wrapper — standard spacing */
.form-field {
  margin-bottom: 1rem !important;
}

/* Form label with flex alignment */
.form-control__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Form control with flex alignment for inline inputs */
.form-control--inline {
  display: flex;
  align-items: center;
}

/* Form input text field */
.input-text--flex {
  flex: 1;
}

/* Text sizing — small (secondary) */
.text--small {
  font-size: 0.875rem;
}


/* Content centering wrapper */
.content--centered {
  width: fit-content;
  margin: 0 auto 2rem;
}

.content--centered--lg {
  width: fit-content;
  margin: 0 auto 2.5rem;
}

/* Full width with padding wrapper */
.section--full {
  width: 100%;
  padding: 2.5rem 1rem;
}

/* Tab/nav link — underline on active */
.nav-link--active {
  border-bottom: 2px solid var(--accent);
}

/* Primary action link styling */
.link--primary {
  color: var(--accent-prominent);
}



/* Horizontal rule styling */
hr {
  border-color: var(--border);
}

/* Additional form & typography utilities */
.text--muted {
  color: var(--text-muted);
}






/* --- Content & Blog Preview --- */
.content-item__wrapper {
  margin-top: 0.5rem;
  padding: 0 1rem;
}

.content-item__image {
  background-size: cover;
  background-position: center;
}

.blog-preview__image {
  background-size: cover;
  background-position: center;
}

/* --- Text Color & Styling --- */
.text--accent-orange {
  color: #FFA500;
}

.text--color-facebook {
  color: #1877f2;
}

.text--color-youtube {
  color: #ff0000;
}

.text--color-cyan-bold-italic {
  color: #009cde;
  font-style: italic;
  font-weight: 900;
}

.text--color-green {
  color: #00d632;
}

.text--color-purple {
  color: #6d1ed4;
}

.text--color-orange-dark {
  color: #ea580c;
}

.text--color-golden {
  color: #F7931A;
}

.text--color-orange {
  color: #d97706;
}

.text--inherit {
  color: inherit;
}

.text--accent-prominent {
  color: var(--accent-prominent);
}

.text--line-tall {
  line-height: 1.75;
}

/* --- Font Sizes (Text variants) --- */
.text--tiny {
  font-size: 0.75rem;
}

.text--tiny-plus {
  font-size: 0.8rem;
}

.text--size-xs {
  font-size: 0.9em;
}

.text--size-sm {
  font-size: 0.95rem;
}

.map-page__description {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
}

/* --- Headings & Titles --- */
.heading--info {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}

.heading--md-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.subheading--md {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.related__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.listing-links-item--back {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.related__subtitle {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.related__label {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* --- Lists & Captions --- */
.list--styled {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

.caption--centered {
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
}

/* --- Spacing Classes (Margin/Padding) --- */
.spacing--mb-sm3 {
  margin-bottom: 0.75rem;
}

.spacing--mb-md {
  margin-bottom: 1rem;
}

.spacing--mb-lg {
  margin-bottom: 1.5rem;
}

.spacing--mb-xl {
  margin-bottom: 2.5rem;
}

.spacing--mt-lg {
  margin-top: 2rem;
}

.spacing--pt-xs {
  padding-top: 0.25rem;
}

.spacing--px-lg {
  padding: 0.5rem 2rem;
}

.spacing--vertical-lg {
  margin: 2rem 0 2.5rem;
}

.heading-section__wrapper {
  padding-top: 2rem;
  margin-bottom: 2rem;
}

.heading-section__large {
  padding-top: 4rem;
  margin-bottom: 3rem;
}

/* --- Icon Sizing --- */
.icon--small {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}

.icon--md {
  width: 1rem;
  height: 1rem;
}

/* --- Card & Container Styling --- */
.card--centered {
  max-width: 24rem;
  margin: 0 auto;
}

.card--centered-with-margins {
  max-width: 24rem;
  margin: 1.5rem auto 2.5rem;
}

.card--bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* --- Sponsors Section --- */
.sponsors__hero {
  background-image: url('/img/get-raw-milk-meta.jpg');
  background-size: cover;
  background-position: center;
}

.sponsors__overlay {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 4px;
  padding: 0 4px;
}

/* --- Form Fields (Conditional) --- */
.form-field--conditional {
  display: none;
}

.form-field--conditional.active {
  display: block;
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.form-field--conditional-lg {
  display: none;
}

.form-field--conditional-lg.active {
  display: block;
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.form-field--conditional-md {
  display: none;
}

.form-field--conditional-md.active {
  display: block;
  max-height: 72px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* --- Navigation & Badges --- */
.nav-item--centered {
  width: fit-content;
  margin: 0 auto;
}

.badge--inline {
  display: inline-block;
  margin-top: 1rem;
}

/* --- Links & Special Text --- */
.link--accent-truncated {
  color: var(--accent-prominent);
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 10rem;
}

/* --- Borders --- */
.border--default {
  border-color: var(--border);
}

/* --- Border Radius --- */
.rounded--sm {
  border-radius: 4px;
}

/* Logout button — reset browser <button> defaults, base style comes from .drawer-link */
.drawer-link--logout {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* ============================================================
   HOME PAGE
   ============================================================ */

.home-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .home-page { padding-left: 5rem; padding-right: 5rem; }
}

.home-intro {
  margin-bottom: 1.5rem;
}
.home-intro-text {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin: 0;
}

.home-section {
  width: 100%;
  margin-bottom: 3rem;
}
.home-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-muted)
}

.home-card-row {
  width: 100%;
  margin-bottom: 3rem;
}

/* ============================================================
   SITE CARDS  — bordered link cards (home, apps, packages…)
   ============================================================ */

.site-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-card-list--row {
  flex-direction: row;
}

.site-card {
  display: block;
  width: fit-content;
  border: 1px solid #1e3a5f;
  border-radius: 0.25rem;
  padding: 0 1rem;
  background: var(--background);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.site-card:hover,
.site-card:focus-visible {
  transform: scale(1.01);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--background) 90%, transparent);
  outline: none;
  text-decoration: none;
}

.site-card-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0.5rem;
}

.site-card-heading {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
}

/* Icon sizing variants for site cards and general use */
.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.site-card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
.site-card-meta--row {
  flex-direction: row;
  align-items: center;
}

.site-card-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ============================================================
   GITHUB CALENDAR
   ============================================================ */

.github-calendar-wrap {
  width: 100%;
  margin-bottom: 0.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* hide scrollbar cross-browser */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.github-calendar-wrap::-webkit-scrollbar { display: none; } /* Chrome/Safari/Opera */

.gh-cal {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.gh-cal-label {
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  opacity: 0.7;
}
.gh-cal-months {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin-bottom: 2px;
  width: max(100%, 560px);
}
.gh-cal-month-label {
  flex: 1;
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: visible;
  position: relative;
}
.gh-cal-grid {
  display: flex;
  flex-direction: row;
  gap: 2px;
  width: max(100%, 560px);
}
.gh-cal-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.gh-cal-day {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--border);
}
.gh-cal-day--1 { background: #0e4429; }
.gh-cal-day--2 { background: #006d32; }
.gh-cal-day--3 { background: #26a641; }
.gh-cal-day--4 { background: #39d353; }
[data-theme="light"] .gh-cal-day--1 { background: #9be9a8; }
[data-theme="light"] .gh-cal-day--2 { background: #40c463; }
[data-theme="light"] .gh-cal-day--3 { background: #30a14e; }
[data-theme="light"] .gh-cal-day--4 { background: #216e39; }
.gh-cal-error { margin: 0; }
.gh-cal-footer {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.gh-cal-footer a { color: var(--text-muted); text-decoration: underline; }
.gh-cal-footer a:hover { color: var(--accent-prominent); }

/* ============================================================
   FOOTER — app-dev tagline link
   ============================================================ */

.footer-app-dev-link {
  text-align: center;
  margin-bottom: 1rem;
}
.footer-app-dev-link a {
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-app-dev-link a:hover {
  text-decoration: underline;
}

/* ============================================================
   CONTENT PAGES  — about, static WP pages, blog posts
   ============================================================ */

.content-page,
.static-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) {
  .content-page, .static-page {
    margin-top: 2rem;
    padding: 1rem 5rem;
  }
}

/* ============================================================
   APPS / SERVICES PAGES
   ============================================================ */

.apps-page,
.packages-page,
.weather-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) {
  .apps-page, .packages-page, .weather-page {
    margin-top: 2rem;
    padding: 1rem 5rem;
  }
}

.page-intro {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.page-section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
.page-section:last-child {
  border-bottom: none;
}

.page-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.page-section-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.page-section-body {
  color: var(--text-muted);
  margin-bottom: 0;
}

.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cta-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
}
.cta-box h2 { margin-top: 0; margin-bottom: 1rem; }
.cta-box p { color: var(--text-muted); margin-bottom: 1.5rem; }

.action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--foreground);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--accent-prominent); color: var(--accent-prominent); text-decoration: none; }

.text-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--accent-prominent);
  text-decoration: none;
  font-size: 0.95rem;
}
.text-link-arrow:hover { text-decoration: underline; }

.pricing-box {
  background: var(--background);
  border: 2px solid var(--accent-prominent);
  border-radius: 0.5rem;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.pricing-box-price {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-prominent);
  margin-bottom: 0.5rem;
}
.pricing-box-price span {
  font-size: 1.5rem;
  color: var(--text-muted);
  font-weight: 400;
}
.pricing-box-note {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.check-list .check-icon {
  color: #22c55e;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.2rem;
}

.process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.process-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.process-step-num {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-prominent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}
.process-step-body h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.process-step-body p { margin: 0; color: var(--text-muted); }

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.faq-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.faq-item p { margin: 0; color: var(--text-muted); }

/* ============================================================
   WEATHER PAGE
   ============================================================ */

.weather-current {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.weather-temp {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}
.weather-condition {
  font-size: 1.25rem;
  color: var(--text-muted);
}
.weather-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .weather-detail-grid { grid-template-columns: repeat(4, 1fr); }
}
.weather-detail-item label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.weather-detail-item span {
  font-size: 1.25rem;
  font-weight: 600;
}
.weather-forecast {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.weather-forecast-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 80px;
}
.weather-forecast-day .day-name { font-size: 0.8rem; color: var(--text-muted); }
.weather-forecast-day .day-high { font-weight: 700; font-size: 1.1rem; }
.weather-forecast-day .day-low { font-size: 0.9rem; color: var(--text-muted); }

/* ============================================================
   MAP PAGE
   ============================================================ */

.map-page {
  max-width: 100%;
  padding: 0;
}
.map-page-header {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem;
}
@media (min-width: 640px) {
  .map-page-header { padding: 2rem 5rem; }
}
#map {
  height: 70vh;
  width: 100%;
  min-height: 400px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page-wrap {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1rem 5rem;
}
@media (min-width: 640px) {
  .contact-page-wrap { padding: 2rem 0 5rem; }
}

.contact-form-wrap {
  margin-bottom: 0.5rem;
}
.contact-form-wrap textarea.input-text {
  width: 100%;
  resize: vertical;
}

/* ─── Apps Contact Page ─────────────────────────────────────────────────────── */
.apps-contact-wrap {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1rem 5rem;
}
@media (min-width: 640px) {
  .apps-contact-wrap { padding: 2rem 0 5rem; }
}

.apps-contact-steps {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
.apps-contact-steps-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.apps-contact-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.apps-contact-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.apps-contact-step p {
  margin: 0.125rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.apps-contact-step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.apps-contact-form-wrap {
  margin-bottom: 3rem;
}
.form-field {
  margin-bottom: 1rem;
}
.apps-contact-budget-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.apps-contact-submit-row {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.btn-primary--wide {
  width: 100%;
  justify-content: center;
}
.form-error {
  color: #dc2626;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.apps-contact-direct {
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  margin-bottom: 2rem;
}
.apps-contact-direct h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.apps-contact-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.apps-contact-nav-sep {
  color: var(--text-muted);
}

/* icon spin utility */
.icon--spin {
  animation: spin 0.8s linear infinite;
}

/* ─── Traffic Map Index Page ────────────────────────────────────────────────── */
.traffic-map-page {}

.traffic-map-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 400px;
}
.traffic-map {
  width: 100%;
  height: 100%;
}
.traffic-map-wrap .map-overlay-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
}

.traffic-map-content {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 5rem;
}

.traffic-map-error {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--accent-prominent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-prominent) 30%, transparent);
  border-radius: 6px;
  font-size: 0.875rem;
}

.traffic-map-header {
  margin-bottom: 2rem;
}
.traffic-map-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.traffic-map-count {
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.traffic-map-actions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.traffic-map-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1.4;
}
.traffic-map-action-btn svg.icon {
  width: 15px;
  height: 15px;
}
.traffic-map-action-btn:hover {
  border-color: var(--text-muted);
}

.traffic-map-info {
  margin-top: 0.5rem;
}
.traffic-map-info-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.traffic-map-prose {
  line-height: 1.75;
}
.traffic-map-prose-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.traffic-map-prose-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.traffic-map-prose-footer {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ─── Traffic Camera Single Page ────────────────────────────────────────────── */
.traffic-camera-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 5rem;
}

.traffic-camera-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.traffic-camera-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}
.traffic-camera-back:hover {
  color: var(--foreground);
  text-decoration: underline;
}
.traffic-camera-back svg.icon {
  width: 14px;
  height: 14px;
}

.traffic-camera-not-found {
  margin-top: 2rem;
}
.traffic-camera-not-found h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.traffic-camera-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.traffic-camera-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.traffic-camera-card-title {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  flex: 1;
}
.traffic-camera-state-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--accent-prominent);
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}

.traffic-camera-road {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.traffic-camera-img {
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin-bottom: 0.5rem;
}

.traffic-camera-credit {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.traffic-camera-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.traffic-camera-map-wrap {
  position: relative;
  height: 70vh;
  min-height: 360px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.traffic-camera-map {
  width: 100%;
  height: 100%;
}
.traffic-camera-map-wrap .map-overlay-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
}

.traffic-camera-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.traffic-camera-coords-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}
.traffic-camera-coords-val {
  font-size: 0.9rem;
  font-family: var(--font-mono, monospace);
}

.traffic-camera-article {
  margin-top: 0.5rem;
}
.traffic-camera-section {
  margin-bottom: 1.5rem;
}
.traffic-camera-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.traffic-camera-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.traffic-camera-section p {
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.traffic-camera-section--footer p {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.traffic-camera-list {
  list-style: disc;
  padding-left: 1.5rem;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.traffic-camera-info-grid {
  margin-bottom: 1.5rem;
}
.traffic-camera-info-grid h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.traffic-camera-info-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.traffic-camera-info-key {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}
.traffic-camera-coords-mono {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .traffic-camera-info-table { grid-template-columns: 1fr; }
  .traffic-camera-coords { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PACKAGES – wp-block-styles page
   ============================================================ */

.code-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  overflow-x: auto;
  color: var(--foreground);
}
.code-block .code-prompt { color: #22c55e; }

code {
  background: var(--surface);
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.875em;
}

.pkg-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary--dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #374151;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-primary--dark:hover { background: #1f2937; text-decoration: none; color: #fff; }

.comparison-table {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 0;
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  color: var(--text-muted);
}
.comparison-table thead {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}
.comparison-table th {
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: var(--foreground);
}
.comparison-table td { padding: 0.75rem 1rem; }
.comparison-table tbody tr { border-bottom: 1px solid var(--border); }

.calc-example {
  background: var(--surface);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.screenshot {
  max-width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  display: block;
}

.plugins-roughest-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}