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

/* ---- Tabler Icons Filled (subset) ------------------------- */
@font-face {
  font-family: "tabler-icons-filled";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/fonts/tabler-icons-filled.woff2?v3.41.0") format("woff2");
}
/* .tif — use WITHOUT .ti to avoid CDN font-family !important override */
.tif {
  font-family: "tabler-icons-filled";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tif.ti-map-pin::before          { content: "\f680"; }
.tif.ti-brand-facebook::before   { content: "\f7e6"; }
.tif.ti-brand-instagram::before  { content: "\10094"; }
.tif.ti-brand-youtube::before    { content: "\fc22"; }
.tif.ti-brand-x::before          { content: "\fc21"; }
.tif.ti-brand-tiktok::before     { content: "\f7ea"; }

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

:root {
  --background: #F5F3F0;
  --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;
  --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;
}

html[data-theme="jungle"] {
  --background: #31241b;
  --foreground: #ededed;
  --accent: #F4B486;
  --accent-muted: #6C503B;
  --accent-prominent: #F4B486;
  --text-muted: #B8977E;
  --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);
}

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; }

/* ---- Layout helpers --------------------------------------- */

.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.mx-auto    { margin-left: auto; margin-right: auto; }
.ml-auto    { margin-left: auto; }
.px-4       { padding-left: 1rem; padding-right: 1rem; }
.py-4       { padding-top: 1rem; padding-bottom: 1rem; }
.py-6       { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10      { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16      { padding-top: 4rem; padding-bottom: 4rem; }
.py-20      { padding-top: 5rem; padding-bottom: 5rem; }
.mt-2       { margin-top: 0.5rem; }
.mt-4       { margin-top: 1rem; }
.mt-8       { margin-top: 2rem; }
.mt-12      { margin-top: 3rem; }
.mb-2       { margin-bottom: 0.5rem; }
.mb-4       { margin-bottom: 1rem; }
.mb-6       { margin-bottom: 1.5rem; }
.mb-8       { margin-bottom: 2rem; }
.mb-12      { margin-bottom: 3rem; }
.w-full     { width: 100%; }
.text-center { text-align: center; }
.text-left  { text-align: left; }
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2      { gap: 0.5rem; }
.gap-3      { gap: 0.75rem; }
.gap-4      { gap: 1rem; }
.gap-6      { gap: 1.5rem; }
.grid       { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.hidden     { display: none; }
.block      { display: block; }
.border-t   { border-top: 1px solid var(--border); }
.pt-8       { padding-top: 2rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.resize-none { resize: none; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:col-span-2 { grid-column: span 2; }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:text-3xl { font-size: 1.875rem; }
  .md\:text-5xl { font-size: 3rem; }
}

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

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

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

.text-xs  { font-size: 0.75rem; }
.text-sm  { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }

.muted, .text-muted { color: var(--text-muted); }
.leading-tight { line-height: 1.2; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }

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

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  background: var(--accent-prominent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  line-height: 1.4;
}
.btn-primary:hover { opacity: 0.88; 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); }
[data-theme="jungle"] .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; }

/* ---- 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.1rem;
  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-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;
  flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }

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

[data-theme="dark"] .nav-aurochs,
[data-theme="jungle"] .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.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin-left: 2.4rem;
  white-space: nowrap;
}

/* 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.9rem;
  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 .ti { color: var(--accent-prominent); }

.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 .ti { 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--mid   { border-radius: 0; }
.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;
  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: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;
}

/* Tabler icon sizing inside drawer links */
.drawer-link .ti,
.drawer-link .tif {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
  margin-right: 0.5rem;
  color: var(--accent-prominent);
  flex-shrink: 0;
}
.drawer-link--highlight .ti,
.drawer-link--highlight .tif { color: inherit; }
.drawer-link--sm .ti,
.drawer-link--sm .tif { font-size: 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; }

.drawer-species {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.drawer-species a {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 0.15s;
}
.drawer-species a:hover { border-color: var(--accent-prominent); text-decoration: none; }

.drawer-tags-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}
.drawer-tags-text a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--foreground);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.15s;
}
.drawer-tags-text a:hover { opacity: 1; text-decoration: none; }

/* ---- 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; display: inline-block; transition: color 0.15s, transform 0.12s; transform-origin: left center; }
.site-footer a:hover { color: var(--accent-prominent); transform: scale(1.04); }
.site-footer .ti:not(.theme-btn .ti), .site-footer .tif:not(.theme-btn .tif) { 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);
}

/* Brand block */
.footer-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.footer-aurochs-img {
  width: 45px;
  height: auto;
  flex-shrink: 0;
}
html[data-theme="dark"] .footer-aurochs-img,
html[data-theme="jungle"] .footer-aurochs-img {
  filter: invert(1);
}
.footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-brand-name {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground) !important;
  line-height: 1.1;
}
.footer-tagline {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin-left: 0.125rem;
}
.footer-email {
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0.25rem 0 0 1rem;
}

/* 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 "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="jungle"] .footer-tip-link { background: rgba(230, 126, 34, 0.1); }
[data-theme="dark"]   .footer-tip-link:hover { background: rgba(230, 126, 34, 0.15); }
[data-theme="jungle"] .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 i.text-btn-icon__payment-apple {
  color: var(--accent-prominent);
}

.footer-tip-payment-icons i.text-btn-icon__payment-paypal {
  color: #003087;
}

.footer-tip-payment-icons i.text-btn-icon__payment-cash {
  color: #16a34a;
}

.footer-tip-payment-icons i.text-btn-icon__payment-bitcoin {
  color: #f7931a;
}

[data-theme="dark"]   .footer-tip-payment-icons svg { stroke: #86efac; }
[data-theme="jungle"] .footer-tip-payment-icons svg { stroke: #86efac; }
[data-theme="dark"]   .footer-tip-payment-icons i.text-btn-icon__payment-apple { color: #86efac; }
[data-theme="jungle"] .footer-tip-payment-icons i.text-btn-icon__payment-apple { color: #86efac; }
[data-theme="dark"]   .footer-tip-payment-icons i.text-btn-icon__payment-paypal { color: #86efac; }
[data-theme="jungle"] .footer-tip-payment-icons i.text-btn-icon__payment-paypal { color: #86efac; }

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


/* 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 .ti, .footer-more-link .tif { 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.875rem; }
.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; }
.listing-card { border-bottom: 1px solid var(--border); }
.listing-card-link { display: block; padding: 0.9rem 1.25rem; text-decoration: none; color: inherit; }
.listing-card-link:hover { background: color-mix(in srgb, var(--accent-prominent) 5%, transparent); }
.listing-card-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }
.listing-card-location { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.listing-card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

/* 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;
}

/* 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: 0.5rem;
  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: 0.75rem;
  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;
}
.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: 42rem;
  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,
[data-theme="jungle"] .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,
[data-theme="jungle"] .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,
[data-theme="jungle"] .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,
[data-theme="jungle"] .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: 0.95rem;
}
.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,
[data-theme="jungle"] .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.05rem;
  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-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);
}
.listing-related-link:hover { opacity: 0.8; text-decoration: none; }

/* Description content */
.listing-description { line-height: 1.65; font-size: 0.975rem; }
.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.8rem;
  color: var(--text-muted);
  margin: 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.8rem;
  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,
[data-theme="jungle"] .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: 160px;
}

.map-popup { padding: 0.25rem; }
.map-popup-title { display: block; font-weight: 700; font-size: 1rem; color: var(--foreground); margin-bottom: 0.25rem; 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.4rem; 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: 1.15rem; 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, [data-theme="jungle"] .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, [data-theme="jungle"] .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, [data-theme="jungle"] .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);
}

/* ---- FAQ accordion ---------------------------------------- */

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-question {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--background);
}
[data-theme="light"] .faq-question { background: #FCFAF7; }
.faq-question:hover { background: color-mix(in srgb, var(--accent-prominent) 5%, transparent); }
.faq-question::after { content: '▾'; font-size: 0.9em; opacity: 0.6; }
details[open] .faq-question::after { content: '▴'; }

.faq-answer {
  padding: 0.75rem 1.25rem 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

/* ---- Search bar ------------------------------------------- */

.search-bar input { font-size: 1rem; }

.search-bar .flex { gap: 0.5rem; }

/* ---- 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);
}

/* Jungle mode theme */
html[data-theme="jungle"] .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="jungle"] .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-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.tip-intro-list li { margin-bottom: 0.2rem; }

.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; }
[data-theme="jungle"] .tip-alt-h3__icon--paypal { color: #69a8e8; }
.tip-alt-h3__icon--cashapp { color: #15803d; }
[data-theme="dark"]   .tip-alt-h3__icon--cashapp { color: #86efac; }
[data-theme="jungle"] .tip-alt-h3__icon--cashapp { color: #86efac; }
.tip-alt-h3__icon--bitcoin { color: #ea580c; }
[data-theme="dark"]   .tip-alt-h3__icon--bitcoin { color: #fdba74; }
[data-theme="jungle"] .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 cards (browse / search) ---------------------- */

.listing-card {
  display: block;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--foreground);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.listing-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); border-color: var(--accent-prominent); text-decoration: none; }

.listing-card-name { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
.listing-card-location { font-size: 0.875rem; color: var(--text-muted); }
.listing-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.listing-card-tag { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent-prominent) 12%, transparent); color: var(--accent-prominent); }

/* ---- 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 { 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; }

/* ---- Products Page (static/products) ----------------------- */

.products-page { max-width: 56rem; margin-left: auto; margin-right: auto; padding: 2.5rem 1rem 5rem; }
.products-page__title { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 700; text-align: center; margin: 0 0 1rem; }
.products-page__intro { text-align: center; color: var(--text-muted); font-size: 1.0625rem; margin: 0 0 0.75rem; }
.products-page__not-listed { text-align: center; font-size: 0.875rem; color: var(--text-muted); margin: 0 0 3rem; }
.products-page__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .products-page__grid { grid-template-columns: repeat(2, 1fr); } }
.products-page__contribute-short { max-width: 40rem; margin: 0 auto 3rem; }
.products-page__tip { max-width: 24rem; margin: 3rem auto; padding: 0 1rem; }
.products-page__select-maps { margin: 3rem 0; }
.products-page__contribute { margin: 3rem 0; }
.products-page__shirts { margin: 3rem 0; }
.products-page__blog { margin: 3rem 0 6rem; }

/* ---- Categories Page (content/categories) ------------------- */

.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; } }

/* ---- Support Page ---------------------------------------- */

.support-page { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1rem 10rem; }
.support-page__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .support-page__title { font-size: 1.875rem; } }
.support-page__content { margin-bottom: 3rem; }
.support-page__tip { max-width: 24rem; margin: 5rem auto; padding: 0; }
.support-page__share { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }

/* ---- Shared Share Logos partial (partials/share-logos) --- */

.share-logos__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .share-logos__title { font-size: 1.5rem; } }
.share-logos__intro { margin-bottom: 2rem; }
.share-logos__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
@media (min-width: 640px) { .share-logos__grid { grid-template-columns: repeat(3, 1fr); } }
.share-logos__item { display: flex; flex-direction: column; align-items: center; }
.share-logos__img-wrap { width: 100%; padding: 0.5rem; border-radius: 0.5rem; margin-bottom: 0.75rem; }
.share-logos__img-wrap--light { background: #fff; }
.share-logos__img-wrap--mid { background: #e2e8f0; }
.share-logos__img-wrap--dark { background: #1e2937; }
.share-logos__img { width: 100%; height: auto; display: block; }
.share-logos__label { font-size: 0.875rem; color: var(--text-muted); text-align: center; }
.share-logos__link { font-size: 0.875rem; color: var(--text-muted); margin-top: 1rem; }

/* ---- Why Page -------------------------------------------- */

.why-page__blog { margin: 2.5rem 0 6rem; padding: 0 1rem; }

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

.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__share { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.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%; text-align: center; margin-top: 1.5rem; margin-bottom: 2rem; }
.map-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: 0.5rem; }
.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: 40rem; margin: 0 auto 2rem; }
.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: 0 auto 2rem; }
.map-page__finder { width: fit-content; margin: 0 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) ----------------------- */

.recall-page { max-width: 48rem; margin-left: auto; margin-right: auto; }
.recall-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.recall-page__intro { text-align: center; color: #ea580c; margin-bottom: 2rem; }
.recall-page__empty { text-align: center; color: var(--text-muted); }

/* ---- Related/Links Page (map/related) -------------- */

.related-page__return { margin-top: 1rem; margin-bottom: 0.5rem; }
.related-page__recall-note { margin-top: 0.25rem; }
.related-page__support-box { max-width: 32rem; margin-left: auto; margin-right: auto; }
.related-page__tip-link { display: block; text-align: center; font-size: 0.875rem; margin-top: 1rem; color: var(--accent-prominent); }
.related-page__spacing-top { margin-top: 2rem; }
.related-page__spacing-bottom { margin-bottom: 2rem; }

/* ---- Listing Not Found (map/listing-not-found) ---- */

.not-found-page { max-width: 42rem; margin-left: auto; margin-right: auto; padding: 4rem 1rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.not-found-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin-bottom: 1rem; }
.not-found-page__text { color: var(--text-muted); margin-bottom: 1rem; }
.not-found-page__slug { font-family: monospace; font-size: 0.9rem; border-bottom: 2px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 2rem; }
.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; } }

/* ---- Suggest Success (map/suggest-success) -------- */

.suggest-success-page { max-width: 48rem; margin: 0 auto; padding: 5rem 1rem 10rem; }
.suggest-success-page__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .suggest-success-page__title { font-size: 1.875rem; } }
.suggest-success-page__intro { margin-bottom: 1rem; }
.suggest-success-page__share { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.suggest-success-page__tip { max-width: 24rem; margin: 5rem auto 0; }
.suggest-success-page__tip-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .suggest-success-page__tip-title { font-size: 1.5rem; } }

/* ---- Sponsors Page (sponsors/*) -------------------- */

.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; } }
.about-page__select-maps { margin: 4rem 0; }
/* 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; }

/* ---- 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-page__form { display: flex; flex-direction: column; gap: 1.5rem; }
.suggest-form-page__section-title { font-size: 1.25rem; font-weight: 600; }
.suggest-form-page__section-title--spaced { margin-top: 0.5rem; }
.suggest-form-page__section-hint { font-size: 0.875rem; color: var(--text-muted); margin-top: -1rem; }
.suggest-form-page__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .suggest-form-page__grid { grid-template-columns: 1fr 1fr; } }
.suggest-form__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .suggest-form__grid { grid-template-columns: 1fr 1fr; } }
.suggest-form-page__checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem; }
.suggest-form-page__checkbox-label--primary { font-weight: 600; margin-bottom: 0.5rem; }
.suggest-form-page__checkbox-label--capitalize { text-transform: capitalize; }
.suggest-form-page__error { color: #dc2626; font-size: 0.875rem; }
.suggest-form-page__submit { padding: 0.75rem 2.5rem; font-size: 1.125rem; }
.suggest-form-page__loading { display: flex; align-items: center; gap: 0.5rem; }
.suggest-form-page__spinner { width: 1.25rem; height: 1.25rem; animation: spin 0.6s linear infinite; }

/* ---- 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(--text-default); }

/* ---- 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 { 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);
}
html[data-theme="jungle"] {
  --jd-color-background-default:  #31241b;
  --jd-color-text:                #ededed;
  --jd-color-panel:               #3d2e22;
  --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:               #B8977E;          /* = --text-muted jungle */
  --jd-color-placeholder:         rgba(184,151,126,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:   #F4B486;
  --jd-color-background-selection:           rgba(244,180,134,0.25);
  --jd-color-background-selection-opacity50:  rgba(244,180,134,0.15);
  --jd-dark-background-color:     #3d2e22;
  --jd-dark-background-darknes:   #31241b;
  --jd-dark-background-ligher:    #4a3829;
  --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:        #3d2e22;
  --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; }

/* ---- 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 3rem;
}
.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: 1rem;
  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 {
  max-width: 22rem;
  margin: 0 auto;
}
.search-input-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  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;
}
.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: 1rem;
  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,
[data-theme="jungle"] .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.25rem 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.25rem;
}
.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); }
[data-theme="jungle"] .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; }
[data-theme="jungle"] .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; }
[data-theme="jungle"] .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;
  stroke: #16a34a;
}
.text-btn-icon__payment-apple { font-size: 18px; margin-bottom:4px; color: var(--accent-prominent); }
.text-btn-icon__payment-paypal { font-size: 16px; color: #003087; margin-left: 2px; }
.text-btn-icon__payment-cash { font-size: 16px; color: #16a34a; }
.text-btn-icon__payment-bitcoin { font-size: 16px; color: #f7931a; }

[data-theme="dark"]   .text-btn-icon--payments svg { stroke: #86efac; }
[data-theme="jungle"] .text-btn-icon--payments svg { stroke: #86efac; }
[data-theme="dark"]   .text-btn-icon__payment-apple { color: #86efac; }
[data-theme="jungle"] .text-btn-icon__payment-apple { color: #86efac; }
[data-theme="dark"]   .text-btn-icon__payment-paypal { color: #86efac; }
[data-theme="jungle"] .text-btn-icon__payment-paypal { color: #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); }
[data-theme="jungle"] .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;
}
.contribute-dancing-cow {
  display: flex;
  justify-content: center;
  margin: 2.5rem auto;
}

/* ---- Rundown / FAQ --------------------------------------- */
.rundown-section {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
[data-theme="dark"] .faq-item { border-color: rgba(55,65,81,1); }
[data-theme="jungle"] .faq-item { border-color: rgba(55,65,81,1); }
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
  background: #FCFAF7;
  list-style: none;
  gap: 1rem;
  transition: background 0.15s;
}
.faq-summary:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"]   .faq-summary { background: color-mix(in srgb, var(--accent-prominent) 10%, transparent); }
[data-theme="jungle"] .faq-summary { background: color-mix(in srgb, var(--accent-prominent) 10%, transparent); }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary h2 {
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
  margin: 0;
}
@media (min-width: 768px) { .faq-summary h2 { font-size: 1.25rem; } }
.faq-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-body {
  padding: 1rem;
}
.faq-body p { margin-bottom: 0.5rem; }
.faq-body ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.faq-body li { margin-bottom: 0.25rem; }

/* ---- 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;
  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: 480px;
  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,
[data-theme="jungle"] .rotator-item:hover { background: rgba(255,255,255,0.07); }
.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; }

/* ---- Ad Cards -------------------------------------------- */
.ad-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.ad-card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 450px;
  border: 1px solid color-mix(in srgb, var(--accent-prominent) 20%, transparent);
  border-radius: var(--radius);
  padding: 0.5rem;
  text-decoration: none;
  color: inherit;
  background: var(--background);
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
[data-theme="light"] .ad-card { background: #FCFAF7; }
.ad-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);
  text-decoration: none;
}
.ad-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.ad-card-body {
  padding: 1rem 0.5rem 1rem;
}
.ad-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.ad-card-detail {
  font-size: 0.9rem;
  color: var(--foreground);
}
.ad-card-cta {
  display: block;
  margin-top: 1.5rem;
  color: var(--accent-prominent);
  font-size: 0.9rem;
}
.ad-sponsor-link {
  display: block;
  width: 100%;
  max-width: 450px;
  text-align: center;
  padding: 0.5rem;
  text-decoration: none;
  color: var(--accent-prominent);
  font-size: 0.95rem;
  transition: color 0.15s;
}
.ad-sponsor-link:hover { text-decoration: underline; }

/* ---- Sponsor page example cards ----------------------------- */
.sponsor-examples {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.sponsor-example-tier {
  display: flex;
  flex-direction: column;
}
.sponsor-example-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.ad-example {
  cursor: default;
  pointer-events: none;
  user-select: none;
}
.ad-example--full {
  max-width: 100%;
  min-height: 50vh;
  background-size: cover;
  background-position: center;
}

/* ---- Blog Preview ---------------------------------------- */
.blog-preview-section {
  width: 100%;
  padding: 0 1rem;
}
.blog-preview-header {
  text-align: center;
  margin-bottom: 2rem;
}
.blog-preview-header h2 {
  font-size: 2rem;
  font-weight: 700;
}
.blog-preview-grid {
  list-style: none;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding: 0 1rem;
  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; }

/* =========================================================
   Utility supplements — covers all utility classes used in
   views that are not provided by a build tool
   ========================================================= */

/* Spacing */
.gap-1      { gap: 0.25rem; }
.mb-1       { margin-bottom: 0.25rem; }
.mb-3       { margin-bottom: 0.75rem; }
.mb-10      { margin-bottom: 2.5rem; }
.mb-20      { margin-bottom: 5rem; }
.mt-1       { margin-top: 0.25rem; }
.mt-3       { margin-top: 0.75rem; }
.mt-6       { margin-top: 1.5rem; }
.mt-16      { margin-top: 4rem; }
.mt-20      { margin-top: 5rem; }
.-mt-4      { margin-top: -1rem; }
.ml-6       { margin-left: 1.5rem; }
.mr-2       { margin-right: 0.5rem; }
.px-3       { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-10      { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12      { padding-left: 3rem; padding-right: 3rem; }
.py-2       { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3       { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.p-4        { padding: 1rem; }
.pl-8       { padding-left: 2rem; }
.pt-2       { padding-top: 0.5rem; }
.pb-2       { padding-bottom: 0.5rem; }

/* Sizing */
.w-5        { width: 1.25rem; }
.w-6        { width: 1.5rem; }
.h-5        { height: 1.25rem; }
.h-6        { height: 1.5rem; }
.h-auto     { height: auto; }

/* Typography */
.text-4xl   { font-size: 2.25rem; }
.text-5xl   { font-size: 3rem; }
.text-8xl   { font-size: 6rem; }
.capitalize { text-transform: capitalize; }
.text-gray-200   { color: #e5e7eb; }
.text-gray-500   { color: #6b7280; }
.text-green-700  { color: #15803d; }
.text-orange-600 { color: #ea580c; }
.text-red-600    { color: #dc2626; }

/* Dark mode overrides using data-theme */
[data-theme="dark"] .dark\:text-gray-700   { color: #374151; }
[data-theme="dark"] .dark\:text-green-400  { color: #4ade80; }
[data-theme="dark"] .dark\:border-gray-700 { border-color: #374151; }

/* Flexbox / Grid */
.flex-1       { flex: 1 1 0%; }
.flex-wrap    { flex-wrap: wrap; }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Borders */
.border         { border: 1px solid var(--border); }
.border-2       { border: 2px solid var(--border); }
.border-b       { border-bottom: 1px solid var(--border); }
.border-dashed  { border-style: dashed; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }

/* Effects */
.opacity-25     { opacity: 0.25; }
.opacity-75     { opacity: 0.75; }
.transition     { transition: all 0.15s ease; }
.cursor-pointer { cursor: pointer; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
[data-theme="dark"] .dark\:hover\:bg-white\/5:hover { background-color: rgba(255,255,255,0.05); }

/* Positioning */
.top-1\/2       { top: 50%; }
.left-3         { left: 0.75rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* Images */
.object-contain { object-fit: contain; }

/* Prose (basic readable body copy) */
.prose {
  max-width: 65ch;
  line-height: 1.7;
  color: var(--foreground);
}
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 1.5em; margin-bottom: 0.5em; }
.prose p { margin-bottom: 1em; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.35em; }
.prose a { color: var(--accent-prominent); }
.prose blockquote { border-left: 4px solid var(--accent-prominent); padding-left: 1em; color: var(--text-muted); font-style: italic; margin: 1em 0; }
.prose img { border-radius: var(--radius); margin: 1em 0; }
.prose code { font-family: monospace; font-size: 0.9em; background: rgba(0,0,0,0.06); padding: 0.1em 0.3em; border-radius: 3px; }
.prose pre { background: rgba(0,0,0,0.06); padding: 1em; border-radius: var(--radius); overflow-x: auto; }

/* ===========================================================================
   SPECIES-TAGS-SIMPLE (listing card product tag cloud)
   =========================================================================== */
.species-tags-simple {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
}
.species-tags-simple__inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
}
.species-tags-simple__inner--clipped {
  max-height: 3.75rem;
  overflow: hidden;
}
/* Fade-out gradient when clipped */
.species-tags-simple__inner--clipped::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2rem;
  background: linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
}
.tag-toggle-btn {
  position: absolute;
  bottom: 0; right: 0.25rem;
  background: var(--background);
  border: none;
  padding: 0 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--foreground);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: opacity 0.15s;
}
.tag-toggle-btn:hover { opacity: 0.7; }
.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="jungle"] .tag--feature { background: #1e3a5f; color: #bfdbfe; }
[data-theme="dark"]   .tag--recall  { background: #7c2d12; color: #fed7aa; }
[data-theme="jungle"] .tag--recall  { background: #7c2d12; color: #fed7aa; }
[data-theme="dark"]   .tag--species { background: #14532d; color: #bbf7d0; }
[data-theme="jungle"] .tag--species { background: #14532d; color: #bbf7d0; }

/* ===========================================================================
   LISTING CARDS
   =========================================================================== */
.listing-card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--accent-muted);
  color: var(--foreground);
  text-decoration: none;
  transition: background 0.15s;
}
.listing-card:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"]   .listing-card:hover { background: rgba(255,255,255,0.04); }
[data-theme="jungle"] .listing-card:hover { background: rgba(255,255,255,0.04); }
.listing-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}
.listing-card__name {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.listing-card__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.listing-card__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-muted);
}
.listing-card__desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--foreground);
  opacity: 0.8;
  margin: 0.25rem 0;
  /* Clamp description to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-card--brief .listing-card__desc { display: none; }
.listing-card__cta-text {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.listing-card--brief .listing-card__cta-text { display: none; }
.listing-card__cta {
  display: inline-block;
  color: var(--accent-prominent);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: auto;
}
.listing-card--brief .listing-card__cta { display: none; }

/* Grid layout used with listing cards */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ===========================================================================
   SELECT MAPS
   =========================================================================== */
.select-maps { max-width: 42rem; text-align: center; margin: 0 auto; }
.select-maps--center { text-align: center; }
.select-maps__section { margin-bottom: 1.5rem; }
.select-maps__heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 0;
}
.select-maps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}
.select-maps--center .select-maps__list { justify-content: center; }
.select-maps__list--social { gap: 0.75rem; align-items: center; }
/* Button reset for species-tag used as a button (e.g. "Use device location") */
button.species-tag {
  border: none;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* ===========================================================================
   CONTRIBUTE SHORT
   =========================================================================== */
.contribute-short { width: 100%; }
.contribute-short__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.contribute-short__jar {
  flex-shrink: 0;
  width: 5rem;
}
@media (min-width: 640px) { .contribute-short__jar { width: 7.5rem; } }
.tip-jar-img {
  width: 100%;
  height: auto;
  transition: animation 0.1s;
}
@keyframes gentleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  50% { transform: translateX(4px) rotate(1deg); }
  75% { transform: translateX(-2px) rotate(-0.5deg); }
}
.tip-jar-img:hover { animation: gentleShake 1.2s ease-in-out; }
.contribute-short__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 24rem;
  white-space: nowrap;
}
.contribute-short__text p { margin: 0; font-size: 1rem; line-height: 1.5; }
.contribute-short__actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.5rem;
}
.contribute-short__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  text-decoration: none;
  color: var(--foreground);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.contribute-short__action:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"]   .contribute-short__action:hover { background: rgba(255,255,255,0.07); }
[data-theme="jungle"] .contribute-short__action:hover { background: rgba(255,255,255,0.07); }
.contribute-short__action-label {
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 2px solid var(--accent-prominent);
  line-height: 1.4;
}
.contribute-short__action-icon {
  font-size: 1.4rem;
  color: var(--accent-prominent);
  line-height: 1;
}
.contribute-short__payment-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
}
.contribute-short__pay-icon { display: flex; align-items: center; }
.contribute-short__pay-icon--apple  { color: #16a34a; }
.contribute-short__pay-icon--google { color: #16a34a; }
.contribute-short__pay-icon--card   { color: #16a34a; }
.contribute-short__pay-icon--btc    { color: #ea580c; }
[data-theme="dark"]   .contribute-short__pay-icon--apple  { color: #86efac; }
[data-theme="dark"]   .contribute-short__pay-icon--google { color: #86efac; }
[data-theme="dark"]   .contribute-short__pay-icon--card   { color: #86efac; }
[data-theme="dark"]   .contribute-short__pay-icon--btc    { color: #fdba74; }
[data-theme="jungle"] .contribute-short__pay-icon--apple  { color: #86efac; }
[data-theme="jungle"] .contribute-short__pay-icon--google { color: #86efac; }
[data-theme="jungle"] .contribute-short__pay-icon--card   { color: #86efac; }
[data-theme="jungle"] .contribute-short__pay-icon--btc    { color: #fdba74; }

/* ===========================================================================
   DIGITAL AUROCHS
   =========================================================================== */
.digital-aurochs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0 1rem;
  margin: 3rem auto;
}
.digital-aurochs__scene {
  position: relative;
  width: 200px;
  min-height: 200px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.digital-aurochs__bottle {
  position: absolute;
  width: 2rem;
  height: auto;
}
.digital-aurochs__bottle--left   { top: 70px; left: 12.5%; transform: translate(-50%, -50%); }
.digital-aurochs__bottle--center { top: 0;    left: 44.5%; transform: translate(-50%, -50%); }
.digital-aurochs__bottle--right  { top: 70px; left: 80%;   transform: translate(-50%, -50%); }
.digital-aurochs__bull {
  position: absolute;
  width: 10.5rem;
  height: auto;
  top: 110px;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes floatAnim {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%       { transform: translate(-50%, -50%) translateY(8px); }
}
.floating        { animation: floatAnim 3s ease-in-out infinite; }
.floating--delay-1 { animation-delay: 0.8s; }
.floating--delay-2 { animation-delay: 1.6s; }
.digital-aurochs__credit {
  text-align: center;
  font-size: 0.85rem;
  color: var(--foreground);
  opacity: 0.7;
  margin: 0;
}
.digital-aurochs__credit a { color: var(--accent-prominent); border-bottom: 2px solid var(--accent-prominent); }
.footer-aurochs-section { margin-bottom: 1.5rem; }

/* ===========================================================================
   GREETING BISCUIT POPUP
   =========================================================================== */
.greeting-biscuit {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  background: var(--background);
  border: 1px solid var(--accent-muted);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border-radius: var(--radius);
  padding: 0.75rem;
  z-index: 9999;
  max-width: 100%;
}
.greeting-biscuit--hidden { display: none !important; }
@keyframes slideInFromLeft {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-110%); opacity: 0; }
}
.greeting-biscuit--in  { animation: slideInFromLeft 0.5s ease-out forwards; }
.greeting-biscuit--out { animation: slideOutToLeft  0.5s ease-in  forwards; }
.greeting-biscuit__body { position: relative; padding-right: 1.5rem; }
.greeting-biscuit__top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.greeting-biscuit__pfp {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.greeting-biscuit__pfp-link { flex-shrink: 0; }
.greeting-biscuit__message {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
@media (min-width: 640px) { .greeting-biscuit__message { font-size: 1rem; } }
.greeting-biscuit__actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.greeting-biscuit__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--foreground);
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.greeting-biscuit__action:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"]   .greeting-biscuit__action:hover { background: rgba(255,255,255,0.07); }
[data-theme="jungle"] .greeting-biscuit__action:hover { background: rgba(255,255,255,0.07); }
.greeting-biscuit__action-label {
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 2px solid var(--accent-prominent);
  line-height: 1.3;
}
@media (min-width: 1024px) { .greeting-biscuit__action-label { font-size: 1rem; } }
.greeting-biscuit__action-sub {
  font-size: 0.75rem;
  color: var(--accent-prominent);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.greeting-biscuit__close {
  position: absolute;
  top: -0.25rem;
  right: -0.5rem;
  background: none;
  border: none;
  padding: 0.25rem;
  font-size: 1rem;
  cursor: pointer;
  color: var(--foreground);
  opacity: 0.6;
  transition: opacity 0.15s;
  line-height: 1;
}
.greeting-biscuit__close:hover { opacity: 1; }

/* ==================== MISSING STYLES ==================== */

/* ---- tag--active alias (results page uses BEM double-dash) --- */
.tag--active { border-color: var(--accent-prominent); background: color-mix(in srgb, var(--accent-prominent) 12%, transparent); color: var(--accent-prominent); }

/* ---- Browse grid (countries, categories, browse pages) ------- */
.browse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .browse-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Shop styles -------------------------------------------- */
.shop-item__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radius);
}
.shop__empty,
.shop__contribute {
  text-align: center;
}

/* ---- 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; }
}

/* ---- Browse page styles ---------------------------------- */
.browse-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}
.browse-page__header {
  margin-bottom: 1.5rem;
}
.browse-page__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.browse-page__intro {
  max-width: 56ch;
  margin-bottom: 1rem;
  color: var(--text-muted);
}
.browse-page__directions {
  margin-bottom: 0.5rem;
}
.browse-page__link {
  color: var(--accent-prominent);
  text-decoration: none;
}
.browse-page__link:hover { text-decoration: underline; }
.browse-page__cta {
  margin-top: 1.25rem;
}
.browse-page__form-wrapper {
  max-width: 24rem;
  margin: 1.5rem auto 2.5rem;
}
.browse-page__list {
  padding-top: 4rem;
  margin-bottom: 3rem;
}
.browse-page__list-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.browse-page__list-intro {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.browse-page__section {
  margin-bottom: 1.5rem;
}
.browse-page__species-tags {
  margin-top: 2rem;
  margin-bottom: 5rem;
}
.browse-page__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.browse-page__nav {
  width: 100%;
}

/* ---- Browse card updates for header + arrow ---- */
.browse-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid var(--border, #ddd);
  border-radius: var(--radius);
  background: var(--background);
  text-decoration: none;
  color: var(--foreground);
  transition: all 0.2s;
  height: 100%;
}
.browse-card:hover {
  border-color: var(--accent-prominent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.browse-card__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.browse-card__arrow {
  flex-shrink: 0;
  color: var(--accent-prominent);
  margin-top: 0.1rem;
}
.browse-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent-prominent);
}
.browse-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---- Species Tags Links (browse page categories) ---- */
.species-tags-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.species-tags-links--centered {
  justify-content: center;
}

/* Force social icons onto a new line when rendered inside the nav drawer */
.tag-link--social-start { display: none; }
.nav-drawer-panel .tag-link--social-start {
  display: block;
  flex-basis: 100%;
  height: 0;
}

.species-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none !important;
  background: var(--accent-prominent);
  color: var(--background);
  ring: 1px inset rgba(0,0,0,0.1);
  transition: all 0.2s;
  cursor: pointer;
}

.species-tag:hover {
  opacity: 0.85;
  transform: scale(1.02);
  text-decoration: none !important;
}

.footer-tags .species-tag {
  color: var(--background);
}

.tag-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  background: transparent;
  color: var(--accent-prominent);
  transition: all 0.2s;
  cursor: pointer;
}

.tag-link:hover {
  opacity: 0.8;
  transform: scale(1.02);
  text-decoration: none !important;
}

.tag-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
}

.tag-link--rawmi .tag-link__icon,
.tag-link--laws .tag-link__icon {
  color: var(--accent-prominent);
}

/* Social media brand colors (override for icons) */
.tag-link__icon--x {
  width: 1rem;
  height: 1rem;
  color: inherit;
  margin-top: 2px;
  transform-origin: center;
}
.tag-link--facebook .tag-link__icon { color: #1877f2; }
.tag-link--instagram .tag-link__icon { color: #e4405f; }
.tag-link--youtube .tag-link__icon { color: #ff0000; }
.tag-link--twitter .tag-link__icon { color: var(--foreground); }

/* YouTube icon white in dark themes */
html[data-theme="dark"] .tag-link--youtube .tag-link__icon,
html[data-theme="jungle"] .tag-link--youtube .tag-link__icon {
  color: #fff;
}

/* X icon color adjustments for dark themes */
html[data-theme="dark"] .tag-link--twitter .tag-link__icon,
html[data-theme="jungle"] .tag-link--twitter .tag-link__icon {
  color: var(--foreground);
}

/* TikTok adjustments for dark themes */
.tag-link--tiktok .tag-link__icon { color: #000; }

/* TikTok icon color adjustments for theme */
html[data-theme="dark"] .tag-link--tiktok .tag-link__icon,
html[data-theme="jungle"] .tag-link--tiktok .tag-link__icon {
  color: #fff;
}

@media (min-width: 768px) {
  .species-tag {
    font-size: 1.0625rem;
    padding: 0.35rem 0.375rem;
  }
}

/* ---- Search page styles ---------------------------------- */
.search-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}
.search-page__landing {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-page__title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.5rem;
}
.search-page__intro {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto 1.5rem;
}
.search-page__near-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem 0;
}
.search-page__globe-link {
  text-align: center;
  margin: 0.5rem 0 2rem;
}
.search-page__globe {
  color: var(--accent-prominent);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.search-page__globe:hover { text-decoration: underline; }
.search-page__select-maps {
  width: fit-content;
  margin: 48px auto 2.5rem;
}
.search-page__ad-cards {
  width: fit-content;
  margin: 0 auto 3.5rem;
}
.search-page__contribute-short {
  width: fit-content;
  margin: 0 auto 2.5rem;
}
.search-page__form-wrapper {
  max-width: 24rem;
  margin: 2.5rem auto;
}
.search-page__help-text {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.search-page__seo-content {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

/* ---- Search Results Page (search/results) ------------------- */

.search-results {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.search-results__empty {
  width: fit-content;
  margin: 5rem auto 2rem;
  text-align: center;
}

.search-results__empty-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.search-results__empty-text {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.search-results__distance-opts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.search-results__header {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.search-results__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

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

.search-results__action-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.search-results__refine {
  margin-bottom: 1rem;
}

.search-results__analysis {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.search-results__analysis-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.search-results__analysis-text {
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.search-results__analysis-products {
  font-size: 0.875rem;
  line-height: 1.7;
}

.search-results__about {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.search-results__about-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
}

.search-results__about-intro {
  text-align: center;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.search-results__about-list {
  list-style: disc;
  padding-left: 1.5rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.search-results__about-learn {
  text-align: center;
  line-height: 1.7;
  font-size: 0.875rem;
}

.search-results__contribute-section {
  width: fit-content;
  margin: 0 auto 2rem;
}

.search-results__tip-form {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.search-results__ad-cards {
  width: fit-content;
  margin: 0 auto 3rem;
}

.search-results__listings {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto 2rem;
}

.search-results__listings-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.search-results__listing-actions {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.search-results__listings-count {
  font-weight: 600;
  margin-bottom: 1rem;
}

.search-results__listings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.search-results__expand-radius {
  text-align: center;
  margin-top: 2.5rem;
}

.search-results__expand-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.search-results__footer-section {
  width: fit-content;
  margin: 2.5rem auto;
}

.search-results__contribute-footer {
  margin: 2rem 0;
}

.search-results__merch {
  width: fit-content;
  margin: 2rem auto;
}

.search-results__blog-preview {
  width: 100%;
  padding: 2.5rem 1rem;
}

/* ---- Contact page styles --------------------------------- */
.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; } }

/* ---- Edit Form Page (map/edit) ----------------------------- */

.edit-form-page {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 2.5rem;
  margin-bottom: 5rem;
}

.edit-form-page__header {
  margin-bottom: 1.5rem;
}

.edit-form-page__back-link {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}

.edit-form-page__back-link:hover {
  color: var(--foreground);
}

.edit-form-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0.25rem;
  margin-bottom: 0rem;
}

.edit-form-page__meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.edit-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.edit-form__section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.edit-form__coords-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.edit-form__details {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.edit-form__details-summary {
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.edit-form__details-content {
  margin-top: 0.5rem;
}

.edit-form__geocode-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.edit-form__geocode-row input {
  flex: 1;
}

.edit-form__geocode-btn {
  padding: 0.3rem 0.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.edit-form__geocode-btn svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.edit-form__status-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.edit-form__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Per-species sub-groups inside the products section */
.edit-form__species-groups {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.edit-form__species-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding: 0.75rem 0;
}
.edit-form__species-group:first-child {
  border-top: none;
  padding-top: 0;
}

.edit-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.edit-form__checkbox-label input[type="checkbox"] {
  cursor: pointer;
}

.edit-form__status {
  padding: 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-top: 1rem;
  display: none;
}

.edit-form__status:not(.hidden) {
  display: block;
  background: color-mix(in srgb, var(--accent-prominent) 8%, transparent);
  color: var(--accent-prominent);
}

.edit-form__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.edit-form__delete-btn {
  margin-right: auto;
}

/* ---- FAQ page styles ---------------------------------------- */
.faq-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}
.faq-page__title {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.faq-page__intro {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 0;
}
/* Stats block */
.faq-page__stats { margin: 0 0 5rem; }
.faq-page__stat-line {
  font-size: 1.125rem;
  line-height: 1.6;
}
.faq-page__stat-line--first { margin-top: 2rem; }
.faq-page__stat-line--last  { margin-bottom: 1rem; }
.faq-page__stat-num {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
}
.faq-page__time-accumulated {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .faq-page__time-accumulated { font-size: 2.25rem; }
}
.faq-page__time-num { font-size: inherit; font-weight: 900; }
.faq-page__time-unit {
  font-size: 1rem;
  font-weight: 400;
}
@media (min-width: 768px) { .faq-page__time-unit { font-size: 1.125rem; } }
.faq-page__time-label {
  font-size: 1rem;
  font-weight: 400;
}
@media (min-width: 768px) { .faq-page__time-label { font-size: 1.125rem; } }
/* Section wrappers */
.faq-page__rundown    { width: 100%; margin: 5rem 0; }
.faq-page__rotator    { width: 100%; max-width: 32rem; margin: 5rem auto; }
.faq-page__rotator-heading {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .faq-page__rotator-heading { font-size: 2rem; } }
.faq-page__contribute { width: 100%; margin: 5rem 0; }
.faq-page__tip {
  width: 100%;
  max-width: 24rem;
  margin: 5rem auto;
  padding: 0 1rem;
}

/* ---- Species page styles ------------------------------------- */
.species-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}
.species-page__title {
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}
.species-page__intro {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.species-page__not-listed {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 3rem;
}
.species-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .species-page__grid { grid-template-columns: repeat(2, 1fr); }
}
.species-page__browse-products { margin-bottom: 3rem; }
.species-page__contribute-short { max-width: 40rem; margin: 0 auto 3rem; }
.species-page__tip { max-width: 24rem; margin: 3rem auto; padding: 0 1rem; }
.species-page__select-maps { margin: 3rem 0; }
.species-page__contribute { margin: 3rem 0; }
.species-page__shirts { margin: 3rem 0; }
.species-page__blog { margin: 3rem 0 6rem; }
.species-card__emoji {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}
.species-card__name {
  font-weight: 600;
}
.species-card__desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.species-page__footer {
  margin-top: 3rem;
  text-align: center;
}

/* ---- Law edit page styles ----------------------------------- */
.law-edit-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}
.law-edit__header {
  margin-bottom: 1.5rem;
}
.law-edit__back {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}
.law-edit__back:hover { text-decoration: underline; }
.law-edit__title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0.25rem;
}
.law-edit__section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.law-edit__section-title:first-of-type { margin-top: 0; }
.law-edit__field {
  margin-bottom: 0.75rem;
}
.law-edit__section-help {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.law-edit__add-btn {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.law-edit__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ---- Laws index badges ---------------------------------------- */
.laws-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.laws-badge.legal {
  background: color-mix(in srgb, #84cc16 18%, transparent);
  color: #3f6212;
  outline: 1px solid color-mix(in srgb, #84cc16 35%, transparent);
}
[data-theme="dark"] .laws-badge.legal,
[data-theme="jungle"] .laws-badge.legal { background: color-mix(in srgb, #84cc16 22%, transparent); color: #bef264; }
.laws-badge.illegal {
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #9a3412;
  outline: 1px solid color-mix(in srgb, #f97316 35%, transparent);
}
[data-theme="dark"] .laws-badge.illegal,
[data-theme="jungle"] .laws-badge.illegal { background: color-mix(in srgb, #f97316 22%, transparent); color: #fdba74; }

/* ---- Laws status banner (single page) ----------------------- */
.laws-status-banner {
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
}
.laws-status-banner.legal { background: color-mix(in srgb, #84cc16 14%, transparent); border-left: 4px solid #84cc16; color: #3f6212; }
.laws-status-banner.illegal { background: color-mix(in srgb, #f97316 14%, transparent); border-left: 4px solid #f97316; color: #9a3412; }
[data-theme="dark"] .laws-status-banner.legal,
[data-theme="jungle"] .laws-status-banner.legal { color: #bef264; }
[data-theme="dark"] .laws-status-banner.illegal,
[data-theme="jungle"] .laws-status-banner.illegal { color: #fdba74; }

/* ---- Laws status guide boxes -------------------------------- */
.law-status-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 0.75rem;
}
.law-status-box h4 { font-size: 1rem; font-weight: 600; margin: 0; }
.law-status-box p  { font-size: 0.9rem; margin: 0; color: var(--text-muted, var(--foreground)); opacity: 0.85; }
.law-status-box-header { display: flex; align-items: center; gap: 0.5rem; }
.law-status-go   { border-left: 4px solid #84cc16; background: color-mix(in srgb, #84cc16 10%, var(--background)); }
.law-status-slow { border-left: 4px solid #15803d; background: color-mix(in srgb, #15803d 10%, var(--background)); }
.law-status-stop { border-left: 4px solid #ea580c; background: color-mix(in srgb, #ea580c 10%, var(--background)); }
.law-status-go-icon   { color: #84cc16; flex-shrink: 0; }
.law-status-slow-icon { color: #15803d; flex-shrink: 0; }
.law-status-stop-icon { color: #ea580c; flex-shrink: 0; }
[data-theme="dark"] .law-status-stop-icon,
[data-theme="jungle"] .law-status-stop-icon { color: #fb923c; }

/* ---- Not found page ------------------------------------- */
.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; }
[data-theme="jungle"] .tip-form__pre-icon--green,
[data-theme="jungle"] .tip-form__pre-icon--green-sm { color: #86efac; }
[data-theme="jungle"] .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;
}

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

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

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

html[data-theme="jungle"] .tip-form__brand--eth,
html[data-theme="jungle"] .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;
}

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

.law-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}

.law-page__nav {
  margin-bottom: 1.5rem;
}

.law-page__back-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;
}
.law-page__back-btn:hover {
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 5%, transparent);
  text-decoration: none;
}
.law-page__back-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.law-page__title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.law-brief-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 8%, transparent);
  margin-bottom: 1.5rem;
}

.law-status-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: currentColor;
}

.law-status-icon--go {
  color: #84cc16;
}

.law-status-icon--slow {
  color: #15803d;
}

.law-status-icon--stop {
  color: #ea580c;
}

.law-brief-text {
  margin: 0;
  line-height: 1.6;
}

.law-page__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.law-page__empty {
  max-width: 32rem;
  margin: 5rem auto 0;
  text-align: center;
}

.law-page__empty-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.law-page__empty-text {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.law-page__empty-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;
  margin: 0 auto;
}
.law-page__empty-btn:hover {
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 5%, transparent);
  text-decoration: none;
}
.law-page__empty-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.law-page__section-spacing {
  width: fit-content;
  margin: 2rem auto;
}

.law-page__section-spacing--large {
  margin: 2.5rem auto;
}

.law-page__tip-section {
  max-width: 24rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.law-page__full-section {
  width: 100%;
  padding: 2.5rem 1rem;
}

.law-section {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}

.law-section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.law-section-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.law-link-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.law-link-card:hover {
  border-color: var(--accent-prominent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.law-link-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.law-link-card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.law-link-card-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.law-link-card-cta {
  display: inline-block;
  color: var(--accent-prominent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-prominent);
}
.law-link-card-cta:hover {
  opacity: 0.8;
  text-decoration: none;
}

.law-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.law-city-chip {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}
.law-city-chip:hover {
  border-color: var(--accent-prominent);
  background: color-mix(in srgb, var(--accent-prominent) 5%, transparent);
  text-decoration: none;
}

/* ---- Laws rich entry list ----------------------------------- */
.law-entry-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 42rem; margin: 0 auto; }
.law-entry {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--foreground);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.law-entry:hover { border-color: var(--accent-prominent); box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-decoration: none; }
.law-entry-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.law-entry-name { font-size: 1rem; font-weight: 600; }
.law-entry-brief { font-size: 0.825rem; color: var(--text-muted, var(--foreground)); opacity: 0.75; }
.law-entry-label {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-prominent) 14%, transparent);
  color: var(--accent-prominent);
}
.law-sub-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; margin-left: 0.5rem; padding-left: 1rem; border-left: 2px solid var(--border); }
.law-sub-entry {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--foreground);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.law-sub-entry:hover { border-color: var(--accent-prominent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-decoration: none; }
.law-sub-entry-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.law-sub-entry-name { font-size: 0.9rem; font-weight: 500; }
.law-sub-entry-brief { font-size: 0.775rem; opacity: 0.7; }
.law-brief-callout { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-left: 4px solid var(--accent-prominent); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--accent-prominent) 8%, transparent); }
.law-brief-text { margin: 0; font-size: 1rem; line-height: 1.5; }
.law-section { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.law-section-heading { font-size: 1.375rem; font-weight: 700; margin-bottom: 0.375rem; }
.law-section-sub { font-size: 0.875rem; opacity: 0.65; margin-bottom: 1.25rem; }
.law-link-card { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; }
.law-link-card:hover { border-color: var(--accent-prominent); box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.law-link-card-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.law-link-card-meta { font-size: 0.8rem; opacity: 0.6; margin-bottom: 0.5rem; }
.law-link-card-desc { font-size: 0.9rem; margin-bottom: 0.75rem; opacity: 0.85; }
.law-link-card-cta { font-size: 0.85rem; font-weight: 500; color: var(--accent-prominent); text-decoration: none; }
.law-link-card-cta:hover { text-decoration: underline; }
.law-city-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.law-city-chip { display: inline-block; padding: 0.4rem 0.75rem; font-size: 0.875rem; font-weight: 500; border: 1px solid color-mix(in srgb, var(--accent-prominent) 50%, transparent); border-radius: var(--radius); color: var(--accent-prominent); text-decoration: none; transition: background 0.15s; }
.law-city-chip:hover { background: color-mix(in srgb, var(--accent-prominent) 12%, transparent); text-decoration: none; }

/* ---- 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; }

/* ---- Missing utility classes -------------------------------- */
.list-disc    { list-style-type: disc; }
.list-inside  { list-style-position: inside; }
.leading-relaxed { line-height: 1.625; }
.italic       { font-style: italic; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.mb-14        { margin-bottom: 3.5rem; }
.mb-20        { margin-bottom: 5rem; }
.mt-10        { margin-top: 2.5rem; }
.mt-6         { margin-top: 1.5rem; }
.w-fit        { width: fit-content; }
@media (min-width: 768px) {
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-xl  { font-size: 1.25rem; }
}

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

/* ---- Search page seo content styles ------------------------- */
.search-page__seo-subsection {
  margin-bottom: 1.5rem;
}
.search-page__seo-subheading {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.search-page__seo-text {
  line-height: 1.7;
  margin-bottom: 0.5rem;
}
.search-page__seo-text a { color: var(--accent-prominent); }
.search-page__seo-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
}
.search-page__seo-list {
  list-style: disc;
  padding-left: 1.5rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.search-page__contribute {
  width: fit-content;
  margin: 0 auto 2.5rem;
}
.search-page__merch {
  width: fit-content;
  margin: 0 auto 2.5rem;
}
.search-page__blog-wrapper {
  width: 100%;
  padding: 2.5rem 1rem;
}

/* 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;
}
.submit-page__form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.submit-page__section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1rem;
}
.submit-page__section-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: -1rem;
}
.submit-page__field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.submit-page__two-col-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .submit-page__two-col-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.submit-page__social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .submit-page__social-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.submit-page__animal-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.submit-page__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.submit-page__checkbox-label--primary {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.submit-page__checkbox-label--secondary {
  font-size: 0.875rem;
}
.submit-page__checkbox-sub {
  margin-left: 1.5rem;
  margin-bottom: 0.25rem;
}
.submit-page__checkbox-extras {
  margin-left: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.25rem;
}
.submit-page__payment-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.submit-page__payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.product-category {
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.product-category:first-of-type {
  margin-top: 1rem;
}
.products-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.products-group--spaced {
  margin-bottom: 2.5rem;
}
.form-status-message {
  margin: 0.5rem 0;
  color: var(--text-muted);
}
.form-actions {
  width: 70%;
  margin: 1rem 0;
}
.submit-page__error {
  color: #dc2626;
  font-size: 0.875rem;
}
.submit-page__button-wrapper {
  display: flex;
  justify-content: center;
}
.submit-page__submit-button {
  padding: 0.75rem 3rem;
  font-size: 1.125rem;
}
.submit-page__loading-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.submit-page__spinner {
  width: 1.25rem;
  height: 1.25rem;
  animation: spin 1s linear infinite;
}

/* 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; } }

/* Tip page */
.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__shirt-swiper {
  max-width: 48rem;
  margin: 2rem auto 0;
}
.tip-page__share-logos {
  max-width: 48rem;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
}
.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);
}

/* Laws page */
.laws-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1rem 0;
}
.laws-page__title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
}
.laws-page__subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 1rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.laws-page__action-row {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.laws-page__description {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  line-height: 1.6;
}
.laws-page__disclaimer {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Globe page */
.globe-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}
.globe-page__header {
  width: 100%;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.globe-page__title {
  width: 100%;
  max-width: 32rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  margin: 0 auto;
  margin-bottom: 0.5rem;
}
.globe-page__subtitle {
  color: var(--text-muted);
}
.globe-page__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* State browse page */
.state-browse-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.state-browse-page__header-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.state-browse-page__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}
.state-browse-page__subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.state-browse-page__action-row {
  display: flex;
  margin-bottom: 0;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.state-browse-page__cities-section {
  margin: 2.5rem 0;
}
.state-browse-page__cities-list-wrap {
  width: 100%;
  margin: 0 auto;
}
.state-browse-page__select-maps-wrap {
  margin: 2.5rem 0;
  text-align: center;
}

/* Additional page sections */
.laws-page__info-box {
  max-width: 48rem;
  margin: 0 auto 2rem;
}
.laws-page__section-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.laws-page__info-text {
  line-height: 1.7;
}
.laws-page__status-guide {
  margin-bottom: 2rem;
}
.laws-page__entries {
  list-style: none;
  margin-bottom: 3rem;
  padding: 0;
}
.laws-page__contribute-box {
  width: fit-content;
  margin: 0 auto 2rem;
}
.laws-page__search-wrapper {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto 2rem;
}
.laws-page__maps-wrapper {
  width: fit-content;
  margin: 0 auto 2rem;
}
.laws-page__ad-box {
  max-width: 24rem;
  margin: 1.5rem auto 2.5rem;
}

.globe-page__search-wrapper {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto 2rem;
}
.globe-page__maps-wrapper {
  width: fit-content;
  margin: 0 auto 2rem;
}
.globe-page__rotator {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto 1.5rem;
}
.globe-page__description {
  max-width: 36rem;
  margin: 0 auto 2rem;
  text-align: center;
  line-height: 1.7;
}
.globe-page__contribute-box {
  width: fit-content;
  margin: 0 auto 2rem;
}
.globe-page__form-wrapper {
  max-width: 24rem;
  margin: 1.5rem auto 2.5rem;
}
.globe-page__ad-box {
  width: fit-content;
  margin: 0 auto 3rem;
}

/* 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__share { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.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; } }

/* City browse page */
.city-browse-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.city-browse-page__header-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.city-browse-page__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
}
.city-browse-page__subtitle {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.city-browse-page__action-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.city-browse-page__listings {
  margin: 2.5rem 0;
}
.city-browse-page__listings-count {
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.city-browse-page__listings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.city-browse-page__select-maps-wrap {
  margin: 2.5rem 0;
  text-align: center;
}

/* Country browse page */
.country-browse-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.country-browse-page__header-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.country-browse-page__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}
.country-browse-page__subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.country-browse-page__action-row {
  display: flex;
  margin-bottom: 0;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.country-browse-page__states-section {
  margin: 2.5rem 0;
}
.country-browse-page__states-list-wrap {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.country-browse-page__select-maps-wrap {
  margin: 2.5rem 0;
  text-align: center;
}

/* 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; }

/* Latest listings page */
.latest-listings-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1rem 5rem;
}
.latest-listings-page__title {
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}
.latest-listings-page__groups {
  width: 100%;
}
.latest-listings-page__group {
  margin-bottom: 2rem;
}
.latest-listings-page__date-heading {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.latest-listings-page__group-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.latest-listings-page__list {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.latest-listings-page__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.latest-listings-page__link {
  color: var(--accent-prominent);
  font-weight: 500;
  text-decoration: none;
}
.latest-listings-page__link:hover {
  text-decoration: underline;
}
.latest-listings-page__location {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* 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;
}

/* Listing detail page sections */
.listing-section-spacer {
  margin-bottom: 2rem;
}
.listing-related-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.listing-tip-wrapper {
  max-width: 28rem;
  margin: 0 auto;
}
.listing-tip-alt-link {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  margin-top: 1rem;
  color: var(--accent-prominent);
  text-decoration: none;
}
.listing-tip-alt-link:hover {
  text-decoration: underline;
}
.listing-contribute-section {
  margin-top: 2rem;
}
.listing-ads-section {
  margin-bottom: 2rem;
}
.listing-blog-section {
  width: 100%;
  margin: 2.5rem 0;
  padding: 0 1rem;
}

/* ============================================================================
   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;
}

/* ---- Suggest Form - Semantic BEM ---- */
.suggest-form__section {
  margin-bottom: 2rem;
}

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

.suggest-form__field-full {
  grid-column: 1;
}
@media (min-width: 1024px) {
  .suggest-form__field-full {
    grid-column: span 2;
  }
}

.suggest-form__animals {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.suggest-form__animal-extras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 640px) {
  .suggest-form__animal-extras { grid-template-columns: repeat(3, 1fr); }
}

.suggest-form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.suggest-form__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.suggest-form__actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ---- 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;
}

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

/* Icon link styling */
.icon-link {
  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);
}

/* Width 100% utility */
.w-full {
  width: 100%;
}

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

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

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

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

.text--bold {
  font-weight: 600;
}

.text--bolder {
  font-weight: 700;
}

/* Heading utility */
.heading--lg {
  font-size: 1.875rem;
  margin-bottom: 1rem;
}

.heading--sm {
  font-size: 1.5rem;
}

/* Form section heading */
.form-section__heading {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Button/control container */
.control-container {
  width: 70%;
  margin: 1rem 0;
}

/* Hero section wrapper */
.hero__wrapper {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  text-align: center;
}

/* Hero title */
.hero__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* Flex centering with margin */
.flex-center {
  display: flex;
  justify-content: center;
}

.margin-bottom {
  margin-bottom: 1rem;
}

.margin-top-sm {
  margin-top: 0.5rem;
}

/* Product category headings */
.product-category__heading {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Flex wrap layout with gap */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.flex-wrap--spaced {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.flex-wrap--large-spaced {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.flex-wrap--padded {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Space-between flex container */
.flex-spacer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  margin: 1rem 0;
}

/* Table cell styling */
.table-cell {
  display: flex;
  align-items: center;
}

/* Badge/status indicator */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Status badge with flex icon */
.status__icon {
  flex-shrink: 0;
}

/* ============================================================
   PHASE 3: Inline Styles → BEM Classes Conversion
   Lines 6954-7150 (NEW CSS SECTION)
   Converts 90 inline style attributes across 20 EJS files
   ============================================================ */

/* --- 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--muted {
  color: var(--text-muted);
}

.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 Styling --- */
.map-page__header {
  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__info {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.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--lg-title {
  font-size: 1.5rem;
  font-weight: 600;
  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;
}

/* --- Flex & Layout --- */
.flex-center--with-margin {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.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;
}

/* --- Gallery & Images --- */
.image-gallery--fixed-height {
  height: 350px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* --- 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;
}

.products-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

/* ============================================================================
   AUTH PAGE — Login card
   ========================================================================== */
.auth-page {
  min-height: 70vh;
  padding: 3rem 1rem;
}
.auth-card {
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.5rem);
  padding: 2rem 2rem 2.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
[data-theme="dark"]   .auth-card { background: #1c2a3a; }
[data-theme="jungle"] .auth-card { background: #3d2d21; }
.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.auth-form .form-group {
  margin-bottom: 1rem;
}
.auth-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.auth-form .input-text {
  width: 100%;
  box-sizing: border-box;
}
.auth-form .btn-primary {
  width: 100%;
  margin-top: 1.25rem;
}

/* Password show/hide wrapper */
.auth-form__pw-wrap {
  position: relative;
}
.auth-form__pw-wrap .input-text {
  padding-right: 2.75rem;
}
.auth-form__pw-toggle {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem;
  line-height: 1;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}
.auth-form__pw-toggle:hover { color: var(--text); }

/* Inline alert for login errors */
.alert--error {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 40%, transparent);
  border-radius: var(--radius, 0.375rem);
  color: #b91c1c;
  font-size: 0.875rem;
}
[data-theme="dark"]   .alert--error { color: #fca5a5; }
[data-theme="jungle"] .alert--error { color: #fca5a5; }

/* Logout button styled as a nav-drawer drawer-link */
.drawer-link--logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
  color: var(--text-muted);
}
.drawer-link--logout:hover { color: var(--text); }