@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"), url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");
}

:root {
  --green: #0b6e3f;
  --green-dark: #08502e;
  --green-soft: #e7f4ec;
  --green-line: #a9d9bd;
  --gold: #fcd116;
  --gold-soft: #fff7d1;
  --gold-line: #f0e3a0;
  --red: #c8102e;
  --red-soft: #fdecee;
  --red-line: #f2b8c0;
  --blue: #1d5fa8;
  --blue-soft: #e8f0fa;
  --purple-soft: #ece9f8;
  --ink: #17201b;
  --ink-2: #4f5b55;
  --line: #e3e8e4;
  --field-line: #c9d3cd;
  --bg: #f8f7f2;
  --card: #ffffff;
  --surface-2: #eef2ef;
  --glass: rgba(255, 255, 255, .82);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(20, 40, 30, .05), 0 8px 24px rgba(20, 40, 30, .07);
  --shadow-lg: 0 18px 48px rgba(20, 40, 30, .14);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --green: #2fb874;
    --green-dark: #23a062;
    --green-soft: #12291d;
    --green-line: #1f4d33;
    --gold: #fcd116;
    --gold-soft: #2a2611;
    --gold-line: #4a4218;
    --red: #ef4b62;
    --red-soft: #2e1519;
    --red-line: #5b2630;
    --blue: #6aa6ef;
    --blue-soft: #14233a;
    --purple-soft: #231d3a;
    --ink: #e7eee9;
    --ink-2: #a5b4ac;
    --line: #26342c;
    --field-line: #34463b;
    --bg: #0c1511;
    --card: #131e18;
    --surface-2: #18251e;
    --glass: rgba(15, 24, 19, .82);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
  .btn, .btn:hover, .tabs a[aria-selected="true"], .head-icon { color: #06130c; }
  .btn-ghost, .btn-ghost:hover { color: var(--green); }
  .hero { background: radial-gradient(1200px 500px at 85% 10%, #0f5a37 0%, transparent 60%), linear-gradient(160deg, #0b3d26 0%, #06150e 100%) !important; }
  .stats { background: linear-gradient(135deg, #0b3d26, #082a1b) !important; }
  .site-footer { background: #070d0a; }
  .q-adopt .q-icon, .opt-adopt .po-icon { color: var(--gold); }
  img { filter: brightness(.95); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
a:hover { color: var(--green-dark); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h3 { font-weight: 700; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; }
.section { padding-top: 28px; padding-bottom: 28px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card); padding: 8px; z-index: 10; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Header */
.emergency-bar { background: var(--red); color: #fff; font-size: .9rem; padding: 6px 0; text-align: center; }
.emergency-bar a { color: #fff; font-weight: 700; }
.site-header { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 1.3rem; font-weight: 600; }
.brand b { color: var(--green); }
.logo-mark { width: 40px; height: 40px; }
.menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 3px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.main-nav a { text-decoration: none; color: var(--ink); padding: 8px 12px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
.main-nav a:hover, .main-nav a[aria-current] { background: var(--green-soft); color: var(--green-dark); }
.main-nav a.nav-cta { background: var(--red); color: #fff; margin-left: 6px; }
.main-nav a.nav-cta:hover { background: #a30d25; color: #fff; }

@media (max-width: 1080px) {
  .header-inner { flex-wrap: wrap; }
  /* Without JavaScript the menu stays visible as a scrollable row. */
  .main-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 8px; }
  .js .menu-btn { display: block; }
  .js .main-nav { display: none; }
  .js .nav-open .main-nav { display: flex; flex-direction: column; align-items: stretch; padding: 4px 0 16px; overflow: visible; }
  .main-nav a.nav-cta { margin: 8px 0 0; text-align: center; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--green); color: #fff; border: 2px solid var(--green); border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--green-dark); border-color: var(--line); }
.btn-ghost:hover { background: var(--green-soft); color: var(--green-dark); border-color: var(--green); }
.btn-small { padding: 6px 14px; font-size: .9rem; }
.btn-big { padding: 14px 28px; font-size: 1.05rem; width: 100%; }
.btn-lost, .btn-danger { background: var(--red); border-color: var(--red); }
.btn-lost:hover, .btn-danger:hover { background: #a30d25; border-color: #a30d25; }
.btn-found { background: var(--blue); border-color: var(--blue); }
.btn-found:hover { background: #154a85; border-color: #154a85; }
.btn-whatsapp { background: #1f9e55; border-color: #1f9e55; }
.btn-whatsapp:hover { background: #17803f; border-color: #17803f; }
.btn-facebook { background: #1877f2; border-color: #1877f2; }
.btn-facebook:hover { background: #0f5fcc; border-color: #0f5fcc; }
.linklike { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.actions, .contact-buttons, .admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.admin-actions form { margin: 0; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; padding: 48px 0 56px; }
.hero h1 { max-width: 760px; font-size: clamp(1.9rem, 5vw, 3rem); }
.hero .lead { max-width: 640px; font-size: 1.15rem; opacity: .95; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.quick-card { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 18px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); border-top: 5px solid var(--gold); transition: transform .15s; }
.quick-card:hover { transform: translateY(-2px); color: var(--ink); }
.quick-card strong { font-size: 1.1rem; }
.quick-card span:last-child { color: var(--ink-2); font-size: .92rem; }
.q-icon { font-size: 1.6rem; }
.q-lost { border-top-color: var(--red); }
.q-found { border-top-color: var(--blue); }
.q-adopt { border-top-color: var(--gold); }
.q-report { border-top-color: var(--ink); }
@media (max-width: 760px) { .quick { grid-template-columns: 1fr 1fr; } }

/* Page head */
.page-head { background: var(--green-soft); border-bottom: 1px solid var(--line); padding: 32px 0 24px; }
.page-head .lead { font-size: 1.1rem; color: var(--ink-2); max-width: 720px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.crumbs { margin-bottom: 12px; }
.crumbs a { text-decoration: none; }

/* Cards & grids */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.grid-articles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; }
a.card:hover { border-color: var(--green); color: var(--ink); }
.card-body { padding: 14px 16px 16px; }
.card-body h3 { margin-bottom: 4px; }
.card-media { position: relative; aspect-ratio: 1; background: var(--green-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .badge { position: absolute; top: 10px; left: 10px; }
.ph { width: 100%; height: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--green-soft); }
.meta { color: var(--ink-2); font-size: .92rem; margin: 0 0 2px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--ink); color: #fff; margin-right: 4px; }
.badge-lost { background: var(--red); }
.badge-found { background: var(--blue); }
.badge-adoption { background: var(--gold); color: var(--ink); }
.badge-happy { background: var(--green); }
.badge-featured { background: var(--gold); color: var(--ink); }
.badge-emergency { background: var(--red); }
.empty { background: var(--card); border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-2); }
.article-card p { color: var(--ink-2); margin: 0; }
.topic { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green); margin-bottom: 6px; }

.biz-card { flex-direction: row; align-items: center; gap: 4px; padding-left: 14px; }
.biz-card.featured { border: 2px solid var(--gold); }
.biz-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.biz-logo.big { width: 96px; height: 96px; }
.biz-logo-ph { display: flex; align-items: center; justify-content: center; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 1.6rem; }
.biz-head { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }

/* Filters & tabs */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.filters label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; color: var(--ink-2); gap: 4px; }
.filters select, .filters input { min-width: 180px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { display: inline-block; padding: 8px 16px; border-radius: 999px; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.tabs a::first-letter { text-transform: uppercase; }
.tabs a[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.pager { display: flex; justify-content: space-between; margin-top: 20px; }

/* Forms */
.form h2 { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.form h2:first-of-type { border-top: 0; padding-top: 0; }
.field { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.field > label, .field legend { display: block; font-weight: 600; margin-bottom: 4px; }
.opt { font-weight: 400; color: var(--ink-2); font-size: .9em; }
.hint { color: var(--ink-2); font-size: .92rem; margin: 0 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input:not([type]), select, textarea {
  width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--field-line); border-radius: 10px; background: var(--card); color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(11, 110, 63, .15); }
input[type=file] { font: inherit; padding: 10px; border: 1.5px dashed var(--field-line); border-radius: 10px; width: 100%; background: var(--card); }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choice { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--green); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.has-error input, .has-error select, .has-error textarea { border-color: var(--red); }
.error-text { color: var(--red); font-size: .92rem; margin: 4px 0 0; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Alerts & notices */
.alert { border-radius: var(--radius); padding: 16px 18px; margin: 0 0 20px; background: var(--gold-soft); border: 1px solid var(--gold-line); }
.alert h2 { font-size: 1.15rem; }
.alert ul { margin: 0; padding-left: 20px; }
.alert-error { background: var(--red-soft); border-color: var(--red-line); }
.alert-warn { background: var(--red-soft); border-color: var(--red-line); }
.alert-happy { background: var(--green-soft); border-color: var(--green-line); }
.alert-key { background: var(--card); border: 2px solid var(--green); }
.notice { background: var(--blue-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; }
.notice p:last-child { margin: 0; }
.copy-row { display: flex; gap: 8px; margin-bottom: 10px; }
.copy-row input { font-size: .9rem; }
.ref-code { font-size: 1.8rem; font-weight: 800; letter-spacing: .08em; color: var(--green-dark); margin: 0 0 8px; font-family: ui-monospace, Consolas, monospace; }

/* Detail */
.detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }
.gallery-main { width: 100%; border-radius: var(--radius); max-height: 560px; object-fit: contain; background: var(--surface-2); }
.gallery .ph { border-radius: var(--radius); min-height: 320px; }
.thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.thumbs button { border: 2px solid transparent; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; width: 72px; height: 72px; background: none; }
.thumbs button[aria-current="true"] { border-color: var(--green); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.facts { margin: 16px 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-2); font-weight: 600; }
.facts dd { margin: 0; }
.contact-box { background: var(--card); border: 2px solid var(--green); border-radius: var(--radius); padding: 18px; margin: 18px 0; }
.contact-box h2 { font-size: 1.2rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.share span { font-weight: 600; color: var(--ink-2); }
.detail-body { max-width: 760px; margin-top: 28px; }
.updates { list-style: none; padding: 0; }
.updates li { border-left: 3px solid var(--gold); padding: 4px 0 4px 14px; margin-bottom: 14px; }
.updates time { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.flag { margin-top: 32px; color: var(--ink-2); max-width: 520px; }
.flag summary { cursor: pointer; font-size: .92rem; }
.flag form { margin-top: 12px; }
.manage-block { padding: 18px 0; border-top: 1px solid var(--line); }
.manage-block.danger h2 { color: var(--red); font-size: 1.05rem; }

/* Band, tips, articles */
.band { background: var(--gold-soft); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); padding: 36px 0; margin: 20px 0; }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .band-grid { grid-template-columns: 1fr; } }
.steps { padding-left: 22px; }
.steps li { margin-bottom: 10px; }
.coming { text-align: center; max-width: 760px; }
.article h2 { margin-top: 1.4em; }
.article ul, .article ol, .prose ul, .prose ol { padding-left: 22px; }
.article li, .prose li { margin-bottom: 6px; }
.review-note { background: var(--blue-soft); padding: 10px 14px; border-radius: 10px; font-size: .92rem; }
.first-aid { display: grid; gap: 10px; }
.aid { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
.aid summary { cursor: pointer; font-weight: 700; padding: 14px 0; font-size: 1.1rem; }
.aid ol { margin-top: 0; padding-bottom: 12px; }
.clinic-list { display: grid; gap: 10px; }
.clinic { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--red); border-radius: var(--radius); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.clinic h3 { margin: 0; }

/* Footer */
.site-footer { background: #13201a; color: #cfd8d3; margin-top: 48px; padding: 40px 0 20px; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; display: block; padding: 3px 0; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer h2 { font-size: 1rem; color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.brand-footer { color: #fff !important; display: flex !important; margin-bottom: 10px; }
.brand-footer b { color: var(--gold); }
.footer-base { margin-top: 28px; padding-top: 16px; border-top: 1px solid #2a3a32; font-size: .85rem; color: #8fa198; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Admin */
.admin-bar { background: var(--ink); color: #fff; font-size: .9rem; }
.admin-bar .wrap { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; padding-bottom: 8px; align-items: center; }
.admin-bar a, .admin-bar .linklike { color: #fff; }
.admin-bar form { margin: 0 0 0 auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.tile strong { font-size: 2rem; }
.tile-hot { border: 2px solid var(--red); }
.table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .93rem; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--green-soft); }
.mini { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.admin-photos, .evidence { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.admin-photos img { width: 160px; height: 160px; object-fit: cover; border-radius: 10px; }
.evidence img, .evidence video { max-width: 360px; max-height: 360px; border-radius: 10px; }
.note { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.note.muted { opacity: .6; }
.pill { display: inline-block; background: var(--green-soft); border-radius: 999px; padding: 4px 12px; margin: 0 6px 6px 0; font-size: .9rem; }
.admin-note { font-size: .9rem; }
.admin-page { overflow-x: auto; }

/* ===================================================================
   Visual layer: icons, illustrations, motion, phone layout
   =================================================================== */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.btn { transition: transform .15s ease, background-color .2s, border-color .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-lg { padding: 14px 24px; font-size: 1.05rem; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 6px 18px rgba(252, 209, 22, .35); }
.btn-gold:hover { background: #ffdc3d; border-color: #ffdc3d; color: var(--ink); transform: translateY(-2px); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; transform: translateY(-2px); }

/* Header */
.site-header { background: var(--glass); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(20, 40, 30, .08); }
.brand .logo-mark { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }
.main-nav a { display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s, color .2s; }
.main-nav a .icon { opacity: .75; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 48px 0 0; background: radial-gradient(1200px 500px at 85% 10%, #13915a 0%, transparent 60%), linear-gradient(160deg, #0b6e3f 0%, #074428 100%); }
.hero-bg span { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .35; animation: drift 18s ease-in-out infinite alternate; }
.hero-bg span:nth-child(1) { width: 320px; height: 320px; background: var(--gold); top: -120px; left: -80px; }
.hero-bg span:nth-child(2) { width: 260px; height: 260px; background: #2dd4a0; bottom: -60px; left: 40%; animation-duration: 22s; }
.hero-bg span:nth-child(3) { width: 200px; height: 200px; background: #ff6b81; top: 30%; right: -60px; opacity: .2; animation-duration: 26s; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08; margin-bottom: .45em; }
.hero h1 em { font-style: normal; color: var(--gold); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .12em; border-radius: 99px; background: rgba(252, 209, 22, .45); transform-origin: left; animation: underline 1s .9s both cubic-bezier(.6, 0, .2, 1); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; margin-bottom: 18px; }
.eyebrow .icon { color: #ff8fa0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.hero-copy > * { animation: fadeUp .7s both cubic-bezier(.2, .7, .2, 1); }
.hero-copy > *:nth-child(2) { animation-delay: .1s; }
.hero-copy > *:nth-child(3) { animation-delay: .2s; }
.hero-copy > *:nth-child(4) { animation-delay: .3s; }
.hero-visual { animation: popIn .9s .2s both cubic-bezier(.3, 1.4, .5, 1); }
.hero-art { width: 100%; max-width: 470px; margin: 0 auto; overflow: visible; }
.hero-art * { transform-box: fill-box; }
.tail-wag { transform-origin: 0% 100%; animation: wag .5s ease-in-out infinite alternate; }
.tail-sway { transform-origin: 0% 50%; animation: sway 2.6s ease-in-out infinite alternate; }
.blink { transform-origin: center; animation: blink 5s infinite; }
.blink-late { animation-delay: 1.7s; }
.dog-head { transform-origin: 50% 90%; animation: tilt 6s ease-in-out infinite; }
.cat-head { transform-origin: 50% 90%; animation: tilt 7s 1s ease-in-out infinite reverse; }
.tongue { transform-origin: 50% 0%; animation: pant .35s ease-in-out infinite alternate; }
.tag-swing { transform-origin: 50% 0%; animation: swing 1.4s ease-in-out infinite alternate; }
.float-heart { transform-origin: center; animation: floatHeart 3.2s ease-in-out infinite; }
.sun { transform-origin: center; animation: spin 40s linear infinite; }
.wave { display: block; width: 100%; height: 56px; color: var(--bg); margin-top: 8px; position: relative; }

/* Quick actions overlap the wave */
.quick-wrap { position: relative; margin-top: -40px; z-index: 2; }
.quick { margin-top: 0; }
.quick-card { border-top: 0; align-items: flex-start; gap: 6px; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s; }
.quick-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(20, 40, 30, .14); }
.q-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 4px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.quick-card:hover .q-icon { transform: rotate(-8deg) scale(1.1); }
.q-lost .q-icon { background: var(--red-soft); color: var(--red); }
.q-adopt .q-icon { background: var(--gold-soft); color: #b8860b; }
.q-report .q-icon { background: var(--blue-soft); color: var(--blue); }
.q-help .q-icon { background: var(--green-soft); color: var(--green); }

/* Section heads */
.section-head h2 { display: flex; align-items: center; gap: 10px; }
.section-head h2 .icon { color: var(--green); background: var(--green-soft); border-radius: 10px; padding: 6px; width: 36px; height: 36px; }
.section-head a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.section-head a .icon { transition: transform .2s; }
.section-head a:hover .icon { transform: translateX(4px); }

/* Cards */
.card { transition: transform .25s cubic-bezier(.3, 1.3, .5, 1), box-shadow .25s, border-color .2s; }
a.card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(20, 40, 30, .12); }
.card-media { overflow: hidden; }
.card-media img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.card:hover .card-media img { transform: scale(1.06); }
.meta.where { display: flex; align-items: center; gap: 4px; }
.meta.where .icon { color: var(--red); }
.ph { flex-direction: column; gap: 10px; font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.ph .pet-art { width: 55%; max-width: 180px; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
a.card:hover .ph .pet-art { transform: rotate(-6deg) scale(1.05); }
.gallery .ph .pet-art { max-width: 220px; }
.empty { display: flex; align-items: center; gap: 20px; text-align: left; border-style: solid; border-width: 1px; }
.empty .pet-art { width: 84px; flex: none; animation: bob 3s ease-in-out infinite; }
.empty p { margin: 0 0 4px; }

/* Rails: sideways swipe on phones */
@media (max-width: 760px) {
  .rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 16px; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  .grid-articles.rail { grid-auto-columns: 82%; }
}

/* Stats */
.stats { background: linear-gradient(135deg, #0b6e3f, #0a5a35); color: #fff; padding: 34px 0; margin: 16px 0; position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .08) 2px, transparent 2px); background-size: 26px 26px; }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.stat strong { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat > span:last-child { opacity: .85; font-size: .95rem; }
.stat-icon { color: var(--gold); font-size: 1.5rem; margin-bottom: 6px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

/* How it works */
.how h2 { text-align: center; }
.how-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.how-steps li > .icon { width: 34px; height: 34px; color: var(--green); }
.how-steps li span:last-child { color: var(--ink-2); }
.how-num { position: absolute; top: -14px; right: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 800; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(252, 209, 22, .5); }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; gap: 22px; } }

/* Band cards */
.band { background: linear-gradient(180deg, var(--gold-soft), var(--bg)); }
.band-card { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--gold-line); }
.band-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 1.6rem; margin-bottom: 12px; }
.band-danger .band-icon { background: var(--red-soft); color: var(--red); animation: pulse 2.4s ease-in-out infinite; }

/* Notices & coming soon */
.notice-cta { display: flex; gap: 14px; align-items: center; }
.notice-cta > .icon { width: 40px; height: 40px; color: var(--blue); }
.coming { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px 20px; box-shadow: var(--shadow); }
.coming-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.coming-badge .icon { animation: spin 6s linear infinite; }
.soon-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 1.4rem; margin-bottom: 10px; }

/* Page heads */
.page-head { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-soft) 0%, var(--bg) 60%, var(--gold-soft) 140%); }
.page-head .wrap { position: relative; }
.page-head h1, .page-head .lead, .page-head .actions { position: relative; animation: fadeUp .6s both cubic-bezier(.2, .7, .2, 1); }
.page-head .lead { animation-delay: .08s; }
.page-head .actions { animation-delay: .16s; }
.head-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--green); color: #fff; font-size: 1.5rem; margin-bottom: 12px; box-shadow: 0 8px 18px rgba(11, 110, 63, .3); animation: popIn .6s both cubic-bezier(.3, 1.6, .5, 1); }
.paw-trail { position: absolute; right: 0; top: 50%; width: 260px; transform: translateY(-50%) rotate(-12deg); color: var(--green); opacity: .13; pointer-events: none; }
.paw-trail .paw { opacity: 0; animation: pawStep 4s infinite; }
.paw-trail .p2 { animation-delay: .4s; }
.paw-trail .p3 { animation-delay: .8s; }
.paw-trail .p4 { animation-delay: 1.2s; }
.paw-trail .p5 { animation-delay: 1.6s; }
@media (max-width: 760px) { .paw-trail { width: 160px; top: 24px; transform: rotate(-12deg); } }

/* Article cards */
.article-art { height: 92px; display: grid; place-items: center; font-size: 2.6rem; color: #fff; background: linear-gradient(135deg, var(--green), #13915a); }
.article-art .icon { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
a.article-card:hover .article-art .icon { transform: scale(1.2) rotate(-8deg); }
.art-sun, .art-alert { background: linear-gradient(135deg, #f59e0b, #fcd116); }
.art-drop { background: linear-gradient(135deg, var(--blue), #3b82c4); }
.art-bug, .art-aid { background: linear-gradient(135deg, var(--red), #e8475f); }
.art-heart { background: linear-gradient(135deg, #db2777, #f472b6); }
.art-syringe, .art-shield { background: linear-gradient(135deg, #0b6e3f, #2dd4a0); }
.art-home { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

/* First aid */
.aid summary { display: flex; align-items: center; gap: 12px; list-style: none; }
.aid summary::-webkit-details-marker { display: none; }
.aid summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; color: var(--ink-2); transition: transform .25s; }
.aid[open] summary::after { transform: rotate(45deg); }
.aid-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); flex: none; }
.aid[open] ol { animation: fadeUp .35s both; }

/* Post chooser */
.post-options { display: grid; gap: 12px; }
.post-option { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.post-option:hover { transform: translateX(4px); border-color: var(--green); color: var(--ink); }
.po-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.po-text { display: flex; flex-direction: column; }
.po-text span { color: var(--ink-2); font-size: .92rem; }
.po-arrow { margin-left: auto; color: var(--ink-2); transition: transform .2s; }
.post-option:hover .po-arrow { transform: translateX(4px); color: var(--green); }
.opt-lost .po-icon { background: var(--red-soft); color: var(--red); }
.opt-found .po-icon { background: var(--blue-soft); color: var(--blue); }
.opt-adopt .po-icon { background: var(--gold-soft); color: #b8860b; }
.opt-report .po-icon { background: var(--purple-soft); color: #5b3fb5; }
.opt-biz .po-icon { background: var(--green-soft); color: var(--green); }

/* Forms: chips, drop zone, previews */
.choice-row .choice { border: 1.5px solid var(--field-line); border-radius: 999px; padding: 8px 16px 8px 12px; background: var(--card); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choice-row .choice:hover { border-color: var(--green); }
.choice-row .choice:has(input:checked) { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 3px rgba(11, 110, 63, .12); font-weight: 600; }
.field { position: relative; }
.field > label.dropzone, .dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed var(--field-line); border-radius: var(--radius); background: var(--card); color: var(--ink-2); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; font-weight: 400 !important; }
.dropzone .icon { width: 36px; height: 36px; color: var(--green); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.dropzone strong { color: var(--ink); }
.dropzone:hover { border-color: var(--green); background: var(--green-soft); }
.dropzone:hover .icon { transform: scale(1.12) rotate(-6deg); }
.field:focus-within .dropzone { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 110, 63, .15); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.photo-preview figure { margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--green-soft); animation: popIn .35s both cubic-bezier(.3, 1.6, .5, 1); position: relative; }
.photo-preview img, .photo-preview video { width: 100%; height: 100%; object-fit: cover; }
.photo-preview figcaption { position: absolute; inset: auto 0 0 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Scroll reveal (only when JavaScript runs) */
.js .reveal { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }

/* Phone tab bar */
.tabbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .emergency-bar { display: none; }
  .main-nav a.nav-cta { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(20, 40, 30, .08); animation: slideUp .5s .3s both cubic-bezier(.2, .7, .2, 1); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--ink-2); font-size: .68rem; font-weight: 600; padding: 4px 0; }
  .tabbar a .icon { width: 24px; height: 24px; transition: transform .2s; }
  .tabbar a[aria-current] { color: var(--green); }
  .tabbar a[aria-current] .icon { transform: translateY(-2px); }
  .tabbar a:active .icon { transform: scale(.9); }
  .tabbar .tab-post .icon { width: 52px; height: 52px; padding: 13px; margin-top: -26px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 8px 18px rgba(200, 16, 46, .4); border: 4px solid var(--card); animation: pulseRing 2.8s ease-out infinite; }
  .tabbar a[href="/emergency"] { color: var(--red); }
  .js .nav-open .main-nav { animation: dropDown .25s both cubic-bezier(.2, .7, .2, 1); }
  .hero { padding-top: 24px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-visual { order: -1; margin: 0 auto -6px; width: 72%; max-width: 300px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .quick-wrap { margin-top: -28px; }
  .quick { gap: 10px; }
  .quick-card { padding: 14px; }
  .quick-card strong { font-size: 1rem; }
  .facts div { grid-template-columns: 120px 1fr; }
  .contact-buttons .btn { flex: 1 1 auto; }
  .btn-big { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 8px 20px rgba(11, 110, 63, .3); }
}

/* Keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dropDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 30px) scale(1.15); } }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes sway { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
@keyframes pant { from { transform: scaleY(.85); } to { transform: scaleY(1.1); } }
@keyframes swing { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes floatHeart { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pulseRing { 0% { box-shadow: 0 8px 18px rgba(200, 16, 46, .4), 0 0 0 0 rgba(200, 16, 46, .45); } 70%, 100% { box-shadow: 0 8px 18px rgba(200, 16, 46, .4), 0 0 0 14px rgba(200, 16, 46, 0); } }
@keyframes pawStep { 0% { opacity: 0; } 10%, 60% { opacity: 1; } 80%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .paw-trail .paw { opacity: 1; }
}

/* Keep the desktop header on one line */
.brand { white-space: nowrap; }
@media (max-width: 1180px) {
  .main-nav a .icon { display: none; }
  .main-nav a { padding: 8px 10px; }
  .main-nav a.nav-cta .icon { display: inline; }
}

/* ===================================================================
   App shell: explore menu, accounts, dashboard, modern polish
   =================================================================== */
.header-inner { min-height: 68px; }
.main-nav { gap: 2px; }
.main-nav a, .explore-btn { border-radius: 12px; }
.explore { position: relative; }
.explore-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-weight: 500; color: var(--ink); padding: 8px 12px; cursor: pointer; }
.explore-btn:hover, .explore.open .explore-btn { background: var(--green-soft); color: var(--green-dark); }
.explore-btn .icon { opacity: .75; }
.chev { width: 14px; height: 14px; transition: transform .2s; }
.explore.open .chev { transform: rotate(180deg); }
.mega { position: absolute; right: -120px; top: calc(100% + 10px); width: min(760px, 92vw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 30; }
.explore.open .mega, .explore:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 4px 8px 6px; font-weight: 700; }
.mega a { display: flex !important; gap: 10px; align-items: flex-start; padding: 8px !important; border-radius: 12px; color: var(--ink); text-decoration: none; white-space: normal !important; }
.mega a:hover { background: var(--green-soft); }
.mega a strong { display: block; font-size: .95rem; }
.mega a small { display: block; color: var(--ink-2); font-size: .8rem; line-height: 1.3; }
.mega-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); flex: none; }
.mega a .icon { display: inline !important; opacity: 1 !important; }
.nav-account, .nav-login { font-weight: 600 !important; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #2dd4a0); color: #fff; font-weight: 800; font-size: .85rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; box-shadow: 0 8px 20px rgba(11, 110, 63, .3); flex: none; }
.emergency-bar .icon { vertical-align: -0.2em; }

@media (max-width: 1080px) {
  .explore { width: 100%; }
  .explore-btn { width: 100%; justify-content: flex-start; padding: 10px 12px; }
  .mega { position: static; width: auto; grid-template-columns: 1fr; padding: 4px 0 8px; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .explore.open .mega { display: grid; }
}

/* Cards and surfaces */
.card { border-radius: var(--radius); }
.form-card { padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.form-card h2 { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.form-foot { text-align: center; margin: 16px 0 0; color: var(--ink-2); }
.choice-block { display: flex !important; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; margin-bottom: 10px; cursor: pointer; }
.choice-block:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.choice-block input { margin-top: 3px; }
.badge-verified { background: var(--green-soft); color: var(--green); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
.btn-big-inline { padding: 14px 24px; font-size: 1.05rem; }

/* Save (heart) button */
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.save-form { margin: 0; }
.save-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; transition: transform .15s, color .2s, border-color .2s; }
.save-btn:hover { border-color: var(--red); color: var(--red); }
.save-btn.is-saved { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.save-btn.is-saved .icon { fill: currentColor; }
.save-btn:active { transform: scale(.94); }
.save-btn.pop .icon { animation: heartPop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Dashboard */
.dash-head { background: linear-gradient(135deg, var(--green-soft), var(--bg) 70%); border-bottom: 1px solid var(--line); padding: 28px 0; }
.dash-head .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; }
.dash-head .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dash-head-actions { margin-left: auto; display: flex; gap: 8px; }
.dash-head-actions form { margin: 0; }
.dash-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; scrollbar-width: none; }
.dash-nav::-webkit-scrollbar { display: none; }
.dash-nav a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; }
.dash-nav a:hover { border-color: var(--green); }
.dash-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 18px; }
.dash-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); scroll-margin-top: 90px; min-width: 0; }
.dash-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.dash-panel h2 .icon { color: var(--green); }
.dash-list { list-style: none; padding: 0; margin: 0 0 12px; }
.dash-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dash-list li:last-child { border-bottom: 0; }
.dash-actions { margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.dash-panel .rail { margin: 0; padding: 0 0 8px; }

/* Alerts page and install prompt */
.alert-box { display: flex; gap: 16px; align-items: flex-start; }
.alert-box .icon { width: 40px; height: 40px; color: var(--green); flex: none; }
.install-card { position: fixed; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 25; display: none; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-lg); animation: fadeUp .4s both; }
.install-card.show { display: flex; }
.install-card p { margin: 0; flex: 1; font-size: .92rem; }
@media (min-width: 761px) { .install-card { left: auto; right: 24px; bottom: 24px; max-width: 380px; } }

/* Modern polish */
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.btn { border-radius: 14px; font-weight: 700; }
.btn-small { border-radius: 12px; }
.badge { border-radius: 8px; letter-spacing: .02em; }
input, select, textarea { border-radius: 12px !important; }
.section-head h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
::selection { background: var(--gold); color: #17201b; }

/* Home additions */
.quick { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .quick { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .quick { grid-template-columns: 1fr 1fr; } }
.q-services .q-icon { background: var(--purple-soft); color: #6d4fd0; }
.q-shop .q-icon { background: var(--gold-soft); color: #b8860b; }
.match-cta { margin: 14px 0 0; }
.app-cta { background: linear-gradient(135deg, var(--green-soft), var(--gold-soft)); border-radius: 24px; padding: 32px 24px; }
.app-cta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.app-cta p { max-width: 640px; color: var(--ink-2); }

/* Sample data notice */
.sample-bar { background: var(--gold-soft); border-bottom: 1px solid var(--gold-line); color: var(--ink); font-size: .85rem; padding: 6px 0; text-align: center; }
.sample-bar .icon { color: #b8860b; vertical-align: -0.2em; }

/* community.css */
/* Community features: events, jobs, deals, welfare news, advertising and sponsor slots.
   Colours come only from the site.css variables so dark mode follows the core theme.
   Text on solid accent colours uses var(--card): accents get lighter in dark mode, cards darker. */

/* ---------- Shared ---------- */
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.cm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; background: var(--green-soft); color: var(--green-dark); white-space: nowrap; }
.cm-chip .icon { width: 1em; height: 1em; }
.cm-chip-gold { background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-line, var(--gold)); }
.cm-status-pending { background: var(--gold-soft); color: var(--ink); }
.cm-status-published { background: var(--green-soft); color: var(--green-dark); }
.cm-status-hidden { background: var(--red-soft); color: var(--red); }
.cm-status-closed { background: var(--surface-2, var(--line)); color: var(--ink-2); }
.cm-card h3 { overflow-wrap: anywhere; }
.cm-form input[type=datetime-local], .cm-form input[type=url], .cm-form input[type=number] {
  width: 100%; min-height: 44px; font: inherit; padding: 10px 12px; border: 1.5px solid var(--field-line, var(--line)); border-radius: 10px; background: var(--card); color: var(--ink);
}
.cm-form input[type=datetime-local]:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-soft); }
.detail-info h1 { overflow-wrap: anywhere; }

/* ---------- Events ---------- */
.ev-list { display: grid; gap: 12px; }
.ev-card { flex-direction: row; align-items: stretch; min-height: 104px; }
.ev-card .card-body { flex: 1; min-width: 0; padding: 12px 14px; }
.ev-card h3 { font-size: 1.05rem; }
.ev-card .meta, .job-card .meta { display: flex; align-items: flex-start; gap: 4px; }
.ev-card .meta .icon, .job-card .meta .icon { color: var(--green); flex: none; margin-top: .22em; }
.ev-card.is-promoted { border: 2px solid var(--gold); }
.ev-date { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: var(--green-soft); color: var(--green-dark); text-align: center; line-height: 1.1; border-right: 1px solid var(--line); }
.ev-date strong { font-size: 1.7rem; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.ev-dow, .ev-mon { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ev-thumb { display: none; flex: none; width: 92px; object-fit: cover; }
.ev-month { margin-top: 26px; }
.ev-month-title { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; color: var(--green-dark); margin-bottom: 12px; }
.ev-month-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ev-promoted { background: var(--gold-soft); border: 1px solid var(--gold-line, var(--line)); border-radius: var(--radius); padding: 14px; margin-bottom: 8px; }
.ev-promoted .section-head h2 { font-size: 1.1rem; }
.ev-past .ev-date { background: var(--surface-2, var(--line)); color: var(--ink-2); }
.ev-past .ev-date strong { color: var(--ink-2); }

/* Type colours on chips and the detail-page poster */
.ev-type-adoption-drive { background: var(--gold-soft); color: var(--ink); }
.ev-type-vaccination { background: var(--blue-soft); color: var(--blue); }
.ev-type-spay-neuter { background: var(--green-soft); color: var(--green-dark); }
.ev-type-fundraiser { background: var(--red-soft); color: var(--red); }
.ev-type-workshop { background: var(--purple-soft, var(--blue-soft)); color: var(--ink); }
.ev-type-meetup { background: var(--green-soft); color: var(--green); }
.ev-type-other { background: var(--surface-2, var(--line)); color: var(--ink-2); }

.ev-poster, .deal-poster { aspect-ratio: 4 / 3; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 20px; background: linear-gradient(140deg, var(--green-soft), var(--card) 70%, var(--gold-soft)); border: 1px solid var(--line); color: var(--green-dark); }
.ev-poster .icon, .deal-poster .icon { width: 44px; height: 44px; color: var(--green); }
.ev-poster strong { font-size: clamp(3.5rem, 14vw, 6rem); line-height: 1; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.ev-poster span { font-weight: 700; font-size: 1.1rem; }
.ev-poster-adoption-drive, .ev-poster-meetup { background: linear-gradient(140deg, var(--gold-soft), var(--card) 75%); }
.ev-poster-vaccination { background: linear-gradient(140deg, var(--blue-soft), var(--card) 75%); }
.ev-poster-fundraiser { background: linear-gradient(140deg, var(--red-soft), var(--card) 75%); }
.ev-detail .actions { margin-top: 4px; }

/* ---------- Jobs ---------- */
.job-list { display: grid; gap: 12px; }
.job-card .card-body { padding: 14px 16px; }
.job-card.is-featured { border: 2px solid var(--gold); }
.job-employer { font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.job-employer-lg { font-size: 1.15rem; }
.job-type-full-time { background: var(--green-soft); color: var(--green-dark); }
.job-type-part-time { background: var(--blue-soft); color: var(--blue); }
.job-type-contract { background: var(--purple-soft, var(--blue-soft)); color: var(--ink); }
.job-type-volunteer { background: var(--gold-soft); color: var(--ink); }

/* ---------- Deals ---------- */
/* Phones: compact row cards (picture left). Wider screens: picture on top. */
.deal-card { flex-direction: row; }
.deal-card .deal-media { flex: none; width: 116px; min-height: 116px; aspect-ratio: auto; }
.deal-card .card-body { flex: 1; min-width: 0; }
.deal-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(140deg, var(--gold-soft), var(--green-soft)); color: var(--green); }
.deal-ph .icon { width: 40px; height: 40px; }
.deal-discount { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: var(--red); color: var(--card); font-weight: 800; font-size: .8rem; line-height: 1.25; text-align: center; box-shadow: var(--shadow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-card.is-featured { border: 2px solid var(--gold); }
.deal-discount-lg { display: inline-block; margin: 0 0 6px; padding: 4px 14px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-weight: 800; font-size: 1.25rem; }
.deal-poster strong { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.15; color: var(--red); overflow-wrap: anywhere; }
.coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0; padding: 12px 14px; border: 2px dashed var(--green); border-radius: var(--radius); background: var(--green-soft); }
.coupon-label { flex-basis: 100%; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-dark); }
.coupon-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .08em; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.coupon .btn { min-height: 44px; margin-left: auto; }

/* ---------- News ---------- */
.news-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-soft); }
.news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--green-soft), var(--blue-soft)); color: var(--green); }
.news-ph .icon { width: 44px; height: 44px; }
.news-card .card-body p { margin: 0; }
.news-hero { width: 100%; border-radius: var(--radius); margin: 8px 0 20px; max-height: 520px; object-fit: cover; }
.news-body { font-size: 1.05rem; }
.guidance { display: grid; gap: 14px; }
.guide-step { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.guide-step h2 { font-size: 1.15rem; margin-bottom: 8px; }
.guide-step ul { margin: 0; }
.guide-step p:last-child { margin-bottom: 0; }
.guide-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green-dark); font-weight: 800; }

/* ---------- Advertising ---------- */
.pkg-grid { display: grid; gap: 16px; margin-bottom: 14px; }
.pkg .card-body { display: flex; flex-direction: column; height: 100%; padding: 20px; }
.pkg h3 { font-size: 1.25rem; margin: 6px 0 4px; }
.pkg-highlight { border: 2px solid var(--green); background: linear-gradient(180deg, var(--green-soft), var(--card) 45%); }
.pkg-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center; flex: none; background: var(--green-soft); color: var(--green); font-size: 1.3rem; }
.pkg-price { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.pkg-price strong { font-size: 1.55rem; font-weight: 800; color: var(--green-dark); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pkg-price span { color: var(--ink-2); font-weight: 600; }
.pkg-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.pkg-points li { display: flex; gap: 8px; align-items: flex-start; }
.pkg-points .icon { color: var(--green); margin-top: .2em; }
.pkg-cta { margin-top: auto; min-height: 44px; }
.pkg-extras { display: grid; gap: 12px; margin-bottom: 12px; }
.pkg-extra { flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
.pkg-extra > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pkg-spots { margin-top: 10px; }
.pkg-steps { margin-top: 14px; }
.pkg-cta-band { text-align: center; background: linear-gradient(135deg, var(--green-soft), var(--gold-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 18px; }
.pkg-cta-band .actions { justify-content: center; }

/* ---------- Sponsor slots ---------- */
.sponsor-slot { margin: 0 0 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sponsor-label { display: inline-block; margin: 10px 16px 0; padding: 2px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.sponsor-body { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px 14px; color: var(--ink); text-decoration: none; }
a.sponsor-body:hover { color: var(--ink); background: var(--green-soft); }
.sponsor-img, .sponsor-mark { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.sponsor-mark { display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-weight: 800; font-size: 1.5rem; }
.sponsor-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.sponsor-text span { color: var(--ink-2); font-size: .92rem; }
.sponsor-arrow { flex: none; margin-left: auto; color: var(--green); }
.cm-sponsor-live { background: var(--green-soft); color: var(--green-dark); }
.cm-sponsor-scheduled { background: var(--blue-soft); color: var(--blue); }
.cm-sponsor-ended { background: var(--red-soft); color: var(--red); }
.cm-sponsor-switched-off { background: var(--surface-2, var(--line)); color: var(--ink-2); }

/* ---------- Larger screens ---------- */
@media (min-width: 420px) {
  .ev-thumb { display: block; }
}
@media (min-width: 560px) {
  .deal-card { flex-direction: column; }
  .deal-card .deal-media { width: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .deal-ph .icon { width: 56px; height: 56px; }
  .deal-discount { left: 10px; right: auto; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 12px; font-size: .95rem; text-align: left; }
}
@media (min-width: 600px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-step { padding: 20px 22px; }
}
@media (min-width: 760px) {
  .ev-list, .job-list { grid-template-columns: repeat(2, 1fr); }
  .pkg-extras { grid-template-columns: repeat(3, 1fr); }
  .pkg-extra { flex-direction: column; align-items: flex-start; }
  .ev-promoted { padding: 18px 20px; }
}
@media (min-width: 1040px) {
  .pkg-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Motion (only when the visitor has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ev-date, .sponsor-arrow, .pkg-icon { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
  a.ev-card:hover .ev-date { transform: scale(1.05); }
  a.sponsor-body:hover .sponsor-arrow { transform: translateX(4px); }
  .pkg:hover .pkg-icon, a.pkg-extra:hover .pkg-icon { transform: rotate(-8deg) scale(1.08); }
  .coupon-code { transition: color .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-date, .sponsor-arrow, .pkg-icon { transition: none; transform: none; }
}

/* pets.css */
/* Pet ID tags (petid-), adoption matching & applications (adopt-), Ask a Vet (ask-).
   Mobile first. Colours come from the site.css variables so a dark theme only has to redefine them. */

/* ---------- Shared bits ---------- */
.petid-avatar, .ask-avatar {
  flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font-weight: 800;
}
.petid-avatar { width: 56px; height: 56px; }
.petid-avatar img, .petid-avatar svg { width: 100%; height: 100%; object-fit: cover; }
.petid-avatar-sm { width: 36px; height: 36px; }
.petid-avatar-lg { width: 112px; height: 112px; box-shadow: var(--shadow); border: 4px solid var(--card); }
.petid-ph { display: grid; place-items: center; width: 100%; height: 100%; }
.petid-ph .pet-art { width: 100%; height: 100%; }

/* ---------- My pets ---------- */
.petid-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.petid-item { padding: 0; }
.petid-item-main {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.petid-item-main:hover { color: var(--ink); background: var(--green-soft); }
.petid-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.petid-item-text strong { font-size: 1.1rem; }
.petid-chev { color: var(--ink-2); transition: transform .2s; }
.petid-item-main:hover .petid-chev { transform: translateX(4px); color: var(--green); }
.petid-item-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.petid-unread {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px;
  font-size: .85rem; font-weight: 700; color: var(--blue); background: var(--blue-soft);
  border-radius: 999px; padding: 2px 10px;
}
.petid-prompt {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-soft), var(--gold-soft)); border: 1px solid var(--line);
}
.petid-prompt h3 { margin-bottom: 4px; }
.petid-prompt p { color: var(--ink-2); margin-bottom: 10px; }
.petid-prompt-art { width: 72px; flex: none; }
.petid-prompt-art .pet-art { animation: petidBob 3s ease-in-out infinite; }

.petid-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.petid-head h1 { margin-bottom: 2px; }
.petid-block { padding: 22px 0; border-top: 1px solid var(--line); }
.petid-block > h2 { display: flex; align-items: center; gap: 8px; }
.petid-block > h2 .icon { color: var(--green); }
.petid-form { margin: 0; }
.petid-private { display: flex; align-items: center; gap: 6px; color: var(--green-dark); font-weight: 600; }
.petid-current { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.petid-current img, .petid-current .petid-ph { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.petid-current .field { margin: 0; }

.petid-msgs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.petid-msg { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.petid-msg.is-new { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.petid-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 6px; }
.petid-msg-head .meta { margin-left: auto; }
.petid-msg-where { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.petid-msg-where .icon { color: var(--red); }
.petid-msg .contact-buttons { margin: 8px 0 4px; }
.petid-del { color: var(--ink-2); font-size: .85rem; min-height: 32px; }

/* Dashboard panel */
.petid-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.petid-dash { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.petid-dash li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; }
.petid-dash-pet { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.petid-dash-links { margin-left: auto; font-size: .9rem; }

/* ---------- Public tag page ---------- */
.petid-hero {
  background: linear-gradient(160deg, var(--green-soft) 0%, var(--bg) 55%, var(--gold-soft) 120%);
  border-bottom: 1px solid var(--line); padding: 24px 0 28px;
}
.petid-hero-grid { display: grid; gap: 16px; justify-items: center; text-align: center; }
.petid-hero-photo {
  width: min(220px, 62vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--card);
  border: 6px solid var(--card); box-shadow: var(--shadow); animation: petidPop .6s both cubic-bezier(.3, 1.5, .5, 1);
}
.petid-hero-photo img, .petid-hero-photo .petid-ph { width: 100%; height: 100%; object-fit: cover; }
.petid-hero-text h1 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: 4px; }
.petid-hero-text .lead { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 6px; }
.petid-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--green-dark); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
}
.petid-note {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 14px 0 6px; padding: 12px 14px;
  background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius); font-weight: 600;
}
.petid-note .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.petid-note p { margin: 0; }
.petid-owner { margin-top: 16px; }
.petid-owner p { margin-bottom: 4px; }
.petid-owner .contact-buttons { justify-content: center; }
.petid-owner .btn { min-height: 48px; }
.petid-found { padding: 20px 18px; margin-top: -8px; }
.petid-found > h2 { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; }
.petid-found > h2 .icon { color: var(--blue); }
.petid-found .btn-big { position: static; }
.petid-sent h2 { display: flex; align-items: center; gap: 8px; }
.petid-sent .icon { color: var(--green); }
.petid-tips { margin-top: 20px; }
@media (min-width: 760px) {
  .petid-hero { padding: 40px 0; }
  .petid-hero-grid { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 36px; }
  .petid-owner .contact-buttons { justify-content: flex-start; }
  .petid-head { flex-direction: row; align-items: center; gap: 22px; }
}

/* ---------- Landing page ---------- */
.petid-compare { display: grid; gap: 16px; }
.petid-compare-card { padding: 20px; }
.petid-compare-card h2 { display: flex; align-items: center; gap: 8px; }
.petid-compare-card h2 .icon { color: var(--green); }
.petid-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.petid-ticks li { display: flex; gap: 8px; align-items: flex-start; }
.petid-ticks .icon { color: var(--green); margin-top: 4px; }
@media (min-width: 700px) { .petid-compare { grid-template-columns: 1fr 1fr; } }

/* ---------- Printable tag sheet (sizes in mm so they print true at 100%) ---------- */
.petid-sheet { display: grid; gap: 28px; page: petid-sheet; }
.petid-group h2 small { font-weight: 500; font-size: .8em; color: var(--ink-2); }
.petid-qr { display: block; }
.petid-qr svg { display: block; width: 100%; height: 100%; }
.petid-rounds, .petid-collars { display: flex; flex-wrap: wrap; gap: 5mm; }
.petid-round {
  width: 30mm; height: 30mm; border-radius: 50%; border: .3mm solid var(--ink); background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; break-inside: avoid; line-height: 1;
}
.petid-round-name { font-size: 7pt; font-weight: 800; max-width: 21mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .5mm; }
.petid-round .petid-qr { width: 16mm; height: 16mm; }
.petid-round-foot { font-size: 5pt; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-top: .5mm; }
.petid-round-brand { font-size: 4.5pt; margin-top: .3mm; }
.petid-collar {
  width: 85mm; max-width: 100%; height: 30mm; display: flex; align-items: center; gap: 3mm; padding: 2.5mm;
  border: .3mm dashed var(--ink-2); border-radius: 3mm; background: var(--card); color: var(--ink); break-inside: avoid;
}
.petid-collar .petid-qr { width: 25mm; height: 25mm; flex: none; }
.petid-collar-text { display: flex; flex-direction: column; gap: .8mm; min-width: 0; line-height: 1.15; }
.petid-collar-text strong { font-size: 15pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.petid-collar-text span { font-size: 8pt; font-weight: 700; }
.petid-collar-text code, .petid-poster code { font-size: 6pt; color: var(--ink-2); word-break: break-all; }
.petid-poster {
  width: 105mm; max-width: 100%; min-height: 148mm; padding: 6mm; display: flex; flex-direction: column; align-items: center;
  gap: 2.5mm; text-align: center; border: .3mm dashed var(--ink-2); border-radius: 3mm; background: var(--card); color: var(--ink); break-inside: avoid;
}
.petid-poster p { margin: 0; }
.petid-poster-hi { font-size: 22pt; font-weight: 800; line-height: 1.1; color: var(--green); }
.petid-poster img { width: 100%; max-height: 52mm; object-fit: cover; border-radius: 3mm; }
.petid-poster-ask { font-weight: 700; font-size: 11pt; }
.petid-poster .petid-qr { width: 45mm; height: 45mm; }
.petid-poster-brand { font-weight: 800; font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; }
.petid-poster-note { font-size: 10pt; }
@page petid-sheet { size: A4; margin: 10mm; }
@media print {
  /* Paper is white: force a light palette for the sheet whatever theme is on screen. */
  body:has(.petid-sheet) { --bg: #fff; --card: #fff; --ink: #000; --ink-2: #444; --line: #bbb; background: #fff; padding: 0 !important; }
  body:has(.petid-sheet) :is(.site-header, .site-footer, .tabbar, .emergency-bar, .admin-bar, .page-head, .skip) { display: none !important; }
  .petid-noprint, .petid-group > .hint { display: none !important; }
  .petid-sheet-wrap { padding: 0; max-width: none; }
  .petid-sheet { gap: 6mm; }
  .petid-group { break-inside: avoid; }
  .petid-group h2 { font-size: 8pt; margin: 0 0 2mm; }
}

/* ---------- Adoption: status badges ---------- */
.badge.adopt-st { text-transform: none; letter-spacing: 0; }
.adopt-st-new { background: var(--blue-soft); color: var(--blue); }
.adopt-st-short { background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
.adopt-st-yes { background: var(--green-soft); color: var(--green-dark); }
.adopt-st-no { background: var(--red-soft); color: var(--red); }
.adopt-st-off { background: var(--line); color: var(--ink-2); }

/* Mini listing summary */
.adopt-mini {
  display: flex; align-items: center; gap: 14px; padding: 10px; margin-bottom: 18px; color: var(--ink); text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.adopt-mini:hover { border-color: var(--green); color: var(--ink); }
.adopt-mini > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.adopt-mini .meta { display: flex; align-items: center; gap: 4px; }
.adopt-mini-img { width: 72px; height: 72px; flex: none; border-radius: 12px; overflow: hidden; background: var(--green-soft); }
.adopt-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.adopt-mini-img .ph { min-height: 0; height: 100%; }
.adopt-mini-img .ph span { display: none; }

/* Matching quiz */
.adopt-quiz h2 { display: flex; align-items: center; gap: 8px; }
.adopt-quiz h2 .icon { color: var(--green); }
.adopt-quiz .choice-row .choice { min-height: 44px; }
.adopt-again { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; margin-bottom: 12px; }
.adopt-again > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; font-weight: 700; }
.adopt-again[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.adopt-again .form-card { border: 0; box-shadow: none; padding: 0 0 16px; background: none; }

.adopt-match {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.3, 1.3, .5, 1), box-shadow .25s, border-color .2s;
}
.adopt-match:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: 0 16px 32px color-mix(in srgb, var(--ink) 14%, transparent); }
.adopt-match > .card { border: 0; border-radius: 0; box-shadow: none; flex: 1; }
.adopt-match > .card:hover { transform: none; box-shadow: none; }
/* The wrapper fades in; the card inside should not animate a second time. */
.js .adopt-match .reveal:not(.is-visible) { opacity: 1; transform: none; }
.adopt-score {
  position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; box-shadow: var(--shadow);
  background: var(--card); color: var(--ink);
}
.adopt-score strong { font-size: 1rem; }
.adopt-score-great { background: var(--green-soft); color: var(--green-dark); box-shadow: inset 0 0 0 2px var(--green), var(--shadow); }
.adopt-score-good { background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold), var(--shadow); }
.adopt-score-maybe { background: var(--card); color: var(--ink-2); }
.adopt-match-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.adopt-why { margin: 0; font-size: .95rem; }
.adopt-care { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); }
.adopt-care .icon { color: var(--gold); flex: none; margin-top: 3px; }
.adopt-match-body .btn { margin-top: 2px; }

/* Application tracking */
.adopt-status-card { padding: 18px; margin-bottom: 18px; border-left: 6px solid var(--blue); }
.adopt-status-short { border-left-color: var(--gold); }
.adopt-status-yes { border-left-color: var(--green); }
.adopt-status-no { border-left-color: var(--red); }
.adopt-status-off { border-left-color: var(--line); }
.adopt-status-line { font-weight: 700; font-size: 1.05rem; }
.adopt-status-line .badge { font-size: .9rem; }
.adopt-note { background: var(--green-soft); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.adopt-note h3 { display: flex; align-items: center; gap: 6px; font-size: 1rem; }
.adopt-note p:last-child { margin: 0; }
.adopt-answers { margin: 18px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.adopt-answers > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }

/* Poster review */
.adopt-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.adopt-apps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.adopt-app { padding: 0; }
.adopt-app a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: var(--ink); text-decoration: none; min-height: 44px; }
.adopt-app a:hover { background: var(--green-soft); color: var(--ink); }
.adopt-app-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1.05rem; }
.adopt-review-head h1 { margin-bottom: 4px; }
.adopt-block { padding: 18px 0; border-top: 1px solid var(--line); }
.adopt-block h3 { font-size: 1rem; margin-top: 16px; }

/* ---------- Ask a Vet ---------- */
.ask-disclaimer {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; font-size: .93rem;
  background: var(--blue-soft); border-left: 4px solid var(--blue); border-radius: 10px;
}
.ask-disclaimer > .icon { color: var(--blue); flex: none; width: 22px; height: 22px; margin-top: 1px; }
.ask-disclaimer p { margin: 0; }
.ask-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ask-card .card-body { display: flex; flex-direction: column; height: 100%; }
.ask-card h3 { font-size: 1.12rem; }
.ask-snippet { color: var(--ink-2); font-size: .94rem; flex: 1; }
.ask-by { display: flex; align-items: center; gap: 6px; }
.ask-by .icon { color: var(--green); }

.ask-avatar { width: 44px; height: 44px; font-size: 1.1rem; object-fit: cover; }
.ask-avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; }
.badge.ask-verified {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle;
  background: var(--green-soft); color: var(--green-dark); text-transform: none; letter-spacing: 0;
}
.ask-verified .icon { width: .95em; height: .95em; }

.ask-question h1 { margin-top: 4px; }
.ask-details { margin: 16px 0 22px; }
.ask-photo { border-radius: var(--radius); max-height: 420px; width: auto; margin-top: 8px; }
.ask-answer {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.ask-answer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ask-answer-head > div { display: flex; flex-direction: column; }
.ask-answer-head strong { font-size: 1.05rem; }
.ask-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ask-name-line .ask-verified { margin-left: 0; }
.ask-answer-body p:last-child { margin-bottom: 8px; }
.ask-edit { margin-top: 8px; }
.ask-edit > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.ask-reply { padding: 18px; margin: 24px 0; border: 2px solid var(--green); }
.ask-reply h2 { display: flex; align-items: center; gap: 8px; }
.ask-publish { margin-top: 10px; }
.ask-current { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ask-current .field { margin: 0; }

.ask-queue { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.ask-queue-item { padding: 0; }
.ask-queue-item a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: var(--ink); text-decoration: none; min-height: 44px; }
.ask-queue-item a:hover { background: var(--green-soft); color: var(--ink); }
.ask-queue-count strong { font-size: 1.6rem; color: var(--green); }
.ask-st-published { background: var(--green-soft); color: var(--green-dark); }
.ask-st-answered { background: var(--gold-soft); color: var(--ink); }
.ask-st-pending { background: var(--blue-soft); color: var(--blue); }
.badge.ask-st { text-transform: none; letter-spacing: 0; }

.ask-experts { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ask-expert { padding: 18px; gap: 6px; }
.ask-expert-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ask-expert-head h3 { margin: 0; }
.ask-expert-head p { margin: 0 0 4px; }
.ask-expert-head .ask-verified { margin-left: 0; }
.ask-cred { font-size: .9rem; color: var(--ink-2); font-weight: 600; }

/* ---------- Motion ---------- */
@keyframes petidPop { from { opacity: 0; transform: scale(.85) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes petidBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .petid-hero-photo, .petid-prompt-art .pet-art { animation: none; }
  .adopt-match, .petid-chev { transition: none; }
  .adopt-match:hover { transform: none; }
}

/* rescue.css */
/* Help animals: rescue requests & map, foster & volunteer network, spay & neuter hub, fundraisers.
   Mobile first. Colours come only from the site.css variables so dark mode follows the core. */

/* ---------- Shared ---------- */
.feat-card { padding: 18px 18px 10px; margin-bottom: 18px; }
.grid > .feat-card { margin-bottom: 0; }
.feat-card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; }
.feat-card h2 .icon { color: var(--green); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 10px; }
.chips li { background: var(--green-soft); color: var(--ink); border-radius: 999px; padding: 3px 12px; font-size: .85rem; font-weight: 600; }
.feat-list { list-style: none; padding: 0; margin: 0 0 12px; }
.feat-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feat-list li > a:first-child { font-weight: 600; margin-right: auto; }
.facts-compact { margin: 8px 0 12px; }
.facts-compact div { grid-template-columns: 96px 1fr; padding: 6px 0; font-size: .95rem; }
.badge-muted { background: var(--line); color: var(--ink); }
.badge-pending { background: var(--gold); color: var(--ink); }
.badge-urgent { background: var(--red); }
.badge-soon { background: var(--gold); color: var(--ink); }
.badge-whenever { background: var(--blue); }
.badge-open { background: var(--ink); color: var(--card); }
.badge-progress { background: var(--blue); }
a.badge { text-decoration: none; }

/* ---------- Rescue requests ---------- */
.rescue-card .card-media { aspect-ratio: 4 / 3; }
.rescue-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.rescue-badges .badge, .rescue-badges-inline .badge { position: static; margin: 0; }
.rescue-badges-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rescue-card .meta.where { margin-top: 2px; }

/* The map only appears once JavaScript runs; the list below always works without it. */
.rescue-map-wrap { margin: 0 0 22px; }
.rescue-map {
  position: relative; z-index: 0; isolation: isolate; /* keep Leaflet's layers under the sticky header */
  height: 300px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--green-soft); overflow: hidden;
  box-shadow: var(--shadow);
}
html:not(.js) .rescue-map { display: none; }
.rescue-map-fallback { margin: 0; padding: 16px; color: var(--ink-2); }
.rescue-map.is-live { cursor: grab; }
.rescue-map .leaflet-container, .rescue-map.leaflet-container { font: inherit; background: var(--green-soft); }
.rescue-map-detail, .rescue-detail .rescue-map { height: 260px; margin-bottom: 8px; }
.map-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; }
.map-note .icon { color: var(--green); margin-top: .2em; }
.rescue-popup { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.rescue-popup strong { font-size: 1rem; }
.rescue-popup span { font-size: .85rem; }
.rescue-popup a { font-weight: 700; margin-top: 4px; }

.rescue-cta { gap: 18px; }
.rescue-cta .feat-card { margin: 0; padding-bottom: 18px; }

.private-box { border: 2px dashed var(--red); background: var(--red-soft); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; }
.private-label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--red); font-size: .9rem; margin-bottom: 4px; }
.private-box .facts { margin: 6px 0 4px; border-top-color: var(--line); }
.private-box .facts dd p { margin: 0; }
.case-actions { display: grid; gap: 14px; margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.case-actions form { margin: 0; }
.case-actions .field { margin-bottom: 10px; }
.case-take .btn { width: 100%; }
.case-take .hint { margin: 6px 0 0; }
.update-author { font-weight: 700; margin: 0 0 2px; }
.updates .update-taken, .updates .update-released, .updates .update-reopened { border-left-color: var(--blue); }
.updates .update-resolved { border-left-color: var(--green); }

.rescue-picker { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--card); }
.rescue-picker legend { padding: 0 6px; }
.rescue-picker-map { height: 280px; margin: 6px 0 4px; box-shadow: none; }
.picker-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.picker-tools .hint { margin: 0; }
.picker-tools .btn[hidden] { display: none; }

/* ---------- Foster & volunteer network ---------- */
.vol-ways { grid-template-columns: 1fr; gap: 12px; }
.vol-way { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
.vol-way h3 { margin-bottom: 2px; }
.vol-way p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.vol-way-icon, .snp-reason-icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green); font-size: 1.3rem;
}
.vol-status p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.vol-status .actions { margin: 8px 0; }
.vol-status form { margin: 0; }
.vol-contact-note p { display: block; }
.vol-contact-note .icon { color: var(--blue); }
.vol-card .card-body { display: flex; flex-direction: column; height: 100%; }
.vol-card .contact-buttons { margin-top: auto; padding-top: 6px; }
.vol-card .contact-buttons .btn { flex: 1 1 auto; }
.vol-exp { margin: 0 0 10px; font-size: .95rem; }
.vol-exp summary { cursor: pointer; font-weight: 600; color: var(--green); min-height: 32px; }
.vol-privacy { margin-top: 18px; }

/* ---------- Spay & neuter ---------- */
.snp-reasons { grid-template-columns: 1fr; gap: 12px; }
.snp-reason { padding-bottom: 14px; }
.snp-reason-icon { margin-bottom: 10px; }
.snp-reason p { margin: 0; color: var(--ink-2); }
.snp-campaigns, .snp-clinics { grid-template-columns: 1fr; gap: 12px; }
.snp-campaign { padding: 16px; gap: 4px; border-left: 5px solid var(--gold); }
.snp-campaign strong { font-size: 1.1rem; }
.snp-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green); font-size: .92rem; }
.snp-clinic { padding: 16px 16px 6px; border-left: 5px solid var(--green); }
.snp-clinic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.snp-clinic-head h3 { margin: 0; }
.snp-notes { font-size: .95rem; color: var(--ink-2); margin-top: 6px; }
.snp-notes p { margin-bottom: .5em; }
.snp-entry p { margin-bottom: .4em; }
.snp-entry-form { margin-top: 8px; }
.snp-entry > form:last-child { margin-top: 6px; }

/* ---------- Fundraisers ---------- */
.fund-card .card-media { aspect-ratio: 16 / 10; }
.fund-card .card-body { display: flex; flex-direction: column; gap: 4px; }
.fund-org .icon { color: var(--green); margin-right: 2px; }
.fund-progress-wrap { margin: 10px 0 6px; }
.fund-progress {
  display: block; width: 100%; height: 12px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--line); color: var(--green); -webkit-appearance: none; appearance: none;
}
.fund-progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.fund-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--green), var(--gold)); border-radius: 999px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.fund-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--green), var(--gold)); border-radius: 999px; }
.fund-numbers { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fund-numbers strong { font-size: 1.35rem; color: var(--green); font-variant-numeric: tabular-nums; }
.fund-numbers span { color: var(--ink-2); font-size: .92rem; }
.fund-detail .fund-numbers strong { font-size: 1.8rem; }
.fund-direct p { display: block; }
.fund-direct .icon { color: var(--blue); }
.give-box { background: var(--card); border: 2px solid var(--green); border-radius: var(--radius); padding: 16px 18px 4px; margin-bottom: 18px; overflow-wrap: anywhere; }
.fund-steps { padding-left: 22px; color: var(--ink-2); }
.fund-steps li { margin-bottom: 4px; }
.fund-pledge { margin-top: 8px; }
.fund-supporters { list-style: none; padding: 0; display: grid; gap: 8px; }
.fund-supporters li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.fund-supporters li strong { margin-left: auto; color: var(--green); font-variant-numeric: tabular-nums; }
.fund-supporters li .meta { flex-basis: 100%; }
.fund-supporter-name { font-weight: 600; }
.fund-manage .table { min-width: 560px; }
.fund-manage form { margin: 0; }
.fund-manage .form { margin-top: 16px; }
.fund-manage .fund-close { margin-top: 18px; }
.fund-manage .admin-actions { margin: 0; gap: 6px; }

/* ---------- Larger screens ---------- */
@media (min-width: 640px) {
  .vol-ways { grid-template-columns: repeat(2, 1fr); }
  .snp-reasons { grid-template-columns: repeat(3, 1fr); }
  .snp-campaigns, .snp-clinics { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .rescue-map { height: 420px; }
  .rescue-map-detail, .rescue-detail .rescue-map { height: 320px; }
  .rescue-picker-map { height: 340px; }
  .case-take .btn { width: auto; }
}
@media (min-width: 1000px) {
  .vol-ways { grid-template-columns: repeat(4, 1fr); }
  .vol-way { flex-direction: column; }
  .snp-clinics { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fund-progress::-webkit-progress-value { transition: none; }
  .rescue-map * { transition: none !important; animation: none !important; }
}

/* services.css */
/* Pet services: provider cards, star ratings, chips, booking timeline and messages.
   Colours come only from the variables in site.css so dark mode keeps working. */

.svc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Quick service filter: swipe sideways on phones, wrap on wider screens */
.svc-quick { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 10px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.svc-quick::-webkit-scrollbar { display: none; }
.svc-quick a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none; scroll-snap-align: start; transition: background-color .2s, border-color .2s, color .2s; }
.svc-quick a:hover { border-color: var(--green); color: var(--ink); }
.svc-quick a[aria-current="true"] { background: var(--green); border-color: var(--green); color: #fff; }
@media (min-width: 761px) {
  .svc-quick { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; }
}

/* Provider cards */
.svc-card .card-media { aspect-ratio: 4 / 3; }
.svc-card.is-featured { border: 2px solid var(--gold); }
.svc-card .card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-card .card-body .where { margin-top: auto; padding-top: 4px; }
.svc-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--green-soft), var(--gold-soft)); }
.svc-ph .pet-art { width: 42%; max-width: 150px; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
a.svc-card:hover .svc-ph .pet-art { transform: rotate(-6deg) scale(1.06); }
.svc-ph-lg { background: linear-gradient(135deg, var(--green-soft), var(--gold-soft)); }
.svc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.svc-headline { margin: 0; color: var(--ink-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Verified badge */
.svc-verified { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 3px; border: 1px solid var(--blue); border-radius: 999px; background: var(--blue-soft); color: var(--ink); font-size: .78rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.svc-verified .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--blue); color: #fff; stroke-width: 3; }
.svc-verified-compact { padding: 0; border: 0; background: none; }
.svc-verified-compact .icon { width: 20px; height: 20px; }

/* Service chips */
.svc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; padding: 0; }
.svc-chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: 999px; background: var(--green-soft); color: var(--ink); font-size: .8rem; font-weight: 600; }
.svc-chip-more { background: transparent; border-color: var(--line); color: var(--ink-2); }
.detail-info .svc-chips { margin: 10px 0 4px; }
.detail-info .svc-chip { font-size: .88rem; padding: 5px 12px; }

/* Star ratings: two stacked stars, the gold one clipped for half stars */
.stars { display: inline-flex; gap: 1px; vertical-align: -0.15em; font-size: 1rem; }
.star { position: relative; display: inline-block; width: 1em; height: 1em; flex: none; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--line); }
.star svg + svg { fill: var(--gold); stroke: color-mix(in srgb, var(--gold) 65%, var(--ink)); stroke-width: 1; clip-path: inset(0 100% 0 0); }
.star.is-full svg + svg { clip-path: none; }
.star.is-half svg + svg { clip-path: inset(0 50% 0 0); }
.svc-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .92rem; }
.svc-rating strong { font-variant-numeric: tabular-nums; }
.svc-rating .meta { margin: 0; }

/* Profile page */
.svc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 8px; margin-bottom: 6px; }
.svc-lead { margin: 0 0 8px; color: var(--ink-2); font-size: 1.12rem; }
.svc-profile .svc-rating { font-size: 1rem; margin-bottom: 4px; }
.svc-profile .svc-rating .stars { font-size: 1.15rem; }
.svc-book-box .btn-lg { width: 100%; }
.svc-book-box .hint .icon { color: var(--green); }
.svc-rates { list-style: none; display: grid; gap: 8px; margin: 0 0 20px; padding: 0; }
.svc-rates li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.svc-rate { max-width: 60%; font-weight: 700; text-align: right; }
.svc-rate.is-ask { flex: none; color: var(--ink-2); font-weight: 500; font-size: .92rem; white-space: nowrap; }
@media (min-width: 640px) {
  .svc-rates { grid-template-columns: 1fr 1fr; }
}

/* Reviews */
.svc-rating-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--gold-soft); }
.svc-rating-summary .stars { font-size: 1.3rem; }
.svc-rating-summary .meta { margin: 2px 0 0; }
.svc-big { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.svc-reviews { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.svc-review { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.svc-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.svc-review-head .meta { margin: 0; }
.svc-review > p:last-child { margin-bottom: 0; }
.svc-reply { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: var(--green-soft); }
.svc-reply p:last-child { margin: 0; }
.svc-reply-label { margin: 0 0 4px; color: var(--ink-2); font-size: .85rem; font-weight: 700; }
.svc-reply-form { margin-top: 8px; }
.svc-reply-form summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 600; cursor: pointer; }
.svc-reply-form form { margin-top: 8px; }

/* Join form */
.svc-how { margin: 6px 0 32px; }
.svc-rate-fields .opt { display: none; }
.svc-rate-grid { display: grid; gap: 0 16px; margin-top: 8px; }
@media (min-width: 600px) {
  .svc-rate-grid { grid-template-columns: 1fr 1fr; }
}
/* Only the rate boxes for ticked services (browsers without :has show them all). */
.svc-rate-empty { display: none; }
.svc-form:not(:has(input[name="services"]:checked)) .svc-rate-empty { display: block; }
.svc-form:has(input[name="services"][value="sitting"]:not(:checked)) .svc-rate-sitting,
.svc-form:has(input[name="services"][value="boarding"]:not(:checked)) .svc-rate-boarding,
.svc-form:has(input[name="services"][value="dropin"]:not(:checked)) .svc-rate-dropin,
.svc-form:has(input[name="services"][value="walking"]:not(:checked)) .svc-rate-walking,
.svc-form:has(input[name="services"][value="grooming"]:not(:checked)) .svc-rate-grooming,
.svc-form:has(input[name="services"][value="training"]:not(:checked)) .svc-rate-training,
.svc-form:has(input[name="services"][value="transport"]:not(:checked)) .svc-rate-transport,
.svc-form:has(input[name="services"][value="photography"]:not(:checked)) .svc-rate-photography { display: none; }
.svc-photo-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 0 0 14px; }
.svc-photo-tile { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.svc-photo-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; transition: opacity .2s; }
.svc-photo-tile .choice { min-height: 36px; padding: 0 4px; font-size: .9rem; }
.svc-photo-tile:has(input:checked) { border-color: var(--red); }
.svc-photo-tile:has(input:checked) img { opacity: .35; }

/* Booking form */
.svc-mini { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.svc-mini-media { width: 76px; height: 76px; flex: none; overflow: hidden; border-radius: 12px; }
.svc-mini-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-mini-media .svc-ph .pet-art { width: 78%; }
.svc-mini-body { min-width: 0; }
.svc-mini-body p { margin: 0 0 2px; }
.svc-mini .svc-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.svc-mini .svc-name a:hover { color: var(--green); }
.svc-pay-note p { display: flex; align-items: flex-start; gap: 8px; }
.svc-pay-note .icon { margin-top: .2em; color: var(--blue); }

/* Status badges */
.svc-status { --tone: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 10px; border: 1px solid var(--tone); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.svc-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone); }
.svc-status-requested, .svc-status-profile-pending { --tone: var(--gold); background: var(--gold-soft); }
.svc-status-requested::before, .svc-status-profile-pending::before { animation: svcPulse 1.8s ease-in-out infinite; }
.svc-status-accepted { --tone: var(--blue); background: var(--blue-soft); }
.svc-status-completed, .svc-status-profile-published { --tone: var(--green); background: var(--green-soft); }
.svc-status-declined, .svc-status-cancelled { --tone: var(--ink-2); background: var(--bg); }
.svc-status-profile-hidden { --tone: var(--red); background: var(--red-soft); }

/* Booking page */
.svc-booking-head { margin-bottom: 4px; }
.svc-booking-head h1 { margin: 10px 0 4px; }
.svc-booking-grid { display: grid; gap: 0 20px; }
@media (min-width: 860px) {
  .svc-booking-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.svc-panel { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.svc-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.svc-panel h2 .icon { color: var(--green); }
.svc-panel > :last-child { margin-bottom: 0; }
.svc-panel .facts { margin-top: 0; }
.svc-next { font-weight: 600; }
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.svc-actions form { margin: 0; }
.svc-actions .btn { min-height: 44px; }
.svc-actions .hint { margin: 0; }
.svc-pay { border-left: 5px solid var(--gold); }
.svc-review-box .form { max-width: 620px; }

/* Status timeline */
.svc-timeline { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 22px 0 24px; padding: 0; }
.svc-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; color: var(--ink-2); font-size: .88rem; text-align: center; }
.svc-timeline li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--line); transition: background-color .4s; }
.svc-timeline li:first-child::before { display: none; }
.svc-timeline strong { color: var(--ink); font-size: .92rem; }
.svc-timeline time, .svc-timeline .meta { font-size: .8rem; margin: 0; }
.svc-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 33px; height: 33px; margin-bottom: 4px; border: 3px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink-2); font-size: .85rem; font-weight: 800; }
.svc-dot .icon { width: 17px; height: 17px; stroke-width: 3; }
.svc-timeline .is-done::before { background: var(--green); }
.svc-timeline .is-done .svc-dot { border-color: var(--green); background: var(--green); color: #fff; }
.svc-timeline .is-current .svc-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 22%, transparent); animation: svcPop .5s both cubic-bezier(.3, 1.6, .5, 1); }
.svc-timeline .is-stopped::before { background: repeating-linear-gradient(90deg, var(--red) 0 6px, transparent 6px 11px); }
.svc-timeline .is-stopped .svc-dot { border-color: var(--red); background: var(--red); color: #fff; }
.svc-timeline .is-stopped.is-current .svc-dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent); }

/* Message thread */
.svc-thread { max-width: 760px; margin-top: 28px; }
.svc-msgs { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 0; }
.svc-msg { align-self: flex-start; max-width: min(560px, 88%); padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--card); animation: svcPop .35s both cubic-bezier(.2, .7, .2, 1); }
.svc-msg.is-mine { align-self: flex-end; border-color: color-mix(in srgb, var(--green) 30%, transparent); border-radius: 16px 16px 4px 16px; background: var(--green-soft); }
.svc-msg p:last-child { margin: 0; }
.svc-msg-meta { margin: 0 0 2px; color: var(--ink-2); font-size: .8rem; }
.svc-msg-form textarea { min-height: 96px; }

/* Star picker for reviews (works without JavaScript) */
.svc-star-row { display: flex; gap: 2px; }
.svc-star-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.svc-star-row label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; cursor: pointer; }
.svc-star-row label svg { width: 36px; height: 36px; fill: var(--line); transition: fill .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.svc-star-row input:checked + label { background: var(--gold-soft); }
.svc-star-row:has(input:checked) label { background: none; }
.svc-star-row:has(input:checked) label svg { fill: var(--gold); }
.svc-star-row input:checked + label ~ label svg { fill: var(--line); }
.svc-star-row input:checked + label svg { transform: scale(1.12); }
.svc-star-row input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }
.svc-star-row label:active svg { transform: scale(.9); }
.svc-star-input.has-error .svc-star-row label svg { stroke: var(--red); stroke-width: 1.5; }

/* Account dashboard */
.svc-list { list-style: none; display: grid; gap: 8px; margin: 0 0 14px; padding: 0; }
.svc-list li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.svc-list li > a:hover { border-color: var(--green); color: var(--ink); transform: translateX(3px); }
.svc-list-main { display: flex; flex-direction: column; min-width: 0; }
.svc-list-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-list .meta { margin: 0; }
.svc-dash-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dash-panel h3 { margin-top: 14px; font-size: 1rem; }
.svc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--green-soft), var(--gold-soft)); }
.svc-cta p { flex: 1 1 260px; margin: 0; }

/* Admin */
.svc-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-admin-actions form { margin: 0; }

@keyframes svcPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@keyframes svcPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .svc-msg, .svc-status::before, .svc-timeline .is-current .svc-dot { animation: none; }
  .svc-quick a, .svc-list li > a, .svc-star-row label svg, .svc-ph .pet-art, .svc-photo-tile img, .svc-timeline li::before { transition: none; }
  .svc-list li > a:hover, a.svc-card:hover .svc-ph .pet-art, .svc-star-row input:checked + label svg { transform: none; }
}

/* shop.css */
/* Pet shop (src/features/shop.js). Colours come only from the site.css variables, so the shop follows
   the site's light and dark themes. Phones first: 2-column product grid, sticky add-to-cart bar. */

.shop-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Quick links under the page head */
.shop-bar { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 18px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shop-bar::-webkit-scrollbar { display: none; }
.shop-bar a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .2s, background-color .2s, color .2s; }
.shop-bar a .icon { color: var(--green); }
.shop-bar a:hover, .shop-bar a[aria-current="page"] { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.shop-cart-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .8rem; font-weight: 800; animation: shopPop .35s both cubic-bezier(.3, 1.6, .5, 1); }

/* Flagship store banner */
.shop-flagship { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 22px; margin: 0 0 22px; border-radius: calc(var(--radius) + 6px); border: 2px solid var(--gold); background: linear-gradient(120deg, var(--gold-soft) 0%, var(--card) 55%, var(--green-soft) 100%); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); overflow: hidden; transition: transform .25s cubic-bezier(.3, 1.3, .5, 1), box-shadow .25s; }
.shop-flagship:hover { color: var(--ink); transform: translateY(-3px); }
.shop-flagship .shop-logo { width: 104px; height: 104px; border-radius: 22px; }
.shop-flagship h2 { font-size: clamp(1.35rem, 3.6vw, 1.9rem); margin: 8px 0 4px; }
.shop-flagship p { color: var(--ink-2); margin: 0 0 10px; max-width: 60ch; }
.shop-flagship-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-dark); }
.shop-flagship-go .icon { transition: transform .2s; }
.shop-flagship:hover .shop-flagship-go .icon { transform: translateX(4px); }

/* Logos */
.shop-logo { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; flex: none; background: var(--card); border: 1px solid var(--line); }
.shop-logo-ph { display: inline-grid; place-items: center; font-weight: 800; font-size: 1.7rem; color: var(--green); background: var(--green-soft); }
.shop-logo-sm { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }
.shop-logo-lg { width: 96px; height: 96px; border-radius: 22px; font-size: 2.2rem; }

/* Badges */
.shop-badge-flagship { display: inline-flex; align-items: center; gap: 4px; background: var(--gold); color: var(--ink); }
.shop-badge-flagship .icon { width: 1em; height: 1em; }
.shop-badge-sale { background: var(--red-soft); color: var(--red); }
.shop-badge-oos { background: var(--ink); color: var(--bg); }
.shop-status { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.shop-status-new { background: var(--gold); color: var(--ink); }
.shop-status-confirmed { background: var(--blue-soft); color: var(--blue); }
.shop-status-ready, .shop-status-out_for_delivery { background: var(--green-soft); color: var(--green-dark); }
.shop-status-completed { background: var(--green-soft); color: var(--green); }
.shop-status-cancelled { background: var(--red-soft); color: var(--red); }
.shop-store-pending { background: var(--gold-soft); color: var(--ink); }
.shop-store-published { background: var(--green-soft); color: var(--green-dark); }
.shop-store-hidden { background: var(--red-soft); color: var(--red); }

/* Categories and filters */
.shop-cats { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .2s, background-color .2s; }
.shop-chip:hover { border-color: var(--green); color: var(--ink); }
.shop-chip[aria-current="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.shop-filters label { flex: 1 1 150px; }
.shop-filters .shop-search { flex: 2 1 240px; }
.shop-filters select, .shop-filters input { min-width: 0; min-height: 44px; }
.shop-filters .btn { min-height: 44px; }
.shop input[type=search], .shop input[type=number] { width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.shop input[type=search]:focus, .shop input[type=number]:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-soft); }

/* Product cards: 2 columns on phones */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.shop-card .card-media { aspect-ratio: 1; }
.shop-card .card-media .badge { position: absolute; top: 10px; left: 10px; }
.shop-card .card-media .shop-badge-oos { top: auto; bottom: 10px; }
.shop-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.shop-card h3 { font-size: 1rem; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-card-store { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card .shop-price { margin-top: auto; padding-top: 8px; }
.shop-card .ph { min-height: 0; }

/* Prices */
.shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.shop-price-now { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.shop-price-was { color: var(--ink-2); font-size: .88em; font-variant-numeric: tabular-nums; }
.shop-price.on-sale .shop-price-now { color: var(--red); }
.shop-price-lg { font-size: 1.65rem; margin: 6px 0 2px; }
.shop-save { display: inline-block; margin: 4px 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: .9rem; }

/* Stores */
.shop-stores { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.shop-store-card { flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
.shop-store-card .card-body { padding: 0; min-width: 0; }
.shop-store-card.is-flagship { border: 2px solid var(--gold); }
.shop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shop-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: .8rem; font-weight: 700; }
.shop-tag-pay { background: var(--blue-soft); color: var(--blue); }
.shop-store-head { display: flex; align-items: center; gap: 20px; padding: 22px; margin-bottom: 18px; border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line); background: linear-gradient(135deg, var(--green-soft), var(--card) 60%, var(--gold-soft)); box-shadow: var(--shadow); }
.shop-store-head h1 { margin: 6px 0 4px; }
.shop-store-about { max-width: 760px; margin-bottom: 18px; color: var(--ink-2); }
.shop-store-info { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; margin-top: 32px; }
.shop-store-info .contact-box { margin-top: 0; }
.shop-store-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; }
.shop-store-link:hover { color: var(--green-dark); }

/* Product page */
.shop-gallery .gallery-main { aspect-ratio: 1; object-fit: contain; background: var(--card); border: 1px solid var(--line); }
.shop-gallery .thumbs button { min-width: 44px; min-height: 44px; }
.shop-product h1 { margin: 4px 0; }
.shop-stock { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px; font-weight: 700; }
.shop-stock-in { color: var(--green); }
.shop-stock-low { color: var(--ink); }
.shop-stock-low .icon { color: var(--gold); }
.shop-stock-out { color: var(--red); }
.shop-buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 6px 0 18px; padding: 16px; border: 2px solid var(--green); border-radius: var(--radius); background: var(--card); }
.shop-buy-price { display: none; }
.shop-qty { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.shop-qty input { width: 96px; min-height: 48px; text-align: center; font-size: 1.05rem; font-weight: 700; }
.shop-add { flex: 1 1 200px; min-height: 48px; font-size: 1.05rem; }
.shop .section-head { margin-top: 26px; }
.shop .shop-filters + .section-head, .shop .shop-cats + .section-head { margin-top: 6px; }
.shop-more { margin-top: 36px; }

/* Cart */
.shop-cart-store { margin-bottom: 20px; }
.shop-cart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--green-soft); }
.shop-cart-head > a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.shop-cart-head .shop-tags { margin: 0; }
.shop-lines { list-style: none; margin: 0; padding: 0; }
.shop-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.shop-line-img { display: block; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--green-soft); }
.shop-line-img img, .shop-line-img .pet-art { width: 100%; height: 100%; object-fit: cover; }
.shop-line-info a { color: var(--ink); text-decoration: none; }
.shop-line-info a:hover { color: var(--green-dark); }
.shop-line-info .meta { margin: 2px 0 0; }
.shop-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.shop-line-qty { display: flex; align-items: center; gap: 6px; margin: 0; }
.shop-line-qty input { width: 76px; min-height: 44px; text-align: center; }
.shop-line-actions form { margin: 0; }
.shop-remove { min-height: 44px; color: var(--red); font-weight: 600; }
.shop-line-total { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-line.is-unavailable .shop-line-img, .shop-line.is-unavailable .shop-line-info > a { opacity: .55; }
.shop-cart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }
.shop-cart-foot p { margin: 0; }
.shop-cart-sub strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* Checkout */
.shop-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.shop-summary { padding: 18px 20px; position: sticky; top: 88px; }
.shop-summary h2 { font-size: 1.15rem; }
.shop-summary-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.shop-summary-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.shop-summary-lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-sum { margin: 0 0 12px; }
.shop-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.shop-sum dt { color: var(--ink-2); }
.shop-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.shop-sum-total { border-top: 2px solid var(--line); margin-top: 6px; padding-top: 8px !important; font-weight: 800; font-size: 1.05rem; }
.shop-sum-total dt { color: var(--ink); }
.shop-sum-total.shop-sum-alt { border-top: 0; margin-top: 0; padding-top: 2px !important; }
.shop-sum dd, .shop-items td:not(:first-child), .shop-orders td:nth-child(n+3), .shop-report td:not(:first-child) { white-space: nowrap; }
.shop-delivers p { display: inline; margin: 0; }

/* Orders */
.shop-order-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shop-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 18px 0 22px; padding: 0; counter-reset: shopstep; }
.shop-timeline li { position: relative; padding-top: 38px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--ink-2); counter-increment: shopstep; }
.shop-timeline li::before { content: counter(shopstep); position: absolute; top: 0; left: 50%; z-index: 1; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--card); color: var(--ink-2); font-weight: 800; }
.shop-timeline li::after { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.shop-timeline li:first-child::after { display: none; }
.shop-timeline li.done { color: var(--ink); }
.shop-timeline li.done::before { content: "\2713"; border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.shop-timeline li.done::after, .shop-timeline li.current::after { background: var(--green); }
.shop-timeline li.current { color: var(--ink); }
.shop-timeline li.current::before { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); animation: shopPulse 2.4s ease-in-out infinite; }
.shop-pay { margin: 18px 0 24px; padding: 18px 20px; border: 2px solid var(--green); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.shop-pay h2 { font-size: 1.25rem; }
.shop-pay-instructions { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--green-soft); }
.shop-pay-instructions p:last-child { margin-bottom: 0; }
.shop-ref { font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: .05em; color: var(--green-dark); }
.shop-items td:not(:first-child), .shop-items th:not(:first-child), .shop-report td:not(:first-child) { font-variant-numeric: tabular-nums; }
.shop-items tfoot th { text-align: right; font-weight: 600; background: none; }
.shop-items .shop-total th, .shop-items .shop-total td { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--line); }
.shop-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; border-radius: 10px; }
.shop-late td { background: var(--gold-soft); }
.shop-history { margin: 18px 0; }
.shop-history summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.shop-history .updates p { margin: 2px 0 0; }
.shop-cancel { margin: 18px 0; }
.shop-order-actions .btn { min-height: 44px; }

/* Store owners */
.shop-manage-nav a, .shop-store-switch a, .shop-order-tabs a { text-transform: none; min-height: 44px; display: inline-flex; align-items: center; }
.shop-mlist { list-style: none; display: grid; gap: 10px; margin: 0 0 18px; padding: 0; }
.shop-mitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.shop-order-row { grid-template-columns: minmax(0, 1fr) auto; }
.shop-mitem p { margin: 2px 0 0; }
.shop-mitem a { color: var(--ink); }
.shop-mitem-img { display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--green-soft); }
.shop-mitem-img img, .shop-mitem-img .pet-art { width: 100%; height: 100%; object-fit: cover; }
.shop-mitem.is-off .shop-mitem-img, .shop-mitem.is-off .shop-mitem-info > a { opacity: .55; }
.shop-mitem-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.shop-mitem-actions form { margin: 0; }
.shop-mitem-actions .btn { min-height: 40px; }
.shop-photo-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.shop-photo-edit label { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.shop-photo-edit img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.shop-dash-store { padding: 4px 0 10px; }
.shop-dash-store + .shop-dash-store { border-top: 1px solid var(--line); padding-top: 12px; }
.shop-dash-store .dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Selling */
.shop-sell-points { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; }
.shop-sell-points li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.shop-sell-points li > .icon { width: 30px; height: 30px; padding: 5px; border-radius: 10px; color: var(--green); background: var(--green-soft); }
.shop-sell-points strong { display: block; margin-bottom: 2px; }
.shop-sell-points span { color: var(--ink-2); font-size: .95rem; }
.shop-sell-points span strong { color: var(--ink); }

/* Phones */
@media (max-width: 860px) {
  .shop-checkout-grid { grid-template-columns: 1fr; gap: 20px; }
  .shop-summary { position: static; order: -1; }
  .shop-store-info { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .shop-grid:not(.rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-rail { grid-auto-columns: 46%; gap: 12px; }
  .shop-card .card-body { padding: 10px 10px 12px; }
  .shop-card h3 { font-size: .95rem; }
  .shop-card .card-media .badge { top: 8px; left: 8px; font-size: .7rem; padding: 2px 8px; }
  .shop-card .card-media .shop-badge-oos { top: auto; bottom: 8px; }
  .shop-flagship { grid-template-columns: 72px 1fr; gap: 14px; padding: 16px; }
  .shop-flagship .shop-logo { width: 72px; height: 72px; border-radius: 16px; }
  .shop-store-head { padding: 16px; gap: 14px; }
  .shop-store-head .shop-logo-lg { width: 72px; height: 72px; border-radius: 16px; }
  .shop-line { grid-template-columns: 60px 1fr; gap: 12px; }
  .shop-line-img { width: 60px; height: 60px; }
  .shop-line-total { grid-column: 2; }
  .shop-cart-foot .btn { width: 100%; }
  .shop-mitem { grid-template-columns: 56px minmax(0, 1fr); }
  .shop-mitem-img { width: 56px; height: 56px; }
  .shop-mitem-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .shop-order-row { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-timeline li { font-size: .75rem; }

  /* Sticky add-to-cart bar above the tab bar */
  .shop-product { padding-bottom: 128px; }
  .shop-buy { position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 15; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 30px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--card); box-shadow: var(--shadow); animation: shopBarUp .45s .2s both cubic-bezier(.2, .7, .2, 1); }
  .shop-buy-price { display: block; flex: none; min-width: 0; }
  .shop-buy-price .shop-price { flex-direction: column; gap: 0; line-height: 1.2; }
  .shop-buy-price .shop-price-was { font-size: .78rem; }
  .shop-qty span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shop-qty input { width: 64px; }
  .shop-add { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
}

@keyframes shopBarUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes shopPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shopPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--gold-soft); } 50% { box-shadow: 0 0 0 6px var(--gold-soft); } }

@media (prefers-reduced-motion: reduce) {
  .shop-buy, .shop-cart-count, .shop-timeline li.current::before { animation: none; }
  .shop-flagship, .shop-bar a, .shop-chip, .shop-flagship-go .icon { transition: none; }
  .shop-flagship:hover, .shop-flagship:hover .shop-flagship-go .icon { transform: none; }
}

/* zy-navigation.css */
/* Navigation: header, Explore menu, phone menu, search and the /explore page. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.header-inner { position: relative; }
.header-tools { display: none; align-items: center; gap: 4px; }
.search-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); }
.search-btn .icon { width: 24px; height: 24px; }
.search-btn:hover { background: var(--green-soft); color: var(--green-dark); }
.nav-search { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0 !important; border-radius: 12px; }
.nav-search .icon { width: 20px; height: 20px; opacity: 1 !important; display: inline !important; }
.nav-search-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Desktop Explore panel, anchored to the header so it never runs off-screen. */
.explore { position: static; }
.mega { right: 16px; left: auto; width: min(980px, calc(100vw - 32px)); grid-template-columns: repeat(4, 1fr); top: calc(100% - 4px); }
.mega-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.mega-search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; background: var(--bg); border: 1.5px solid var(--field-line); border-radius: 14px; padding: 4px 4px 4px 12px; }
.mega-search > .icon { color: var(--ink-2); }
.mega-search input { border: 0 !important; background: transparent; padding: 8px 4px; box-shadow: none !important; min-width: 0; }
.mega-all { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 700; color: var(--green) !important; padding: 8px 12px !important; }

/* Open on hover too for mouse users; a short delay stops it flashing open when the pointer passes by. */
@media (hover: hover) and (min-width: 1081px) {
  .explore:hover .mega { opacity: 1; visibility: visible; transform: none; transition-delay: .12s; }
  .explore:hover .chev { transform: rotate(180deg); }
}

/* Phone and tablet menu: every feature visible at once, grouped, no nested toggle. */
@media (max-width: 1080px) {
  .header-tools { display: flex; }
  .main-nav .nav-search { display: none; }
  .js .site-header .main-nav { max-height: calc(100vh - 80px); overflow-y: auto; }
  .main-nav a.nav-primary { display: none; }
  .explore-btn { display: none !important; }
  .explore .mega, .explore.open .mega { display: grid; position: static; width: auto; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 4px 0 8px; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }
  .mega-col { min-width: 0; }
  .mega a small { display: none; }
  .mega-foot { padding-top: 10px; }
  .mega-search { display: none; }
  /* Without JavaScript the menu is a scrolling row: show only the main links there. */
  html:not(.js) .explore { display: none; }
  html:not(.js) .main-nav a.nav-primary { display: inline-flex; }
}
@media (max-width: 520px) {
  .explore .mega, .explore.open .mega { grid-template-columns: 1fr; }
}

/* Footer: brand plus one column per feature group. */
.footer-grid { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 24px; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Search box (search page, explore page). */
.site-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--field-line); border-radius: 18px; padding: 6px 6px 6px 16px; box-shadow: var(--shadow); max-width: 720px; margin-bottom: 28px; }
.site-search > .icon { width: 22px; height: 22px; color: var(--ink-2); flex: none; }
.site-search input { border: 0 !important; background: transparent; box-shadow: none !important; font-size: 1.05rem; min-width: 0; }
.site-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 110, 63, .15); }

/* Explore page and feature results. */
.explore-group { margin-bottom: 28px; }
.explore-group h2, .explore-sub { font-size: 1.2rem; }
.explore-grid, .search-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.search-features { margin-bottom: 24px; }
.explore-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.explore-card:hover { transform: translateY(-3px); border-color: var(--green); color: var(--ink); }
.explore-card strong { display: block; }
.explore-card small { display: block; color: var(--ink-2); font-size: .85rem; }
.explore-card .po-arrow { margin-left: auto; color: var(--ink-2); }

/* Search results. */
.search-group { margin-bottom: 26px; }
.search-group h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.search-group h2 .icon { color: var(--green); }
.search-results { list-style: none; padding: 0; margin: 0 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.search-results li + li { border-top: 1px solid var(--line); }
.search-results a { display: flex; flex-direction: column; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.search-results a:hover { background: var(--green-soft); }
.search-results span { color: var(--ink-2); font-size: .9rem; }
.search-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }

/* zz-readability.css */
/* Readability pass: loaded last so it settles contrast and minimum text sizes across every feature. */

/* Smallest text on the site is 12–13px, never smaller. */
.topic, .cm-chip, .badge, .shop-card-store, .svc-status, .svc-verified, .sponsor-label { font-size: .82rem; }
.ev-dow, .ev-mon { font-size: .8rem; }
.mega h3, .shop-timeline li { font-size: .8rem; }
.shop-card .card-media .badge { font-size: .8rem; }
.shop-buy-price .shop-price-was { font-size: .85rem; }
.photo-preview figcaption { font-size: .75rem; }
@media (max-width: 760px) {
  .tabbar a { font-size: .76rem; white-space: nowrap; letter-spacing: -.01em; }
}

/* Brand-coloured buttons dark enough for white text (WCAG AA 4.5:1). */
.btn-whatsapp { background: #0f7a40; border-color: #0f7a40; }
.btn-whatsapp:hover { background: #0b6332; border-color: #0b6332; }
.btn-facebook { background: #1462c8; border-color: #1462c8; }
.btn-facebook:hover { background: #0f4fa3; border-color: #0f4fa3; }

/* Text on gold is always dark, in light and dark mode. */
.btn-gold, .btn-gold:hover, .site-footer a.btn-gold, .site-footer a.btn-gold:hover,
.badge-adoption, .badge-featured, .how-num, .coming-badge { color: #17201b; }

/* Dark mode: accents get lighter so they stay visible on dark backgrounds,
   so anything sitting ON an accent colour switches to dark text. */
@media (prefers-color-scheme: dark) {
  .btn:not(.btn-ghost):not(.btn-outline-light):not(.btn-whatsapp):not(.btn-facebook),
  .btn:not(.btn-ghost):not(.btn-outline-light):not(.btn-whatsapp):not(.btn-facebook):hover,
  .main-nav a.nav-cta, .main-nav a.nav-cta:hover,
  .tabs a[aria-selected="true"], .head-icon, .avatar,
  .badge:not(.badge-verified):not(.badge-muted):not(.shop-badge-sale), .emergency-bar, .emergency-bar a,
  .tabbar .tab-post .icon, .svc-quick a[aria-current="true"], .svc-verified .icon, .svc-timeline .is-done .svc-dot, .svc-timeline .is-stopped .svc-dot { color: #06130c; }
  .badge-verified { color: var(--green); }
  .site-footer a.btn-gold { color: #17201b; }
}