/*
 * НАШІ ІСПАНІЯ — design tokens + component classes.
 *
 * Structure / craft from Say Briefly (Refero): cream sketchbook paper,
 * chunky display type, highlighter word-washes, sticky-note cards,
 * 6px buttons / 12px cards, borders over heavy shadows, floating pill nav.
 *
 * Color authority stays with the PDF guides: warm cream, deep royal blue
 * as the structural ink (Say Briefly's forest-green role), and a vivid
 * UA-gold highlighter — not a copy of the Refero greens/teals.
 *
 * Tailwind CDN owns layout utilities; this file owns the brand.
 * Map internals live in map.css. Page-only tweaks stay in view <style>.
 */

:root {
  /* Surfaces — airy: the page sits on a fixed silk photo (.site-bg), so
     --bg is the photo's average lavender-blue fallback, and raised
     surfaces are translucent "liquid glass" (see .glass below). */
  --bg: #B9C6EE;
  --bg-veil: rgba(243, 246, 252, .62);
  --surface: #F3F6FC;
  --surface-raised: rgba(255, 255, 255, .62);

  /* Liquid glass */
  --glass-bg: rgba(255, 255, 255, .42);
  --glass-bg-strong: rgba(255, 255, 255, .62);
  --glass-bg-soft: rgba(255, 255, 255, .28);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-highlight: rgba(255, 255, 255, .85);
  --glass-blur: 18px;
  --glass-shadow: 0 8px 32px rgba(20, 33, 61, .08);
  --glass-shadow-hover: 0 14px 40px rgba(20, 33, 61, .14);

  /* Structural ink = PDF royal navy (Say Briefly "forest ink" role) */
  --ink: #14213D;
  --muted: #4A5578;
  --line: rgba(20, 33, 61, .12);
  --blue: #1A3A9E;
  --blue-deep: #0E1F4D;

  /* Highlighter / sticky accents — UA gold family, marker energy */
  --gold: #FFE566;
  --gold-soft: #FFF4B8;
  --gold-deep: #C99614;
  --ua-blue: #0057B7;
  --ua-yellow: #FFD400;

  /* Sticky-note pastels (sprinkle only — UA-tinted, not Refero clones) */
  --sticky-sky: #C9DCFF;
  --sticky-lemon: #FFF0A8;
  --sticky-cream: #F3E8D4;

  --radius-card: 16px;
  --radius-section: 24px;
  --radius-btn: 10px;
  --radius-chip: 999px;
  --radius-nav: 999px;
  --shadow-soft: rgba(20, 33, 61, .06) 0 1px 2px 0;
  --shadow-hover: rgba(20, 33, 61, .10) 0 4px 14px -2px, rgba(20, 33, 61, .06) 0 1px 3px 0;
  --shadow-nav: rgba(20, 33, 61, .10) 0 12px 32px -8px, rgba(20, 33, 61, .04) 0 2px 8px 0;

  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --hero-bg: transparent;
  --map-land: #FFFFFF;
  --map-land-hover: var(--gold-soft);
  --map-line: var(--blue);
  --map-line-soft: #C5CEE8;
  --pin: var(--blue);
  --pin-badge: var(--gold-deep);
  --focus: var(--blue);

  /* Motion tokens (T28) — see docs T28-motion-brief.md */
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 600ms;
  --dur-reveal: 900ms;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------- */
/* Fixed photo background (silk) + liquid glass                            */
/* ---------------------------------------------------------------------- */

/* .site-bg is a separate fixed layer under everything; swapping the <img>
   for a <video> or a canvas later needs no other change. The tiny inline
   blur-up poster paints instantly; the real photo fades in on load. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg) center / cover no-repeat;
}

.site-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  opacity: 0;
  transition: opacity .6s ease;
  transform: scale(1.08);
  transform-origin: 50% 50%;
  will-change: transform;
}

.site-bg img.is-loaded {
  opacity: 1;
}

@media (max-width: 767px) and (orientation: portrait) {
  .site-bg img {
    object-position: 50% 62%;
  }
}

/* Everything else stacks above the photo (.site-header is sticky with its
   own z-index, .to-top is fixed — both already sit above the layer). */
body > main,
body > footer,
body > .flash-stack-wrap {
  position: relative;
  z-index: 1;
}

.glass,
.glass-strong,
.glass-soft {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}

.glass-strong {
  background: var(--glass-bg-strong);
}

.glass-soft {
  background: var(--glass-bg-soft);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-strong,
  .glass-soft {
    background: rgba(255, 255, 255, .92);
  }
}

@media (max-width: 767px) {
  :root {
    --glass-blur: 12px;
  }
}

/* Light veil under text-heavy sections so copy never fights the silk. */
.section-veil {
  background: var(--bg-veil);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: .02em;
  margin: 0;
}

a {
  color: var(--blue);
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
}

a, button, input, select, textarea, [tabindex] {
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.container-x {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .container-x {
    padding-inline: 24px;
  }
}

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

.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 14px -4px rgba(20, 33, 61, .18);
}

/* Small gold marker dot with a soft glow — the brand accent that used to be
   the whole flat yellow fill. */
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, #FFF3A6, var(--ua-yellow) 60%, var(--gold-deep));
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .22);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--ink);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  margin: 0 0 8px;
}

.mark {
  /* A gold band a bit shorter than the em box (84%, centred) so it never
     reaches into the line above/below in tight-leading headings. */
  background: linear-gradient(var(--gold), var(--gold)) no-repeat left center / 100% 84%;
  color: inherit;
  padding: 0 .18em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lead {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 60ch;
  opacity: .88;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}

.btn:hover {
  box-shadow: var(--shadow-hover);
}

.btn:active {
  box-shadow: var(--shadow-soft);
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: var(--blue-deep);
  color: #FFFFFF;
  border-color: var(--blue-deep);
}

.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.btn-secondary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.btn-secondary:hover {
  background: #FFE04A;
  border-color: #FFE04A;
}

.btn-outline {
  background: rgba(255, 255, 255, .45);
  color: var(--ink);
  border-color: rgba(20, 33, 61, .28);
  box-shadow: none;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, .8);
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(20, 33, 61, .05);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn[disabled],
.btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ---------------------------------------------------------------------- */
/* Cards, chips, avatars                                                   */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  transition: background-color .15s ease, box-shadow .15s ease;
}

a.card:hover,
.card.is-hoverable:hover {
  box-shadow: var(--shadow-hover);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-chip);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.chip .icon {
  width: 14px;
  height: 14px;
}

.chip-blue {
  background: rgba(26, 58, 158, .10);
  color: var(--blue);
}

.chip-gold {
  background: var(--gold);
  color: var(--ink);
}

.chip-muted {
  background: rgba(20, 33, 61, .07);
  color: var(--muted);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gold-soft);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--line);
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  background: var(--gold-soft);
  color: var(--blue);
  font-family: var(--font-heading);
  font-weight: 700;
}

.avatar-sm {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.avatar-md {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.avatar-lg {
  width: 96px;
  height: 96px;
  font-size: 28px;
}

.avatar-xl {
  width: 160px;
  height: 160px;
  font-size: 44px;
  border-width: 4px;
}

/* ---------------------------------------------------------------------- */
/* Visually-hidden utility (form labels kept for screen readers)          */
/* ---------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------- */
/* Tiles (home "Що всередині" / "Категорії" grids)                        */
/* ---------------------------------------------------------------------- */

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease, box-shadow .15s ease;
  min-width: 0;
}

a.tile:hover {
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
  background: var(--glass-bg-strong);
}

.tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  color: var(--blue);
  flex-shrink: 0;
}

.tile-icon .icon {
  width: 20px;
  height: 20px;
}

.promise-tile h3,
.tile-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}

.promise-tile p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  opacity: .8;
}

.tile-count {
  font-size: 13px;
  color: var(--muted);
}

/* Airy: every tile is the same glass; a single gold icon accent on the
   first promise tile is the only colour pop. */
.promise-tile:first-child .tile-icon {
  background: var(--gold);
  color: var(--ink);
}

.category-tile {
  align-items: center;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Business card — used by partials/business_card.php everywhere: home's  */
/* "Нові в каталозі", /catalog, the business page's related list, the     */
/* /my "Ваша картка зараз" preview and the admin business preview. One    */
/* shared look: photo left, text block, action buttons in a row at the    */
/* bottom (SPEC §11 "consistent with the PDF cards"). The whole card is   */
/* clickable via a stretched-link overlay on the name (.business-card-    */
/* link::after) rather than wrapping the card in <a> — an outer <a> with  */
/* nested <a> action buttons is invalid HTML and made every browser split */
/* the card into stray fragments (see docs/superpowers/plans/            */
/* 2026-09-02-nashi-ispania.md §7 T27). Action buttons sit above the      */
/* overlay (z-index) and stay independently focusable.                    */
/* ---------------------------------------------------------------------- */

.business-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  transition: box-shadow .15s ease, background-color .15s ease;
  min-width: 0;
}

.business-card:hover {
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
  background: rgba(255, 255, 255, .78);
}

.business-card-media {
  position: relative;
  flex-shrink: 0;
}

.business-card-featured {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
}

.business-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.business-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.business-card-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
  min-width: 0;
}

/* .chip defaults to white-space:nowrap; a long category name must be able
   to wrap onto its own line inside the (possibly narrow) card head instead
   of overflowing it. */
.business-card-category {
  white-space: normal;
  max-width: 100%;
}

.business-card-link {
  color: inherit;
  text-decoration: none;
}

.business-card-link:hover {
  text-decoration: underline;
}

/* Stretched link: covers the whole .business-card (nearest positioned
   ancestor), so the entire card is clickable while the name stays the
   accessible link text. */
.business-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.business-card-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.business-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.business-card-description {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.business-card-compact .business-card-description {
  display: none;
}

.business-card-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 479px) {
  .business-card {
    padding: 16px;
    gap: 12px;
  }

  .business-card-media .avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 20px;
  }

  /* .btn-sm (37px tall) is under the 44px mobile tap-target minimum;
     grow just the card action buttons on narrow viewports. */
  .business-card-action {
    min-height: 44px;
    padding-block: 12px;
  }
}

/* ---------------------------------------------------------------------- */
/* Catalog grid + filter bar (partials/catalog_results.php, filter_bar.php)*/
/* ---------------------------------------------------------------------- */

.catalog-filter-sticky {
  position: sticky;
  /* --site-header-h is measured by app.js (initScrollUi) so the bar sits
     right under the pill header at every width; 72px is the fallback. */
  top: calc(var(--site-header-h, 60px) + 12px);
  z-index: 10;
  transition: transform var(--dur-slow) var(--ease-emph), opacity var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  padding-block: 16px;
  border-bottom: 1px solid var(--glass-border);
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-bar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.field {
  position: relative;
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  align-items: center;
}

.field .icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
}

.field .input,
.field .select {
  width: 100%;
}

.filter-bar-search .input {
  padding-left: 40px;
}

.filter-bar-online {
  flex: 0 0 auto;
  white-space: nowrap;
}

.filter-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.filter-bar-count {
  font-weight: 600;
  color: var(--ink);
}

.js-reset {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.js-reset:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .filter-bar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .field {
    flex-basis: auto;
  }
}

.catalog-results {
  margin-top: 24px;
  transition: opacity .15s ease;
}

.catalog-results.is-loading {
  opacity: .5;
}

.catalog-group {
  margin-bottom: 48px;
}

.catalog-group:last-child {
  margin-bottom: 0;
}

.catalog-group .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  margin-bottom: 20px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

.label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.textarea {
  resize: vertical;
  min-height: 120px;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 63, 163, .15);
  outline: none;
}

.input.has-error,
.select.has-error,
.textarea.has-error {
  border-color: #C0392B;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.help {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.legal-meta {
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
}

.field-error {
  color: #C0392B;
  font-size: 13px;
  margin-top: 6px;
}

/* ---------------------------------------------------------------------- */
/* Flash + toast                                                           */
/* ---------------------------------------------------------------------- */

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

.flash-close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.flash-close:hover {
  opacity: 1;
}

.flash-success {
  background: #E7F5EC;
  border-color: #BFE3CC;
  color: #1E6B3A;
}

.flash-error {
  background: #FBEAE8;
  border-color: #F1C6C0;
  color: #A5352A;
}

.flash-info {
  background: rgba(31, 63, 163, .08);
  border-color: rgba(31, 63, 163, .25);
  color: var(--blue-deep);
}

.flash-warning {
  background: var(--gold-soft);
  border-color: #E7C77B;
  color: #8A5B12;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: var(--blue-deep);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------- */
/* Ribbon motif — a quiet blue/yellow wave, used at most twice per page    */
/* ---------------------------------------------------------------------- */

.ribbon,
.ribbon-bottom {
  position: relative;
}

.ribbon::before,
.ribbon-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2080'%3E%3Cpath%20d='M0%2036%20Q150%20-4%20300%2036%20T600%2036%20T900%2036%20T1200%2036'%20stroke='%230057B7'%20stroke-width='3'%20fill='none'%20opacity='.55'/%3E%3Cpath%20d='M0%2054%20Q150%2014%20300%2054%20T600%2054%20T900%2054%20T1200%2054'%20stroke='%23FFD700'%20stroke-width='3'%20fill='none'%20opacity='.65'/%3E%3Cpath%20d='M0%2022%20Q150%20-10%20300%2022%20T600%2022%20T900%2022%20T1200%2022'%20stroke='%230057B7'%20stroke-width='1.5'%20fill='none'%20opacity='.25'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 560px 40px;
  pointer-events: none;
  z-index: 2;
}

.ribbon::before {
  top: 0;
}

.ribbon-bottom::after {
  bottom: 0;
}

/* ---------------------------------------------------------------------- */
/* Stats row                                                               */
/* ---------------------------------------------------------------------- */

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------- */
/* Map shell (structure only — see file banner for what lives in map.css)  */
/* ---------------------------------------------------------------------- */

.map-wrap {
  position: relative;
  width: 100%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-section);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  padding: 20px 16px 56px;
  overflow: visible;
}

.map-wrap-mini {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 12px;
}

/* Hero map (T31): compact, beside the hero copy on desktop, calm until the
   visitor points at it — then it turns fully opaque, grows a touch and the
   hand-written labels / landmarks / online badge fade in. Touch devices
   (no hover) keep the map fully visible and static. */
.map-wrap-hero {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-emph),
    box-shadow var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .map-wrap-hero {
    opacity: .6;
    transform: scale(.96);
    transform-origin: 60% 50%;
  }

  .map-wrap-hero .map-label,
  .map-wrap-hero .map-landmark,
  .map-wrap-hero .map-compass,
  .map-wrap-hero .map-online-badge {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
  }

  .map-wrap-hero:hover,
  .map-wrap-hero:focus-within,
  .map-wrap-hero.is-active {
    opacity: 1;
    transform: scale(1.03);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
  }

  .map-wrap-hero:hover .map-label,
  .map-wrap-hero:focus-within .map-label,
  .map-wrap-hero.is-active .map-label {
    opacity: .55;
  }

  .map-wrap-hero:hover .map-landmark,
  .map-wrap-hero:focus-within .map-landmark,
  .map-wrap-hero.is-active .map-landmark {
    opacity: .45;
  }

  .map-wrap-hero:hover .map-compass,
  .map-wrap-hero:focus-within .map-compass,
  .map-wrap-hero.is-active .map-compass {
    opacity: .5;
  }

  .map-wrap-hero:hover .map-online-badge,
  .map-wrap-hero:focus-within .map-online-badge,
  .map-wrap-hero.is-active .map-online-badge {
    opacity: 1;
  }
}

.map-online-badge {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  background: var(--gold);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.map-online-badge:hover {
  background: var(--ua-yellow);
  box-shadow: var(--shadow-hover);
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------- */
/* Public header + mobile nav                                             */
/* ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  padding: 12px 0 0;
  transition: transform var(--dur-slow) var(--ease-emph), opacity var(--dur) var(--ease-out);
}

/* Auto-hide (T31): app.js toggles .is-hidden on scroll-down; the pill
   slides back on scroll-up, at the very top, when the pointer reaches the
   top edge, or when anything inside gets focus. */
.site-header.is-hidden {
  transform: translateY(calc(-100% - 16px));
  opacity: 0;
  pointer-events: none;
}

.site-header.is-hidden:focus-within {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-nav);
}

/* T31: the logo floats in its own glass square to the left of the pill
   (client request); the pill keeps the wordmark, socials and burger. */
.site-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo {
  flex: 0 0 auto;
  display: block;
  width: 62px;
  height: 62px;
  padding: 3px;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-emph), box-shadow var(--dur) var(--ease-out),
    width var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}

.site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-logo:hover {
  transform: translateY(-1px) rotate(-2deg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
}

.site-header.is-scrolled .site-logo {
  width: 56px;
  height: 56px;
}

.site-header-inner {
  flex: 1 1 auto;
  min-width: 0;
}

.brand-mark-text::before {
  display: none;
}

/* Round icon-only buttons (Instagram / WhatsApp / bot) in the header pill. */
.header-social {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.btn.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  box-shadow: none;
}

.btn.btn-icon:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.btn.btn-icon .icon {
  width: 18px;
  height: 18px;
}

/* Small phones: shrink the brand and the round buttons so logo + name +
   Instagram/WhatsApp + burger fit on one row of the pill. */
@media (max-width: 479px) {
  .brand-mark {
    font-size: 15px;
    gap: 6px;
  }

  .brand-mark::before {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .btn.btn-icon,
  .site-header [data-nav-toggle] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .site-header-right {
    gap: 6px;
  }

  .site-header-inner {
    padding: 8px 10px;
  }

  .site-logo,
  .site-header.is-scrolled .site-logo {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .site-header-row {
    gap: 8px;
  }

  .brand-mark-text {
    font-size: 14px;
    letter-spacing: .02em;
  }

  .site-header-inner {
    padding: 8px 8px 8px 12px;
    gap: 8px;
  }

  .site-header-right {
    gap: 4px;
  }
}

@media (max-width: 339px) {
  .brand-mark span {
    display: none;
  }
}

.brand-mark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-mark::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  background: url("/assets/logo/logo-96.png") center / cover no-repeat;
  box-shadow: 0 2px 8px rgba(20, 33, 61, .18);
}

.site-nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-btn);
}

.site-nav a:hover,
.site-nav a.is-active {
  background: var(--gold);
  color: var(--ink);
}

/* Mobile-first nav: toggle visible, links collapse until .is-open */
.site-header [data-nav-toggle] {
  display: inline-flex;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .5);
  border-radius: 999px;
  box-shadow: none;
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
}

.site-header-inner {
  flex-wrap: wrap;
}

.site-header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.site-header-right:has(.site-nav.is-open) {
  width: 100%;
}

.site-nav {
  display: none;
  width: 100%;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.site-nav.is-open {
  display: flex;
}

.site-nav a {
  width: 100%;
  padding: 10px 12px;
}

/* T31: the burger stays at every width (client request). On wider screens
   the menu opens as a glass dropdown hanging under the pill instead of
   wrapping the pill onto a second row. */
@media (min-width: 768px) {
  .site-header-inner {
    flex-wrap: nowrap;
  }

  .site-header-right {
    position: relative;
    width: auto;
    flex-wrap: nowrap;
  }

  .site-header-right:has(.site-nav.is-open) {
    width: auto;
  }

  .site-nav.is-open {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: auto;
    min-width: 260px;
    flex-basis: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    margin-top: 0;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
    animation: nav-drop var(--dur) var(--ease-emph) both;
  }

  .site-nav.is-open a {
    width: auto;
    padding: 10px 14px;
    border-radius: 12px;
  }

  .site-nav.is-open .btn {
    margin-top: 6px;
    justify-content: center;
  }
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Breadcrumbs (T32 SEO)                                                   */
/* ---------------------------------------------------------------------- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.breadcrumbs [aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.breadcrumbs-sep {
  opacity: .6;
}

/* ---------------------------------------------------------------------- */
/* Scroll-to-top (T31)                                                     */
/* ---------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-emph),
    background-color .15s ease;
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.to-top .icon {
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {
  .to-top {
    right: 24px;
    bottom: 24px;
  }
}

/* ---------------------------------------------------------------------- */
/* Category rail (T31): one horizontal, snap-scrolling row of tiles        */
/* ---------------------------------------------------------------------- */

.cat-rail-wrap {
  position: relative;
  margin-top: 28px;
}

.cat-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 6px 4px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.cat-rail::-webkit-scrollbar {
  display: none;
}

.cat-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.cat-rail > .tile {
  flex: 0 0 160px;
  scroll-snap-align: start;
  min-height: 140px;
  padding: 18px 16px;
  justify-content: center;
}

.cat-rail.is-dragging > .tile {
  pointer-events: none;
}

@media (min-width: 768px) {
  .cat-rail > .tile {
    flex-basis: 200px;
    padding: 22px;
  }
}

.cat-rail-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-60%);
  transition: opacity var(--dur) var(--ease-out), background-color .15s ease;
}

.cat-rail-btn[data-rail-prev] {
  left: -12px;
}

.cat-rail-btn[data-rail-next] {
  right: -12px;
}

.cat-rail-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.cat-rail-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

.cat-rail-btn .icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .cat-rail-btn {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------------- */
/* Public footer (T31): glass slab, inline styles moved here from partial */
/* ---------------------------------------------------------------------- */

.site-footer {
  position: relative;
  margin: 48px 16px 16px;
  border-radius: var(--radius-section);
}

.site-footer-inner {
  padding: 40px 24px 24px;
}

.site-footer-brand {
  font-size: 20px;
  display: inline-block;
}

.site-footer-tagline {
  font-size: 14px;
  margin: 8px 0 0;
}

.site-footer-social {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.site-footer-nav a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer-nav a:hover {
  text-decoration: underline;
}

.site-footer hr {
  margin: 24px 0;
  border-top-color: var(--glass-border);
}

.site-footer-note {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

@media (min-width: 768px) {
  .site-footer {
    margin: 64px auto 24px;
    max-width: calc(1200px - 48px);
  }

  .site-footer-inner {
    padding: 48px 40px 28px;
  }
}

/* ---------------------------------------------------------------------- */
/* Admin + my shells                                                       */
/* ---------------------------------------------------------------------- */

.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-main {
  min-width: 0;
  padding: 28px 24px 64px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--muted);
}

.admin-topbar [data-nav-toggle] {
  display: none;
}

@media (max-width: 1023px) {
  .admin-shell {
    display: block;
  }

  .admin-sidebar {
    display: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .admin-sidebar.is-open {
    display: flex;
  }

  .admin-topbar {
    justify-content: space-between;
  }

  .admin-topbar [data-nav-toggle] {
    display: inline-flex;
  }
}

.my-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  flex-wrap: wrap;
}

.my-topbar nav {
  display: flex;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

.my-topbar nav a,
.my-topbar nav button {
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.my-topbar nav a.is-active {
  color: var(--blue);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
}

/* ---------------------------------------------------------------------- */
/* Admin nav + table                                                       */
/* ---------------------------------------------------------------------- */

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.admin-nav-item .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.admin-nav-item:hover {
  background: rgba(20, 33, 61, .05);
  color: var(--ink);
}

.admin-nav-item.is-active {
  background: var(--blue);
  color: #FFFFFF;
}

.badge-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-chip);
  background: var(--gold);
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 700;
}

.admin-nav-item.is-active .badge-count {
  background: #FFFFFF;
  color: var(--blue);
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-table th {
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: rgba(31, 63, 163, .04);
}

/* ---------------------------------------------------------------------- */
/* Empty state                                                             */
/* ---------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
}

.empty-state p {
  margin: 0 0 20px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/* === T28a motion foundation === */
/* ---------------------------------------------------------------------- */

/* G1 — button press + primary "sticker" offset-shadow. */
.btn {
  transform: scale(1);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(.98);
}

.btn-primary {
  box-shadow: 0 6px 18px -6px rgba(14, 31, 77, .55);
  transition: background-color .15s ease, border-color .15s ease,
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn-primary:active {
  box-shadow: 0 2px 8px -4px rgba(14, 31, 77, .5);
  transform: scale(.98);
}

/* G3 — card/tile/business-card hover lift (soft glass shadow, no offset). */
.card,
.tile,
.business-card {
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), background-color .15s ease;
}

a.card:hover,
.card.is-hoverable:hover,
a.tile:hover,
.business-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
}

/* G5 — header pill shrinks on scroll (JS toggles .is-scrolled via app.js). */
.site-header-inner {
  transition: padding var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.site-header.is-scrolled .site-header-inner {
  padding: 8px 14px;
}

/* G6 — gold marker underline drawn left-to-right on nav links. */
.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--gold-deep);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

/* Active state keeps its own solid gold background; the marker underline is
   redundant there, so it stays hidden to avoid fighting that style. */
.site-nav a.is-active::after {
  transform: scaleX(0);
}

/* G8 — chip hover. */
.chip {
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* Reveal base state: GSAP animates these to visible; without JS (motion.js
   removes html.js-motion when GSAP/ScrollTrigger fail to load) content stays
   fully visible. No CSS transition here — motion.js controls the animation. */
html.js-motion [data-reveal],
html.js-motion [data-reveal-child] {
  opacity: 0;
}

/* === T28b home ==========================================================
   H2 marker draw, H7/H8 home-only tile grids, H8 icon pulse. Hero/polina/
   cta-band initial-hidden states live in src/views/public/home.php's own
   <style> block (page-local per T28-plan.md "Files"). */

/* H2 — `.mark` draws itself left-to-right instead of the plain gold box.
   Without js-motion (no JS / CDN failure) `.mark` keeps its original flat
   background from the base rule above — no regression. */
html.js-motion .mark {
  background-size: 0% 84%;
  transition: background-size var(--dur-reveal) var(--ease-emph);
}

html.js-motion .mark.is-drawn {
  background-size: 100% 84%;
}

/* H7/H8 — promise + category tile grids get their own hidden state (custom
   rotate/stagger in motion.js HOME section, not the generic [data-reveal]
   fromTo) so they are not double-animated by CORE's reveal(). */
html.js-motion [data-home-tiles] > * {
  opacity: 0;
}

/* H8 — one-shot icon pulse on hover, never an infinite loop. */
.tile-icon {
  transform-origin: center;
}

@keyframes tile-icon-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.tile:hover .tile-icon {
  animation: tile-icon-pulse .24s var(--ease-out);
}

/* ---------------------------------------------------------------------- */
/* === T28c catalog, business, interactions === */
/* ---------------------------------------------------------------------- */

/* G4 — while `.business-card` tilt is active (motion.js sets
   [data-tilt-ready] under pointer:fine + no-reduced-motion), GSAP owns the
   card's `transform` (lift + rotateX/rotateY together), so the plain CSS
   hover lift from the T28a block above must stand down for that card to
   avoid two writers fighting over the same property. */
.business-card[data-tilt-ready]:hover {
  transform: none;
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-hover);
}

/* C3 — sticky filter bar gets a soft edge once it is pinned under the pill
   header (motion.js toggles `.is-stuck` via an IntersectionObserver on the
   sentinel placed right above it in catalog.php). */
.catalog-filter-sentinel {
  height: 1px;
}

.catalog-filter-sticky {
  transition: transform var(--dur-slow) var(--ease-emph), opacity var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.catalog-filter-sticky.is-stuck {
  border-bottom-color: var(--glass-border);
  box-shadow: 0 10px 24px -12px rgba(20, 33, 61, .28);
}

/* T31: the pinned filter bar follows the header — slides away on
   scroll-down, returns on scroll-up / at the top / while a field has focus
   (app.js toggles .is-hidden on every [data-scroll-hide]). Only while stuck:
   in normal flow it must never disappear. */
.catalog-filter-sticky.is-stuck.is-hidden:not(:focus-within) {
  transform: translateY(calc(-100% - var(--site-header-h, 60px) - 24px));
  opacity: 0;
  pointer-events: none;
}

/* C4 — empty-state icon (wiggled once via motion.js). */
.empty-state-icon {
  display: block;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 12px;
}

/* B3 — «Поділитися» success flash: background gold-soft -> back, 300ms. */
.btn.is-copied {
  background-color: var(--gold-soft);
  transition: background-color .3s ease;
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------- */
/* Dark blue-and-gold theme (public pages, T32) — the client's second      */
/* background is a deep navy flat lay, so text goes light, glass goes      */
/* smoky, and gold becomes the primary action colour. Admin/my/auth keep   */
/* the light tokens.                                                       */
/* ---------------------------------------------------------------------- */

body.theme-dark {
  --bg: #0F3560;
  --bg-veil: rgba(9, 34, 70, .55);
  --surface: #0F3560;
  --surface-raised: rgba(255, 255, 255, .10);
  --glass-bg: rgba(255, 255, 255, .10);
  --glass-bg-strong: rgba(14, 45, 92, .62);
  --glass-bg-soft: rgba(255, 255, 255, .06);
  --glass-border: rgba(255, 255, 255, .22);
  --glass-highlight: rgba(255, 255, 255, .30);
  --glass-shadow: 0 10px 36px rgba(2, 12, 35, .35);
  --glass-shadow-hover: 0 16px 44px rgba(2, 12, 35, .5);
  --ink: #F5F7FF;
  --muted: rgba(230, 236, 255, .74);
  --line: rgba(255, 255, 255, .16);
  --blue: #AFC3FF;
  --gold: #F2C14E;
  --gold-soft: rgba(242, 193, 78, .25);
  --gold-deep: #E0A82E;
  --shadow-soft: rgba(2, 12, 35, .25) 0 1px 2px 0;
  --shadow-hover: rgba(2, 12, 35, .35) 0 4px 14px -2px;
  --shadow-nav: rgba(2, 12, 35, .4) 0 12px 32px -8px;
  --focus: #F2C14E;
  --map-line-soft: rgba(255, 255, 255, .35);
  background: var(--surface);
  color: var(--ink);
}

body.theme-dark .site-bg img {
  object-position: 50% 50%;
}

/* Anything drawn on gold keeps dark navy text. */
body.theme-dark .mark,
body.theme-dark .btn-secondary,
body.theme-dark .chip-gold,
body.theme-dark .pin-count,
body.theme-dark .business-card-featured {
  color: #14213D;
}

body.theme-dark .pin-count {
  fill: #14213D;
}

body.theme-dark .mark {
  background-image: linear-gradient(var(--gold), var(--gold));
}

/* While the marker is still "undrawn" (js-motion), keep the word light so it
   is readable on navy; it turns navy the moment the gold wash lands. */
html.js-motion body.theme-dark .mark:not(.is-drawn) {
  color: var(--ink);
}

body.theme-dark .mark {
  transition: background-size var(--dur-reveal) var(--ease-emph), color .25s ease .35s;
}

body.theme-dark .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #14213D;
  box-shadow: 0 8px 22px -8px rgba(242, 193, 78, .7);
}

body.theme-dark .btn-primary:hover {
  background: #FFD166;
  border-color: #FFD166;
}

body.theme-dark .btn-secondary {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .92);
}

body.theme-dark .btn-secondary:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

body.theme-dark .btn-outline {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: var(--ink);
}

body.theme-dark .btn-outline:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .6);
}

body.theme-dark .btn-ghost:hover {
  background: rgba(255, 255, 255, .1);
}

body.theme-dark .btn.btn-icon,
body.theme-dark .site-header [data-nav-toggle] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
}

body.theme-dark .btn.btn-icon:hover,
body.theme-dark .site-header [data-nav-toggle]:hover,
body.theme-dark .to-top:hover,
body.theme-dark .cat-rail-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #14213D;
}

body.theme-dark .site-nav a:hover,
body.theme-dark .site-nav a.is-active {
  background: var(--gold);
  color: #14213D;
}

body.theme-dark .eyebrow {
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08));
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px -6px rgba(2, 12, 35, .5);
}

body.theme-dark .chip-blue {
  background: rgba(175, 195, 255, .18);
  color: #DCE5FF;
}

body.theme-dark .chip-muted {
  background: rgba(255, 255, 255, .12);
  color: var(--muted);
}

body.theme-dark .tile-icon {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
  color: var(--gold);
}

body.theme-dark .promise-tile:first-child .tile-icon {
  background: var(--gold);
  color: #14213D;
}

body.theme-dark .business-card {
  background: rgba(255, 255, 255, .10);
}

body.theme-dark .business-card:hover {
  background: rgba(255, 255, 255, .16);
}

body.theme-dark .business-card-link,
body.theme-dark .business-card-name a {
  color: var(--ink);
}

body.theme-dark .input,
body.theme-dark .select,
body.theme-dark .textarea {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .25);
  color: var(--ink);
}

body.theme-dark .input::placeholder,
body.theme-dark .textarea::placeholder,
body.theme-dark .hero-search input::placeholder {
  color: rgba(230, 236, 255, .6);
}

body.theme-dark .select option {
  color: #14213D;
}

body.theme-dark .hero-search input {
  color: var(--ink);
}

body.theme-dark .hero-search .icon {
  color: var(--gold);
}

body.theme-dark .cta-band {
  background: rgba(255, 255, 255, .08);
}

body.theme-dark .cta-band-tag {
  color: var(--gold);
}

body.theme-dark .cta-band-link,
body.theme-dark a {
  color: var(--blue);
}

body.theme-dark .site-footer-nav a,
body.theme-dark .brand-mark {
  color: var(--ink);
}

body.theme-dark .footer-thanks {
  color: var(--gold);
}

/* Map on the dark card: land stays light, controls/tooltip go smoky. */
body.theme-dark .province {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(15, 53, 96, .9);
}

body.theme-dark .map-wrap[data-interactive="1"] .province.has-businesses:hover,
body.theme-dark .province.has-businesses:focus-visible {
  fill: #FFE9A6;
  stroke: var(--gold-deep);
}

body.theme-dark .map-label,
body.theme-dark .map-landmark,
body.theme-dark .map-compass {
  color: var(--ink);
  fill: var(--ink);
}

body.theme-dark .sea-wave {
  stroke: rgba(255, 255, 255, .5);
}

body.theme-dark .map-control-btn {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .25);
  color: var(--ink);
}

body.theme-dark .map-control-btn:hover {
  background: var(--gold);
  color: #14213D;
}

body.theme-dark .map-tooltip {
  background: rgba(14, 45, 92, .92);
  border-color: rgba(255, 255, 255, .25);
  color: var(--ink);
}

body.theme-dark .map-online-badge {
  color: #14213D;
  border-color: rgba(255, 255, 255, .6);
}

body.theme-dark .inset-frame {
  fill: rgba(255, 255, 255, .12);
  stroke: rgba(255, 255, 255, .35);
}

body.theme-dark .inset-label {
  fill: var(--muted);
}

body.theme-dark .avatar-ring {
  color: var(--gold);
}

body.theme-dark .catalog-filter-sticky {
  background: rgba(14, 45, 92, .7);
}

body.theme-dark ::selection {
  background: var(--gold);
  color: #14213D;
}

/* Logo tile uses exactly the header pill's glass (same fill, blur, border
   and shadow) so the two read as one piece. */
.site-logo,
body.theme-dark .site-logo {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-nav);
}

/* Business card form (/my, /my/create, admin edit): label above the control,
   one column, help and errors under the field. The generic .field is a
   horizontal search-bar row and does not fit a long form. */
.business-form { display: flex; flex-direction: column; gap: 28px; max-width: 720px; }
.business-form .business-form-section { border: 1px solid var(--line, rgba(15, 23, 42, 0.08)); border-radius: 16px; padding: 20px 20px 8px; margin: 0; min-width: 0; background: rgba(255, 255, 255, 0.55); }
.business-form .business-form-section > legend { font-size: 18px; font-weight: 700; padding: 0 6px; margin: 0 0 4px; }
.business-form .field { display: block; flex: none; width: 100%; margin: 0 0 16px; }
.business-form .field .label { display: block; margin-bottom: 6px; }
.business-form .field .input,
.business-form .field .select,
.business-form .field textarea { width: 100%; box-sizing: border-box; }
.business-form .field .help { margin-top: 6px; }
.business-form .field .field-error { display: block; margin-top: 6px; }
.business-form .checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 12px 0; }
.business-form .city-chips { margin: 8px 0 12px; }
.business-form .business-form-current-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
body.theme-dark .business-form .business-form-section { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }

/* Stacked form fields on /login, /register, /invite and /my/password: label
   above the control, help and error under it. */
.auth-card .field,
.password-form .field { display: block; flex: none; width: 100%; margin-bottom: 16px; }
.auth-card .field .label,
.password-form .field .label { display: block; margin-bottom: 6px; }
.auth-card .field .input,
.password-form .field .input { width: 100%; box-sizing: border-box; }
.auth-card .field .help,
.auth-card .field .field-error,
.password-form .field .help,
.password-form .field .field-error { display: block; margin-top: 6px; }

/* Forms everywhere: a .field is a stacked block (label above, control full
   width, help/error under). Only the catalog filter bar and admin filter
   toolbars keep the old horizontal row (icon + control in one line). */
.field { display: block; flex: none; width: 100%; margin: 0 0 16px; }
.field > .label,
.field > label.label { display: block; margin-bottom: 6px; }
.field .input,
.field .select,
.field .textarea,
.field textarea { width: 100%; box-sizing: border-box; }
.field .help,
.field .field-error { display: block; margin-top: 6px; }
.filter-bar .field,
.admin-filter-bar .field { display: flex; align-items: center; flex: 1 1 180px; width: auto; margin: 0; }
.admin-filter-bar .field { display: block; flex: 1 1 180px; }
.admin-filter-bar .field .label { margin-bottom: 4px; }
/* Section headings inside admin cards should not be page-title sized. */
.admin-shell .card > h2.section-title,
.admin-shell .card > .section-title:not(h1) { font-size: 22px; margin: 0 0 16px; }
.admin-shell form[style*="flex-direction: column"] .field { margin-bottom: 0; }

/* Phones: the Instagram / WhatsApp icons leave the header pill (they did not
   always fit) and live inside the burger menu instead. */
.site-nav-social { display: none; }
@media (max-width: 767px) {
  .site-header .header-social { display: none; }
  .site-nav-social { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
  .site-nav-social a { display: inline-flex; align-items: center; gap: 6px; }
}

/* Phones: the catalog filter is a plain block (no sticky overlay that
   covers the screen on scroll) and its stacked fields keep their natural
   height (a flex-basis of 180px would become the height in column mode). */
@media (max-width: 767px) {
  .catalog-filter-sticky { position: static; }
  .catalog-filter-sticky.is-stuck.is-hidden:not(:focus-within) { transform: none; opacity: 1; pointer-events: auto; }
  .filter-bar .field { flex: 0 0 auto; }
}

/* Admin on narrow screens: grid/flex children never grow past the viewport
   because of a wide table inside — the table scrolls horizontally within
   its card instead (the overflow-x:auto wrappers already exist). */
.admin-main .grid > *,
.admin-main .card { min-width: 0; max-width: 100%; }
.admin-main { overflow-x: clip; }
.admin-table-scroll { overflow: auto; max-height: 420px; }
.admin-table-scroll .admin-table thead th { position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }