/* ============================================================
   Pueblo Farmers Market — site styles
   Ported verbatim from the static design (styles.css) and lightly
   adapted to play nicely with WordPress block markup.
   ============================================================ */

:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-tinted: #f4f8f0;
  --surface-muted: #edf3e7;
  --chip: #eef4e8;
  --border: #d3dccb;
  --ink: #355724;
  --ink-soft: #4f5f42;
  --ink-muted: #58684c;
  --accent: #4d6f34;
  --accent-deep: #2a451c;

  /* Primary brand color — pueblofarmersmarket.org Kadence palette5.
     Saturated lime used on the navbar, primary buttons, and brand surfaces.
     Body text + dark sections stay --ink so contrast remains comfortable. */
  --primary: #b5c136;
  --primary-hover: #9eaa2c;
  --primary-ink: #2a451c;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(40, 55, 30, 0.05), 0 2px 6px rgba(40, 55, 30, 0.04);
  --shadow-md: 0 10px 30px rgba(30, 45, 20, 0.12);
  --shadow-lg: 0 20px 60px rgba(30, 45, 20, 0.22);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --container-max: 72rem;
  --container-pad: clamp(1.1rem, 3vw, 2rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* WP wraps content in .wp-site-blocks; reset its layout padding so our sections own width. */
.wp-site-blocks { padding: 0 !important; }

/* WP's is-layout-flow rules add a 24px margin-block-start to every direct
   child after the first. That creates visible gaps both above the hero
   (after the header) and above the footer (after the contact section).
   Zero out top margins on every direct child of the page wrapper. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
.site-main > .entry-content > :first-child,
.site-main > :first-child { margin-block-start: 0; }

/* Strip the default editor max-width on the front for our full-bleed sections. */
.is-layout-constrained > * + * { margin-block-start: 0; }

img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
h3 { font-size: 1.2rem; }

p { margin: 0; color: var(--ink-muted); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Narrower container used by long-form sub-pages (Privacy, FAQ, etc.). */
.container--prose {
  max-width: 760px;
}
.container--prose h1 {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  margin: 0.4rem 0 1rem;
}
.container--prose h2 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin: 2rem 0 0.5rem;
}
.container--prose p,
.container--prose li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.container--prose a {
  color: var(--accent, #4d6f34);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.container--prose ul,
.container--prose ol { padding-left: 1.2rem; }

.page-callout {
  margin: 1.25rem 0;
  padding: 0.9rem 1.05rem;
  background: rgba(214, 158, 46, 0.08);
  border-left: 3px solid rgba(214, 158, 46, 0.55);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.92rem;
  line-height: 1.55;
}

.page-back {
  margin-top: 2.5rem;
  font-size: 0.9rem;
}

.faq-list {
  display: grid;
  gap: 0.55rem;
  margin: 0.5rem 0;
}
.faq-item {
  background: var(--chip);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink-muted, rgba(0, 0, 0, 0.5));
  transition: transform 180ms ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: 0.65rem; color: var(--ink); }

.resource-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: grid;
  gap: 0.4rem;
}
.resource-list li {
  background: var(--chip);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.95rem;
}

.market-quick-info {
  background: var(--surface-tinted, rgba(77, 111, 52, 0.06));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
}
.market-quick-info h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #4d6f34);
}
.market-quick-info-grid {
  display: grid;
  gap: 0.95rem;
}
@media (min-width: 640px) {
  .market-quick-info-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.market-quick-info h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}
.market-quick-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.2rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.faq-signoff {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.05rem;
  color: var(--ink);
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.eyebrow-on-dark { color: rgba(255, 255, 255, 0.7); }

#scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.site-header {
  background: var(--primary);
  border-bottom: 1px solid rgba(42, 69, 28, 0.18);
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: visible;
  color: var(--primary-ink);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(30, 45, 20, 0.22);
}

.header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.6rem;
  transition: padding 220ms ease, min-height 220ms ease;
  position: relative;
  flex-wrap: wrap;
}

@media (min-width: 860px) {
  .header-inner {
    gap: 1.5rem;
    padding-block: 0.5rem;
    min-height: 72px;
    flex-wrap: nowrap;
  }
  .site-header.is-scrolled .header-inner {
    padding-block: 0.35rem;
    min-height: 56px;
  }
}

/* Social icons */
.social-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.social-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--primary-ink);
  background: transparent;
  border: 1px solid rgba(42, 69, 28, 0.35);
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.social-nav a:hover,
.social-nav a:focus-visible {
  background: rgba(42, 69, 28, 0.08);
  border-color: var(--primary-ink);
  outline: none;
}

.social-nav svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (min-width: 860px) {
  .primary-nav {
    order: 1;
    margin-left: auto;
  }
  .social-nav {
    order: 2;
    margin-left: 0.6rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(42, 69, 28, 0.18);
  }
  .account-menu {
    order: 3;
    margin-left: 0.5rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(42, 69, 28, 0.18);
  }
}

/* Account menu (header) */
.account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.account-menu-signin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--primary-ink, #2a451c);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.account-menu-signin:hover { opacity: 0.88; color: #fff; }
.account-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  background: transparent;
  border: 1px solid rgba(42, 69, 28, 0.35);
  border-radius: 999px;
  cursor: pointer;
  color: var(--primary-ink);
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 150ms ease, border-color 150ms ease;
}
.account-menu-toggle:hover,
.account-menu-toggle:focus-visible,
.account-menu.is-open .account-menu-toggle {
  background: rgba(42, 69, 28, 0.08);
  border-color: var(--primary-ink);
  outline: none;
}
.account-menu-avatar { display: inline-flex; }
.account-menu-avatar img,
.account-menu-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.account-menu-name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-caret {
  transition: transform 180ms ease;
  opacity: 0.7;
}
.account-menu.is-open .account-menu-caret { transform: rotate(180deg); }

.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 18px 36px rgba(30, 45, 20, 0.18), 0 2px 6px rgba(30, 45, 20, 0.08);
  z-index: 50;
  overflow: hidden;
  font-size: 0.9rem;
}
.account-menu-header {
  padding: 0.75rem 1rem 0.55rem;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--surface-tinted, rgba(77, 111, 52, 0.05));
}
.account-menu-name-full {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.2;
}
.account-menu-role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted, rgba(0, 0, 0, 0.55));
  margin-top: 0.2rem;
}
.account-menu-list {
  list-style: none;
  padding: 0.35rem 0;
  margin: 0;
}
.account-menu-list a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 120ms ease;
}
.account-menu-list a:hover,
.account-menu-list a:focus-visible {
  background: rgba(42, 69, 28, 0.06);
  color: var(--ink);
  outline: none;
}
.account-menu-footer {
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  padding: 0.45rem 0;
}
.account-menu-logout {
  display: block;
  padding: 0.5rem 1rem;
  color: #b91c1c;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease;
}
.account-menu-logout:hover {
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
}

/* Mobile: shrink to icon-only avatar/sign-in button to save space */
@media (max-width: 860px) {
  .account-menu-name { display: none; }
  .account-menu-signin span { display: none; }
  .account-menu-signin { padding: 0.45rem 0.55rem; }
  .account-menu-dropdown {
    right: -0.5rem;
    min-width: 200px;
  }
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  background: transparent;
  border: 1px solid rgba(42, 69, 28, 0.35);
  border-radius: 10px;
  cursor: pointer;
  color: var(--primary-ink);
  transition: background 150ms ease, border-color 150ms ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(42, 69, 28, 0.08);
  border-color: var(--primary-ink);
  outline: none;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--primary-ink);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 860px) { .nav-toggle { display: none; } }

/* The .site-header prefix here is intentional — it raises specificity above
   WordPress' .is-layout-flex > :is(*, div) { margin: 0 } reset which would
   otherwise wipe the negative margin-bottom we use to overlap the logo. */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0.6rem;
  box-shadow: 0 12px 28px rgba(30, 45, 20, 0.22), 0 2px 6px rgba(30, 45, 20, 0.08);
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  transition: width 220ms ease, height 220ms ease, margin-bottom 220ms ease, padding 220ms ease;
}

@media (min-width: 560px) {
  .site-header .brand { width: 96px; height: 96px; padding: 0.7rem; }
}

@media (min-width: 860px) {
  .site-header .brand {
    width: 180px;
    height: 180px;
    padding: 0.85rem;
    margin-bottom: -72px;
  }
  .site-header.is-scrolled .brand {
    width: 88px;
    height: 88px;
    padding: 0.45rem;
    margin-bottom: -22px;
  }
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

.primary-nav {
  display: flex;
  gap: 0.25rem 1.35rem;
  flex-basis: 100%;
  flex-direction: column;
  padding: 0.5rem 0 0.25rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 260ms ease, opacity 200ms ease, padding 220ms ease;
}

.site-header.is-menu-open .primary-nav {
  max-height: 360px;
  opacity: 1;
  padding: 0.75rem 0 0.5rem;
}

.primary-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  color: #000;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.primary-nav a:last-child { border-bottom: 0; }

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: #000;
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

@media (min-width: 860px) {
  .primary-nav {
    flex-basis: auto;
    flex-direction: row;
    padding: 0;
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
  .primary-nav a {
    font-size: 0.95rem;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
  }
  .primary-nav a:hover,
  .primary-nav a:focus-visible {
    background: transparent;
    border-bottom-color: var(--primary-ink);
  }
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #2d3a24;
  border-bottom: 1px solid var(--border);
  margin: 0;
}

.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1400ms ease, transform 8000ms ease-out;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(25, 40, 20, 0.15) 0%, rgba(25, 40, 20, 0.55) 60%, rgba(25, 40, 20, 0.70) 100%),
    linear-gradient(90deg, rgba(25, 40, 20, 0.55) 0%, rgba(25, 40, 20, 0.15) 55%, rgba(25, 40, 20, 0.35) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: stretch;
  }
}

.hero-media { display: flex; align-items: stretch; }

.hero-card {
  width: 100%;
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-lg);
}

.hero-card h1 { margin-top: 0.5rem; hyphens: manual; }
.hero-card p {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.65;
}
.hero-card .button-row { margin-top: 1.25rem; }

.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ─── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.card-lg { padding: clamp(1.35rem, 2.4vw, 1.75rem); }
.card-tinted { background: var(--surface-tinted); }

.visit-card { background: var(--surface-tinted); transition: opacity 200ms ease; }
.visit-card.is-swapping { animation: pfm-card-fade 260ms ease both; }
@keyframes pfm-card-fade {
  0%   { opacity: 0.55; transform: translateY(2px); }
  100% { opacity: 1;    transform: translateY(0);   }
}

.visit-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.pfm-event-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.pfm-event-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font: 600 1.15rem/1 var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.pfm-event-nav-btn:hover,
.pfm-event-nav-btn:focus-visible {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  outline: none;
}
.pfm-event-nav-btn:active { transform: translateY(1px); }
.pfm-event-nav-btn span { position: relative; top: -1px; }

.pfm-event-nav-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  min-width: 2.6em;
  text-align: center;
}

.visit-date {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}

.visit-location {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.visit-address {
  margin-top: 0.35rem;
  font-style: normal;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.55;
}

.visit-hours {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.55;
}

.button-row {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.05rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  line-height: 1;
  white-space: nowrap;
}

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

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: #b7c7a7;
}
.btn-secondary:hover {
  background: var(--surface-muted);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-inline: 0.25rem;
}
.btn-ghost:hover { color: var(--accent-deep); }
.btn-ghost::after {
  content: "→";
  margin-left: 0.4rem;
  transition: transform 150ms ease;
}
.btn-ghost:hover::after { transform: translateX(3px); }

.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 3px solid rgba(77, 111, 52, 0.35);
  outline-offset: 2px;
}

/* ─── Highlights ─────────────────────────────────────────────────────── */
.highlights {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.highlights li {
  background: var(--chip);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

.highlights-note {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-muted, rgba(0, 0, 0, 0.6));
  font-style: italic;
}

/* ─── Sections ───────────────────────────────────────────────────────── */
.section { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.section-plain { background: var(--surface); }
.section-muted { background: var(--surface-muted); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 820px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

.section-head h2 { margin-top: 0.3rem; }

.section-head--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.section-head--stacked .section-intro { margin-top: 0.5rem; }

.section-intro {
  max-width: 42rem;
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

@media (min-width: 820px) {
  .section-head--stacked {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Grids ──────────────────────────────────────────────────────────── */
.grid-4 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-2x2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .grid-2x2 { grid-template-columns: repeat(2, 1fr); } }
.grid-2x2 > .card { padding: 1.5rem; }
.grid-2x2 .info-body { font-size: 0.98rem; line-height: 1.6; }

.visit-map {
  margin-top: 1.25rem;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--chip);
}

.visit-map iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 420px);
  border: 0;
}

.visit-map-link {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
}

.visit-map-link:hover {
  background: var(--surface-muted);
}

.grid-3 {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
  margin-top: 1.1rem;
  align-items: stretch;
}
@media (min-width: 620px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-2 {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
  margin-top: 0.85rem;
}
@media (min-width: 520px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* Info card */
.info-title { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.info-body { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.55; }

/* Event card */
.event-card h3 { margin-top: 0.25rem; font-family: var(--font-display); color: var(--ink); }
.event-card p { margin-top: 0.65rem; font-size: 0.9rem; color: var(--ink-muted); }

/* Split grids — fixed card heights at 2-column breakpoints keeps both
   sides visually uniform. Mobile (stacked) sizes to content. */
.wp-block-group.split-grid,
.split-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
/* WP's :where(.is-layout-flow) > * adds margin-block-start: 24px to every
   child except the first. In any of our custom grids that pushes the
   non-first items into misalignment. Zero margins on direct children of
   every grid utility we use. */
.wp-block-group.split-grid > *,
.split-grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-2x2 > *,
.partner-grid > *,
.button-row > * {
  /* !important is needed because some block-library paragraph rule keeps
     re-introducing a margin-top on non-first <p> grid items in flex/grid
     parents — which threw off pill alignment in the For Vendors card. */
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
}

@media (min-width: 960px) {
  .wp-block-group.split-grid,
  .wp-block-group.split-grid--wide-left,
  .split-grid,
  .split-grid--wide-left {
    grid-template-columns: 1fr 1fr;
  }
  /* Grid stretch auto-equalises card heights to the taller card's natural
     height. Cards are flex-column so .photo-block (Why people come) can
     flex-grow to fill the extra space when its sibling is taller. */
  .wp-block-group.split-grid > .card,
  .split-grid > .card {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  /* Variable-content elements stretch to fill the card's remaining height. */
  .split-grid > .card .photo-block {
    flex: 1 1 auto;
    min-height: 180px;
    aspect-ratio: auto;
    margin-top: 1rem;
  }
  .split-grid > .card .partner-grid {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
  }
  .split-grid > .card .partner { aspect-ratio: auto; }
  /* Anchor a card's button row at the bottom edge so short content
     (For Vendors) feels balanced rather than top-loaded with white space. */
  .split-grid > .card > .button-row { margin-top: auto; }
}

/* Card-level headings should be a step smaller than section headings */
.card-lg h2 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); margin-top: 0.45rem; }
.card-lg p { margin-top: 0.9rem; color: var(--ink-muted); font-size: 0.98rem; line-height: 1.65; }
.card-lg p + p { margin-top: 0.85rem; }
.about-second em { font-style: italic; color: var(--ink); font-weight: 500; }

.pill {
  background: var(--chip);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  /* Fixed height so 1-line pills match 2-line pills exactly. Tall enough
     to comfortably fit 2 wrapped lines at the current font size. */
  display: flex;
  align-items: center;
  height: 5rem;
  box-sizing: border-box;
}
.pill-lg { padding: 0.95rem 1.05rem; }

/* Vendor onboarding steps */
.vendor-steps {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}
.vendor-steps .eyebrow { margin-bottom: 0.6rem; }
.vendor-steps-list {
  list-style: none;
  counter-reset: vendor-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.vendor-steps-list li {
  counter-increment: vendor-step;
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  background: var(--chip);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}
.vendor-steps-list li::before {
  content: counter(vendor-step);
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--primary, #4d6f34);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vendor-callout {
  display: block;
  margin-top: 1.1rem;
  padding: 0.95rem 1.05rem;
  background: rgba(214, 158, 46, 0.10);
  border-left: 3px solid rgba(214, 158, 46, 0.65);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.vendor-callout strong { color: var(--ink); }

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  aspect-ratio: 3 / 2;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.partner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.partner img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-caption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Partner placeholders (used inside the carousel until logos drop in) */
.partner--placeholder {
  background: rgba(0, 0, 0, 0.025);
  border-style: dashed;
  text-align: center;
}
.partner--placeholder .partner-caption {
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.3;
}
.partner-pending {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted, rgba(0, 0, 0, 0.5));
  font-weight: 500;
}

/* Partner carousels (one per group: community / sponsors / proud member) */
.partners-card .partners-carousel + .partners-carousel { margin-top: 1.4rem; }
.partners-carousel { margin-top: 1rem; }
.partners-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.partners-carousel-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.partners-carousel-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-muted, rgba(0, 0, 0, 0.55));
}
.partners-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.18));
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.partners-nav-btn:hover:not(:disabled),
.partners-nav-btn:focus-visible:not(:disabled) {
  background: rgba(42, 69, 28, 0.08);
  border-color: var(--ink);
  outline: none;
}
.partners-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.partners-nav-count { font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: center; }

.partners-carousel-viewport { overflow: hidden; }
.partners-carousel-track {
  display: flex;
  transition: transform 320ms ease;
}
.partners-carousel-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.partners-carousel-page .partner { aspect-ratio: 4 / 3; padding: 0.85rem; }

.photo-block {
  margin-top: 1rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
}

/* ─── Contact ────────────────────────────────────────────────────────── */
.contact {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}

.contact h2 { color: #fff; margin-top: 0.45rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.contact p {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.9rem;
  max-width: 34rem;
  line-height: 1.65;
}

.contact-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 0.9fr; } }

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-self: start;
}

.contact-cards > * { margin-block-start: 0; margin-block-end: 0; }

.contact-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: #fff;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.contact-card:hover,
.contact-card:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
  transform: translateY(-1px);
}
.contact-card-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
}
.contact-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.contact-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.contact-card-value {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #fff;
  word-break: break-word;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--accent-deep);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(2rem, 4vw, 3rem);
  font-size: 0.9rem;
}

.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
}

.footer-col-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.85rem;
}

.footer-brand {
  font-family: var(--font-display, inherit);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 0.35rem;
}
.footer-tagline {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.footer-tagline em { font-style: italic; }
.footer-location {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.footer-social {
  display: inline-flex;
  gap: 0.5rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 150ms ease, border-color 150ms ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  outline: none;
}
.footer-social svg { fill: currentColor; }

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.92rem;
}
.footer-list a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
  outline: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}
.footer-bottom a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.footer-bottom a:hover { border-bottom-color: #fff; }

.footer-sep { opacity: 0.55; }

/* ─── Vendors browser block ──────────────────────────────────────────── */
.pfm-vendors-browser { margin-top: 2rem; }
.pfm-vendors-head { margin-bottom: 1.25rem; max-width: 42rem; }
.pfm-vendors-head h2 { margin-top: 0.3rem; }
.pfm-vendors-intro { margin-top: 0.5rem; color: var(--ink-muted); }

.pfm-vendors-carousel {
  position: relative;
  /* Reserve space on each side for the prev/next arrows so they never sit
     on top of the cards. The cards stay inside this padded area. */
  padding-inline: 60px;
}
@media (max-width: 619px) {
  .pfm-vendors-carousel { padding-inline: 48px; }
}
.pfm-vendors-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.4rem;
}
.pfm-vendors-track::-webkit-scrollbar { display: none; }
@media (min-width: 620px) {
  .pfm-vendors-track { grid-auto-columns: calc((100% - 1rem) / 2); }
}
@media (min-width: 960px) {
  .pfm-vendors-track {
    grid-auto-columns: calc((100% - (var(--pfm-vendors-cols, 3) - 1) * 1rem) / var(--pfm-vendors-cols, 3));
  }
}
.pfm-vendors-track > .pfm-vendor-card { scroll-snap-align: start; }

/* Arrows: positioned over the carousel edges, hidden when nothing to scroll. */
.pfm-vendors-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font: 600 1.4rem/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, transform 120ms ease, opacity 150ms ease, color 150ms ease;
}
.pfm-vendors-arrow:hover,
.pfm-vendors-arrow:focus-visible {
  background: var(--ink);
  color: #fff;
  outline: none;
}
.pfm-vendors-arrow:active { transform: translateY(-50%) scale(0.96); }
.pfm-vendors-arrow[disabled] {
  /* Stay readable at the carousel edges (visible at start/end), just not interactive. */
  opacity: 0.6;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: default;
  pointer-events: none;
}
.pfm-vendors-arrow span { position: relative; top: -2px; }
.pfm-vendors-arrow-prev { left: 6px; }
.pfm-vendors-arrow-next { right: 6px; }
@media (max-width: 619px) {
  .pfm-vendors-arrow { width: 38px; height: 38px; font-size: 1.2rem; }
}

.pfm-vendor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.pfm-vendor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.pfm-vendor-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  border: 1px solid var(--border);
}
.pfm-vendor-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pfm-vendor-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0;
}
.pfm-vendor-bio {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0;
}

.pfm-vendor-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}
.pfm-vendor-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--chip);
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
}
.pfm-vendor-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfm-vendor-thumb-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.pfm-vendor-website,
.pfm-vendor-link {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.4rem;
}
.pfm-vendor-website:hover,
.pfm-vendor-link:hover { color: var(--accent-deep); }

/* ─── Vendor profile page ────────────────────────────────────────────── */
.pfm-vendor-hero { padding-block: clamp(2rem, 4vw, 3.25rem); }
.pfm-vendor-hero-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) {
  .pfm-vendor-hero-grid { grid-template-columns: 180px 1fr; }
}
.pfm-vendor-hero-avatar {
  width: 180px; height: 180px; border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.pfm-vendor-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pfm-vendor-back {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 0.4rem;
}
.pfm-vendor-back:hover { color: var(--ink); }
.pfm-vendor-hero-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--ink);
  margin: 0;
}
.pfm-vendor-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.pfm-vendor-cat {
  background: var(--chip);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pfm-vendor-hero-tagline {
  margin-top: 0.85rem;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--ink-muted);
  max-width: 44rem;
  line-height: 1.55;
}

.pfm-vendor-cols {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .pfm-vendor-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.pfm-vendor-section { margin-top: 2rem; }
.pfm-vendor-section:first-child { margin-top: 0; }
.pfm-vendor-section h2 { margin-top: 0.4rem; }
.pfm-vendor-section p { margin-top: 0.85rem; line-height: 1.7; color: var(--ink-muted); }
.pfm-vendor-products { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pfm-vendor-products { grid-template-columns: repeat(2, 1fr); } }
.pfm-vendor-products li {
  background: var(--chip);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  color: var(--ink);
}

.pfm-vendor-photo-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-top: 1rem;
}
.pfm-vendor-photo {
  border: 0;
  padding: 0;
  background: var(--chip);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}
.pfm-vendor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pfm-vendor-aside { margin-top: 0; }
.pfm-vendor-contact-card {
  position: sticky;
  top: 96px;
}
.pfm-vendor-contact-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
}
.pfm-vendor-contact-row:first-of-type { border-top: 0; padding-top: 0.5rem; }
.pfm-vendor-contact-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.pfm-vendor-contact-row a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.pfm-vendor-contact-row a:hover { border-bottom-color: var(--accent); }

.pfm-vendors-empty { color: var(--ink-muted); font-style: italic; }

.pfm-vendors-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 15, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}
.pfm-vendors-lightbox[hidden] { display: none; }
.pfm-vendors-lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.pfm-lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
body.pfm-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-slide { transform: none !important; }
}

/* ─── WP block-editor overrides for editor preview ───────────────────── */
.editor-styles-wrapper.pueblofm-theme .hero { min-height: 360px; }
.editor-styles-wrapper .pfm-hero-editor.hero { min-height: 320px; }